HTML再出发
- 注意事项
- VScode相关
- 排版标签
- 语义化
- 块级元素和行内元素
- 文本标签
- img标签
- 图片格式
- 超链接
注意事项
VScode相关
- vscode必须打开一个文件夹才能使用liveServer，只打开一个文件无法使用liveServer功能。
- 网页编写不标准，缺少head，body等基本结构，liveServer失去自动刷新功能，只能手动刷新。
- 配置VScode的内置插件emmet，可以对生成结构的属性进行定制。比如lang="en"改为lang=“zh-CN”。
- 在存放代码的文件夹中，存放一个favicon.icon图片，可配置网站图标（要放在VScode打开的文件夹第一级目录下才能识别到图标）。
- VScode快捷键：
① 注释不能嵌套，注释快捷键为ctrl+/；
② 删除单行或多行使用快捷键ctrl+shift+k；
③ 很长一行回车到下一行ctrl+enter；
④ 复制一行到下一行 shift+alt+向下箭头（向上箭头）
排版标签
排版标签 h1-h6（标题），p（段落），div（没有任何含义，用于整体布局），p标签内不能嵌套h1-h6，div以及它本身。
语义化
语义化：标签默认的效果不重要，语义（含义）最重要。
语义化标签概念：用特定的标签去表达特定的含义。
语义化的作用和优点：① 代码可读性强；② 有利于SEO（搜索引擎优化）；③ 方便设备解析（屏幕阅读器）
块级元素和行内元素
块级元素（独占一行）和行内元素（不独占一行）
块级元素：h1-h6，div，marquee，p
行内元素：input，span，img
普通规则：块级元素内能写行内元素和块级元素（几乎什么都能写）；行内元素中能写行内元素，但不能写块级元素
特殊规则：h1-h6不能相互嵌套，p标签中不能写块级元素
文本标签
- 常用文本标签：用于包裹词汇、短语等，通常写在排版标签里面，排版标签更宏观（大段文字），文本标签更微观（词汇、短语），文本标签通常是行内标签。
| 标签名 | 标签语义 |
|---|---|
| em | 要着重阅读的内容（双标签） |
| strong | 十分重要的内容，语气比em要强（双标签） |
| span | 没有语义，用于包裹短语的通用容器（双标签） |
- 不常用的文本标签
blockquote和address是块级元素，其他都是行内元素
img标签
img标签（行内元素）
尽量不同时修改图片的宽和高，可能会导致比例失调。
alt属性的作用：① 搜索引擎是通过alt属性，得知图片的内容（最主要）；② 当图片无法展示时，有些浏览器会展示alt的值； ③ 盲人阅读器会朗读alt的值。
图片格式
① jpg格式
② png格式
③ bmp格式
④ gif格式
⑤ webp格式
⑥ base64格式
