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