企业官网建设流程全解析

做技术的都绕不开HTML。哪怕你不是前端岗位，只要想折腾个人博客、做个简单网页、把表格转成在线文档，或者临时给公司活动页改个按钮文案，都得跟这一层代码打交道。很多人一看到HTML就以为是编程，其实它更像一套“网页的骨骼结构”，负责告诉浏览器哪里是标题、哪里是段落、哪里该放图、哪里能点一下跳到别处。今天这篇，我从最小页面骨架讲起，再聊HTML+CSS+JS三种基础语法怎么配合，最后把几个高频衍生场景和坑一起捋一遍，尽量做到看完就能上手改自己的页面。

1. 一个网页到底长什么样：先看懂HTML骨架

1.1 最小页面结构

打开任意一个网页，右键“查看网页源代码”，你会看到一堆尖括号的东西。如果把它去掉所有样式和脚本，剩下的核心骨架几乎都一样，长这样：

<!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> <h1>你好，世界</h1> <p>这是一个段落。</p> </body> </html>

这段代码里，<!DOCTYPE html>是给浏览器看的声明，告诉它“我是现代HTML文档，按标准模式解析”。别小看这一行，少写了它，老IE浏览器会进入非常古老的怪异模式，页面边距、盒模型全都乱掉。<html>是文档根元素，里面所有内容都是它的子级；lang="zh-CN"声明页面语言为简体中文，对搜索引擎和屏幕阅读器都有帮助。

<head>里放的是页面的“配置信息”，不会直接显示在浏览器内容区，但非常重要。<meta charset="UTF-8">解决中文乱码问题，很多新手页面出现“锟斤拷”乱码，十有八九是没写这行，或者文件保存编码选错了。<meta name="viewport">是移动端适配的关键，没有它，手机浏览器会把页面当成960px宽缩成小字，有了它页面宽度才会跟随设备宽度。<title>是浏览器标签页上显示的文字，也是搜索引擎结果里的大标题，一定要写清楚。

<body>才是用户真正看得到的内容区域。一个页面可以没有JS、没有CSS，但不能没有body里的结构。初学阶段你不需要背所有标签，只需要记住一个原则：先在body里搭内容骨架，再考虑样式和交互。

1.2 head里还有哪些常用meta

除了charset和viewport，head里还有几个高频meta，很多基础教程讲得不细，我顺手列一下。

<meta name="description" content="这里是页面描述，通常会在搜索引擎结果中显示"> <meta name="keywords" content="关键词, 标签, 主题"> <meta name="author" content="作者名"> <meta property="og:title" content="分享到社交平台时显示的标题">

这里面description对SEO有一定帮助，搜索引擎抓取页面时会参考它生成摘要；og:title是Open Graph协议的一部分，微信、QQ、微博分享时经常读这个字段，如果你想让网页链接分享出去更好看，就把og相关meta补上。keywords的作用现在已经很弱，Google根本不看，百度权重也不高，写不写都行，但完整的页面结构里保留着也正常。

有一个容易忽略的细节：meta标签是写在head里的，不是写在body里的。我见过不少新手把meta误写到body开头的div里，页面可能不会立刻报错，但校验时会提示错误，一些第三方解析工具也会读取不到。

1.3 用“盒子”理解嵌套关系

HTML的标签不是平铺在页面上的，而是一层一层嵌套起来的。我给学生讲的时候特别喜欢用一个比喻：整个页面是一个大箱子，<body>是卧室，<header>是门口的玄关，<main>是客厅，<footer>是阳台。箱子里面还能再放小箱子，比如客厅中央放一张茶几<section>，茶几上放一个果盘<article>，果盘里的苹果就是<p>或<img>。

这种嵌套关系就是DOM树。浏览器拿到HTML字符串后，会解析成一颗节点树，每个标签对应一个节点。CSS和JS都依赖这颗树来定位元素。理解嵌套后，你就明白为什么写HTML要保证标签配对，为什么<p>里不能嵌<p>，为什么<ul>的直接子元素应该是<li>而不是<div>。标签配对错误，浏览器虽然会尽力纠错，但最终的DOM结构可能和你预期完全不一样，样式和脚本也会跟着出问题。

