企业官网建设流程全解析

写HTML的第四天，很多教程会告诉你该学CSS了，但我想岔开一下：第四天恰恰是把前三天学的零碎标签“组装”成一个完整结构的关键节点。这一天的内容不是背新标签，而是理解标签之间的关系、文档的骨架、以及一个HTML文件如何在浏览器里被“读”出来。这篇文章记录的就是我第四天的完整学习路径，包含表格、表单、多媒体标签的实战细节，以及几个搜索热度很高但你未必真正搞懂的知识点——比如<!DOCTYPE html>那一长串开头到底是什么、为什么中文会乱码、为什么很多网页源码长得一模一样。如果你正好在自学HTML，想从“会写几个标签”过渡到“能独立搭出一个像样的静态页面”，这篇内容应该对你有用。

1. 第四天该学什么：从堆放标签到搭建结构

前三天我基本处于“认识食材”的阶段：<h1>代表标题、<p>代表段落、<a>代表链接、<img>代表图片，每个标签单独拿出来都知道是干嘛的，但一动手写整个页面就不知道从哪里下手。第四天我开始意识到，HTML真正的难点不在于记住标签，而在于搞清楚页面到底分了哪几个部分、每个部分里放什么、标签之间怎么嵌套才不算错。

我后来总结了一个特别直白的标准：前三天是让自己“见标签认得出来”，第四天要让自己“看到一个完整网页能说出它的结构层次”。怎么训练？拿着任意一个网站首页，不看源码，先用笔在纸上框出顶部导航、中间内容区、侧边栏、底部版权信息，然后再打开浏览器的开发者工具，对照自己框出来的结构去看真实的HTML层级。我试了几个常见的网站页面，发现所有的网页都逃不出“头部、主体、底部”这个框架，而主体里又是“一篇文章一个区块、一组图片一个区块”的重复模式。这种感觉一旦建立起来，后面学什么东西都有地方安放。

还有一个很重要的事情是，第四天应该开始接触表格和表单。这两个东西在纯展示型网页里看起来不那么显眼，但它们是HTML里少见的“有交互潜质”的标签。尤其是表单，它是用户和网站产生联系的主要入口——搜索框、登录框、注册页面、问卷，底层全是表单那一套。我第四天把表格和表单练完之后，再看任何一个页面的源码，思路就完全不一样了：我看的不再是单个标签，而是这个区块用了什么结构、那个输入框是怎么跟后端对接的。

所以如果你也在按天规划学习进度，我建议第四天不要急着学CSS美化。先把结构理清楚，把表格和表单这两个“硬骨头”啃完，后面加样式的时候你才知道样式该打在哪个容器上。这是我自己走下来觉得最值得调整学习顺序的地方。

1.1 前三天的基础清单

在进入第四天之前，我先把前三天学的东西简单梳理一遍，确保自己不是“夹生饭”状态：

• 文本标签：<h1>到<h6>、<p>、<br>、<hr>、<strong>、<em>、<blockquote>、<pre>
• 链接与图片：<a>的href属性、<img>的src和alt属性
• 列表：无序列表<ul>、有序列表<ol>、自定义列表<dl>
• 基础的区块标签：<div>和<span>，以及它们在外观上的区别

这些内容如果还没练熟，不建议直接跳到第四天。表格和表单的练习里会反复用到这些标签——比如表单里要用<p>或<div>来分组控件，表格的说明文字要用到文本标签。基础不牢的话，第四天会卡得很痛苦。

1.2 建立“结构思维”的入门练习法

我的练习方法很简单：打开一个资讯类的网页，按F12打开开发者工具，找到Elements面板，从<html>开始一层一层往下展开。不看CSS，只看HTML结构。你会发现<head>里全是元信息，<body>里才是用户看得见的东西。然后把<body>里的内容大致分为几大块：顶部导航是一块，轮播图是一块，新闻列表是一块，页脚是一块。每一块对应一个<div>或者HTML5的语义标签比如<header>、<nav>、<main>、<footer>。

