HTML再出发

注意事项

VScode相关

1. vscode必须打开一个文件夹才能使用liveServer，只打开一个文件无法使用liveServer功能。
2. 网页编写不标准，缺少head，body等基本结构，liveServer失去自动刷新功能，只能手动刷新。
3. 配置VScode的内置插件emmet，可以对生成结构的属性进行定制。比如lang="en"改为lang=“zh-CN”。
   
4. 在存放代码的文件夹中，存放一个favicon.icon图片，可配置网站图标（要放在VScode打开的文件夹第一级目录下才能识别到图标）。
5. 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标签中不能写块级元素

文本标签

1. 常用文本标签：用于包裹词汇、短语等，通常写在排版标签里面，排版标签更宏观（大段文字），文本标签更微观（词汇、短语），文本标签通常是行内标签。

标签名	标签语义
em	要着重阅读的内容（双标签）
strong	十分重要的内容，语气比em要强（双标签）
span	没有语义，用于包裹短语的通用容器（双标签）

2. 不常用的文本标签
   
   
   blockquote和address是块级元素，其他都是行内元素

img标签

img标签（行内元素）
尽量不同时修改图片的宽和高，可能会导致比例失调。
alt属性的作用：① 搜索引擎是通过alt属性，得知图片的内容（最主要）；② 当图片无法展示时，有些浏览器会展示alt的值； ③ 盲人阅读器会朗读alt的值。

图片格式

① jpg格式

② png格式

③ bmp格式

④ gif格式

⑤ webp格式

⑥ base64格式

超链接