写嵌套时，缩进是给自己看的。浏览器不在乎缩进，但一个好的缩进习惯能让代码结构一目了然。建议每嵌套一层就空出两个空格或一个Tab，长期维护时你会感谢自己。

2. 高频标签逐个拆解：从标题到正文，把页面撑起来

2.1 文本类标签：标题、段落、列表、引用

网页内容本质上是文本的容器。最常用的文本标签是<h1>到<h6>六级标题，以及<p>段落。注意，<h1>通常一个页面只放一个，做主标题；如果出现多个<h1>，搜索引擎和屏幕阅读器会困惑，这也是页面无障碍评分常见的扣分点。<h2>、<h3>依次往下走，形成内容层级，类似一篇文章的大标题、小节标题。

段落后面如果需要换行但不能开启新段落，可以用<br>。这里有个隐藏细节：<br>是空标签，不需要结束标记，但XHTML风格会写成<br/>。现代HTML5里两种写法都合法，团队规范统一即可。很多新手用多个<br>来制造垂直间距，这不是合理的做法，间距应该交给CSS的margin或padding，否则维护起来全是废墟。

列表有两种常用形态：无序列表<ul>和有序列表<ol>。无序列表常用于导航菜单、文章分类；有序列表常用于步骤说明、排行榜。列表里的每一项都用<li>包裹。常见的错误是直接在<ul>下面写<div>，或者忘记把<li>闭合。还有一个冷门但好用的标签<dl>，用于定义列表，由<dt>（词条）和<dd>（描述）组成，比如产品参数表、名词解释这类场景用起来很语义化。

引用内容的场景，长引语可以用<blockquote>，短引语可以用<q>。<pre>标签保存了空格和换行，适合展示代码块；<code>用来标记行内代码。需要强调的文字可以用<strong>（粗体）或<em>（斜体），但注意别用来纯粹改样式，样式的事交给CSS，这两个标签是有语义的，屏幕阅读器会加重语气。

2.2 链接与图片：理解绝对路径和相对路径

超链接是HTML的灵魂，写法是：

<a href="https://example.com" target="_blank" rel="noopener noreferrer">访问示例站</a>

href指向目标地址。如果是外部网站，要写完整的https://开头；如果是站内页面，可以直接写相对路径，比如about.html、../pages/index.html。我建议初学者把相对路径的逻辑搞清楚：./表示当前目录，../表示上一级目录。这个基础搞不清，后面本地预览正常、部署到子目录就全部404，是最容易踩的坑。

target="_blank"是在新标签页打开，但如果你这么写，最好同时加上rel="noopener noreferrer"，否则老浏览器里新页面可能通过window.opener操纵你的原页面，存在安全风险。现在很多现代浏览器默认已经隔离了，但养成这个习惯没坏处。

图片标签<img>跟<a>不一样，它是空标签，没有闭合标签。核心属性是src和alt：

<img src="./images/logo.png" alt="公司Logo" width="200" height="80">

alt是图片无法加载或屏幕阅读器朗读时显示的替代文本，不要偷懒省略。width和height可以写在HTML属性里，但真正控制响应式缩放还是建议用CSS。要注意的是，图片资源最好用相对路径或完整URL，别用本地C:/Users/...这样的绝对路径，否则别人访问你网站时这图片压根不存在。

2.3 块级元素与行内元素：布局的地基

HTML元素按显示方式大致分成两类：块级元素和行内元素。块级元素独占一行，能设置宽高和上下margin，比如<div>、<p>、<h1>、<ul>；行内元素在水平方向排成一排，宽高和上下margin设置无效，比如<span>、<a>、<strong>、<em>。这个区别是CSS布局入门的基础。

但HTML5已经淡化了块级和行内这种叫法，更推荐用内容模型来描述。实际写代码时，我们依然会遇到“为什么给span设置宽度没用”这类问题。解决办法有两个：把<span>的CSS设成display: inline-block;，或者直接改用<div>。我在实际项目里的习惯是：行内碎片用<span>，独立区块用<div>，需要横排但保留盒模型能力时用display: inline-block或flex容器。