这个练习每天花二十分钟，做三天左右，你对“结构”的感觉就会完全不一样。后面我自己写页面，脑子里会先出现一个框架图，然后才动手写代码——这个过程很自然，不是刻意学的，就是看多了之后形成的习惯。

2. 文档骨架与<!DOCTYPE html>：为什么每个网页开头都长一样

第四天的第一个深挖点，就是几乎每次搜索HTML相关内容都会见到的那串代码：

<!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> <!-- 页面内容 --> </body> </html>

网上搜HTML教程，几乎每个代码片段开头都是这一串。我第一天是直接复制粘贴用，根本没过脑子。到了第四天我才认认真真把每一行的含义查了一遍，才发现这里面藏着不少门道。

这串“模板”里最关键的是文档类型声明<!DOCTYPE html>。它的作用是告诉浏览器：你按现代HTML标准来解析这个文件。如果没有这一行，有些浏览器会进入一种叫“怪异模式”的兼容状态，同样的CSS写出来显示得七歪八扭。所以<!DOCTYPE html>必须放在HTML文件的第一行，前面不能有任何字符，连空格都不行。我后来遇到一个页面怎么调都错位，最后发现就是文件开头被某些编辑器自动加了一个UTF-8的BOM头，导致DOCTYPE识别失效。这个坑属于不自己踩一次根本想不到的类型。

<html lang="zh-cn">这一行里的lang属性，很多初学者会忽略。它是声明页面内容的主要语言，方便屏幕阅读器和翻译工具按正确的语言规则来处理页面。比如zh-cn代表简体中文，en代表英文。值写错不会影响显示效果，但会让无障碍工具的表现变得奇怪。我自己的习惯是页面是什么语言就用对应的lang值，细心一点总没错。

<meta charset="utf-8">则是中文乱码问题的关键。字符编码决定文本在计算机里怎么存、怎么读。UTF-8是现在全世界的通用编码，支持中文、日文、韩文、emoji等等几乎所有字符。如果这个声明缺失，浏览器可能会用系统默认的编码去解读文件，中文就容易变成乱码。第四天我自己做过一个实验：把这一行删掉刷新页面，中文果然成了一堆乱码。写HTML文件，<meta charset="utf-8">一定不能省。

另外很多人搜索时会看到<meta name="viewport" content="width=device-width, initial-scale=1.0">，这是做移动端适配的基础。不写这一行，手机浏览器会按桌面宽度渲染页面再整体缩小，字会小得看不清。写上之后，页面宽度会跟随手机屏幕宽度，浏览体验就正常了。现在再做网页，不管有没有CSS，我都习惯性把这一行带上。

2.1 head区域里还藏着哪些“看不见但重要”的标签

除了charset和viewport，<head>区域还经常出现这些标签：

• <title>：浏览器标签页上显示的文字，也是搜索结果里的大标题。每个页面都该有独立且描述准确的<title>。
• <meta name="description" content="页面简介">：页面的描述信息，搜索引擎在展示结果时经常把这段文字拿来当摘要。
• <link rel="icon" href="favicon.ico">：设置浏览器标签页上的小图标，也就是俗称的网站图标。
• <style>：在页面里直接写CSS样式的标签，虽然现在更推荐用外部样式表，但学习阶段临时写点样式很方便。
• <script>：引入JavaScript的标签，可以写在<head>里也可以写在<body>底部，各有不同的加载时机。

这些标签都不产生可见内容，但它们共同决定了一个页面的“身份信息”。我后续学习SEO的时候发现，很多搜索引擎优化工作其实就是把这些meta标签写到位。所以别小看head区域，它虽然看不见，却是页面质量的一部分。

2.2 解谜高频搜索串：那些一长串的HTML代码到底怎么来的

