HTML：从 “小白” 到 “标签侠” 的修炼手册

一、HTML：网页的 “骨架” 不是骷髅架

二、文本标签：文字的 “华丽变身” 术

1. 标题标签：文字界的 “领导班子”

2. 段落标签：文字的 “专属保姆”

3. 文本格式化标签：给文字 “穿花衣”

三、链接标签：网页的 “传送门”

四、图像标签：给网页 “贴照片”

五、列表标签：让内容 “排好队”

1. 无序列表：“一群没序号的兄弟”

2. 有序列表：“排好队，按号来”

3. 定义列表：“名词解释小专家”

六、表格标签：数据的 “整齐家”

七、表单标签：和用户 “聊聊天”

1. 表单的基本结构

2. 常见的表单控件

八、div 和 span：网页布局的 “万能砖”

九、HTML5 新特性：让网页 “更聪明”

1. 语义化标签

2. 新增的表单控件

3. 多媒体标签

十、HTML 常见问题和小技巧

1. 注释：代码的 “说明书”

2. 字符实体：特殊字符的 “替身”

3. 文档类型声明

4. 编码方式

5. 标签的嵌套规则

十一、实战演练：制作一个简单的个人介绍页

十二、总结：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><input type="text" id="username" name="username" placeholder="请输入用户名">

label标签和input标签通过for和id关联起来，点击label也能聚焦到对应的输入框，很方便。placeholder属性是输入框里的提示文字，用户输入后就会消失。

密码输入框：<input type="password">，输入的内容会显示为圆点或星号，保护隐私。

<label for="password">密码：</label><input type="password" id="password" name="password" placeholder="请输入密码">

单选按钮：<input type="radio">，让用户从多个选项中选一个。

性别：<input type="radio" id="male" name="gender" value="male" checked><label for="male">男</label><input type="radio" id="female" name="gender" value="female"><label for="female">女</label>

同一组单选按钮的name属性必须相同，这样才能实现 “选一个” 的效果。checked属性表示默认选中。

复选框：<input type="checkbox">，让用户从多个选项中选多个。

爱好：<input type="checkbox" id="reading" name="hobby" value="reading"><label for="reading">读书</label><input type="checkbox" id="sports" name="hobby" value="sports" checked><label for="sports">运动</label><input type="checkbox" id="music" name="hobby" value="music"><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">，点击会提交表单。

<input type="submit" value="提交"><button type="submit">提交表单</button>

重置按钮：<input type="reset">，点击会把表单控件恢复到默认值。

<input type="reset" value="重置">

八、div 和 span：网页布局的 “万能砖”

<div>和<span>是两个非常常用的标签，它们本身没有特殊的含义，主要用来划分网页区域，方便后续用 CSS 进行样式设置。

<div>是块级元素，会独占一行，就像一堵墙，把内容和其他元素隔开。

<div style="background-color: red; height: 100px; width: 100px;">我是一个div，我占一整行</div><div style="background-color: blue; height: 100px; width: 100px;">我是另一个div，我也占一整行</div>

<span>是行内元素，不会独占一行，只会占据自身内容的宽度，就像一个标签，贴在文字旁边。

<p>这是一段文字，<span style="color: red;">这里的文字是红色的</span>，其他文字是默认颜色。</p>

在实际开发中，我们经常用<div>来划分大的区域，比如头部、导航栏、内容区、底部等；用<span>来处理行内的局部内容。

九、HTML5 新特性：让网页 “更聪明”

HTML5 带来了很多新的特性和标签，让网页功能更强大，开发更方便。

1. 语义化标签

以前我们都用<div>来划分区域，但这样的代码语义不够清晰。HTML5 新增了一些语义化标签，让代码更易读，也更利于搜索引擎解析。

<header>：页面或区域的头部，通常包含标题、logo、导航等。

<nav>：导航栏，包含链接列表。

<main>：页面的主要内容区域，一个页面通常只有一个<main>。

<article>：独立的文章内容，比如博客文章、新闻报道等。

<section>：页面中的一个区块，通常包含一个标题和相关内容。

<aside>：侧边栏，和主要内容相关的辅助信息，比如广告、推荐文章等。

<footer>：页面或区域的底部，通常包含版权信息、联系方式等。

<header><h1>我的博客</h1><nav><ul><li><a href="#">首页</a></li><li><a href="#">文章</a></li><li><a href="#">关于我</a></li></ul></nav></header><main><article><h2>HTML5语义化标签的好处</h2><p>...</p></article><aside><h3>推荐文章</h3><ul><li><a href="#">CSS布局技巧</a></li><li><a href="#">JavaScript入门</a></li></ul></aside></main><footer><p>© 2023 我的博客 版权所有</p></footer>

这样的代码是不是比全是<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><input type="email" id="email" name="email"><br><label for="url">网址：</label><input type="url" id="url" name="url"><br><label for="age">年龄：</label><input type="number" id="age" name="age" min="0" max="120" step="1"><br><label for="birthday">生日：</label><input type="date" id="birthday" name="birthday"><br><label for="favcolor">喜欢的颜色：</label><input type="color" id="favcolor" name="favcolor"><br><input type="submit" value="提交"></form>

这些控件自带验证功能，省了我们不少事呢！

3. 多媒体标签

HTML5 新增了<video>和<audio>标签，让在网页中嵌入视频和音频变得非常简单，不用再依赖第三方插件了。

视频：<video>

<video src="movie.mp4" controls width="600" height="400">您的浏览器不支持视频标签。</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>

<audio src="music.mp3" controls>您的浏览器不支持音频标签。</audio>

和视频标签类似，也可以用source标签提供多种音频格式。

十、HTML 常见问题和小技巧

1. 注释：代码的 “说明书”

在代码中添加注释，可以帮助自己和其他开发者理解代码的含义，注释不会被浏览器解析显示。

<!-- 这是一个注释，我是网页的头部区域 --><header><h1>我的网站</h1></header>

注释可以单行，也可以多行：

2. 字符实体：特殊字符的 “替身”

在 HTML 中，有些字符有特殊含义，比如<和>是标签的开始和结束，如果想在页面上显示这些字符，就需要用字符实体。

常见的字符实体：

<!--这是一个多行注释我是网页的主要内容区域包含文章和侧边栏--><main>...</main>

< 表示 <

> 表示 >

& 表示 &

  表示空格（不换行空格）

® 表示 ®（注册商标符号）

<p>HTML标签用&lt;和&gt;包裹，比如&lt;p&gt;是段落标签。</p><p>这两个词之间有一个&nbsp;&nbsp;&nbsp;空格（三个不换行空格）。</p><p>&copy; 2023 我的网站 版权所有</p>

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>&copy; 2023 小明的个人介绍页 版权所有</p></footer></body></html>

这个页面包含了头部、导航、主要内容区（关于我、我的爱好、联系方式）和底部，用到了我们学过的各种标签：标题、段落、图片、链接、列表、表单、语义化标签等。是不是很有成就感？