标签就是块价签
HTML 全称里的 ML，是标记语言。标记这词从老派出版业借来的：编辑拿红笔在手稿上画圈，边上注明"此处四号宋体"，这动作就叫 markup。HTML 干同一件事，只是看稿子的换成了浏览器。
你在记事本敲"床前明月光"，浏览器只知道一串字。套上 <p>，它立刻明白：这是个段落。
超市货架上的价签，9.9 和 19.9 长得一模一样，贴上才知道哪个是青菜哪个是牛肉。标签不改变内容，它只告诉别人这块内容扮演什么角色。
格式拆开就三样零件
<a href=" ">点我</a>
<a> 开始标签，</a> 结束标签，href="..." 是属性，中间"点我"是内容。通用格式一句话：<标签名 属性="值">内容</标签名>。
规矩不多，四条容易翻车。
尖括号必须英文半角。中文《》不行，全角＜＞也不行。这坑十个新手八个踩过，还半天找不出原因——因为它在编辑器里看着挺像的。
大小写浏览器不挑，<DIV> 和 <div> 都认。可全行业小写，你犯不着当那个例外。
属性值建议双引号。class=btn primary 不带引号，一遇空格就废，会被拆成两个东西，其中一个还不知道是什么。
布尔属性写了就生效。disabled="false" 照样禁用，很反直觉，规范就是这么定的。
双标签：有头有尾，要包东西
<p>、<div>、<h1>、<a>、<strong> 都算。开始标签 + 内容 + 结束标签，缺一不可。内容可以是文字，也可以是另一个标签，一层套一层。
铁律一：谁后开，谁先关。 <div><p>你好</p></div> 对，<div><p>你好</div></p> 错。像穿衣服，外套最晚穿上，最先脱下。
铁律二：浏览器不报错，它只替你修。 写错了页面照样开，结构却已被重排一遍——凭空多个空 div，一个 <p> 被劈成两段，JS 里 querySelector 选中的东西人间蒸发。改 bug 时你盯着自己那几行，怎么看怎么对，就是不对劲。
好在纠错规则是同一份标准写死的，各家浏览器修出来一模一样。否则前端这行当场散伙。
单标签：本来就没啥可包
规范里叫 void element，空元素。<br>、<hr>、<img>、<input>、<meta>、<link>。只有开始标签，不许有结束标签，也不许有内容。写 <img src="a.jpg"></img> 是错的。
现行标准一共 13 个：br 换行、hr 主题分隔、wbr 可断行处、img 图片、source 媒体候选、track 字幕、embed 嵌入外部、input 表单、area 图像热区、col 表格列、base 基准 URL、link 外部资源、meta 元信息。
为什么这么设计？道理挺直白。双标签包的是内容，而这些标签压根没内容可包——图在 src 指向的文件里，不在标签中间；br 标记的是"此处换行"这个位置，不是一段文字。没东西可包，自然不需要尾巴。
那根斜杠，说句公道话
纠结写 <br> 还是 <br /> 的人，比想象中多。答案有点扫兴：HTML 里那根斜杠写了也白写。规范原话是它"不会把开始标签标记为自闭合，是多余的，没有任何效果"。两种写法解析出来完全一样。
这是 XHTML 时代的遗产，当年要求所有标签必须闭合。HTML5 没继承，斜杠从此沦为装饰品，你写它多半是编辑器自动补全干的。
真正要小心的是自定义元素：<my-card /> 无效，斜杠照样被忽略，浏览器认为只是开了个头，后面内容全被当成它的子节点。React、Vue 里能这么写，是框架在编译阶段替你处理了。直接写 HTML 文件，不行。
多问自己一句
标签的语法，半小时能学完。把标签写好，得练很久。写的时候多问一句：这块内容，到底是什么。答上来了标签就对了，答不上来，多半是内容本身还没想清楚——那也不是 HTML 的问题。
评论