一、HTML 完全指南：从零开始构建网页

文章目录

- 前言
- 一、 HTML 结构
- - - 认识 HTML 标签
    - HTML 文件基本结构
    - 标签层次结构
    - 快速生成代码框架
- 二、 HTML 常见标签详解
- - - 2.1 注释标签
    - 2.2 标题标签 (`h1` - `h6`)
    - 2.3 段落标签 (`p`)
    - 2.4 换行标签 (`br`)
    - 2.5 格式化标签
    - 2.6 图片标签 (`img`)
    - 2.7 超链接标签 (`a`)
    - 2.8 表格标签
    - - 基本使用
      - 合并单元格
    - 2.9 列表标签
    - - 无序列表 (`ul`)
      - 有序列表 (`ol`)
      - 自定义列表（`dl`）
    - 2.10 表单标签
    - - `form` 标签
      - `input` 标签
      - `label` 标签
      - `select` 标签
      - `textarea` 标签
    - 2.11 无语义标签：`div` 和 `span`
- 三、HTML 特殊字符
- 总结

前言

在现代互联网的世界中，网站已经成为我们日常生活的一部分。从社交媒体到购物平台，从博客到企业官网，每一个网站背后都依赖着一种技术——HTML（超文本标记语言）。作为构建网页的核心语言，HTML不仅为网页提供结构，还使得我们能够在浏览器中看到文本、图片、视频和其他多媒体内容。

对于许多刚接触网页开发的人来说，HTML可能显得陌生且复杂，但它的学习并不像想象中的那么困难, 希望我们可以耐心学习下去。本篇《HTML 完全指南：从零开始构建网页》将带领你从最基础的HTML概念开始，逐步掌握网页构建的核心技巧和最佳实践。无论你是希望建立一个简单的个人博客，还是准备开发一个企业网站，HTML都将是你最重要的起点。

在本篇博客中，我们将通过清晰的步骤和实用的示例，帮助你了解HTML的基本元素、标签、属性以及网页布局的实现方式。即使你没有任何编程经验，也能轻松上手，构建出属于自己的网页。

通过本指南，你将不仅掌握HTML的基础，还能学会如何将这些知识应用到实际开发中，打下扎实的前端开发基础，迈出成为网页开发者的第一步。
在这里插入图片描述

一、 HTML 结构

认识 HTML 标签

HTML（超文本标记语言）是构建网页的基础，几乎所有的网页元素都由 HTML 标签来定义和描述。每个标签都用于指定网页的某一部分的内容或行为，所以我们一定要学好 HTML 标签相关的知识。
这一部分我们先大致了解一些标签，后面会一一讲解每个标签的具体用法。

常见的 HTML 标签包括：

<h1> 至 <h6>：标题标签，用于创建网页中的标题，数字越小表示标题的层级越高，字体越粗越大。
<p>：段落标签，用于标记文本段落。
<a>：链接标签，用于创建超链接。
<img>：图片标签，用于显示图片。
<ul> 和 <ol>：无序列表和有序列表标签，用于创建列表。
<li>：列表项标签，用于指定列表中的每一项。

注意：

标签名 (h1) 放到 <> 中。
大部分标签成对出现，<h1> 为开始标签，</h1> 为结束标签。
少数标签只有开始标签，称为“单标签”。
开始标签和结束标签之间，写的是标签的内容。
开始标签中可能带有"属性"，id 属性相当于给这个标签设置一个唯一的标识符（相当于我们的身份证号码）

HTML 文件基本结构

每个 HTML 文件都有一个固定的结构，通常包括以下几部分：

DOCTYPE 声明：告诉浏览器使用哪个 HTML 版本。现在我们常用的是 <!DOCTYPE html>，它表示该文件是 HTML5 格式。HTML 4 的声明会比 HTML 5 的声明复杂好多，相比之下 HTML 4 更方便记忆。
<html></html> 标签：是整个 HTML 文档的根元素（根标签、最顶层标签）。
<head></head> 标签：包含了网页的元数据，如字符集、页面标题、外部链接等，主要是写页面的属性。
<body></body> 标签：网页的主要内容区域，浏览器展示的内容都在这里。
<title></title> 标签：中间的内容会在页面标题中显示出来

