HTML 语义化标签的学习笔记
刚开美学网页的时候，我看教程里全是 <div>，于是一个页面从头到尾全是 div 套 div。后来看别人的代码，发现人家用的是 <header>、<nav>、<main> 这些标签，查了一下才知道这叫"语义化"——用有含义的标签，而不是全都用无意义的盒子。
一个页面的基本骨架
<body>
<header>页头：站名和标语</header>
<nav>导航：几个链接</nav>
<main>
主要内容放这里
</main>
<footer>页脚：版权和备案号</footer>
</body>我这个站的每一页都是照这个骨架写的，读者（包括搜索引擎和读屏软件）一眼就能分清哪是头、哪是正文。
常用的几个
<article>：一篇独立的内容，比如一篇笔记<section>：一个章节，通常带标题<aside>：和正文关系不大的侧边内容<figure>和<figcaption>：图片和它的说明文字
我踩过的坑
一开始我以为语义化标签有特殊的外观效果，用了 <header> 结果发现长得和 div 一模一样，还很疑惑。后来明白：语义化标签默认没有样式，它提供的是"含义"，样式还是要自己写 CSS。下一篇讲盒模型的时候就会知道，这些标签本质上也都是一个个盒子。
小结
语义化标签的好处是代码可读性好，对搜索引擎和读屏软件也友好。现在写页面我都会先把骨架用语义化标签搭好，再往里面填内容。