打开浏览器，从入按F12，精通你看到的从入那些密密麻麻的标签就是HTML。它不叫“编程语言”，精通准确说是从入个标记系统——用尖括号把内容包起来，告诉浏览器“这是精通标题”“这是段落”“这是图片”。1991年Tim Berners-Lee搞出这东西的从入时候，一共就十几个标签。精通现在？从入一百多个，但常用的精通不超过三十个。

我见过太多人卡在“入门”阶段。从入买了三本书，精通收藏了五十个教程，从入结果连一个能看的精通网页都写不出来。问题出在哪？从入他们花太多时间背标签，却很少打开编辑器敲代码。HTML不是背出来的，是敲出来的。

先动手，再理解

新建一个文本文档，把后缀改成.html，用记事本打开，输入下面这行：

<h1>我的第一个网页</h1> <p>这行字会显示在浏览器里。</p>

保存，双击。浏览器里出现了两行字。就这么简单。你不需要装任何软件，不需要配置环境。HTML的门槛低到离谱——这也是它活了三十多年的原因。

别急着问“h1和p有什么区别”。打开浏览器，把h1改成h2、h3、h6，刷新看效果。字号依次变小，浏览器默认给不同层级的标题分配了不同权重。这比看十遍教程管用。

结构比样式重要

2005年那会儿，满大街的网页都是<table>布局。用表格控制位置，一行三列，左边导航右边内容。后来大家发现这玩意儿维护起来要命——改一个边距，整个表格跟着乱。现在没人这么干了，但遗留的老网站还在跑，维护的人苦不堪言。

正确的做法是用语义化标签搭骨架。<header>放页头，<nav>放导航，<main>放主体，<footer>放页脚。浏览器不会因为这些标签长得不一样就给你不同的视觉效果，但屏幕阅读器、搜索引擎、还有半年后回来改代码的你自己，都会感谢你。

<body> <header> <h1>站点标题</h1> </header> <nav> <a href="/">首页</a> <a href="/about">关于</a> </nav> <main> <article> <h2>文章标题</h2> <p>正文内容……</p> </article> </main> <footer> <p>&copy; 2025</p> </footer> </body>

这段代码没有任何样式，但结构清清楚楚。加CSS之前，先把HTML写对。顺序反了，后面全是坑。

属性：藏在标签里的开关

标签只是容器，属性才是控制容器的旋钮。<a href="...">里的href决定链接去哪，<img src="..." alt="...">里的src指定图片路径，alt是图片加载失败时的替代文字。alt这个属性经常被忽略，但视障用户靠它理解页面内容。写alt不是做慈善，是基本素养。

还有一类属性叫“全局属性”，哪个标签都能用。id给元素起唯一名字，class给元素分类，style直接写行内样式。id和class的区别？id像身份证号，一个页面里不能重复；class像标签贴纸，想贴几个贴几个。

表单：用户输入的第一道门

登录框、搜索栏、注册页，背后都是<form>。输入框用<input>，下拉菜单用<select>，多行文本用<textarea>。每个输入控件都该配一个<label>，用for属性绑到input的id上。这样点文字也能聚焦输入框，手机上尤其好用。

<label for="email">邮箱：</label> <input type="email" id="email" name="email" required>

type="email"会让手机弹出带@符号的键盘，required让浏览器自动检查非空。这些原生功能不要钱，比写一堆JavaScript验证省事得多。

从“能看”到“能用”

写HTML最怕什么？标签不闭合。浏览器容错能力强，少写一个</div>它也能猜，但猜错的时候页面就崩了。用VS Code的话，装个Prettier插件，保存时自动格式化，嵌套关系一目了然。

另一个坑是特殊字符。<、>、&在HTML里有特殊含义，直接写会解析出错。想显示它们得用实体字符：<、>、&。版权符号是©，空格是 。记不住没关系，用到了查一下就行。

精通HTML的标准不是背下所有标签。是拿到一张设计图，能立刻在脑子里拆出结构——哪块用header，哪块用section，列表用ul还是dl，表格要不要加caption。这种直觉靠手熟，不靠看书。每天写一个页面，坚持两周，比读二十篇文章有用。