还要提一个很容易被忽略的规则：块级元素里可以放行内元素，但行内元素里面不能放块级元素。比如<a>里面直接放<div>，在HTML5中其实语法上允许特定情况，但普通情况下会导致结构混乱，比如点击区域异常。我自己踩过这类坑：把<a>包着一个大<div>做成卡片链接，结果发现嵌套后的行为在不同浏览器不一致。后来老老实实改用<div>加onclick，或者把<a>直接设为display:block，问题才消停。

2.4 语义化标签：div太多不行，header/main/footer怎么用

HTML5新增了一批语义化标签：<header>、<footer>、<nav>、<main>、<section>、<article>、<aside>。它们不改变页面外观，但把结构意图表达得很清楚。比如一个博客页面：

<header> <nav> <a href="/">首页</a> <a href="/archive">归档</a> </nav> </header> <main> <article> <h1>博文标题</h1> <p>正文内容</p> </article> <aside> <h2>侧边栏</h2> </aside> </main> <footer> <p>版权信息</p> </footer>

好处很明显：搜索引擎理解页面结构更好，屏幕阅读器可以直接跳到main内容区域，团队协作时也不用靠注释才能分清哪块是哪块。但注意，<section>通常带一个标题，如果一块内容没有自然标题，用<div>更合适。<article>适合独立成篇的内容，比如单篇博客、论坛帖、新闻条目。<aside>是侧边栏或补充信息，跟主要内容关联但不依赖。

很多人刚学语义化容易走向另一个极端：把整个页面每一个区块都套上语义标签，反而比div更乱。我个人的判断标准是：如果你对这个区域能说清楚“它是什么类型的内容”，就用对应标签；如果只是一个用来包一下、以便加样式的容器，就用div。语义化不是越多越好，是合适才好。

3. HTML+CSS+JS：三种基础语法怎么配合工作

3.1 内联样式、内部样式、外部样式，该用哪个

HTML负责结构，CSS负责外观，JS负责行为。三者配合最经典的方式是：HTML文件里写结构，CSS文件里写样式，JS文件里写逻辑，页面加载时通过<link>和<script>把文件引进来。

CSS有三种挂载方式：

<!-- 外部样式，最推荐 --> <link rel="stylesheet" href="./css/style.css"> <!-- 内部样式，写在style标签里 --> <style> .box { color: red; } </style> <!-- 内联样式，写在元素属性上 --> <div style="color: red;">内联</div>

内联样式的优先级最高，但不建议多用。它让代码跟结构耦合在一起，改起来必须逐个找元素，而且没法利用缓存。内部样式适合单页面小工具或者邮件模板，外部样式最利于复用和维护。实际项目里几乎都是外部样式表，配合版本管理工具跟踪样式变化。唯一例外是HTML邮件，邮件客户端对<link>支持很差，几乎必须把所有样式内联到每个元素上，这部分后面衍生场景我会再提。

CSS语法本身不复杂，大部分是一个选择器加一组声明：

