HTML是语义结构基础而非视觉实现基础，CSS负责视觉呈现；滥用div忽略语义会导致可访问性、SEO和响应式适配问题。
HTML 不是视觉实现基础，它是语义结构基础；真正负责视觉呈现的是 CSS。 把 HTML 当成“画布”或“样式工具”来用，是新手最容易栽跟头的地方——比如用 <div> 堆出按钮却忘了加 role="button"，或者给标题套 <span> 还硬塞 font-size 样式，结果屏幕阅读器读不出层级，搜索引擎也抓不到重点。
为什么不能直接用 div 搭页面骨架
浏览器不关心你写了多少个 <div>，它只按默认规则渲染：块级、无语义、无交互暗示。而现代网页需要的可访问性（a11y）、SEO、响应式适配，全依赖标签本身的含义。
-
<header>自带bannerARIA role，<div class="header">没有 -
<nav>被屏幕阅读器识别为导航区，<div id="nav">需手动补role="navigation" -
<main>是页面唯一主内容容器，多个<main>会触发 Lighthouse 可访问性警告 - 搜索引擎对
<h1>～<h6>的嵌套深度和语义连贯性有明确解析逻辑，乱用<p>+font-weight模拟标题会丢失结构权重
HTML5 语义化标签该怎么选
不是所有场景都适合换新标签。关键看是否满足「单一职责 + 内容自然归属」这两个条件。
- 用
<section>：当内容能独立成节、有明确主题（如「用户评价」「产品参数」），且通常配有<h2>或更高阶标题 - 不用
<section>：纯装饰性分隔线、仅为了加边框/内边距的容器——这时<div>更诚实 - 用
<aside>：侧边栏内容与主内容弱相关（如「相关文章」「广告位」），不是导航也不是页脚 - 用
<article>：内容可独立分发（RSS、分享链接），比如博客正文、新闻卡片、评论条目 - 避免嵌套陷阱：
<article>内可以有<header>，但<header>里别再套<article>—— 语义层级会冲突
class 名怎么起才不算埋雷
类名不是写给自己看的，是写给未来查 Bug 的人（大概率是你自己）和协作同事看的。命名偏差会直接导致样式污染和重构成本飙升。
立即学习“前端免费学习笔记（深入）”；
- 禁用样式导向命名：
red-text、float-left、margin-20—— 一旦设计改色或布局调整，类名就失效甚至误导 - 禁用模糊功能命名：
box、content、item—— 全局搜class="item"可能命中 37 个不同模块 - 推荐 BEM 风格精简版：
card__title（元素）、card--featured（修饰符），但不必强求双下划线，search-input、user-avatar--large同样清晰 - ID 仅用于锚点跳转或 JS 精确控制（如
document.getElementById("modal")），绝不用于 CSS 样式 —— 优先级太高，后期难覆盖
移动端适配从 HTML 结构就开始了
很多人以为 viewport meta 是“开关”，其实它只是前提。结构层面没处理好，CSS 再怎么写 @media 都救不回体验断层。
- 必须写
<meta name="viewport" content="width=device-width, initial-scale=1">，否则 iOS Safari 默认按 980px 渲染，文字小到无法点击 -
<picture>+<source>要按视口宽度切图，不是只靠srcset让浏览器猜 ——1x/2x无法覆盖折叠屏、iPad Pro 等设备像素比突变场景 - 表单控件优先用原生
<input type="email">、<input type="tel">，iOS 会自动唤起对应键盘；用<div contenteditable>模拟输入框，软键盘行为不可控 - 避免在
<body>上写overflow-x: hidden—— 有些 Android 浏览器会因此禁用双指缩放，用户无法放大查看表格细节
真正卡住项目的，往往不是 Flexbox 怎么居中，而是 <main> 漏写导致 Lighthouse 可访问性得分掉 40 分，或是 <time datetime="2026-04-30"> 没加 datetime 属性让结构化数据无法被搜索引擎提取。结构决定上限，样式只是表达方式。