看热搜词里有一大堆长得很像的代码串，比如<!doctype html><html lang="zh-cn"><head><meta charset="utf-8">...，这说明很多人在网上复制代码片段时，把整个文档骨架一起复制走了。这个现象本身很值得聊一下。

当一个代码片段被人反复复制传播时，它默认包含一个完整的文档结构是最省事的——拿到任何地方都能直接运行。所以你在各种代码分享网站上看到的HTML示例，几乎都带着<!DOCTYPE html>到</html>的完整五件套。这对学习者是好事，可以少写很多模板代码；但也有一个坏处，就是很多人复制习惯了，连这个结构是由哪些部分组成、各部分能不能省略都说不清楚。

我的建议是：前三天可以复制模板，但第四天开始，每次新建HTML文件都自己动手把骨架敲一遍。敲个三五次之后，这个结构就长在肌肉记忆里了，后面手写出来的代码自然标准。我试过大概一周后，新建文件完全不用思考，手指自己就把骨架打出来了。这个熟练度也是“入门”的隐形标志之一。

还有热搜里的data:text/html这个串，它是我特别喜欢的一个小技巧。在浏览器地址栏输入data:text/html,后面直接跟HTML代码，可以把一段HTML当网页直接渲染出来，不用创建任何文件。比如输入：

data:text/html,<h1>你好</h1><p>这是直接在地址栏渲染的HTML</p>

就能看到效果。这个技巧适合快速调试一个零散标签，或者给别人演示一段HTML行为的时候用。不过要注意中文需要URL编码，不然有些浏览器会显示异常。我自己一般只用来测试纯英文或ASCII的代码片段，中文调试还是老老实实建文件。

3. 表格标签实战：把数据摆放整齐的基本功

表格这个话题在热搜词里出镜率很高，比如“html格式转换wps表格”和“html邮件”。我学表格的时候也是一脸疑惑，总觉得现在网页设计早就用<div>布局了，表格这种东西还有存在的必要吗？学完之后我的答案是：太有必要了，但用途不是你想的那个。

HTML表格是一套完整的标签体系，核心标签有这些：

<table> <caption>学习进度表</caption> <thead> <tr> <th>天数</th> <th>学习内容</th> <th>掌握程度</th> </tr> </thead> <tbody> <tr> <td>第一天</td> <td>文本与段落标签</td> <td>熟练</td> </tr> <tr> <td>第二天</td> <td>链接与图片</td> <td>熟练</td> </tr> <tr> <td>第三天</td> <td>列表与区块</td> <td>熟练</td> </tr> </tbody> </table>

这里面值得注意的点是<thead>和<tbody>。它们的作用是把表格分成“表头”和“表体”。表头里放列标题<th>，表体里放具体数据<td>。搜索引擎和屏幕阅读器会通过这个结构更好地理解表格内容，浏览器默认也会给表头加粗居中样式。虽然不用<thead>只写一行<tr>也能显示，但语义化写法是HTML的根基，后面学CSS时才知道把样式挂在哪里。

表格的合并单元格也是个高频考点。合并列用colspan属性，合并行用rowspan属性。比如一个课程表，语文课横跨两节课，就可以这样写：

<td colspan="2">语文</td>

合并时最容易出问题的，是合并后总列数对不上。每行不管怎么合并，加起来的总列数必须一致，不然表格结构会歪。我第一写合并单元格的时候就是没注意这个，结果表格后面几列全部错位，找了半天才明白是某一行多写了一个单元格。

3.1 为什么邮件和导出场景还在用表格布局

热搜里的“html邮件”和“html格式转换wps表格”其实指向了表格的两个真实应用场景。

先说邮件。大多数人以为HTML邮件就是用普通网页代码发一封邮件，其实不对。主流的邮件客户端，比如Outlook和Gmail，对CSS的支持极差，<div>布局和padding这类属性经常被直接忽略。但表格布局是Table时代的老技术，兼容性极好，几乎所有邮件客户端都能正确渲染。所以在HTML邮件制作领域，表格布局至今是主流方案。你要是做前端相关工作，迟早会遇到“用表格切一个邮件模板”的需求。

