1. 每个页面都少不了的文档骨架：从doctype到head

不管你用记事本写也好，用VS Code、Sublime这类编辑器写也罢，任何一个HTML页面的起点都是同一套固定结构。很多新手第一次打开HTML文件时，看到那几行模板代码会觉得很神秘，甚至直接复制粘贴就完事了。其实这几行代码每一行都有明确的职责，理解了它们，你才算真正迈进了HTML的大门。

先看最标准的骨架长什么样：

<!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>页面标题</title> </head> <body> <!-- 页面内容写在这里 --> </body> </html>

1.1 doctype声明：别小看这行"废话"

<!doctype html>是全篇第一行，它告诉浏览器："请用最新的HTML标准来渲染我。"这句话在HTML5里已经精简到了极致，早年HTML 4.01时期，doctype声明是一长串URL，正常人根本记不住。现在这行代码的作用是强制浏览器进入标准模式（standards mode），而不是兼容模式（quirks mode）。

兼容模式是浏览器为了兼容老网页而保留的"降级渲染"模式，在兼容模式下盒模型、行高、字体大小都可能跟标准模式有差异，同样一份CSS在两个模式下面效果完全不同。如果你发现做的页面在Chrome里正常、在某个老版本浏览器里却错位，先检查一下是不是doctype丢了。实测中我发现，忘记写doctype的页面，在IE时代会出现各种莫名其妙的间距问题，现在主流浏览器虽然宽容一些，但依然建议每次新建页面都从这行开始。

1.2 html和head：页面的"总容器"与"配置区"

<html>标签是文档根元素，所有内容都被它包在里面。lang="zh-cn"属性表示这个页面的主要语言是简体中文，这个属性对屏幕阅读器、浏览器翻译功能、搜索引擎都友好。如果你的页面是英文，就写lang="en"，按实际语言来。

<head>区域是给浏览器和搜索引擎看"配置信息"的，里面的内容不会直接显示在页面上。最关键的三个配置我刚才的模板里已经写出来了。

1.3 meta标签的两个必填项：字符集与视口

第一个<meta charset="utf-8">，解决中文乱码问题。UTF-8是目前最通用的字符编码，能覆盖全世界几乎所有文字。如果漏掉这行，页面在Windows服务器上多半会显示成一片"锟斤拷"乱码。我见过不少新手把HTML文件保存成了GBK编码，然后又在meta里声明utf-8，结果中文还是乱——这里有个常识：meta声明的编码必须跟文件实际保存的编码一致，否则声明等于白写。用VS Code的话，看右下角状态栏就能确认文件编码。

第二个<meta name="viewport" content="width=device-width, initial-scale=1">是移动端适配的基石。它告诉浏览器：页面的宽度跟设备宽度一致，初始缩放比例为1。手机屏幕默认的渲染宽度是980像素（这个值因浏览器而异），没有这行meta的页面在手机上看会先缩小再放大，字小得看不清，用户要手动双指放大。做移动端页面，这行是标配。

<title>是标题栏上显示的文字，也是搜索引擎结果里链接旁边的标题。它的重要性经常被低估——一个清晰、含关键词的title直接关系到页面点击率。页面内可以放多个<meta name="description">来描述页面摘要，搜索引擎有时会直接用它作为搜索结果里的描述文字。

抛开模板本身，我建议每个页面在head里还可以按需加这些东西：<meta name="keywords">（虽然百度权重已降低，但聊胜于无）、<link rel="icon">（自定义浏览器标签页小图标）、外链CSS和JS的标签。这些后面会讲到。

2. 文本与多媒体标签：日常使用频率最高的那一批

骨架搭好了，接下来就要往body里填内容了。文本和多媒体标签是你写页面时使用频率最高的标签，没有之一。掌握了这一批，你就能做出一个结构清晰、图文并茂的静态页面。

2.1 标题与段落：从h1到p的内容层次

HTML里的标题分六级：<h1>到<h6>，数字越小级别越高。一个页面通常只有一个<h1>，它是整页内容的主标题，搜索引擎蜘蛛抓取页面时，最先看的就是h1里写了什么。<h2>到<h6>是各级子标题，用来划分章节。标题标签自带一定的字体大小和加粗效果，但更关键的是语义上的结构作用。

段落用<p>标签。如果你在代码里直接写了几个回车换行，浏览器里是不会换行的——它会忽略连续的空白字符。这是新手最容易踩的第一个坑。换行必须用标签：段落之间用<p>，单行内强制换行用<br>（br是break的缩写，自闭合标签，不需要结束标签）。水平分割线用<hr>，表示内容主题的切换。

