大家好，欢迎来到前端入门系列的第二篇博客。在这个系列中，我们将一起学习前端开发的基础知识，从零开始构建网页和Web应用程序。本篇博客将为大家介绍HTML（超文本标记语言）常用标签元素，帮助零基础小白快速入门。

这里写目录标题

前言：学习目标

1. 标题标签：h1-h6

2.段落标签：p

3.注释标签：!

4. 链接标签：a

5. 图像标签：img

6. 列表标签：ul 和 ol

7. div 标签和span标签

8.表格标签：table、tr、td

9. 文字格式标签

9.1 粗体标签：`` 和 ``

9.2 斜体标签：` `和 ``

9.3 下划线标签：``

9.4 删除线标签：`` 和 ``

9.5 上标和下标标签：`<sup>` 和 `<sub>`</sub></sup>

10. 表单标签

10.1 ` `标签：

10.2 `` 标签：

10.3 `` 标签：

10.4 `` 和 `` 标签：10.5 `` 标签：</div><div>10.6 `<button>` 标签：</div><div>11. `<br>` 标签：</div><div>12. 特殊字符</div><div>总结</div><h1 id="PTcls">前言：学习目标</h1><div>掌握html常用表情的使用、基础特性以及用途。</div><h2 id="d924a">1. 标题标签：h1-h6</h2><div>简介：标题标签用于定义网页中的标题文本，从h1到h6，分别表示不同级别的标题，h1是最高级别的标题，h6是最低级别的标题。</div><div><br /></div><div>特点：</div><div><br /></div><div>标题标签具有语义化的作用，有助于网页的结构化和可读性。</div><div>标题标签在页面中通常呈现较大的字体大小，并带有一定的样式效果。</div><div>h1标签最常用于页面的主标题，而h2到h6标签则用于副标题或次要标题。</div><div>示例代码：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Ch1%3Eh1%3Ch1%3E%5Cn%3Ch2%3Eh2%3Ch2%3E%5Cn%3Ch3%3Eh3%3Ch3%3E%5Cn%3Ch4%3Eh4%3Ch4%3E%5Cn%3Ch5%3Eh5%3Ch5%3E%5Cn%3Ch6%3Eh6%3Ch6%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%228tPU9%22%7D"></div><div>渲染效果：</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F5sqnq7fhd7r4e_a4e575d27ba54a05b4c04943922f94d1.png%22%2C%22originWidth%22%3A692%2C%22originHeight%22%3A642%2C%22name%22%3A%22eff6759f504e4c74aad70e16856c561d.png%22%2C%22size%22%3A14950%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A692%2C%22height%22%3A642%7D"></span></div><div><br /></div><h2 id="pijy4">2.段落标签：p</h2><div>简介：段落标签用于定义文本的段落，会自动在段落之间添加空白。</div><div><br /></div><div>特点：段落标签具有默认的上下边距，并自动换行。</div><div><br /></div><div>示例代码：</div><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Cp%3E%E8%BF%99%E6%98%AF%E4%B8%80%E4%B8%AA%E6%AE%B5%E8%90%BD%E3%80%82%3C%2Fp%3E%5Cn%3Cp%3E%E8%BF%99%E6%98%AF%E5%8F%A6%E4%B8%80%E4%B8%AA%E6%AE%B5%E8%90%BD%E3%80%82%3C%2Fp%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22sWlj4%22%7D"></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F5sqnq7fhd7r4e_a9beb2c8d0194a439b7bbe817a8a6dd0.png%22%2C%22originWidth%22%3A460%2C%22originHeight%22%3A258%2C%22name%22%3A%22e29e671d1df64fd4be9b507b7e6a36b7.png%22%2C%22size%22%3A19655%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A460%2C%22height%22%3A258%7D"></span></div><div><br /></div><h2 id="PuVUq">3.注释标签：!</h2><div>简介：用于将代码转为注释，在运行代码时，注释不会渲染在页面上，快捷键ctrl+'/'就可以将代码快速变为注释</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3C!DOCTYPE%20html%3E%5Cn%3Chtml%20lang%3D%5C%22en%5C%22%3E%5Cn%3Chead%3E%5Cn%20%20%20%20%3Cmeta%20charset%3D%5C%22UTF-8%5C%22%3E%5Cn%20%20%20%20%3Cmeta%20name%3D%5C%22viewport%5C%22%20content%3D%5C%22width%3Ddevice-width%2C%20initial-scale%3D1.0%5C%22%3E%5Cn%20%20%20%20%3Ctitle%3E%E7%A8%8B%E5%BA%8F%E5%91%98%E5%B0%8F%E8%B1%AA%3C%2Ftitle%3E%5Cn%3C%2Fhead%3E%5Cn%3Cbody%3E%5Cn%20%20%20%20%3C!--%20%3Cp%3Ego%20go%20go%3C%2Fp%3E%20--%3E%5Cn%20%20%20%20%3Cp%3E%5Cn%20%20%20%20%20%20test%5Cn%20%20%20%20%3C%2Fp%3E%5Cn%3C%2Fbody%3E%5Cn%3C%2Fhtml%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%2239FEe%22%7D"></div><div><br /></div><div>渲染效果：</div><div><br /></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F5sqnq7fhd7r4e_d3137309821a4d4cbbf159d7a7d273f9.png%22%2C%22originWidth%22%3A520%2C%22originHeight%22%3A278%2C%22name%22%3A%22eeafde8af35245269e61b5cf2693ca1c.png%22%2C%22size%22%3A28032%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A520%2C%22height%22%3A278%7D"></span></div><h2 id="snQo2">4. 链接标签：a</h2><div>简介：链接标签用于创建超链接，将文本或图像链接到其他页面或资源。</div><div><br /></div><div>特点：链接标签具有href属性，指定目标URL或资源的地址。</div><div><br /></div><div>示例代码：</div><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Ca%20href%3D%5C%22https%3A%2F%2Fwww.example.com%5C%22%3E%E8%BF%99%E6%98%AF%E4%B8%80%E4%B8%AA%E9%93%BE%E6%8E%A5%3C%2Fa%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22OC1Oo%22%7D"></div><div>属性 作用</div><div>href 用于指定链接目标的URL地址（必须属性）</div><div>target 用于指定链接页面打开的方式，_self为默认方式在此页面直接跳转，_blank在新的窗口打开</div><div><br /></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F5sqnq7fhd7r4e_7506701f3b524cd8a2347044056c62af.png%22%2C%22originWidth%22%3A518%2C%22originHeight%22%3A226%2C%22name%22%3A%22aaeb32d5aa144ecd8e85b79fa235118d.png%22%2C%22size%22%3A31691%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A518%2C%22height%22%3A226%7D"></span></div><div>用途：</div><div><br /></div><div>导航链接：<a>标签可用于创建导航菜单或链接到其他页面的导航链接。例如：</div><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Ca%20href%3D%5C%22index.html%5C%22%3E%E9%A6%96%E9%A1%B5%3C%2Fa%3E%5Cn%3Ca%20href%3D%5C%22about.html%5C%22%3E%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC%3C%2Fa%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22OdDeO%22%7D"></div><div>外部链接：<a>标签可以用于创建指向其他网站的链接。例如：</div><div><br /></div><div>锚链接：<</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Ca%20href%3D%5C%22https%3A%2F%2Fwww.example.com%5C%22%3E%E8%AE%BF%E9%97%AE%E7%A4%BA%E4%BE%8B%E7%BD%91%E7%AB%99%3C%2Fa%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%226emmp%22%7D"></div><div>a>标签可以用于创建页面内部的锚链接，以便在同一页面中快速导航到不同的部分。例如：</div><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Ca%20href%3D%5C%22%23section1%5C%22%3E%E8%B7%B3%E8%BD%AC%E5%88%B0%E7%AC%AC%E4%B8%80%E8%8A%82%3C%2Fa%3E%5Cn...%5Cn%3Ch2%20id%3D%5C%22section1%5C%22%3E%E7%AC%AC%E4%B8%80%E8%8A%82%3C%2Fh2%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%226ONDv%22%7D"></div><div>我在a标签下面放置了200个div标签最后才是h2标签</div><div><br /></div><div><br /></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F5sqnq7fhd7r4e_e52419815ab9410292172e3ad0f1228a.png%22%2C%22originWidth%22%3A548%2C%22originHeight%22%3A1090%2C%22name%22%3A%223eb7645430b84d2888e281da484e25a9.png%22%2C%22size%22%3A46225%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A548%2C%22height%22%3A1090%7D"></span></div><div><br /></div><div>我们给h2标签设了个id属性，设置a标签里的href属性：“#section1”，点击a标签就可以直接跳到h2标签的位置</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F5sqnq7fhd7r4e_d2db2e74efa54f01a94e916161d0afae.png%22%2C%22originWidth%22%3A526%2C%22originHeight%22%3A1700%2C%22name%22%3A%22c51124c923f14dbca134caf21fa7bd31.png%22%2C%22size%22%3A52621%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A526%2C%22height%22%3A1700%7D"></span></div><div><br /></div><div><br /></div><div>下载链接：<a>标签可以用于提供文件的下载链接。例如：</div><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Ca%20href%3D%5C%22files%2Fdocument.pdf%5C%22%20download%3E%E4%B8%8B%E8%BD%BD%E6%96%87%E6%A1%A3%3C%2Fa%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22enyIl%22%7D"></div><div>邮件链接：<a>标签可以用于创建发送电子邮件的链接。例如：</div><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Ca%20href%3D%5C%22mailto%3Ainfo%40example.com%5C%22%3E%E5%8F%91%E9%80%81%E9%82%AE%E4%BB%B6%E7%BB%99%E6%88%91%E4%BB%AC%3C%2Fa%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22w1EaV%22%7D"></div><div>JavaScript动作：<a>标签可以与JavaScript代码一起使用，执行特定的动作或函数。例如：</div><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Ca%20href%3D%5C%22javascript%3Avoid(0)%3B%5C%22%20onclick%3D%5C%22myFunction()%5C%22%3E%E7%82%B9%E5%87%BB%E8%BF%99%E9%87%8C%3C%2Fa%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22d7rZN%22%7D"></div><div>这些只是<a>标签的一些常见用途，它还具有其他属性和功能，可以根据需要进行扩展和自定义。</div><div><br /></div><div>5. 图像标签：img</div><div>简介：图像标签用于在网页中插入图像。</div><div><br /></div><div>特点：图像标签具有src属性，指定图像的URL或文件路径。</div><div><br /></div><div>示例代码：</div><div><br /></div><div><img src="image.jpg" alt="图像描述"></div><div>1</div><div>属性 描述 示例</div><div>src 图像的URL或文件路径 <img src="image.jpg"></div><div>alt 图像的替代文本 <img src="image.jpg" alt="描述文本"></div><div>title 鼠标悬停时显示的标题文本 <img src="image.jpg" title="标题"></div><div>loading 图像加载方式的提示（lazy、eager、auto） <img src="image.jpg" loading="lazy"></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F5sqnq7fhd7r4e_0466fdd82fb84c3d9d481d5d0cad43d4.png%22%2C%22originWidth%22%3A2092%2C%22originHeight%22%3A1596%2C%22name%22%3A%222eb36222a35a412a9d0b46c3771027d2.png%22%2C%22size%22%3A346879%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A2092%2C%22height%22%3A1596%7D"></span></div><div><br /></div><h2 id="te7yz">6. 列表标签：ul 和 ol</h2><div>简介：无序列表标签（ul）用于创建无序列表，有序列表标签（ol）用于创建有序列表。</div><div><br /></div><div>特点：无序列表使用圆点或其他符号来标记列表项，有序列表使用数字或字母来标记列表项。</div><div><br /></div><div>示例代码：</div><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Cul%3E%5Cn%20%20%3Cli%3E%E6%97%A0%E5%BA%8F%E5%88%97%E8%A1%A8%E9%A1%B91%3C%2Fli%3E%5Cn%20%20%3Cli%3E%E6%97%A0%E5%BA%8F%E5%88%97%E8%A1%A8%E9%A1%B92%3C%2Fli%3E%5Cn%20%20%3Cli%3E%E6%97%A0%E5%BA%8F%E5%88%97%E8%A1%A8%E9%A1%B93%3C%2Fli%3E%5Cn%3C%2Ful%3E%5Cn%3Col%3E%5Cn%20%20%3Cli%3E%E6%9C%89%E5%BA%8F%E5%88%97%E8%A1%A8%E9%A1%B91%3C%2Fli%3E%5Cn%20%20%3Cli%3E%E6%9C%89%E5%BA%8F%E5%88%97%E8%A1%A8%E9%A1%B92%3C%2Fli%3E%5Cn%20%20%3Cli%3E%E6%9C%89%E5%BA%8F%E5%88%97%E8%A1%A8%E9%A1%B93%3C%2Fli%3E%5Cn%3C%2Fol%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22WrZky%22%7D"></div><div><br /></div><div><br /></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F5sqnq7fhd7r4e_3bda7bcfde86492383787cb3f70b89ab.png%22%2C%22originWidth%22%3A816%2C%22originHeight%22%3A530%2C%22name%22%3A%22dc8b2257bee04bad87ca55f4001d84f9.png%22%2C%22size%22%3A75151%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A816%2C%22height%22%3A530%7D"></span></div><h2 id="dw5KA">7. div 标签和span标签</h2><div>简介：</div><div><br /></div><div>标签是一个通用的容器标签，用于将一组相关元素包装在一起，并为其应用样式或JavaScript。</div><div><span> 标签用于对文本的某个部分进行标记或分组。</div><div>特点：</div><div><br /></div><div>``</div><div>`标签没有特定的语义，主要用于布局和组织页面结构。</div><div><span> 是一个内联元素，不会独占一行，只会包裹其内部的文本或其他内联元素。</div><div>它本身并没有默认的样式或行为，主要用于通过 CSS 或 JavaScript 对其进行操作。</div><div>示例代码：</div><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Cdiv%3E%5Cn%20%20%3Ch1%3E%E8%BF%99%E6%98%AF%E4%B8%80%E4%B8%AA%20div%20%E5%AE%B9%E5%99%A8%3C%2Fh1%3E%5Cn%20%20%3Cp%3E%E8%BF%99%E6%98%AF%20div%20%E5%AE%B9%E5%99%A8%E4%B8%AD%E7%9A%84%E6%AE%B5%E8%90%BD%E3%80%82%3C%2Fp%3E%5Cn%20%20%3Cimg%20src%3D%5C%22image.jpg%5C%22%20alt%3D%5C%22%E5%9B%BE%E5%83%8F%E6%8F%8F%E8%BF%B0%5C%22%3E%5Cn%3C%2Fdiv%3E%5Cn%3Cspan%20onclick%3D%5C%22myFunction()%5C%22%3EClick%20me%3C%2Fspan%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%229fHzJ%22%7D"></div><div><br /></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F5sqnq7fhd7r4e_f8ecb0ecb7bc4f3db4bd9c4926dfbaef.png%22%2C%22originWidth%22%3A602%2C%22originHeight%22%3A504%2C%22name%22%3A%2258f5e9cf83ac41d494b2eed4472e6c8f.png%22%2C%22size%22%3A61264%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A602%2C%22height%22%3A504%7D"></span></div><div>与 <div> 标签相比，标签有以下区别：</div><div><br /></div><div>类型：<span> 是内联元素，而<div> 是块级元素。</div><h2 id="72Vj1"><br /></h2><div>作用范围：<span> 通常用于标记文本的一部分或内联元素，而<div> 通常用于分隔和包裹更大的文本块或其他元素。</div><div><br /></div><div>默认样式：<span> 没有默认的样式，不会独占一行，而<div> 默认具有块级元素的特性，会自动占据一行并撑满父容器的宽度。</div><div><br /></div><div>嵌套关系：由于 <span> 是内联元素，它可以嵌套在其他内联元素中，如文本或其他内联元素。而 <div> 是块级元素，不能嵌套在内联元素中，只能作为容器嵌套其他块级或内联元素。</div><div><br /></div><h2 id="xe9kX">8.表格标签：table、tr、td</h2><div>简介：表格标签用于创建网页中的表格，包括表头、行和单元格。</div><div><br /></div><div>特点：<table> 表示整个表格，<tr> 表示表格中的行，<td> 表示表格中的单元格。</div><div><br /></div><div>示例代码：</div><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Ctable%3E%5Cn%20%20%3Ctr%3E%5Cn%20%20%20%20%3Cth%3E%E8%A1%A8%E5%A4%B41%3C%2Fth%3E%5Cn%20%20%20%20%3Cth%3E%E8%A1%A8%E5%A4%B42%3C%2Fth%3E%5Cn%20%20%3C%2Ftr%3E%5Cn%20%20%3Ctr%3E%5Cn%20%20%20%20%3Ctd%3E%E8%A1%8C1%E5%8D%95%E5%85%83%E6%A0%BC1%3C%2Ftd%3E%5Cn%20%20%20%20%3Ctd%3E%E8%A1%8C1%E5%8D%95%E5%85%83%E6%A0%BC2%3C%2Ftd%3E%5Cn%20%20%3C%2Ftr%3E%5Cn%20%20%3Ctr%3E%5Cn%20%20%20%20%3Ctd%3E%E8%A1%8C2%E5%8D%95%E5%85%83%E6%A0%BC1%3C%2Ftd%3E%5Cn%20%20%20%20%3Ctd%3E%E8%A1%8C2%E5%8D%95%E5%85%83%E6%A0%BC2%3C%2Ftd%3E%5Cn%20%20%3C%2Ftr%3E%5Cn%3C%2Ftable%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22V84NP%22%7D"></div><div><br /></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F5sqnq7fhd7r4e_2fbb06df835441cda94b56df29778c80.png%22%2C%22originWidth%22%3A608%2C%22originHeight%22%3A354%2C%22name%22%3A%224a19d1ee94a3424aa8f08fbebc5f3f5f.png%22%2C%22size%22%3A51963%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A608%2C%22height%22%3A354%7D"></span></div><div><br /></div><div>以下是<table>标签独有的属性：</div><div><br /></div><div>属性 描述 示例</div><div>border 指定表格边框的宽度 <table border="1"></div><div>cellspacing 指定单元格之间的间距 <table cellspacing="10"></div><div>cellpadding 指定单元格内容与边框之间的间距 <table cellpadding="5"></div><div>width 指定表格的宽度 <table width="400"></div><div>height 指定表格的高度 <table height="300"></div><div>align 指定表格相对于周围内容的对齐方式 <table align="center"></div><div>bgcolor 指定表格的背景颜色 <table bgcolor="#f0f0f0"></div><div>summary 提供关于表格内容的摘要或描述 <table summary="这是一个数据表格"></div><div>caption 定义表格的标题 <caption>这是一个表格标题</caption></div><div>colspan 指定单元格横跨的列数 <td colspan="2">跨两列</td></div><div>rowspan 指定单元格纵跨的行数 <td rowspan="3">跨三行</td></div><div>headers 定义当前单元格与其他单元格之间的关系 <th headers="col1 row1">表头</th></div><div>scope 定义表头单元格的范围 <th scope="col">列标题</th></div><div>colgroup 将表格列分组并应用共同的属性 <colgroup><col span="2" style="background-color:#f0f0f0;"></colgroup></div><div>thead 定义表格的表头部分 <thead><tr><th>表头1</th><th>表头2</th></tr></thead></div><div>tbody 定义表格的主体内容部分 <tbody><tr><td>数据1</td><td>数据2</td></tr></tbody></div><div>tfoot 定义表格的页脚部分 <tfoot><tr><td>总计</td><td>100</td></tr></tfoot></div><div>sortable 指示表格是否可排序 <table sortable></div><h2 id="2N8ET">9. 文字格式标签</h2><div>文字格式化的标签主要用于调整文本的样式、格式和呈现方式。以下是一些常用的文字格式化标签的介绍：</div><div><br /></div><h3 id="L89x1">9.1 粗体标签：<b> 和 <strong></h3><div><b> 标签用于为文本设置粗体样式。</div><div><strong> 标签表示更强的重要性或强调文本，通常以粗体显示。 示例代码：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Cp%3EThis%20is%20%3Cb%3Ebold%3C%2Fb%3E%20text.%3C%2Fp%3E%5Cn%3Cp%3EThis%20is%20%3Cstrong%3Estrong%3C%2Fstrong%3E%20text.%3C%2Fp%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22udn8t%22%7D"></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F5sqnq7fhd7r4e_7aa815a5e8bb4a08b7541063ca841c4e.png%22%2C%22originWidth%22%3A584%2C%22originHeight%22%3A336%2C%22name%22%3A%2284ab265649c04dc38cb5a1299e60b491.png%22%2C%22size%22%3A41379%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A584%2C%22height%22%3A336%7D"></span></div><h3 id="pG331">9.2 斜体标签：<i> 和 <em></h3><div><i> 标签用于为文本设置斜体样式。</div><div><em> 标签表示强调文本，通常以斜体显示，具有更强的语义化。 示例代码：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Cp%3EThis%20is%20%3Ci%3Eitalic%3C%2Fi%3E%20text.%3C%2Fp%3E%5Cn%3Cp%3EThis%20is%20%3Cem%3Eemphasized%3C%2Fem%3E%20text.%3C%2Fp%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22nvlKG%22%7D"></div><div><br /></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F5sqnq7fhd7r4e_b18877cc0fe94d1cae3d206bbc3c36d0.png%22%2C%22originWidth%22%3A488%2C%22originHeight%22%3A324%2C%22name%22%3A%22bd92d6c69d9f4051a1590bc64f53aa41.png%22%2C%22size%22%3A40244%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A488%2C%22height%22%3A324%7D"></span></div><div>9.3 下划线标签：<u></div><div><u> 标签用于为文本添加下划线。 示例代码：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Cp%3EThis%20is%20%3Cu%3Eunderlined%3C%2Fu%3E%20text.%3C%2Fp%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22MPUmU%22%7D"></div><div><br /></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F5sqnq7fhd7r4e_b8d64e0dd0924282b1985bf74023e0c1.png%22%2C%22originWidth%22%3A630%2C%22originHeight%22%3A284%2C%22name%22%3A%22883532bfe1bb44c7a408a343d7080d80.png%22%2C%22size%22%3A38735%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A630%2C%22height%22%3A284%7D"></span></div><div>9.4 删除线标签：<s> 和 <del></div><div><s> 标签用于为文本添加删除线。</div><div><del> 标签表示已被删除的文本，通常以删除线显示，用于表示删除或过时的内容。 示例代码：</div><div><div>This is <s>strikethrough</s> text.</div></div><div><div>This is <del>deleted</del> text.</div></div><div><br /></div><div><br /></div><div>9.5 上标<span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F5sqnq7fhd7r4e_6ca1b2906acf45b6a098feb07da47a37.png%22%2C%22originWidth%22%3A542%2C%22originHeight%22%3A360%2C%22name%22%3A%221a065cb9b8884282b05b366c4e42cbc7.png%22%2C%22size%22%3A42768%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A542%2C%22height%22%3A360%7D"></span>和下标标签：<sup> 和 <sub></div><div>标签用于将文本设置为上标，通常用于表示指数、上标数字等。</div><div>标签用于将文本设置为下标，通常用于表示化学式、数学公式等。 示例代码：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Cp%3EThis%20is%20superscript%3A%20X%3Csup%3E2%3C%2Fsup%3E%3C%2Fp%3E%5Cn%3Cp%3EThis%20is%20subscript%3A%20H%3Csub%3E2%3C%2Fsub%3EO%3C%2Fp%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22d9B8j%22%7D"></div><div><br /></div><div>这些文字格式化标签可以通过CSS样式进行进一步的定制和美化，以满足网页设计的需求。记住，在实际开发中，应尽量避免滥用格式化标签，优先考虑使用CSS来控制文本样式。</div><div><br /></div><h1 id="eiDoH">10. 表单标签</h1><div>表单标签在HTML中扮演着关键的角色，用于创建用户交互性的表单，使用户能够输入数据并将其提交给服务器进行处理。下面是一些常用的表单标签的详细介绍：</div><div><br /></div><div>10.1 <form> 标签：</div><div>简介：<form> 标签用于创建表单，它包含了用户输入数据的一组元素。</div><div><br /></div><div>特点：表单可以通过设置不同的属性来指定数据提交的目标和方式。</div><div><br /></div><div>示例代码：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Cform%20action%3D%5C%22%2Fsubmit-form%5C%22%20method%3D%5C%22POST%5C%22%3E%5Cn%20%20%3C!--%20%E8%A1%A8%E5%8D%95%E5%85%83%E7%B4%A0%20--%3E%5Cn%3C%2Fform%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%226Y8Ac%22%7D"></div><div><br /></div><div>10.2 <input> 标签：</div><div>简介：<input> 标签用于创建不同类型的输入字段，如文本框、复选框、单选按钮等。</div><div><br /></div><div>特点：通过不同的 type 属性值，可以定义不同的输入字段类型。</div><div><br /></div><div>示例代码：</div><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Cinput%20type%3D%5C%22text%5C%22%20name%3D%5C%22username%5C%22%20placeholder%3D%5C%22%E7%94%A8%E6%88%B7%E5%90%8D%5C%22%3E%5Cn%3Cinput%20type%3D%5C%22password%5C%22%20name%3D%5C%22password%5C%22%20placeholder%3D%5C%22%E5%AF%86%E7%A0%81%5C%22%3E%5Cn%3Cinput%20type%3D%5C%22checkbox%5C%22%20name%3D%5C%22remember%5C%22%20id%3D%5C%22remember%5C%22%3E%5Cn%3Clabel%20for%3D%5C%22remember%5C%22%3E%E8%AE%B0%E4%BD%8F%E6%88%91%3C%2Flabel%3E%5Cn%3Cinput%20type%3D%5C%22radio%5C%22%20name%3D%5C%22gender%5C%22%20value%3D%5C%22male%5C%22%3E%20%E7%94%B7%5Cn%3Cinput%20type%3D%5C%22radio%5C%22%20name%3D%5C%22gender%5C%22%20value%3D%5C%22female%5C%22%3E%20%E5%A5%B3%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22JeshG%22%7D"></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F5sqnq7fhd7r4e_df10a1a2f7824636a3196b34c1f814e2.png%22%2C%22originWidth%22%3A1146%2C%22originHeight%22%3A264%2C%22name%22%3A%22323985c52ab54df5acc60a88e376eeab.png%22%2C%22size%22%3A63302%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A1146%2C%22height%22%3A264%7D"></span></div><div><br /></div><div>input标签不同的type的意义：</div><div><br /></div><div>type 属性 描述 示例</div><div>text 单行文本输入框 <input type="text"></div><div>password 密码输入框 <input type="password"></div><div>number 数字输入框 <input type="number"></div><div>email 邮箱输入框 <input type="email"></div><div>tel 电话号码输入框 <input type="tel"></div><div>url URL输入框 <input type="url"></div><div>date 日期选择器 <input type="date"></div><div>time 时间选择器 <input type="time"></div><div>datetime 日期时间选择器 <input type="datetime"></div><div>checkbox 多选框 <input type="checkbox"></div><div>radio 单选框 <input type="radio"></div><div>file 文件上传 <input type="file"></div><div>submit 提交按钮 <input type="submit"></div><div>10.3 <label> 标签：</div><div>简介： 标签用于为表单元素创建标签描述，提供可点击的标签文本。</div><div><br /></div><div>特点：通过将 元素与 元素关联，可以通过点击标签来聚焦到相关的表单字段。</div><div><br /></div><div>示例代码：</div><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Clabel%20for%3D%5C%22username%5C%22%3E%E7%94%A8%E6%88%B7%E5%90%8D%EF%BC%9A%3C%2Flabel%3E%5Cn%3Cinput%20type%3D%5C%22text%5C%22%20id%3D%5C%22username%5C%22%20name%3D%5C%22username%5C%22%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22EJD2b%22%7D"></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F5sqnq7fhd7r4e_f030e7fd45fc4b219015aecad04c9a8f.png%22%2C%22originWidth%22%3A618%2C%22originHeight%22%3A246%2C%22name%22%3A%22d8783002a1904088a858190c16967b31.png%22%2C%22size%22%3A35346%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A618%2C%22height%22%3A246%7D"></span></div><div><br /></div><div>10.4 <select> 和 <option> 标签：</div><div>简介：<select> 标签用于创建下拉列表，<option> 标签定义下拉列表中的选项。</div><div><br /></div><div>特点：用户可以从预定义的选项中选择一个值。</div><div><br /></div><div>示例代码：</div><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Cselect%20name%3D%5C%22country%5C%22%3E%5Cn%20%20%3Coption%20value%3D%5C%22china%5C%22%3E%E4%B8%AD%E5%9B%BD%3C%2Foption%3E%5Cn%20%20%3Coption%20value%3D%5C%22us%5C%22%3E%E7%BE%8E%E5%9B%BD%3C%2Foption%3E%5Cn%20%20%3Coption%20value%3D%5C%22uk%5C%22%3E%E8%8B%B1%E5%9B%BD%3C%2Foption%3E%5Cn%3C%2Fselect%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22is2kz%22%7D"></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F5sqnq7fhd7r4e_928191a8151a45e78370f10434a69ad7.png%22%2C%22originWidth%22%3A678%2C%22originHeight%22%3A348%2C%22name%22%3A%22cd875aa2ede841f3a0a0b77e53358a58.png%22%2C%22size%22%3A69866%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A678%2C%22height%22%3A348%7D"></span></div><div>10.5 <textarea> 标签：</div><div>简介：<textarea> 标签用于创建多行文本输入框。</div><div><br /></div><div>特点：可以用于输入大段的文本或多行内容。</div><div><br /></div><div>示例代码：</div><div><br /></div><div><textarea name="message" rows="4" cols="40">

10.6  标签：

简介： 标签用于创建可点击的按钮。

特点：可以用于提交表单、重置表单或执行自定义的JavaScript操作。

示例代码：

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button" onclick="myFunction()">点击我</button>

这些是一些常用的表单标签，它们可以结合使用来创建丰富和交互性强的表单。通过使用这些标签以及适当的属性和事件处理，可以实现数据的输入、验证和提交。

11.
标签：

简介：
标签用于在文本中创建换行效果。

特点：
标签是一个空标签，不需要闭合标签。

示例代码：

<p>This is the first line.<br>
This is the second line.</p>

12. 特殊字符

总结

本篇文章详细的介绍了html常用标签的特点，展现，属性以及应用等方面，希望能够帮助零基础小白快速入门html，也可以作为大家查询html常用标签如何使用的检索工具。如果觉得写的不错，请给小豪点个关注吧！