再说“html格式转换wps表格”。WPS表格和Excel这类软件，本质上也是表格结构的数据，而HTML表格可以用来在网页上展示这些数据的只读版本。我见过不少后台管理系统，导出的预览页面就是后端直接把数据生成HTML表格输出。学明白HTML表格后，这类需求写起来非常顺手。

3.2 表格样式基础：边框的坑与斑马纹原理

表格在浏览器默认状态下是没有任何边框的，只有数据和表格元素。要加边框，传统写法是在<table>标签上写border="1"属性，但这种写法早已不推荐，现在都用CSS。最基础的表格CSS是这样：

<style> table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #ccc; padding: 8px; } </style>

这里有个特别容易踩的坑：如果不写border-collapse: collapse;，相邻单元格之间会出现双边框，表格看起来有一条条缝隙，非常难看。collapse的意思就是让相邻边框合并为一条。我刚学的时候漏了这行，表格效果惨不忍睹，还以为是标签写错了。

斑马纹，也就是隔行变色，是表格美化最常用的小技巧。用CSS的:nth-child(odd)和:nth-child(even)就能实现：

<style> tbody tr:nth-child(odd) { background-color: #f9f9f9; } </style>

这样奇数行会加一个浅灰背景，数据浏览起来一眼到底，不会看串行。

4. 表单标签深度拆解：从文本输入框到下拉菜单

表单是我第四天花时间最长的部分，也是热搜词里“html——表单类的标签”直接指向的内容。表单的整体结构很简单：

<form action="提交地址" method="get"> <!-- 各种输入控件 --> <button type="submit">提交</button> </form>

action属性是数据提交到的服务器地址，method是提交方式。初学者自己练习时没有服务器，可以让action保持空或者写#，数据不会真正提交，但控件的结构能完整看到。

表单里的控件类型可太多了，我把常用的按类别整理了一下：

控件类型	标签写法	用途
单行文本	<input type="text">	用户名、搜索词、任何单行短文本
密码	<input type="password">	密码输入，显示为圆点
单选	<input type="radio">	多选一
复选	<input type="checkbox">	多选多
数字	<input type="number">	只能输数字
下拉选择	<select><option>	节省空间的选项列表
多行文本	<textarea>	评论、留言、自我介绍
提交按钮	<button type="submit">	提交表单
隐藏字段	<input type="hidden">	携带不需要用户看的固定数据

这里关键要理解的是name属性。表单控件必须写了name，它的值才会被提交到服务器。name相当于数据的字段名，用户输入的内容是字段值。比如：

<input type="text" name="username" value="张三">

提交后服务器收到的数据就是username=张三。我一开始写表单总是漏name，浏览器控制台里看提交数据全是空的，还以为是自己写错了标签。这个细节在实际开发中极其重要，前端和后端联调出问题，一半以上都是name没对上。

4.1 label标签：容易被忽略但必须养成的习惯

<label>标签的作用是把一段文字和一个表单控件关联起来。最常见的写法就是包住控件：

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

也可以用for属性指向控件的id：

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

为什么这个习惯很重要？第一，点击标签文字时，浏览器的光标会自动跳到对应的输入框里，用户不需要精确点到那个小框，点击范围变大了很多。第二，屏幕阅读器朗读页面时，会把标签文字和控件关联起来，比如“用户名——编辑文本”，对无障碍访问非常重要。第三，单选和复选框通常很小，有了label关联，点击文字就能选中，交互体验明显改善。这个标签不写也能正常运行，但写了之后无论是可访问性还是用户体验都上一个台阶。

我自己的习惯是优先用for和id配对的方式，因为那种方式在嵌套结构复杂的页面里更好控制，不会因为标签包错了层级导致关联失效。

4.2 下拉菜单的完整实现与细节

热搜词里“html语言下拉菜单”关注的就是<select>这一块。下拉菜单的HTML结构是这样的：

<select name="city"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> <option value="shenzhen" selected>深圳</option> </select>

<option>的value是真正提交给服务器的值，selected属性可以指定默认选中的选项。还有一个常见的需求是让第一个选项变成“请选择”这类提示性占位，可以这样写：

<select name="city"> <option value="" disabled selected>请选择城市</option> <option value="beijing">北京</option> </select>

disabled会让这个选项不可被再次选中，selected让它默认显示。这样用户如果不选直接提交，提交的数据会是空字符串，后端方便判断用户是否做了选择。

下拉菜单还有一种形态是下拉列表组，用<optgroup>给选项分组：

<select name="fruit"> <optgroup label="热带水果"> <option>香蕉</option> <option>芒果</option> </optgroup> <optgroup label="温带水果"> <option>苹果</option> <option>梨</option> </optgroup> </select>

浏览器会自动把同一组的选项缩进并显示分组标题，视觉效果非常清晰。

4.3 GET与POST：表单单两大提交方式的区别

热词里虽然没有直接提到GET和POST，但凡是学表单绕不开这两个词。我用最生活化的方式解释一下：

GET提交会把表单数据拼接到URL后面，就像?username=zhangsan&city=beijing这样，并且URL的长度有限制。适合搜索、筛选这类不敏感且可分享的查询场景。POST提交则把数据放在请求体里，不会暴露在URL上，也没有长度限制，适合登录、注册、留言这类数据提交。

我第四天做实验的时候，用一个method="get"的表单提交了自己的姓名，然后看地址栏里清清楚楚显示了输入的名字。那一刻我才真正理解了为什么密码框要用POST提交——如果写成GET，密码就直接明文暴露在URL里了。这一步实验建议大家亲自做一下，印象深刻程度远超看书。

另外表单控件之间还有一种常用的分组方式，就是<fieldset>和<legend>：

<fieldset> <legend>个人信息</legend> <label>姓名：<input type="text" name="name"></label> <label>电话：<input type="tel" name="phone"></label> </fieldset>

它的作用是把一组相关的表单控件用框包起来，并给这组控件加一个标题。在注册表单、问卷里特别实用，视觉上和语义上都很清晰。

5. 多媒体与嵌入标签：图片、音视频以及那个被忽略的iframe

第四天还有一个重要的学习板块，就是让页面“不只是文字”的媒体标签。

图片标签是其中最基础的：

<img src="photo.jpg" alt="一张旅行照片" width="300" height="200">

alt属性是图片无法显示时的替代文字，也是搜索引擎了解图片内容的依据，更是屏幕阅读器读图的唯一通道。我见过很多初学者写alt随便填或者直接不写，这在可访问性上是非常不合格的。正确的alt写法是用一句简洁的话描述图片内容。如果图片纯粹是装饰性的，没有信息量，alt可以直接留空，但不建议省略整个属性。

音频和视频标签的写法也很简单：

<audio controls src="music.mp3"> 你的浏览器不支持audio标签 </audio> <video controls width="640" src="video.mp4"> 你的浏览器不支持video标签 </video>

controls属性决定是否显示浏览器自带的播放控制条。标签中间的文字是兜底内容，当浏览器不支持该标签时显示。视频标签还可以加poster属性指定封面图，加autoplay属性自动播放——但autoplay在多数浏览器里会被拦截，尤其是带声音的视频，一般需要用户手动点击以后才能播放，这是浏览器出于用户体验做的限制。

5.1 iframe标签：一个页面里嵌另一个页面

iframe是我觉得最被低估的一个标签。它的作用是在一个HTML页面里嵌入另一个独立的HTML页面。最简单的写法：

<iframe src="https://example.com" width="100%" height="400"></iframe>

实际开发中，第三方地图、视频播放器、支付页面、社交分享组件，大部分都是通过iframe嵌入到主页面里的。因为iframe内部是一个完全隔离的文档，主页面无法直接读取其中内容，这种隔离性反而成了安全边界。

热搜词里有“pyqt5显示html”，这虽然不是前端开发的内容，但底层逻辑和iframe有相似之处——在一个原生应用界面里嵌入HTML内容。你理解了HTML是纯文本、任何浏览器内核都能渲染这个思路，后面接触类似需求时，会发现知识是通用的。

5.2 写HTML用什么编辑器：别被“专业工具”吓到

热搜里还有“ubuntu的html编辑器”，我顺便聊一下我的工具选择。

写HTML的第一需求不是功能强大，而是“打开快、写起来顺手”。我个人最推荐从系统自带的文本编辑器开始，或者用VS Code这类轻量级代码编辑器加上几个插件。系统自带文本编辑器保存为xxx.html文件，然后双击用浏览器打开，就能看到效果。这个“保存-刷新-看效果”的循环是学习阶段效率最高的流程。

VS Code可以优先装这三个插件：Live Server可以起一个本地服务并自动刷新页面；HTML CSS Support可以写CSS时提示HTML里的类名；Prettier可以自动格式化代码。但我要提醒一句：插件是提升效率的，不是必需条件。我见过装了十几个插件但代码还是写不好的初学者，也见过只用记事本写得很溜的老手。工具永远都是次要的，核心是把标签和结构理解到位。

6. 第四天的一个完整小页面：把表格、表单、媒体装进同一个结构

前面学了一堆分散的知识点，第四天最好收尾的方式就是动手做一个综合页面。我当时的练习题目是给自己做一页“HTML学习日志”，里面同时包含：文档骨架、头部导航、进度表格、学习反馈表单、一段音频和一个返回顶部的链接。这个练习相当于把第四天的所有知识点用了一遍。

完整的代码大概是这样的思路：

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的HTML学习日志</title> </head> <body> <header> <h1>HTML学习日志</h1> <nav> <a href="#progress">进度</a> | <a href="#feedback">反馈</a> | <a href="#audio">音频</a> </nav> </header> <main> <section id="progress"> <h2>学习进度表</h2> <table border="0"> <thead> <tr> <th>天数</th> <th>内容</th> <th>状态</th> </tr> </thead> <tbody> <tr> <td>第1天</td> <td>文本与段落</td> <td>已完成</td> </tr> <!-- 更多行 --> </tbody> </table> </section> <section id="feedback"> <h2>反馈表单</h2> <form action="#" method="post"> <label for="name">你的名字</label> <input type="text" id="name" name="name"> <label for="level">学习天数</label> <select id="level" name="level"> <option>1-3天</option> <option selected>4-7天</option> <option>8天以上</option> </select> <label for="comment">学习感受</label> <textarea id="comment" name="comment" rows="4"></textarea> <button type="submit">提交</button> </form> </section> <section id="audio"> <h2>放松音频</h2> <audio controls src="relax.mp3"></audio> </section> </main> <footer> <a href="#">返回顶部</a> </footer> </body> </html>

这个页面在浏览器里打开，就能看到一个具备完整结构的HTML文档。表格清晰展示数据，表单可以输入内容，音频有播放控件，锚点链接可以跳转到页内位置。

6.1 锚点跳转：返回顶部功能最简单的实现

热搜词里“html一键返回顶部算法”指向的就是这个需求。很多人一想到返回顶部就以为要写JavaScript，其实HTML自带的锚点功能就能做一个基础的版本。

关键是给目标元素设置id，然后链接指向#id即可：

<a href="#top">返回顶部</a> <!-- 在body开头或顶部区域放一个带id的元素 --> <div id="top"></div>

甚至更快的方式是直接写href="#"，因为#默认指向文档顶部。不过这种跳转是瞬间的，不会平滑滚动。如果想实现平滑效果，可以在HTML根元素上写一个CSS属性：

<style> html { scroll-behavior: smooth; } </style>

一行CSS就能让所有锚点跳转变平滑。要更复杂的“滚到一定距离才出现按钮”还是需要JavaScript，但学习HTML阶段，锚点方案完全够用。

6.2 我做的第二个练习：模仿百度首页的天气模块

热搜里有“百度首页天气html制作”，这个练习我觉得挺有意思，也推荐给大家。百度首页右上角有一个天气模块，显示城市名、温度和天气图标。我第四天的加餐练习就是模仿它做一个静态版本。

思路是：用一个<div>或语义标签做容器，里面放城市名、温度数值和天气描述。用<p>标签放内容，用CSS简单调一下样式和大小的对比关系。不需要调用任何天气API，数据直接写死在HTML里就行。这个练习的精髓在于让你学会拆解一个真实功能模块的结构，而不是让你做数据对接。

做完这个之后，我对“看到一个页面，能在脑子里拆成一块一块的HTML结构”这个能力有了很直观的验证。这也是第四天学习的核心目标。

7. 学习HTML几天来踩过的坑和效率心得

文章最后分享几个实实在在踩过的坑，都是我自学几天里真实发生过的问题，不是从教程里抄来的。按复用价值排序：

坑一：标签闭合顺序错乱。嵌套标签必须遵循“先开先闭”的规则。比如<p><strong>文本</strong></p>，写成

文本

`虽然有些浏览器会尝试自动修复，但整个文档结构会被打乱，后面调节样式时会莫名其妙地出问题。我的自查方法是写完一块内容后，让编辑器帮我把标签缩进对齐，一眼就能看出谁的外层没闭合。

坑二：忘记带meta charset导致中文乱码。这个前面提过，是我第一次新建HTML文件时真实遇到的情况。明明代码没问题，中文全变成了“銆愬瓧”这样的乱码。后来检查发现就是<head>里少了编码声明。把<meta charset="utf-8">写上就正常了。现在只要有中文内容，这行我必带。

坑三：GET表单把密码明文暴露在URL里。我实验的时候用了一个GET表单提交密码框，提交后URL末尾清清楚楚出现了密码内容。那一刻的震撼感比看什么安全教程都强。从那以后，凡是涉及敏感信息的表单，method我下意识就会写post。

坑四：用表格布局页面。我第四天刚学完表格的时候兴奋不已，想用表格来排整个页面的布局，写了一个“左边导航右边内容”的页面，结果写了几十行嵌套表格，又难维护又丑。后来才明白表格只应该用来展示数据，页面的整体布局应该靠语义化标签和CSS来实现。这个观念不转过来，后面学CSS会特别别扭。

效率心得方面，我觉得有三条值得分享：

第一，不要背标签，要“用”标签。HTML标签有上百个，但常用的就三十个不到。与其花时间背全量标签，不如把常用的用到条件反射，然后遇到特殊需求时再查文档。MDN是查标签最权威的来源，比零散的博客可靠得多。

第二，养成“随手看源码”的习惯。看到好的页面，右键查看源代码，看别人怎么组织结构的。遇到看不懂的就去查，查完继续看。这个习惯帮我积累了大量真实的写法，远比看教程快。现在主流浏览器还支持在开发者工具里直接点选页面元素，对应的HTML代码会自动高亮，查起来更快了。

第三，每次学习结束，做一个“综合小作品”。听懂的会忘，练过的才有肌肉记忆。我第四天的综合练习就是那个学习日志页面。你如果把今天学到的所有知识点放进一个页面里，第二天还能不看笔记把这个页面重新写出来，那才叫真的学会了。

HTML的学习曲线其实很平缓，没有太多抽象的概念，做不出来效果基本都是细节问题。把结构、表格、表单这三大块拿下，一个静态页面的拼图就已经基本齐了。后面无论是学CSS还是JavaScript，本质上都是在这些HTML骨架上添加样式和交互而已。