文本样式方面，<strong>表示重要内容，浏览器默认加粗显示；<em>表示强调内容，默认斜体。这里我多说一句：<b>和<i>也能实现加粗和斜体，但它们只改变外观，不带有语义，HTML5规范推荐优先使用strong和em。重要的事情再说一遍：HTML的职责是"描述内容是什么"，样式的活儿应该交给CSS。你在HTML里写style="color:red"可以，但这不是好的实践，后面维护起来会很痛苦。

2.2 超链接与图片：a与img的进阶属性

<a>标签创建超链接，核心属性是href。链接的目标可以是站内页面（href="about.html"）、外部网站（href="https://example.com"）、页面内锚点（href="#section2"）甚至电子邮件地址（href="mailto:xxx@example.com"）。

锚点链接很多人不会用。先在目标位置加一个带id的标签，比如<h2 id="section2">第二章</h2>，然后链接写<a href="#section2">跳转到第二章</a>，点击就能直接滚动过去。这在长文档页面里特别好用，也常被用来做"返回顶部"：在页面底部放一个<a href="#top">，然后在body开头随便一个标签上加id="top"，点击就回到顶部了。不过现在更顺滑的做法是用JavaScript的window.scrollTo({top:0, behavior:'smooth'})，这个后面再谈。

target="_blank"表示在新标签页打开链接。这里有个安全细节：加上这个属性后，最好同时加上rel="noopener noreferrer"，新打开的页面无法通过window.opener获取原页面的引用，防止钓鱼攻击，还能在部分浏览器里提高性能。

<img>标签插入图片，src是图片路径，alt是图片无法加载时显示的替代文字。alt不是可选项，它对无障碍访问和SEO都至关重要——搜索引擎无法"看"图片，只能通过alt理解图片内容。图片尺寸用width和height属性指定，建议不要随意省略，因为浏览器知道了宽高，就能在图片加载前预留空间，避免页面布局在图片加载完成时突然跳动（这个现象叫布局偏移，简称CLS，会影响SEO得分）。响应式图片可以加srcset属性让浏览器按屏幕宽度自动选择合适的分辨率，但基础阶段先不展开，知道有这个东西就行。

2.3 列表与布局基本盘：ul、ol、dl和div/span

列表有三种。无序列表<ul>，每一项用<li>包裹，适合做导航菜单、商品列表等不分先后的内容；有序列表<ol>，同样用<li>，但会自动编号，适合教程步骤、排行榜这类有先后顺序的内容；自定义列表<dl>，由<dt>（术语名称）和<dd>（术语描述）组成，适合做名词解释、商品参数这类"名称—值"配对的内容。

<div>和<span>是两个"万金油"标签。<div>是块级元素，独占一行，常用于划分页面的大区块；<span>是行内元素，不会换行，常用于在文本流中圈出一小段做特殊样式。它们本身没有任何语义，纯粹是给CSS和JavaScript提供"钩子"。没有它们，复杂的页面布局就玩不转。不过要注意，能用语义化标签的地方尽量用语义化标签，div用太多就会出现"div山"，代码可读性很差，这个习惯要早点养成。

3. 表格与表单：从展示到交互的关键一步

表格负责把数据排列得整整齐齐，表单负责收集用户输入。这两块是HTML里最"重"的部分，标签多、属性多、注意点也多。但恰恰因为它们复杂，学好了在实战中会非常吃香。

3.1 表格标签实操：table结构拆解与合并单元格

一个完整的表格结构是这样的：

<table> <caption>学生成绩表</caption> <thead> <tr> <th>姓名</th> <th>语文</th> <th>数学</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>92</td> <td>88</td> </tr> <tr> <td>李四</td> <td>85</td> <td>95</td> </tr> </tbody> </table>

<thead>放表头，<tbody>放数据主体，<tfoot>放汇总行。为什么要分这三个部分？第一是语义清晰，第二是浏览器在渲染长表格时，如果表格超过一屏，thead可以在滚动时保持在可视区域，这个特性在处理大量数据时非常实用。<th>是表头单元格，默认加粗居中，<td>是普通单元格。<caption>是表格标题，放在table标签内的第一项。

单元格合并是表格实操里必考的技能。colspan表示横向跨列，比如<td colspan="2">表示这个单元格占两列宽度；rowspan表示纵向跨行。合并的逻辑是：合并后，被跨越的那个单元格要从代码里去掉了，而不是"留个空位"。比如一个3列的表格，第一行第一个单元格写了colspan="2"，那这一行的第二个<td>就不能再写了，否则会多出一列。这里就是个经典踩坑点，新手合并单元格后表格总是莫名多出一行或一列，多半就是没把被合并的那一格删掉。