body { margin: 0; font-family: Arial, sans-serif; } .card { background: #fff; border: 1px solid #e0e0e0; padding: 16px; }

关键是要练熟选择器：标签选择器p、类选择器.card、ID选择器#header、后代选择器.nav a。类选择器最常用，ID选择器应保持唯一，避免用于样式复用。新手优先掌握这四种就够用，后面的伪类和结构选择器可以边做边学。

3.2 选择器和盒模型基础

盒模型是CSS里绕不开的概念。每个HTML元素都可以看成一个盒子，包含四层：内容content、内边距padding、边框border、外边距margin。默认布局下，width设置的是内容区的宽度，再加上padding和border才是元素实际占的宽度。这个机制经常让新手困惑：明明设了宽度300px，加上左右padding各20px，实际占了340px，导致布局错位。

解决的常见做法是设置：

* { box-sizing: border-box; }

border-box模式下，width包含padding和border，元素实际宽度就是设定值，做布局容易得多。这个属性几乎已经成为项目标配。但要注意，margin永远不算在元素自身尺寸里面，它是盒子外部推挤其他元素的空间，所以外边距不会因box-sizing改变而改变。

选择器还有一个重点：层叠和继承。浏览器默认样式、外部样式表、行内样式按特定规则叠加，同优先级时后加载的覆盖先加载的。这是一个越早理解越好的坑。我见过不少新人改了CSS却没生效，一看发现内联样式写在style标签后面，或者两个样式文件加载顺序反了。排查顺序一般先看选择器是否命中，再看优先级和加载顺序。

3.3 JavaScript接入页面：事件、DOM、调试基础

JS在HTML里的引入方式也是三类，比较推荐的是外部脚本，并且放在</body>前面，或者使用defer属性放在head里：

<script src="./js/main.js" defer></script> </body>

defer表示脚本在HTML解析完成后再执行，这样可以避免脚本阻塞页面渲染。简单说，你不在head里直接写操作body的脚本，十有八九会报“找不到元素”的错误，因为脚本执行时body还没解析完。用defer或把script放底部，都是解决办法。

JS操作页面的核心是DOM操作。最常用的几个API：

document.querySelector('.btn'); // 找元素 element.addEventListener('click', fn); // 绑定事件 element.style.display = 'none'; // 改样式 element.innerHTML = '<p>新内容</p>'; // 改内容

这里要提醒一句：innerHTML很方便，但不要把用户输入直接拼进innerHTML，否则容易造成XSS攻击。换成textContent更安全。比如聊天窗口显示用户名，有人填<script>alert('xss')</script>，如果直接innerHTML就会被执行。生产环境永远要对用户输入做转义或使用textContent。

调试方面，浏览器自带的开发者工具F12是最重要的工具。Console面板看JS报错，Elements面板看DOM和CSS，Network面板看资源加载状态。学会使用F12的“检查元素”，你会发现“为什么样式不生效”这类问题十有八九能在Elements面板里直接看出来——要么选择器写错，要么样式被其他声明覆盖。

3.4 一个可复用的“返回顶部”小算法

很多落地页、博客都有“返回顶部”按钮，实现方式看着简单，但细节不少。最基础的做法是：

<button id="backTop">返回顶部</button>

const backTop = document.getElementById('backTop'); backTop.addEventListener('click', function() { window.scrollTo({ top: 0, behavior: 'smooth' }); });

behavior: 'smooth'会平滑滚动，用户体验比瞬间跳转好很多。但如果你想把滚动过程做成动画，比如滚动到一定高度才显示按钮，可以再加监听：

window.addEventListener('scroll', function() { if (window.scrollY > 300) { backTop.style.display = 'block'; } else { backTop.style.display = 'none'; } });

一个容易被忽略的坑：在很长的页面里，直接监听scroll并频繁修改display，性能其实还好，但如果scroll事件里执行大量计算，页面会卡。进阶方案是使用requestAnimationFrame来节流。不过基础阶段，上述写法足够。建议把按钮固定在右下角，用CSS的position: fixed; bottom: 20px; right: 20px;，避免滚动时按钮跟着页面跑。

4. 表单与HTML功能实战：不要只写死页面

4.1 表单元素拆解：input、label、select、textarea

表单是网页跟用户交互最直接的方式。HTML表单不只长得像若干个输入框，背后有一套完整的提交逻辑。一个最基础的表单长这样：

<form action="/submit" method="post"> <label for="username">用户名：</label> <input type="text" id="username" name="username" placeholder="请输入用户名" required> <label for="email">邮箱：</label> <input type="email" id="email" name="email" required> <label for="intro">简介：</label> <textarea id="intro" name="intro" rows="4" cols="30"></textarea> <select id="city" name="city"> <option value="beijing">北京</option> <option value="shanghai">上海</option> </select> <button type="submit">提交</button> </form>

几个细节值得记住：<label>的for要对应输入框的id，这样点击文字时输入框会聚焦，对鼠标操作和屏幕阅读器都友好。input的name属性决定提交到服务器时的字段名，这个很容易忽略——哪怕页面样式再漂亮，没有name，手机收到的数据就是空的。type属性里有玄机，type="email"会在多数手机上弹出邮箱键盘，type="number"弹数字键盘，type="password"会隐藏输入内容。这些原生行为比你自己写正则再判断快得多。

还有按钮，<button>如果不指定type，在表单里默认就是submit。我做过一个项目，想加一个普通按钮，结果没写type，一按整个页面刷新了，数据也丢了。后来凡是按钮我都显式写type="button"或type="submit"，再没出过这种问题。

4.2 form的提交方式与常用校验属性

表单提交方式最常用的是method="get"和method="post"。GET会把表单数据拼在URL问号后面，适合搜索、筛选这种无副作用请求；POST会把数据放在请求体里，适合登录、注册、发送短信等操作。基础页面如果只是静态演示，可以用action="#"，但实际上线一定是指向后端接口。

HTML5内置校验不要太香。required表示必填，不填就点提交会出现浏览器默认提示，不用写JS。minlength、maxlength控制文本长度，pattern可以用正则约束格式，比如手机号：

<input type="tel" name="phone" pattern="^1[3-9]\d{9}$" required>

如果格式不对，浏览器会阻止提交并提示。但注意，浏览器校验只是体验优化，不是安全措施。攻击者完全可以用curl直接向接口发请求绕过前端校验，所以后端必须再做一次校验。这一点跟HTML基础有关，但更重要的是一种安全意识，做表单时从第一天就要记住。

另外，表单里的数据如果涉及用户隐私，建议加上autocomplete属性做控制。比如登录页的验证码不要自动填充，可以写autocomplete="off"，这两个词拼不对也没事，浏览器会自动补全。

4.3 邮件链接、锚点、页面内跳转

除了表单提交，HTML还有几个小而美的交互功能。邮件链接用mailto:协议：

<a href="mailto:hello@example.com?subject=咨询&body=你好">发送邮件</a>

点击后会唤起用户电脑上的邮件客户端，subject和body是预填的标题和正文。但现代互联网上这个功能越来越鸡肋，很多人根本没有桌面邮件客户端，点了没反应。所以现在更常见的是做一个“联系”表单，通过后端或第三方服务发邮件。

锚点跳转是单页面长文档的利器。比如文章目录点击后滚动到对应小节：

<a href="#section2">跳转到第二节</a> ... <h2 id="section2">第二节</h2>

href里写#加上目标元素的id，浏览器就会滚动到那个元素位置。配合之前说的CSSscroll-behavior: smooth;，整页滚动会平滑很多。这是实现“一键返回顶部”的另一种思路：<a href="#top">加上顶部元素的id="top"，不过它一直依赖页面内锚点，且不支持自定义动画，所以实际项目里我更多用JS的scrollTo。

5. 常见HTML衍生场景与工具链

5.1 在Ubuntu里挑一个趁手的HTML编辑器

很多初学者把一个简单问题想复杂了：用什么软件写HTML？其实记事本、Vim、VS Code都可以。区别在于编辑器能不能帮你高亮标签、自动补全、实时预览。Windows下大家习惯直接用记事本或VS Code，Ubuntu下也有几个高频选择：VS Code是跨平台的，装好直接用；Sublime Text轻量快速；Vim适合已经习惯键盘操作的老手。

我自己的建议是，Ubuntu下装VS Code，理由很简单：插件生态强，装一个Live Server插件，右键就能在浏览器里实时预览，改完保存页面自动刷新。这比手动开浏览器、按F5高效太多。不过新手别一上来就折腾一堆插件，先把基础语言语法吃透。编辑器只是工具，别本末倒置。很多人问我“有没有好用的HTML可视化编辑工具，不写代码那种”，我的答案是：如果你是做正经网页，一定要能看懂代码。可视化工具生成的代码冗余严重，改起来更痛苦。

5.2 HTML转PDF、转Word/Markdown：按场景选工具

HTML是个中间格式，经常需要导出成PDF、Word甚至Markdown。最经典的做法是浏览器打开页面后，Ctrl+P打印，目标格式选“另存为PDF”，就能得到一份排版还不错的PDF。这是零代码方案，适合一次性导出。如果想批量或自动化，可以用Puppeteer、Playwright这类无头浏览器，或者Java后端用iText的HTML转PDF组件，都能实现。我在实际项目里用iText7处理过合同模板：先把数据渲染成HTML模板，再转成PDF并加上水印。加水印的核心思路是，在PDF生成过程中对每一页绘制水印文本或图片，HTML模板里写一个普通的div不会自动每页重复，必须借助PDF库的页面事件来处理。

HTML转Markdown常用工具是Pandoc，一条命令：

pandoc input.html -o output.md

它会尽量保留标题、列表、链接结构。反过来，Markdown转HTML也用它。但要注意，Pandoc对复杂嵌套表格、脚本、样式的转换并不完美，转换后可能需要手动清理。

HTML转Word最省事的思路不是直接转，而是先把内容整理成结构化文本，再通过工具生成。如果是纯表格数据，想直接转成WPS表格能打开的HTML，思路是一样的：用<table>标签写一套简单的HTML，WPS和Excel都能直接打开识别，双击表格元素就能编辑，这就是所谓的“HTML格式转换WPS表格”最常见的做法。一份干净的HTML表格，远比打印后让人重新录一遍强。

5.3 多个HTML打包成一个：静态站点常见的合并方案

“打包多个HTML”这个需求通常出现在几个场景：一是做离线发布的电子书或资料包，希望一个文件包含所有内容；二是把多个活动页面合并成一个多页签应用；三是把项目做成单一HTML工具，发出去就能用，不依赖服务器。

最直接的办法是用构建工具，比如用Node.js脚本读取多个HTML文件，把head里的style和script内联进一个模板页面，再通过拼接生成单文件。如果不想引入复杂工具链，也可以直接用浏览器打印到PDF，把所有页面合并成一个PDF文件，当作离线分发版。但这种方法会丢失交互性，JS功能全部失效。

另一种“打包”是做成SPA单页应用，用锚点或JS切换不同区块，所有HTML都在一个文件里。比如一个个人简历页面，可以用JS根据hash切换“关于我”“作品集”“联系方式”三个section，体验上像多个页面，实际上一个HTML搞定。这种方式适合内容少、功能简单的小工具，代码维护起来比多文件简单，但内容一多，文件会膨胀得很厉害，加载变慢。

5.4 在非浏览器环境里显示HTML：PyQt5与Shell终端

有些场景需要在桌面程序或终端里展示HTML内容。Python的PyQt5/QtWebEngine，或者PyQt5自带的QTextBrowser，都能加载HTML字符串。如果你只是想展示一段富文本，QTextBrowser就够；如果要跑完整页面、执行JS，就得用QWebEngineView。这里有个经验：QTextBrowser支持的是富文本子集，很多CSS3特性压根不生效，别指望它能完美渲染线上页面。用它展示一个带标题、列表、粗体的文档没问题，渲染复杂布局还是要切换内核。

Shell终端显示HTML的需求，常见于远程服务器上想快速看一个页面的大致内容。可以用w3m或lynx这类文本浏览器：

w3m index.html

它会丢弃图片、JS和CSS，把页面文字内容以纯文本形式输出。这个方法非常适合在Linux服务器上检查页面标题、正文结构、链接地址是否写错，比下载到本地再打开快得多。但它不能替代真正的浏览器，遇到JS渲染的页面，终端里看到的基本是空壳。

5.5 其他两个实战场景：天气卡片和HTML邮件

热搜里有一句“百度首页天气html制作”，本质是前端获取天气数据并渲染成HTML。最简单的方案是找天气API返回JSON，然后用JS的fetch请求数据，把温度、城市、天气图标动态插入到指定DOM节点。这里要提醒一下：天气API一般有跨域限制，本地直接用fetch可能被CORS拦截，常见做法是用后端代理或使用支持JSONP的接口。新手做练习时，可以直接用一个模拟数据文件代替API，先把渲染流程跑通，再联调真实数据。

HTML邮件是个很特殊的场景。大部分邮件客户端不支持<style>标签和外部CSS，很多客户端甚至不支持class，所以邮件模板必须把所有样式内联到元素上，用<table>布局替代div布局。我做过一次活动通知邮件，在Outlook里看到的效果和Gmail完全不一样，后来才知道Outlook使用Word引擎渲染HTML，对边距、背景色的支持很弱。如果只是基础入门，不建议一上来就啃邮件模板，先把它当成“不能用外部CSS、不能用flex的受限HTML”来理解即可。

6. 常见问题排查与避坑清单

6.1 字符乱码、样式不生效、图片裂开的排查

做HTML基础练习时，最容易碰到的三个问题，我把排查思路整理成一张表，照着查能省很多时间。

乱码问题里还有一个隐蔽点：如果你的meta charset写在<title>之后，某些老浏览器可能在解析到meta之前已经把标题按默认编码处理了，所以习惯上把<meta charset="UTF-8">放在head最开头，并且在文件里保证物理字符确实是UTF-8。这个习惯养成后，基本不会再有乱码。

样式不生效还有一种常见原因：重复的id。浏览器对重复id不是报错，而是会把样式只作用到第一个，后面的元素不受影响。这提醒我们，同一页面id必须唯一，即使是动态渲染的组件，也尽量动态生成唯一id或改为class。

6.2 兼容性：viewport和H5标签

HTML5新增的<header>、<section>、<article>等在非常老的IE浏览器里默认是inline元素，会失去块级布局。基础阶段如果用这些标签，顺手给它们补一个：

header, main, footer, article, section, aside, nav { display: block; }

不过我平时基本不建议为了老IE做兼容，除非你的用户群体明确要求老浏览器。现在国内主流浏览器更新速度很快，重点还是要保证新浏览器体验一致。

viewport我之前提过，这里再补一个细节：如果在移动端发现页面文字特别小，通常是因为没有写viewport，或者像素比适配没做好。最基础的做法就是全站统一加：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

如果需要控制缩放，可以再加maximum-scale、user-scalable，但为了无障碍体验，不建议禁止用户缩放。这个点属于移动端优化的基础，HTML学习者至少要知道它存在。

6.3 缩进、编码、文件命名习惯

HTML项目虽小，也值得遵守基本工程习惯。文件命名建议全部小写，用连字符-分隔单词，比如about-us.html，不要用About Us.html。空格和大写字母在Linux服务器上经常导致404，而且跨平台拷贝时容易出奇怪问题。图片名也用logo-header.png这种格式，尽量不用中文名和空格。

缩进统一两个空格或四个空格，整个项目保持一致。标签要么全部小写，要么保持一致；HTML不区分大小写，但XHTML和团队规范一般要求小写。我见过有些案例里<DIV>和<div>混用，浏览器能解析，但代码review时非常想打人。

文件编码方面，建立项目时先确认编辑器默认编码是UTF-8。很多编辑器新建文件默认GBK，本地写的时候看着正常，部署到服务器别人打开就是乱码。保存的时候可以留意右下角编码状态，或者直接用VS Code的默认设置强制UTF-8。

6.4 必备速查表

最后给一个最精简的速查表，适合放在手边快速参考。

这张表看起来简单，但你把每个标签的属性真正查一遍、敲一遍、踩过坑之后，基础就算扎实了。别急着追求冷门标签，先把这十几个高频标签和它们之间的嵌套关系搞透彻，后面学CSS、JS、框架都会轻松很多。

我自己带新人的时候，始终有个感受：HTML基础不牢，后面写CSS和JS经常是在“碰运气”。比如样式无效时不知道从DOM树入手，事件绑不上不知道是元素没加载还是选择器没选中。反过来，如果能把标签语义、嵌套关系、meta配置、表单提交逻辑这四件事吃透，前面的路会顺很多。最后再分享一个小建议：刚学HTML时，每学一个新标签就把它放到一个能运行的页面里，用浏览器F12看一下它对DOM结构的影响，不要只看文字教程。手底下敲一遍，比背二十遍都管用。