一、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> 标签定义。
主要使用来布局的，整齐好看。
- 无序列表[重要]
ulli。 - 有序列表[用的不多]
olli。 - 自定义列表[重要]
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]