2023年HTML史上最全技术汇总（一）

话不多说，直接开始正题，前端人冲了！

Web标准中有三部分构成：1.HTML(结构）2.CSS（表现）3.JavaScript（行为）

HTML（Hyper Text Markup Language）中文译为“超文本标记语言”，其主要用于网页开发，通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述。

1.HTML的注释

在Vscode环境下，通过ctrl+/指令即可，注释内容不会被浏览器执行。

2.排版标签

2.1 标题标签

代码显示为<h1>-<h6>，在新闻和文章的页面中，都离不开标题，用来突出显示文章主题，1~6级标题，重要程度依次递减，特点是文字都有加粗且变大，并且从h1 → h6文字逐渐减小，独占一行。

需要注意的点：h1标签对于网页尤为重要，开发中有特定的使用场景，如新闻的标题、网页的logo部分等。

2.2 段落标签

代码显示为<p>，主要应用场景是在新闻和文章的页面中，用于分段显示。特点是段落之间存在间隙且独占一行。

2.3 换行标签

代码显示为<br>，主要应用场景是让文字强制换行显示，特点为单标签+让文字强制换行。

2.4 水平线标签

代码显示为<hr>，主要应用场景是分割不同主题内容的水平线，特点是单标签，并且在页面中会显示一条水平线。

3.文本格式化标签

主要应用场景为“需要让文字加粗、下划线、倾斜、删除线等效果”。实际项目开发中选择标签的原则：标签语义化。

即：根据语义选择对应正确的标签，比如需要写标题，就使用h系列标签。比如需要写段落，就使用p标签 ……

好处： 对人而言好理解，好记忆。 对机器而言有利于机器解析，对搜索引擎（SEO）有帮助

个人推荐： strong、ins、em、del，表示的强调语义更强烈！

4.媒体标签

4.1图片标签

主要应用场景为“在网页中显示图片”，特点是单标签 img需要展示对应的效果，需要借助标签的属性进行设置！

标签的完整结构图： 

 属性注意点：

1.标签的属性写在开始标签内部

2.标签上可以同时存在多个属性

3.属性之间以空格隔开

4.标签名与属性之间必须以空格隔开

5.属性之间没有顺序之分

图片标签的src属性：

属性值为目标图片的路径，需要注意，当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可（包括后缀名）路径的情况有很多，稍后会详细介绍。

 图片标签的alt属性：

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

 图片标签的title属性：

属性值为提示文本，当鼠标悬停时，才显示的文本。需要注意，title属性不仅仅可以用于图片标签，还可以用于其他标签。

 图片标签的width和height属性：

属性值为宽度和高度（数字），需要注意的点， 如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）；如果同时设置了width和height两个，若设置不当此时图片可能会变形。

 

总结：

4.2路径

页面需要加载图片，需要先找到对应的图片，类似于生活中两个人，我要去找你，需要通过一定的路径才能找到！

同理页面需要找到图片，也是需要通过路径才能找到，路径可分为绝对路径和相对路径。

 4.21 绝对路径

绝对路径指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径。

例如盘符开头：D:\day01\images\1.jpg

完整的网络地址：https://www.itcast.cn/2018czgw/images/logo.gif

4.22 相对路径

假设当前文件是当前的html网页，假设目标文件是要找到的图片。

那么相对路径就是从当前文件开始出发找目标文件的过程，。

相对路径分类：

01.同级目录：./

02.下级目录：文件夹/

03.上级目录：../

4.23 相对路径的同级目录

指的是当前文件和目标文件在同一目录中，类似于我（当前文件）和你（目标文件）都在大厅（一个文件夹中），生活中两个人独处一室，我想找你，直接喊名字即可！

代码步骤：直接写目标文件的名字即可

方法一：<img src="目标图片.gif">

方法二：<img src="./目标图片.gif">

VS Code快捷操作：直接敲./后，会自动提示同级目录中有哪些文件，直接选择即可！

 4.24 相对路径的下级目录

指的是目标文件在下级目录中，类似于我在大厅，你累了去卧室休息了，我现在要找到你！ 先知道你去了哪一个房间 → 房间名：卧室

进入这个房间 → 进入 此时又独处一室 → 直接喊你名字

代码步骤：

先知道在哪个文件夹里面 → 文件夹名字

进入这个文件夹 → /

此时看到目标文件直接喊她 → 直接写目标文件名字

VS Code快捷操作：直接敲./后，会自动提示当前目录下有哪些文件夹，直接一层层选择即可！

4.25 相对路径的上级目录

指的是目标文件在上级目录中。

代码步骤：

1.先出当前文件夹，到上一级目录 → ../

2.此时看到目标文件直接喊她 → 直接写目标文件

VS Code快捷操作：直接敲../后，会自动提示上级目录下有文件，直接选择即可！

4.3音频标签

主要场景是在页面中插入音频，代码显示如下：

 常见属性：

 需要注意的点：音频标签目前支持三种格式，分别为MP3、Wav、Ogg

音频标签常见的四种属性：

src：音频路径

controls：音频控件

autoplay：自动播放

loop：循环播放

4.4视频标签

主要场景是在页面中插入视频，代码显示如下：

 常见属性：

 需要注意的点：视频标签目前支持三种格式，分别为MP4 、WebM 、Ogg

5.链接标签

主要场景为点击之后，从一个页面跳转到另一个页面。别称分别为a标签、超链接、锚链接。代码显示如下：

 特点是双标签，内部可以包裹内容，如果需要a标签点击之后去指定页面，需要设置a标签的href属性。

5.1 链接标签的href属性

属性名为href，点击之后跳转去哪一个网页（目标网页的路径）

外部链接： 

内部链接：

 5.2 链接标签的显示特点

a标签默认文字有下划线 ；a标签从未点击过，默认文字显示蓝色；a标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色）。

5.3 链接标签的target属性

属性名为target，属性值为目标网页的打开形式，如图所示：

 

5.4 空链接 

代码如下：

功能：

1.点击之后回到网页顶部

2.开发中不确定该链接最终跳转位置，用空链接占个位置