HTML 文件基本结构示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网页标题</title></head><body><h1>欢迎来到我的网站</h1><p>这是我的第一篇网页。</p></body>
</html>

标签层次结构

HTML 是一种层次化的语言，意味着标签可以包含其他标签。标签的层次结构可以通过缩进来表示，以便我们清晰地了解各部分之间的关系。

包含与被包含我们可以叫做 父子关系。
同级的标签我们可以叫做兄弟关系

例如，HTML 中的<ul>（无序列表）标签可以包含多个 <li>（列表项）标签，展示一个列表。每个标签内的内容可以嵌套其他标签。

标签层次结构示例：

<html><head><title>我的页面</title></head><body><ul><li>项目 1</li><li>项目 2<ul><li>子项目 1</li><li>子项目 2</li></ul></li><li>项目 3</li></ul></body>
</html>

在这个例子中，<ul> 包含了三个 <li>，其中一个 <li> 标签内部又嵌套了一个新的 <ul>，展示了列表的嵌套结构。

其中：

head 和 body 是 html 的子标签（html 就是 head 和 body 的父标签）。
title 是 head 的子标签，head 是 title 的父标签。
head 和 body 之间是兄弟关系。

帮助：
可以使用 chrome 的开发者工具查看页面的结构
F12 或者右键检查，开启开发者工具，切换到元素标签，就可以看到页面的 HTML 结构细节。

请添加图片描述

标签之间的结构，构成了一个 DOM 树。

知识拓展：
什么是 DOM？
DOM（文档对象模型，Document Object Model）是一个平台和语言无关的接口，它提供了一种表示网页结构的方式，使得网页的结构。样式和内容可以通过编程方式动态访问和修改。简单来说，DOM 是浏览器通过解析 HTML 和 XML 文档创建的一个层次化的对象模型，网页中的每一个元素、属性和文本都被表示为一个对象，可以通过 JavaScript 来操作。
DOM 的作用

快速生成代码框架

为了快速开始一个 HTML 项目，通常我们可以利用代码编辑器（如 VS Code、Sublime Text 等）提供的快捷功能来生成 HTML 框架。例如，在 VS Code 中输入 ! 然后按 Tab 键，便可以自动生成一个基本的 HTML 文件框架。

快速生成的 HTML 代码框架：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

细节解释：

<!DOCTYPE html> 称为 DTD（文档类型定义），描述当前的文件是一个 HTML 5 的文件。
<html lang="en"> 其中 lang 属性表示当前页面是一个"英语页面"，这里暂时不用管（个别浏览器会根据此处的声明提示是否进行自动翻译）。
<meta charset="UTF-8"> 描述页面的字符编码方式，没有这一行可能会导致中文乱码。
<meta name="viewport" content="width=device-width,initial-scale=1.0">
name="viewport" 其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区域。
content=“width=device-width，initial-scale=1.0” 在设置可视区和设备宽度等宽，并设置初始缩放为不缩放。（这个属性对于移动端开发更重要一些）。

二、 HTML 常见标签详解

2.1 注释标签

HTML 中的注释标签用于添加注释，这些注释不会显示在浏览器中，仅供开发者参考。注释可以帮助我们记录代码说明或暂时隐藏代码。

注释标签：

<!-- 这是一个注释 -->

Ctrl + / 快捷键可以快速进行注释/取消注释

注释的原则

要和代码逻辑一致。
尽量使用中文。
不要传递负能量

2.2 标题标签 (`h1` - `h6`)

标题标签用于创建网页的标题，h1 是最大标题，h6 是最小标题。它们通常用于展示章节、段落标题等信息，h1 应该用于页面的主标题，而 h2 到 h6 可以用于子标题和小标题。

标题标签示例：

<h1>主标题</h1>
<h2>副标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

请添加图片描述

2.3 段落标签 (`p`)

当我们把一段比较长的文本粘贴到 html 中，会发现并没有分成段落。
例如：

css中的1px并不等于设备的1px在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。关于这点，在文章后面的部分还会讲到。在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 /独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在些许的兼容性问题，所以我们现在还并不能完全信赖这个东西，具体的情况可以看下这篇文章。

在网页上展示结果会变成：
请添加图片描述

可以自己动手试试。

段落标签用于定义网页中的段落。文本会被包含在 <p> 和 </p> 标签之间，浏览器会自动为每个段落添加空白行。

