快捷键(vscode)
1、 ！加回车会出现html骨架
2、ctrl+/该行变为注释
3、alt+b浏览当前html文件
4、ctrl+s保存，且只有保存后显示才会变，或在已打开页面刷新
5、复制一行只需要把光标放到该行直接ctrl+c
6、ctrl+d选中与当前选中相同的下一项，多按一次加一项
7、不想拖横向滚动条alt+z自动换行或者在查看里找
8、tab向后缩进，shift+tab向前缩进
9、alt+shift+ ⬇，复制粘贴该行

一、标签

排版标签：

1、标题标签

   <!-- 直接写h1按下回车或TAB就出来了，不用打括号，且自动识别单双标签 --><h1>这是1级标题</h1><h2>这是2级标题</h2><h3>这是3级标题</h3><h4>这是4级标题</h4><h5>这是5级标题</h5><h6>这是6级标题</h6>

1~6级，重要程度依次递减

特点：文字都加粗，文字都变大，且从h1->h6递减，独占一行。

2、段落标签

场景：在新闻和文章的页面中，用于分段显示。

   <!-- alt+z自动换行防止产生横向滚动条 --><p>明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。</p><p>转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。</p>

特点：段落间存在间隙，独占一行。

3、换行标签

场景：让文字强行换行。

<br>

想要用快捷需要让br两边有空格。

特点：单标签，让文字强行换行。

4、水平标签（水平分割线）

场景：分割不同主题内容的水平线。

<hr>

特点：单标签，在页面中显示一条水平线。

文本格式化标签：

1、介绍：

场景：需要让文字 加粗、 下划线 、倾斜、删除线等效果。
代码（两组）：
b 加粗，u下划线，I 倾斜，s删除线
strong加粗，ins下划线，em倾斜，del删除线
两组区别：如果要作强调语义用英文单词那组。样子没区别，凭自己心里想法划分。

    <b>加粗</b> <strong>加粗</strong><u>下划线</u><ins>下划线</ins><i>倾斜</i><em>倾斜</em><s>删除线</s><del>删除线</del>

2、标签语义化

实际项目开发原则：标签语义化（该写啥时用好对应标签排版）

好处：对人易理解，对机器利于解析和SEO（搜索引擎）

媒体标签

1、图片标签

场景：显示图片
src和alt叫属性名，“”内叫属性值

src属性

属性名：src
属性值：目标图片的路径
注意点：图片与文件在同一文件夹，直接写目标名字（带后缀）

  <img src="./meaqua.jpg" alt="">

./代表当前文件夹

属性注意点：1、标签属性写在开始标签内部
2、标签可以同时存在多个属性
3、属性之间以空格隔开
4、标签名与·属性之间必须以空格隔开
5、属性没有顺序之分

alt属性

属性名：alt
属性值：替换文本
当图片加载失败时，才显示alt的文本。
当图片加载成功时，不会显示alt的文本。

 <img src="./错的路径图片会加载失败" alt="我是替换文本">

title属性

属性名：title
属性值：提示文本
当鼠标悬停时才显示的文本
注意：title标签不止可以用于图片标签，还可以用于其他标签。
特点：单标签，img标签要展示效果需借助标签属性进行设置（src和alt）

width height属性

属性名：width、height
属性值：高度和宽度（数字）

  <img src="./meaqua.jpg" alt="" width="200">

注意点：如果只设置了其中一个，照片会等比例缩放不会变形
如果两个都设置了则可能会变形

2、路径

场景：页面需要加载图片，需要先找到对应的图片

分为绝对路径和相对路径

绝对路径同easyx
相对路径：从当前文件夹出发找目标文件的过程

分类：同级目录/上级目录/下级目录

下级：文件夹/目标名.jpg
上级：../ 返回几级就是几个点加./
同级：./

3、音频标签

常见属性： src 音频路径
controls 显示播放的控件
autoplay 自动播放（部分浏览器不支持）
loop（循环播放）

  <audio src="./xxx.mp3" controls autoplay loop></audio>

音频目前只支持三种文件格式：MP3、wav、ogg

4、视频标签

常见属性同音频。
其中autoplay谷歌浏览器中需配合muted实现静音播放（也就是autoplaymuted）

链接标签：

1、介绍

场景：点击之后，切换页面
称呼：a标签、超链接、锚链接
href：跳转的地址
target：目标网页打开形式
_self 默认值，在当前窗口中跳转（覆盖原网页）
_blank 在新窗口中跳转（保留原网页）

<a href="目标网址">提示信息，显示的是这个</a>
<a href="目标文件">提示信息，显示的是这个</a><!-- 当开发网站初期，还不知道跳转地址的时候，href的值书写为#（空链接） -->

地址要完整地址从http到.com

找文件要用路径

特点：双标签，内部可以包裹内容

如果需要a标签点击之后去指定页面，需要设置a标签的href属性