欢迎来到本篇博客，我将带你深入了解 HTML（超文本标记语言）。作为前端开发的基础，HTML是构建网页的重要工具。在这里，我们将涵盖 HTML 的全部内容，包括常用语句和标签。

HTML，全称HyperText Markup Language，是一种用于创建网页结构的标记语言。它由一系列的标签组成，标签用于标记网页的不同部分和内容，以便浏览器正确解析和显示网页。

在网站设计中，纯粹的HTML格式网页通常称为“静态网页”，早期的网站一般都是由静态网页组成的。静态网页的特点是这个网页不论何时何地被浏览，都将显示相同的形式和内容，且仅能供浏览，无法与网站进行互动。

静态页面使用HTML编写，通常扩展名一般为.htm、.html、.shtml、.xml等。静态网页只能单纯地在网页中展示文字与图片，听起来似乎功能简单，但它是所有网页的基础要素，其重要性自然也不言而喻。

在静态网页中，整个网页的主要结构与网页的显示控制都必须利用HTML实现。在HTML格式的网页上，可以出现各种动态的效果，如.GIF格式的动画、FLASH、滚动字母等。这些“动态效果”只是视觉上的，它们与动态网页是不同的概念。

HTML 文档的基本结构如下：

HTML用于描述功能的符号称为“标记”，如“HTML”、“BODY”、“TABLE”等。标记在使用时必须用尖括号“”括起来，而且是成对出现，无斜杠的标记表示该标记的作用开始，有斜杠的标记表示该标记的作用结束。

HTML标记由左尖括号（）组成，浏览器会对尖括号里面的标记进行解释。如在HTML代码中出现< p >< /p >标记对时，浏览器在解释该标记对的过程中，会把它们看成段落并以段落的样式显示在网页中，同理，< table >< /table >标记对被浏览器看做表格来解析。在标记中，可分成单标记和双标记，而双标记即刚刚提到的标记对。

HTML 提供了一系列文本标记，用于组织和呈现文本内容。以下是一些常用的文本标记：

标题：< h1 > 到 < h6 >，用于定义标题，< h1 > 为最高级标题，< h6 > 最低级。 段落：< p >，用于定义段落。 强调：< em >，用于强调文本，通常以斜体显示。 加粗：< strong >，用于强调重要性。 斜体：< i >，用于斜体文本。 下划线：< u >，用于下划线文本。 删除线：< del >，用于删除线文本。

del标记和s标记的区别

< del > 标记和 < s > 标记都是用于表示删除线，但它们在语义和用途上有一些区别。

< del > 标记： < del > 是 HTML5 中引入的标签，表示被删除的文本或内容。它的主要目的是用于在文档中显示已被删除或不再有效的信息。通常在版本更新或编辑过程中使用，用于显示被移除的文本内容。

示例：

输出： 请不要忘记带 雨伞 防晒霜。 注：大多数浏览器会对 < del > 标记中的内容添加删除线样式。

< s > 标记： < s > 标记是 HTML4 中引入的标签，也用于表示删除线，但它并没有 < del > 标记的语义含义。在 HTML5 中，< s > 标记被重新定义为表示不再准确或不推荐使用的内容，但它并不意味着内容已被删除。因此，在 HTML5 中，通常更推荐使用 < del > 标记来表示真正的删除内容。

示例：

输出： 这是 过时的 不推荐使用的功能。

总结：在语义上，< del > 标记用于表示真正删除的内容，而 < s > 标记则用于表示不推荐使用或不准确的内容。所以，如果要表达被删除的文本，应该使用 < del > 标记，而不是 < s > 标记。

在网页中插入图像，可以使用 < img > 标签：

< img src=“image.jpg” alt=“图片描述” > src：指定图像的路径。 alt：指定图像的替代文本，当图像无法加载时，会显示该文本。

创建链接，使用 < a > 标签：

< a href=“https://www.example.com”>点击这里< /a > href：指定链接的目标 URL。

HTML 表单允许用户输入数据，并提交到服务器进行处理。表单由 标签包裹，包含各种表单元素，如文本输入框、复选框、单选按钮等。

< form action=“/submit” method=“post”> < label for=“username”>用户名：< /label> < input type=“text” id=“username” name=“username” required> < br> < label for=“password”>密码：< /label> < input type=“password” id=“password” name=“password” required> < br> < input type=“submit” value=“登录”> < /form> action：指定表单数据提交的目标 URL。 method：指定数据提交的方法，可以是 get 或 post。

当涉及HTML表格时，有多种标签和属性可用于定制和优化表格的外观和功能。以下是HTML表格的所有用法的综合介绍：

< table > 标签 < table > 标签用于创建表格，是表格的最外层容器。

< tr > 标签 < tr > 标签用于定义表格中的行（行）。每个< tr >标签都包含一个或多个< td >（数据单元格）和/或< th >（表头单元格）标签。

< td > 和 < th > 标签 < td > 标签用于定义表格中的数据单元格。< th > 标签用于定义表格的表头单元格。两者在功能上是相同的，但< th > 标签通常用于表头行，以使其与数据行有一些不同的样式。

< caption > 标签 < caption > 标签用于定义表格的标题。它应该在< table >标签的内部，但在< thead >、< tbody >或< tfoot >等标签之前。

< thead >、< tbody > 和 < tfoot > 标签 这些标签用于在表格中分组表头、正文和页脚内容。< thead > 包含表格的表头行，< tbody > 包含数据行，< tfoot > 包含表格的页脚行。在大型表格中，使用这些标签可以提高可读性并使表格更易于维护。

colspan 和 rowspan 属性 colspan 属性用于指定单元格跨越的列数，而 rowspan 属性用于指定单元格跨越的行数。这两个属性使您可以创建具有合并单元格的复杂表格结构。

当涉及HTML列表时，有三种常见的列表类型：无序列表（< ul >）、有序列表（< ol >）和定义列表（< dl >）。以下是HTML列表的所有用法的综合介绍：

无序列表（Unordered List） 无序列表由 < ul > 标签定义，每个列表项由 < li > 标签定义。无序列表中的项通常以项目符号或其他标记显示。

有序列表（Ordered List） 有序列表由 < ol > 标签定义，每个列表项由 < li > 标签定义。有序列表中的项会自动按顺序进行编号。

定义列表（Definition List） 定义列表由 < dl > 标签定义，每个项目由 < dt > 标签定义，每个项目的定义由 < dd > 标签定义。通常用于描述术语或名称与其定义的关系。

嵌套列表 您还可以在列表项中嵌套其他列表，例如在无序列表或有序列表的列表项中放置另一个列表。

HTML 支持嵌入多媒体内容，如视频、音频等。使用 < video> 和 < audio> 标签可以实现：

< video src=“video.mp4” controls>< /video> < audio src=“audio.mp3” controls>< /audio> src：指定媒体文件的路径。 controls：显示媒体播放控件。

HTML 语义化是指使用恰当的标签来描述网页结构和内容，以增加网页的可读性和可访问性。例如使用 < header > 表示页眉，< nav > 表示导航栏，< main > 表示主要内容等。

HTML 布局元素 除了 < div > 和 < span >，HTML5 引入了一些语义化的布局元素，用于更清晰地定义网页结构： < header >：表示网页或区块的页眉。 < nav >：表示导航链接。 < main >：表示页面的主要内容。 < section >：表示文档中的一个区域。 < article >：表示独立的内容，如文章或博客帖子。 < aside >：表示侧边栏或附属内容。 < footer >：表示网页或区块的页脚。