3.2 表单从零到一：form、input、label的配套使用

表单是页面和用户交互的核心通道。<form>定义了提交区域，关键属性有两个：action（数据提交到哪个地址）和method（用什么方式提交，最常见的是get和post）。method="get"会把数据拼在URL后面，适合搜索等轻量操作；method="post"把数据放在请求体里，适合登录、注册、下单这类涉及隐私或较大数据量的场景。

表单里最常用的是<input>标签，它靠type属性变换形态。type="text"是单行文本框；type="password"是密码框，输入内容以圆点显示；type="email"在提交时会自动校验邮箱格式；type="number"只允许输入数字；type="checkbox"是复选框，可以多选；type="radio"是单选框，同一组单选框必须设置相同的name属性才能实现互斥；type="file"是文件上传框；type="hidden"是隐藏字段，用来携带用户看不到但需要提交的数据。还有一个type="submit"，它是提交按钮。

多行文本用<textarea>，下拉选项用<select>配合<option>：

<select name="city"> <option value="beijing">北京</option> <option value="shanghai">上海</option> </select>

这里我必须重点强调一个新手百分之百会踩的坑：name属性。表单控件的name就是提交时的"字段名"，服务器端靠它来识别哪个值对应什么含义。缺了name的input，用户在浏览器里输入的内容根本不会被提交。我遇到过好几次，页面一切正常，就是提交后服务器收不到数据，最后发现是某个input忘了写name。这个细节，务必在写完表单后逐个检查。

<label>标签用来绑定控件说明文字，有两种用法：一种是<label for="inputId">配合控件的id；另一种是直接把控件包在label里：

<label>用户名 <input type="text" name="username"></label>

加了label的好处是点击文字也能聚焦到输入框，同时对屏幕阅读器友好。

3.3 表单校验与HTML5带来的新控件

HTML5给input增加了一些内置校验能力。required表示必填，不填就无法提交；minlength和maxlength限制长度；min和max限制数值范围；pattern可以用正则表达式校验输入格式，比如手机号：pattern="1[3-9]\d{9}"。这些校验不写任何JavaScript就能在浏览器端拦截大部分错误输入，大大减轻了后端压力。

但要注意，前端校验只是"提升体验"，不能替代后端校验。前端校验可以被绕过，直接构造请求提交到服务器。这个安全常识，做Web开发的人一定要记住。

另外还有几个实用的HTML5新控件：type="date"是日期选择器、type="color"是取色器、type="range"是滑块、type="search"是带清除按钮的搜索框。原生控件在不同浏览器里外观差异很大，但胜在零依赖、稳定可靠。

4. HTML5语义化标签：写给浏览器也写给搜索引擎

HTML4时代，页面上到处都是div，前端工程师之间调侃说"一个页面从头到尾都是div"。div本身没有含义，浏览器和搜索引擎看完一个页面，很难判断哪块是导航、哪块是正文、哪块是页脚。HTML5推出一批语义化标签，就是为了解决这个问题。

4.1 页面结构标签速览与应用场景

<header>通常放站点logo、导航、搜索框等页头内容；<nav>放主导航链接，它是语义化导航的标配；<main>包住页面当前的核心内容，一个页面只允许出现一个main；<article>表示一篇独立文章，比如博客正文、新闻帖子，内容即使挪到别处也成立；<section>用来给内容分块，通常配一个标题；<aside>放侧边栏、广告、相关内容推荐等次要信息；<footer>放版权、联系方式、站点地图等页脚信息。

一个典型的页面结构可以长这样：

<body> <header>站点头部</header> <nav>导航菜单</nav> <main> <article> <h1>文章标题</h1> <p>正文内容</p> </article> <aside>相关推荐</aside> </main> <footer>版权信息</footer> </body>

语义化标签本身不会让你的页面变好看，它们不改样式。但好处是隐性的：搜索引擎能更快理解你的页面结构，对SEO有益；屏幕阅读器能按语义跳转导航，方便视障用户；团队的另一个前端接手你的代码，一眼就能看出布局意图，不用从头到尾翻样式。

4.2 增强型标签：figure、details与summary

<figure>用来包裹配图、图表、代码片段等独立内容，<figcaption>是它的标题。这个组合比单纯的div+img更语义化，搜索引擎能识别图文对应关系。

