目录
[一、HTML：网页的 "骨架" 不是骷髅架](#一、HTML：网页的 “骨架” 不是骷髅架)
[二、文本标签：文字的 "华丽变身" 术](#二、文本标签：文字的 “华丽变身” 术)
[1. 标题标签：文字界的 "领导班子"](#1. 标题标签：文字界的 “领导班子”)
[2. 段落标签：文字的 "专属保姆"](#2. 段落标签：文字的 “专属保姆”)
[3. 文本格式化标签：给文字 "穿花衣"](#3. 文本格式化标签：给文字 “穿花衣”)
[三、链接标签：网页的 "传送门"](#三、链接标签：网页的 “传送门”)
[四、图像标签：给网页 "贴照片"](#四、图像标签：给网页 “贴照片”)
[五、列表标签：让内容 "排好队"](#五、列表标签：让内容 “排好队”)
[1. 无序列表："一群没序号的兄弟"](#1. 无序列表：“一群没序号的兄弟”)
[2. 有序列表："排好队，按号来"](#2. 有序列表：“排好队，按号来”)
[3. 定义列表："名词解释小专家"](#3. 定义列表：“名词解释小专家”)
[六、表格标签：数据的 "整齐家"](#六、表格标签：数据的 “整齐家”)
[七、表单标签：和用户 "聊聊天"](#七、表单标签：和用户 “聊聊天”)
[1. 表单的基本结构](#1. 表单的基本结构)
[2. 常见的表单控件](#2. 常见的表单控件)
[八、div 和 span：网页布局的 "万能砖"](#八、div 和 span：网页布局的 “万能砖”)
[九、HTML5 新特性：让网页 "更聪明"](#九、HTML5 新特性：让网页 “更聪明”)
[1. 语义化标签](#1. 语义化标签)
[2. 新增的表单控件](#2. 新增的表单控件)
[3. 多媒体标签](#3. 多媒体标签)
[十、HTML 常见问题和小技巧](#十、HTML 常见问题和小技巧)
[1. 注释：代码的 "说明书"](#1. 注释：代码的 “说明书”)
[2. 字符实体：特殊字符的 "替身"](#2. 字符实体：特殊字符的 “替身”)
[3. 文档类型声明](#3. 文档类型声明)
[4. 编码方式](#4. 编码方式)
[5. 标签的嵌套规则](#5. 标签的嵌套规则)
[十二、总结：HTML 学习之路永无止境](#十二、总结：HTML 学习之路永无止境)
各位未来的前端大侠们，准备好开启一场爆笑又涨知识的 HTML 之旅了吗？想象一下，当你在浏览器里敲下一串神秘代码，屏幕上就跳出一个酷炫的网页，那种成就感简直比吃到最后一块披萨还爽！今天，咱们就来扒一扒 HTML 的那些事儿，保证让你从 "这啥呀" 变成 "so easy"！
一、HTML：网页的 "骨架" 不是骷髅架
首先，咱得搞明白 HTML 到底是个啥。HTML，全称 HyperText Markup Language，翻译过来就是超文本标记语言。听着挺唬人，其实说白了，它就是用来搭建网页骨架的。就像盖房子，得先有梁有柱有墙，HTML 就是干这个的。
你可别把它当成编程语言，它没有那么多复杂的逻辑，就是一堆标签的组合。这些标签就像积木，你想搭成城堡还是小狗，全看你怎么拼。
咱们先来看一个最基础的 HTML 文档长啥样：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
你好，HTML！
</body>
</html>是不是看起来像那么回事儿了？咱们来逐个拆解一下。<!DOCTYPE html>就像是给浏览器的一张 "身份证"，告诉它："嘿，哥们儿，我是 HTML5 文档，按这个标准来解析我哈！"
<html>标签就像是整个网页的 "大别墅"，所有的内容都得住在里面。<head>标签呢，相当于别墅的 "阁楼"，里面放的都是一些 "幕后英雄"------ 比如网页的标题、编码方式这些信息，它们不直接显示在页面上，但却至关重要。<title>标签就是网页的 "名字牌"，会显示在浏览器的标签栏上，就像你的微信昵称一样，得起个响亮又好记的。
<body>标签就是别墅的 "客厅"，所有想展示给用户看的内容，比如文字、图片、视频啥的，都得放在这里。就像你家客厅里的沙发、电视、地毯，都是给客人看的嘛。
二、文本标签：文字的 "华丽变身" 术
文字是网页的 "主力军"，怎么让它们变得好看又规整呢？这就得靠文本标签来帮忙了。
1. 标题标签：文字界的 "领导班子"
标题标签有<h1>到<h6>，就像公司里的董事长到实习生，级别越高（数字越小），字号越大，分量越重。
<h1>我是大老板（h1）</h1>
<h2>我是部门经理（h2）</h2>
<h3>我是小组长（h3）</h3>
<h4>我是老员工（h4）</h4>
<h5>我是新员工（h5）</h5>
<h6>我是实习生（h6）</h6>在一个网页里，<h1>通常只出现一次，就像一个公司只有一个董事长一样，多了就乱套啦。
2. 段落标签：文字的 "专属保姆"
<p>标签就是段落的 "保姆"，它会给文字自动加上换行和间距，让文字整整齐齐的，看着就舒服。
<p>这是第一段文字，我要在这里讲个小故事。从前有座山，山里有座庙，庙里有个老和尚在给小和尚讲故事...</p>
<p>这是第二段文字，故事还没讲完呢。老和尚说，从前有座山，山里有座庙...</p>要是没有<p>标签，两段文字就会挤在一起，像一群没睡醒的孩子，乱糟糟的。
3. 文本格式化标签：给文字 "穿花衣"
想让文字变粗、变斜、加下划线？没问题，文本格式化标签来帮你！
<p>我是<strong>加粗</strong>的文字，是不是很醒目？</p>
<p>我是<em>斜体</em>的文字，是不是很优雅？</p>
<p>我是<u>下划线</u>的文字，是不是很特别？</p>
<p>我是<del>删除线</del>的文字，就像被划掉的错误答案。</p><strong>和<b>都能让文字变粗，但<strong>更强调语义上的重要性，搜索引擎会更重视它；<em>和<i>都能让文字变斜，<em>也更强调语义。所以在实际开发中，推荐使用<strong>和<em>。
三、链接标签：网页的 "传送门"
在网页上，我们经常需要从一个页面跳到另一个页面，这就像在不同的房间之间穿梭，而链接标签<a>就是那个 "传送门"。
<a href="https://www.baidu.com">去百度逛逛</a>
<a href="page2.html">去页面2看看</a>
<a href="#top">回到顶部</a>href属性就像是 "传送门" 的目的地，它可以是一个网址、一个本地的 HTML 文件，或者是页面内的一个锚点（就像上面例子里的#top，需要在页面顶部定义一个<a name="top"></a>才能生效）。
默认情况下，点击链接会在当前窗口打开新页面。要是想在新窗口打开，只需加上target="_blank"属性：
<a href="https://www.bilibili.com" target="_blank">去B站看视频（新窗口打开）</a>四、图像标签：给网页 "贴照片"
光有文字太单调了，咱们给网页加点图片吧！<img>标签就是干这个的。
<img src="cat.jpg" alt="一只可爱的小猫" width="300" height="200">src属性是图片的 "住址"，告诉浏览器图片在哪儿；alt属性是图片的 "备用说明"，当图片加载不出来的时候，就会显示这个文字，而且对搜索引擎也很友好；width和height分别是图片的宽度和高度，可以用像素（px）或者百分比来设置。
这里有个小窍门：如果只设置宽度或者高度，图片会按比例缩放，不会变形。要是两个都设置，可得小心点，别把图片拉变形了，不然就不好看啦。
还有哦，<img>标签是个 "单身汉"，它没有闭合标签，不像其他标签那样需要成对出现。
五、列表标签：让内容 "排好队"
有时候我们需要展示一系列相关的内容，比如购物清单、步骤说明等，这时候列表标签就派上用场了。列表分为有序列表、无序列表和定义列表三种。
1. 无序列表："一群没序号的兄弟"
无序列表用<ul>标签，里面的每个列表项用<li>标签，默认前面会有个小圆点。
<h3>我的购物清单</h3>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>牛奶</li>
<li>面包</li>
</ul>你还可以通过type属性改变前面的符号，比如disc（默认，实心圆）、circle（空心圆）、square（方块）。
2. 有序列表："排好队，按号来"
有序列表用<ol>标签，每个列表项也是<li>，默认前面是数字序号。
<h3>煮泡面的步骤</h3>
<ol>
<li>烧一壶水</li>
<li>把泡面放进碗里</li>
<li>倒入开水，没过泡面</li>
<li>盖上盖子，等3分钟</li>
<li>打开盖子，放入调料，搅拌均匀</li>
</ol>type属性也能改变序号类型，比如1（数字，默认）、A（大写字母）、a（小写字母）、I（大写罗马数字）、i（小写罗马数字）。
3. 定义列表："名词解释小专家"
定义列表用<dl>标签，里面包含定义术语（<dt>）和定义描述（<dd>），就像字典里的词条和解释。
<dl>
<dt>HTML</dt>
<dd>超文本标记语言，用于创建网页的结构。</dd>
<dt>CSS</dt>
<dd>层叠样式表，用于美化网页的外观。</dd>
<dt>JavaScript</dt>
<dd>一种编程语言，用于实现网页的交互效果。</dd>
</dl>六、表格标签：数据的 "整齐家"
当我们需要展示一些结构化的数据，比如成绩表、产品信息等，表格标签就是最佳选择。
<table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
</tr>
<tr>
<td>小明</td>
<td>90</td>
<td>85</td>
</tr>
<tr>
<td>小红</td>
<td>95</td>
<td>92</td>
</tr>
</table><table>标签是整个表格的 "容器"；border属性用于设置表格边框的宽度，没有这个属性的话，表格边框就不显示了。<tr>标签代表表格的一行，就像一条横线；<th>是表头单元格，文字会自动加粗居中；<td>是普通单元格，用来放具体的数据。
有时候我们需要合并单元格，这时候就要用到colspan（跨列合并）和rowspan（跨行合并）属性了。
<table border="1">
<tr>
<th colspan="2">个人信息</th>
</tr>
<tr>
<td>姓名</td>
<td>小明</td>
</tr>
<tr>
<td rowspan="2">联系方式</td>
<td>电话：123456789</td>
</tr>
<tr>
<td>邮箱：xiaoming@example.com</td>
</tr>
</table>这个例子里，"个人信息" 跨了两列，"联系方式" 跨了两行，是不是很神奇？
七、表单标签：和用户 "聊聊天"
表单是网页和用户交互的重要方式，比如登录页面、注册页面、调查问卷等都离不开表单。
1. 表单的基本结构
表单用<form>标签包裹，里面包含各种表单控件。
<form action="/submit" method="get">
<!-- 表单控件放在这里 -->
<input type="submit" value="提交">
</form>action属性指定表单数据提交的地址；method属性指定提交方式，有get和post两种。get方式会把数据显示在 URL 里，适合提交少量数据；post方式不会显示在 URL 里，更安全，适合提交大量数据或敏感信息。
2. 常见的表单控件
-
文本输入框：<input type="text">，用来输入单行文本。
<label for="username">用户名：</label>
label标签和input标签通过for和id关联起来，点击label也能聚焦到对应的输入框，很方便。placeholder属性是输入框里的提示文字，用户输入后就会消失。
-
密码输入框：<input type="password">，输入的内容会显示为圆点或星号，保护隐私。
<label for="password">密码：</label>
-
单选按钮：<input type="radio">，让用户从多个选项中选一个。
性别：
<label for="male">男</label>
<label for="female">女</label>
同一组单选按钮的name属性必须相同，这样才能实现 "选一个" 的效果。checked属性表示默认选中。
-
复选框：<input type="checkbox">，让用户从多个选项中选多个。
爱好：
<label for="reading">读书</label>
<label for="sports">运动</label>
<label for="music">听音乐</label>
-
下拉列表：<select>和<option>标签组合使用。
<label for="city">城市：</label>
<select id="city" name="city"> <option value="">请选择城市</option> <option value="beijing">北京</option> <option value="shanghai" selected>上海</option> <option value="guangzhou">广州</option> </select>
selected属性表示默认选中的选项。
-
文本域：<textarea>，用来输入多行文本。
<label for="intro">个人简介：</label>
<textarea id="intro" name="intro" rows="5" cols="30" placeholder="请输入个人简介"></textarea>
rows和cols属性分别设置文本域的行数和列数。
-
提交按钮：<input type="submit">或<button type="submit">，点击会提交表单。
<button type="submit">提交表单</button>
-
重置按钮：<input type="reset">，点击会把表单控件恢复到默认值。
八、div 和 span：网页布局的 "万能砖"
<div>和<span>是两个非常常用的标签，它们本身没有特殊的含义，主要用来划分网页区域，方便后续用 CSS 进行样式设置。
-
<div>是块级元素，会独占一行，就像一堵墙，把内容和其他元素隔开。
我是一个div，我占一整行
我是另一个div，我也占一整行
-
<span>是行内元素，不会独占一行，只会占据自身内容的宽度，就像一个标签，贴在文字旁边。
这是一段文字，这里的文字是红色的，其他文字是默认颜色。
在实际开发中，我们经常用<div>来划分大的区域，比如头部、导航栏、内容区、底部等；用<span>来处理行内的局部内容。
九、HTML5 新特性：让网页 "更聪明"
HTML5 带来了很多新的特性和标签，让网页功能更强大，开发更方便。
1. 语义化标签
以前我们都用<div>来划分区域，但这样的代码语义不够清晰。HTML5 新增了一些语义化标签，让代码更易读，也更利于搜索引擎解析。
- <header>：页面或区域的头部，通常包含标题、logo、导航等。
- <nav>：导航栏，包含链接列表。
- <main>：页面的主要内容区域，一个页面通常只有一个<main>。
- <article>：独立的文章内容，比如博客文章、新闻报道等。
- <section>：页面中的一个区块，通常包含一个标题和相关内容。
- <aside>：侧边栏，和主要内容相关的辅助信息，比如广告、推荐文章等。
-
<footer>：页面或区域的底部，通常包含版权信息、联系方式等。
我的博客
HTML5语义化标签的好处
...
这样的代码是不是比全是<div>的代码清晰多了？
2. 新增的表单控件
HTML5 新增了一些专门用途的表单控件，让表单更强大。
- 邮箱：<input type="email">，会自动验证输入的内容是否符合邮箱格式。
- 网址：<input type="url">，验证是否符合网址格式。
- 数字：<input type="number">，只能输入数字，还可以通过min、max、step属性限制范围和步长。
- 日期：<input type="date">，会显示日期选择器。
-
颜色：<input type="color">，会显示颜色选择器。
<form><label for="email">邮箱：</label>
<label for="url">网址：</label>
<label for="age">年龄：</label>
<label for="birthday">生日：</label>
<label for="favcolor">喜欢的颜色：</label>
</form>
这些控件自带验证功能，省了我们不少事呢！
3. 多媒体标签
HTML5 新增了<video>和<audio>标签，让在网页中嵌入视频和音频变得非常简单，不用再依赖第三方插件了。
-
视频：<video>
controls属性会显示播放控制按钮（播放 / 暂停、音量、进度条等）。还可以通过source标签提供多种视频格式，浏览器会自动选择支持的格式。
<video controls width="600" height="400">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
您的浏览器不支持视频标签。
</video>-
音频：<audio>
和视频标签类似，也可以用source标签提供多种音频格式。
十、HTML 常见问题和小技巧
1. 注释：代码的 "说明书"
在代码中添加注释，可以帮助自己和其他开发者理解代码的含义，注释不会被浏览器解析显示。
<!-- 这是一个注释，我是网页的头部区域 -->
<header>
<h1>我的网站</h1>
</header>注释可以单行，也可以多行：
2. 字符实体：特殊字符的 "替身"
在 HTML 中，有些字符有特殊含义，比如<和>是标签的开始和结束，如果想在页面上显示这些字符，就需要用字符实体。
常见的字符实体：
<!--
这是一个多行注释
我是网页的主要内容区域
包含文章和侧边栏
-->
<main>
...
</main>- < 表示 <
- > 表示 >
- & 表示 &
- 表示空格（不换行空格）
- © 表示 ©（版权符号）
-
® 表示 ®（注册商标符号）
HTML标签用<和>包裹，比如<p>是段落标签。
这两个词之间有一个 空格（三个不换行空格）。
© 2023 我的网站 版权所有
3. 文档类型声明
一定要在 HTML 文档的第一行加上<!DOCTYPE html>，告诉浏览器这是一个 HTML5 文档，让浏览器按照正确的标准来解析页面，避免出现兼容性问题。
4. 编码方式
在<head>标签里加上<meta charset="UTF-8">，指定文档的编码方式为 UTF-8，这样可以正确显示各种语言的文字，包括中文，避免出现乱码。
5. 标签的嵌套规则
标签嵌套要合理，比如块级元素可以包含行内元素或其他块级元素，但行内元素一般不能包含块级元素。还有，标签要正确闭合，不能交叉嵌套。
错误的嵌套：
<p>这是一个错误的<span>嵌套</p></span>正确的嵌套：
<p>这是一个正确的<span>嵌套</span></p>十一、实战演练：制作一个简单的个人介绍页
光说不练假把式，咱们来动手做一个简单的个人介绍页，把前面学的知识都用起来。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的个人介绍</title>
</head>
<body>
<header>
<h1>你好，我是小明</h1>
<nav>
<ul>
<li><a href="#about">关于我</a></li>
<li><a href="#hobby">我的爱好</a></li>
<li><a href="#contact">联系方式</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h2>关于我</h2>
<div>
<img src="me.jpg" alt="我的照片" width="200" height="200">
<p>大家好，我叫小明，是一名前端开发爱好者。我喜欢探索各种前端技术，梦想是成为一名优秀的前端工程师，做出漂亮又好用的网页。</p>
<p>我目前正在学习HTML、CSS和JavaScript，计划在半年内掌握这些基础知识，然后学习一些流行的前端框架。</p>
</div>
</section>
<section id="hobby">
<h2>我的爱好</h2>
<ol>
<li>编程：喜欢编写代码，解决各种技术问题。</li>
<li>阅读：喜欢看技术书籍和科幻小说。</li>
<li>运动：喜欢打篮球和跑步，保持身体健康。</li>
<li>旅行：喜欢去不同的地方，感受不同的风土人情。</li>
</ol>
</section>
<section id="contact">
<h2>联系方式</h2>
<form action="/contact" method="post">
<div>
<label for="name">你的名字：</label>
<input type="text" id="name" name="name" required>
</div>
<div>
<label for="message">想对我说的话：</label>
<textarea id="message" name="message" rows="4" cols="30" required></textarea>
</div>
<div>
<input type="submit" value="发送">
</div>
</form>
<p>也可以通过以下方式联系我：</p>
<ul>
<li>邮箱：xiaoming@example.com</li>
<li>微信：xiaoming123</li>
</ul>
</section>
</main>
<footer>
<p>© 2023 小明的个人介绍页 版权所有</p>
</footer>
</body>
</html>这个页面包含了头部、导航、主要内容区（关于我、我的爱好、联系方式）和底部，用到了我们学过的各种标签：标题、段落、图片、链接、列表、表单、语义化标签等。是不是很有成就感？
十二、总结：HTML 学习之路永无止境
恭喜你！看到这里，你已经掌握了 HTML 的基本知识。HTML 虽然简单，但它是前端开发的基石，学好 HTML 是成为一名优秀前端工程师的第一步。
当然，HTML 的知识远不止这些，还有很多高级特性和技巧等着你去探索。比如 SVG 绘图、Canvas 绘图、Web Storage、WebSocket 等 HTML5 的高级特性，都能让你的网页功能更强大。
学习 HTML 最好的方法就是多写多练，多查看官方文档（比如 MDN Web Docs）。遇到问题不要怕，多思考、多搜索、多请教，慢慢你就会发现，HTML 其实很有趣，用它来搭建网页就像搭积木一样，充满了乐趣和创造力。
最后，送大家一句话："罗马不是一天建成的，优秀的网页也不是一天写出来的。" 坚持学习，不断实践，相信你一定能在前端的世界里闯出一片属于自己的天地！