段落标签示例：

<p>这是一个段落，内容可以是文本、图片或者其他元素。</p>

请添加图片描述

通过段落标签我们来改进一下上面的文本

	<p>css中的1px并不等于设备的1px</p><p>在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。</p><p>还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。关于这点，在文章后面的部分还会讲到。</p><p>在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 /独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在些许的兼容性问题，所以我们现在还并不能完全信赖这个东西，具体的情况可以看下这篇文章。</p>

展示结果为：
请添加图片描述

注意：

p 标签之间存在一个空隙（也就是上面说的浏览器会为每个段落之间添加空白行）。
当前的 p 标签描述的段落，前面还没有缩进。（未来 CSS 会学）。
自动根据浏览器宽度来决定排版。
html 内容首尾处的换行，空格均无效。
在 html 中文字之间输入的多个空格只相当于一个空格。
在 html 中直接输入换行不会真的换行，而是相当于一个空格。

2.4 换行标签 (`br`)

br 是 break 的缩写，代表这一行结束进行换行， <br/> 标签用于在页面中插入换行符。它是一个自闭合标签，表示不需要结束标签。当你希望在同一段落中换行时，可以使用 <br/>。

换行标签示例：

<p>第一行<br>第二行<br>第三行</p>

请添加图片描述

br 是一个单标签（不需要结束标签）
br 标签不像 p 标签那样带有一个很大的空隙
<br/> 是规范写法，不建议写成 <br>

 <p>在css中我们一般使用px作为单位，<br/>在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。</p>

运行结果如下：
请添加图片描述

2.5 格式化标签

格式化标签用于控制文本的样式，如粗体、斜体等。这些标签可以用来强调某些文本。

<b>：表示粗体文字
<i>：表示斜体文字
<u>：表示下划线文字
<strong>：表示加重的文本，语义上强调重要性
<em>：表示斜体的强调文本，语义上强调重要性
s：表示删除线文字
del：表示删除的强调文本，语义上强调重要性
ins：表示下划线的强调文本，语义上强调重要性

格式化标签示例：

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

请添加图片描述

使用 CSS 也可以完成类似的效果，实际开发中以 CSS 方式为主。

2.6 图片标签 (`img`)

<img> 标签用于在网页中嵌入图片。它是一个自闭合标签，常用的属性包括 src（图片路径）和 alt（图片描述）。img 标签必须带有 src 属性，表示图片的路径。图片标签没有闭合标签。

图片标签示例：

<img src="image.jpg" alt="描述图片的文字" />

此时要把 image.jpg 这个图片文件放到和 html 中的同级目录中。

img 标签的其他属性：

alt：替换文本，当文本不能正确显示的时候，会显示一个替换的文字。
title：提示文本，鼠标放到图片上，就会有提示。
width/height：控制宽度高度，高度和宽度一般改一个就行，另外一个会等比例缩放，否则就会图片失衡。
boder：边框，参数是宽度的像素，但是一般使用 CSS 来设定。

<img src="rose.jpg" alt="鲜花" title="这是一朵鲜花" width="500px" height="800px"border="5px">

注意：

属性可以有多个，不能写到标签之前。
属性之间用空格分隔，可以是多个空格，也可以是换行。
属性之间不分先后顺序。
属性使用“键值对”的格式来表示

拓展知识：
关于目录结构，对于一个复杂的网站，页面资源很多，这种情况可以使用目录把这些文件整理好。
（1）相对路径：以 html 所在位置为基准，找到图片的位置。
同级路径：直接写文件名即可（或者 ./）./ 代表当前路径。
下一级路径：需要添加文件夹然后再写文件名（如：images/1.png）。
上一级路径：../ 代表上一级路径然后我们就可以这样表示（如：../images/2.png）。
（2）绝对路径：一个完整的磁盘路径，或者网络路径，例如：
磁盘路径：D:\rose.png
网络路径：https：//...

2.7 超链接标签 (`a`)

超链接标签用于创建网页中的链接。通过 <a> 标签，我们可以将用户引导到其他网页、文件或页面上的某个位置。常用的属性是 href，它定义了链接的目标地址。和 img 标签一样 href 也是必须要有的属性，因为它代表点击后会跳转哪个页面。target：打开方式，默认是 _self，在本标签页打开，如果是 _blank 则用新的标签页打开。