<details>和<summary>搭配实现"点击展开收起"的效果，不需要写一行JavaScript：

<details> <summary>查看更多</summary> <p>这里是被折叠的详细内容。</p> </details>

点击summary，下面的内容就展开；再点一次就收起。这个小功能使用场景很多：FAQ问答、文章摘要、产品参数折叠。原生实现即可，跨浏览器兼容性在主流浏览器里已经没问题。

4.3 不要为了语义化而语义化

语义化标签用起来有一个大原则：不要为了用而用。如果一个标题只是视觉上长得像标题，但内容上根本不是标题，那就别用h标签，直接用样式。同样，如果有三两个无关紧要的边栏内容，强行套一个aside反而奇怪。语义化的本质是让标签和内容的真实含义相匹配，而不是机械地套模板。

另外，div和span依然有它们的用武之地。当你需要一个纯样式容器、没有任何语义含义时，div依然是最合适的选择。语义化标签解决的是"让机器理解结构"的问题，div解决的是"给样式一个挂载点"的问题，两者并存不冲突。

5. 常用标签速查表与周边场景实战心得

理论说了一堆，最后给一张速查表，平时写到一半想不起来某个标签时，直接翻这里就行。然后我再聊聊标签在实际场景里怎么配合周边工具链，这部分经验是我自己踩坑踩出来的，网上教程一般不会写。

5.1 高频标签速查表

这里补充几个容易被忽略的细节。<button>在form里如果不写type，默认值是type="submit"，也就是说你随手放一个button在表单里，点击它就会触发提交。我见过有人在表单里放了一个"重置"按钮，因为没写type="button"，点击后整个表单数据全被清空了，用户气得跳脚。正确做法是：普通按钮明确写type="button"，提交按钮明确写type="submit"，不要依赖默认值。

5.2 围绕标签的周边工具：从HTML转Markdown到PDF导出

基础标签学会以后，你会发现在实际工作中经常要和各种HTML处理场景打交道。比如"HTML转Markdown"，很多人写文档时想把一个网页内容转成MD格式，网上可以直接搜索pandoc工具，一条命令搞定：

pandoc input.html -o output.md

这背后的原理是：pandoc内部解析HTML的标题、段落、列表等语义化标签，然后映射成Markdown语法。你会发现，HTML写得越规范（用h1-h6、p、ul这些语义化标签），转换的结果越干净。如果原页面从头到尾都是div，转换工具根本无从判断哪些是标题、哪些是正文，整个Markdown就会乱成一锅粥。这也是我前面反复强调语义化的另一个现实回报。

再比如"HTML转PDF加水印"，Java生态里常用iText7，基本的思路是先用HtmlConverter把HTML转成PDF文档，然后遍历每一页，调用绘图接口在页面中叠加半透明文字作为水印。这类库对HTML的兼容程度各不相同，有的支持CSS 2.1，有的支持部分CSS 3，遇到复杂布局很容易错位。经验是：越是"简单规整"的HTML，转换成功率越高，CSS里尽量少用flex和grid这类现代布局，多用表格和float的老实写法，PDF转换效果反而更稳定。

5.3 本地调试HTML的常用方式

你写好的HTML文件，双击用浏览器打开就能预览，文件路径以file://协议加载。但这种方式有一个局限：如果用到了Fetch API、ES6模块、某些浏览器的dedicated worker，file://协议下会报跨域错误。解决办法是用本地静态服务器。

如果你装了Python，一条命令就能开启：

python3 -m http.server 8000

然后浏览器访问http://localhost:8000就能看到当前目录下的文件。这个方案零依赖、跨平台，我用了好多年。Node.js用户可以用npx serve，同样方便。在Linux环境（比如Ubuntu）下如果不想装IDE，直接用系统自带的文本编辑器（如gedit、nano）写代码，然后配合浏览器实时刷新预览，对初学者来说完全够用。

5.4 pyqt5显示HTML、打包多个HTML等实际需求

有朋友在桌面应用里用PyQt5显示HTML，主要用到QTextBrowser控件，它自带setHtml()方法可以加载HTML字符串，setSource()可以加载本地HTML文件。这里有个经验：QTextBrowser对CSS的支持有限，CSS3的新特性如flex、grid在桌面控件里效果不如浏览器渲染得好。所以在桌面端显示HTML时，建议用表格布局加基础CSS，老老实实写最兼容的那些标签。

