html不是编程语言而是语义化结构说明书，标签描述内容含义而非样式，应避免滥用无语义的/，注意属性写法规范（如width="200"而非"200px"，布尔属性无需赋值）。
HTML 不是编程语言，它只是浏览器能读懂的结构说明书。 你写的每一段 <p></p>、<img>、<a></a>，本质都是在告诉浏览器：“这里有一段文字”“这里该放一张图”“这个文字要能点开跳转”。写错标签、漏闭合、属性拼错，浏览器不会报错，但很可能渲染出意料之外的结果——比如文字不换行、图片不显示、链接点不动。
HTML 标签不是命令，而是语义容器
很多人初学时把 <b></b> 当成“加粗命令”，把 <i></i> 当成“斜体命令”，这是典型误解。HTML 标签描述的是内容的含义，而不是样式：
-
<strong></strong>表示“这段文字很重要”，屏幕阅读器会加重语气读出，浏览器默认加粗——但加粗只是默认表现，不是它的目的 -
<em></em>表示“这段文字需要强调”，浏览器默认斜体，但重点在语义上的轻重缓急 -
<b></b>和<i></i>是为纯样式需求保留的（比如产品名、外语词），现代项目中应尽量避免滥用
用错语义标签，不仅影响可访问性（视障用户依赖语义理解页面），还会让搜索引擎难以判断内容主次。
为什么 和 不能包住一切
<div> 和 <code><span></span> 确实是“万能容器”，但它们没有语义。连续嵌套 5 层 <div>，对人和机器都等于没说任何结构信息：
<ul><li>用 <code><header></header>、<nav></nav>、<main></main>、<article></article>、<aside></aside> 替代无意义的 <div>，能让浏览器、开发者、辅助技术快速定位区块功能
<li>
<code><span></span> 只适用于行内内容的微小标记（比如给某几个字加 class），别用来包裹段落或按钮
过度使用 <div> 会导致 CSS 选择器越来越长（如 <code>div div div .content p a），维护成本飙升
属性写法错误比标签错误更难排查
标签拼错（比如 <parg></parg>）浏览器会直接忽略；但属性写错常表现为“看似生效，实则无效”，例如：
-
<img src="logo.png" alt="logo" style="max-width:90%"> —— width 值带单位 px 是错的，HTML 中必须写纯数字：width="200"
-
<a href="https://example.com" target="_blank" rel="noopener"></a> 缺少 rel="noopener"，新窗口打开链接时存在安全风险（window.opener 可被恶意页面控制）
-
<input type="text" required="required"> 写法虽合法，但布尔属性只需存在即可：required 足矣；多写值反而显得不专业
最易被忽略的是：HTML 不校验属性值是否合理。比如 <video controls="false"></video>，controls 是布尔属性，写成 "false" 并不会关闭控件——它只要存在，就生效。这种“看起来像关了，其实开着”的问题，调试时得靠浏览器开发者工具逐个检查属性是否被真正解析。
<div> 和 <code><span></span> 确实是“万能容器”，但它们没有语义。连续嵌套 5 层 <div>，对人和机器都等于没说任何结构信息：
<ul><li>用 <code><header></header>、<nav></nav>、<main></main>、<article></article>、<aside></aside> 替代无意义的 <div>，能让浏览器、开发者、辅助技术快速定位区块功能
<li>
<code><span></span> 只适用于行内内容的微小标记（比如给某几个字加 class），别用来包裹段落或按钮
<div> 会导致 CSS 选择器越来越长（如 <code>div div div .content p a），维护成本飙升
属性写法错误比标签错误更难排查
标签拼错（比如 <parg></parg>）浏览器会直接忽略；但属性写错常表现为“看似生效，实则无效”，例如：
-
<img src="logo.png" alt="logo" style="max-width:90%">——width值带单位px是错的，HTML 中必须写纯数字：width="200" -
<a href="https://example.com" target="_blank" rel="noopener"></a>缺少rel="noopener"，新窗口打开链接时存在安全风险（window.opener可被恶意页面控制） -
<input type="text" required="required">写法虽合法，但布尔属性只需存在即可：required足矣；多写值反而显得不专业
最易被忽略的是：HTML 不校验属性值是否合理。比如 <video controls="false"></video>，controls 是布尔属性，写成 "false" 并不会关闭控件——它只要存在，就生效。这种“看起来像关了，其实开着”的问题，调试时得靠浏览器开发者工具逐个检查属性是否被真正解析。