超链接标签示例：

<a href="https://www.baidu.com">百度</a>

链接的几种形式：

外部链接：href 引用其他网站网址。

<a href="https://www.baidu.com">百度</a>

内部链接：网站内部之间的链接，写相对路径即可。
在目录中先创建一个 1.html，再创建一个 2.html

<!-- 1.html -->我是 1.html<a href="2.html">点我跳转到 2.html</a><!-- 2.html -->我是 2.html<a href="1.html">点我跳转到 1.html</a>

空链接：使用 # 在 href 中占位。

<a fref="#">空链接</a>

下载链接：href 对应的路径是一个文件。（可以使用 zip 文件）

<a href="test.zip">下载文件</a>

网页元素链接：可以给图片等任何元素添加链接（把元素放到 a 标签中）

<a href="http://www.sogou.com"><img src="rose.jpg" alt=""></a>

锚点链接：可以快速定位到页面中的位置。

<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
<p id="one">
第一集剧情 <br>
第一集剧情 <br>...
</p><p id="two">
第二集剧情 <br>
第二集剧情 <br>
...
</p><p id="three">
第三集剧情 <br>
第三集剧情 <br>
...
</p>

禁止 a 标签跳转：<a href="javascript:void(0);"> 或者 <a href="javascipt:;">

2.8 表格标签

表格标签用于在网页中创建表格。表格通常由 <table> 标签定义，表格的行由 <tr> 标签定义，表格的单元格由 <td> 标签定义，表头单元格由 <th> 标签定义。

基本使用

<table><tr><th>表头1</th><th>表头2</th></tr><tr><td>数据1</td><td>数据2</td></tr><tr><td>数据3</td><td>数据4</td></tr>
</table>

table 标签：表示整个表格。
tr 标签：表示表格的一行。
td 标签：表示一个单元格。
th 标签：表示表头单元格，会居中加粗。
thead 标签：表格的头部区域（注意和 th 区分，范围是比 th 要大的）
today 标签：表格得到主体区域。

table 包含 tr，tr 包含 td 或者 th

表格标签有一些属性可以用于设置大小边框等，但是一般使用 CSS 方式来设置。
这些属性都要放到 table 标签中：

align 是表格相对于周围元素的对齐方式。align="center"（不是内部元素的对齐方式）
border ：表示边框。1 表示有边框（数字越大，边框越粗），"" 表示没边框。
cellpadding：内容距离边框的距离，默认 1 像素。
cellspacing：单元格之间的距离，默认为 2 像素。
width/height：设置尺寸。
注意这几个属性，vscode 都提示不出来。

<table align="center" border="1" cellpadding="20" cellspacing="0" width="500"height="500"><tr><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>张三</td><td>男</td><td>10</td></tr><tr><td>李四</td><td>女</td><td>11</td></tr>
</table>

合并单元格

可以使用 colspan 属性来合并列，使用 rowspan 属性来合并行。

<table><tr><th colspan="2">合并两列的表头</th></tr><tr><td rowspan="2">合并两行的单元格</td><td>数据1</td></tr><tr><td>数据2</td></tr>
</table>

步骤：

先确定跨行还是跨列。
找好目标单元格（合并列，左侧是目标单元格；合并行，上方是目标单元格）。
删除的多余的单元格。

2.9 列表标签

列表标签用于创建有序列表（<ol>）和无序列表（<ul>）。列表项用 <li> 标签定义。
主要使用来布局的，整齐好看。

无序列表[重要]ul li。
有序列表[用的不多]ol li。
自定义列表[重要]dl 总标签 dt 小标题 dd 围绕标题来说明，上面有几个小标题，下面有几个围绕着标题来展开。
自定义列表（参考小米官网下方）

注意：

元素之间的是并列关系。
ul/ol 中只能放 li 不能放其他标签，dl 中只能放 dt 和 dd。
li 中可以放其他标签。
列表带有自己的样式，可以使用 CSS 来修改。（例如前面的小圆点都会去掉）

无序列表 (`ul`)

<ul><li>项目1</li><li>项目2</li><li>项目3</li>
</ul>

有序列表 (`ol`)

<ol><li>第一项</li><li>第二项</li><li>第三项</li>
</ol>