"打包多个HTML"的需求，本质是组织静态资源。最简单的做法是保持目录结构不变，把HTML、CSS、JS、图片统一放在一个文件夹里，相对路径引用。如果要做成一个单文件分享给别人，可以用构建工具把多个页面内联进一个HTML，或者用data URI把图片编码进HTML里。在浏览器地址栏输入data:text/html,<h1>你好</h1>，可以直接把一小段HTML源码当成URL打开预览，这个技巧适合临时调试，但注意URL长度有限，别放太大段的内容。

6. 常见问题与排查技巧实录

学习HTML的过程中，会遇到一批"经典问题"。我挑几个出现频率最高的，讲讲排查思路和解决方法。

6.1 中文乱码的根源与解决

现象：页面打开后中文全是"锟斤拷"或者"ä½ å¥½"这种乱码。

原因几乎只有一个：浏览器解码时使用的字符集跟文件实际编码不一致。排查步骤：

1. 确认HTML文件保存时用的编码。VS Code点击右下角的编码按钮（如UTF-8）可以查看和切换。
2. 确认<meta charset>声明的编码和文件保存编码一致。
3. 如果以上两步都没问题，检查服务器返回的响应头。用浏览器开发者工具切换到Network面板，查看文档请求的响应头里Content-Type字段，如果服务器强制返回了charset=ISO-8859-1之类的值，浏览器会优先使用响应头而不是meta里的声明。解决办法是在服务器配置里正确设置字符集。

Windows用户特别容易踩这个坑：系统记事本保存文件时默认可能是ANSI（GBK）编码，而HTML里写的charset却是utf-8，结果必然乱码。用记事本保存时，在"另存为"对话框里要手动把编码选成UTF-8。

6.2 图片显示不出来的三种原因

img标签写了，图片却不显示，排查顺序是：

1. 检查路径。相对路径是相对于当前HTML文件所在的目录，不是相对于网站根目录。src="../images/logo.png"的..是上一级目录，这个最容易搞错。
2. 检查文件名后缀的大小写，以及文件名里的空格。Logo.PNG和logo.png在Windows上可能可以显示，但在Linux服务器上就是两个不同的文件。文件名里尽量不要用中文和空格，服务器兼容性会好很多。
3. 检查文件权限。服务器上的图片目录如果权限不对，浏览器会返回403。本地打开文件时一般不会遇到这个问题。

还有一个常见坑：alt文字显示出来了，但图片没显示，说明图片压根没加载成功。此时按F12打开开发者工具，看Console报错信息，能直接看到加载失败的具体原因。

6.3 表单提交后收不到数据

表现：点击提交按钮，页面跳转到了action地址，但服务端收到的数据是空的。

九成原因是表单控件缺少name属性。input、textarea、select都必须有name才会把值提交上去。还有一成原因是用<button>提交时，这个button自己也有个name和value，会被一起提交上去，如果和业务逻辑冲突也会造成干扰。

如果是用get方式提交，留意地址栏URL后面的参数：?username=abc&age=20。每一个参数都是"name=value"的形式，对照检查就知道哪些字段没提交上来。用post方式时，看开发者工具的Network面板，在请求的Form Data部分能看到提交的字段列表。

6.4 样式与布局错乱的通用排查思路

页面效果和预期不符，先打开开发者工具（F12），定位到出问题的元素，右侧Styles面板会列出全部生效的CSS规则。排查顺序：

1. 检查元素是否被其他样式覆盖了。CSS的覆盖规则是"后加载的在前"、"更具体的选择器优先"、"内联样式优先"，按这个顺序找原因。
2. 检查盒模型。display、width、padding、border、margin，任何一个变化都会影响实际占据的空间。开发者工具的Computed面板能看到最终计算出来的盒模型，长宽一目了然。
3. 检查布局方式。flex和grid布局里，子元素默认行为跟普通元素完全不同，很多"多出来的空白"、"对不齐"问题都出自这里。

如果CSS样式的优先级没问题，盒模型也对，但看起来还是不对，那就逐层删元素，删一个看一次效果，能很快缩小问题范围。这个方法土，但比我见过很多所谓的高级调试技巧都管用。

6.5 一张表总结高频问题

最后再分享一个个人习惯：我每写完一个页面，都会右键选择"查看网页源代码"，从头到尾读一遍自己写的HTML标签，检查标签闭合是否完整、嵌套是否合理、语义化是否到位。这个动作只需要几分钟，但极大地减少了我后期排错的时间。HTML这种标着"简单"的科目，恰恰是最能在细节上拉开差距的——标签写得规范不规范，别人拿过去看几秒钟就能判断出你的功底。