自定义列表（`dl`）

<dl><dt>我的老婆们</dt><dd>咬人猫</dd><dd>兔总裁</dd><dd>阿叶君</dd>
</dl>

请添加图片描述

2.10 表单标签

表单标签用于创建交互式的用户输入界面。通过表单，用户可以输入数据，提交给服务器处理。
分成两个部分：

表单域：包含表单元素的区域。重点是 form 标签。
表单控件：输入框，提交按钮等。重点是 input 标签。

`form` 标签

<form> 标签用于创建一个表单。

<form action="/submit" method="post"><label for="name">姓名：</label><input type="text" id="name" name="name"><input type="submit" value="提交">
</form>

描述了要把数据按照什么方式，提交到哪个页面中。

关于 form 需要结合服务器 & 网络编程来进一步理解，后面再详细研究。

`input` 标签

<input> 标签用于定义表单控件，如文本框、按钮、复选框等。

<input type="text" placeholder="请输入姓名">
<input type="password" placeholder="请输入密码">
<input type="checkbox"> 同意条款
<input type="radio"> 男
<input type="radio"> 女

type（必须有），取值种类有很多，button 、checkbox、text、file、image、password、radio 等。
name：给 input 起了个名字，尤其对于单选按钮，具有相同的 name 才能多选一。
value：input 中的默认值。
checked：默认被选中，（用于单选按钮和多选按钮）。
maxlength：设定最大长度。

（1）文本框

<input type="text">

（2）密码框

<input type="password">

（3）单选框

性别：
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女

注意：单选框之间必须具备相同的 name 属性，才能实现多选一效果。

（4）复选框

爱好：
<input type="checkbox">吃饭
<input type="chechbox">睡觉
<input type="checkbox">打游戏

（5）普通按钮

<input type="button" value="我是个按钮">

当点击了没反应，需要搭配 JavaScript 使用（后面会重点研究）

（6）提交按钮

<form action="test.html"><input type="text" name="username"><input type="submit" value="提交">
</form>

提交按钮必须放到 form 标签内，点击后就会尝试给服务器发送。

（7）清空按钮

<form action="test.html"><input type="text" name="username"><input type="submit" value="提交"><input type="reset" value="清空">
</form>

清空按钮必须放在 form 中，点击后会将 form 内所有用户输入内容重置。

（8）选择文件

<input type="fiel">

点击选择文件，会弹出对话框，选择文件

`label` 标签

<label> 标签用于定义表单控件的标签，增强表单可访问性。
搭配 input 使用，点击 lable 也能选中对应的单选/复选框，能够提升用户体验。

for 属性：指定当前 label 和哪个相同 id 的 input 标签对应。（此时点击才是有用的）

<label for="username">用户名：</label>
<input type="text" id="username" name="user">

`select` 标签

<select> 标签用于创建下拉列表。

option 中定义 select="selected"表示默认选中

<select><option value="1">选项1</option><option value="2">选项2</option><option value="3" selected="selected">选项3</option>
</select>

注意！如果不设置默认第一个为默认选项

`textarea` 标签

<textarea> 标签用于创建多行文本框，适用于输入较长的文本。

文本域中的内容，就是默认内容，注意，空格也会有影响。
rows 和 cols 也都不会直接使用，都是用 CSS 来改的。

<textarea rows="4" cols="50">请输入内容...</textarea>

2.11 无语义标签：`div` 和 `span`

<div>：用于将网页内容分组，是一个无语义的块级元素，通常用于布局和样式调整。
<span>：是一个无语义的行内元素，常用于对部分文本进行样式设置。

这里简单说明：块级元素会独占一行，行内元素不会。

div 和 span 示例：

<div><p>这是一个段落。</p><span>这是行内元素。</span>
</div>

三、HTML 特殊字符

有些特殊的字符在 html 文件中是不能直接表示的，例如：
空格： 
小于号：<
大于号：>
按位与：&

html 标签就是用 < > 表示的，因此如果内容中如果存在 < >，就会发生混淆
其他的特殊参考字符可以参考HTML特殊字符编码对照表

总结

如果看完这篇文章对 html 仍然想要更加深度学习

使用 HTML 构建 Web - 学习 Web 开发 | MDN
HTML（超文本标记语言） | MDN]