资深老兵带你扒开HTML核心标签的“隐藏潜规则”

在平时做代码审计和前端代码审查时，我发现很多刚入行的新手往往只关注网页“长什么样”，却忽略了网页“该怎么写”。随便丢几个<div>和<span>把页面拼凑出来，不仅代码冗余，在搜索引擎眼里更是一文不值。

HTML看似简单，但里面的语义化标签和SEO（搜索引擎优化）规则大有门道。今天，我就给大家掰开揉碎了讲讲，并附上实战代码，带你彻底搞透前端新手最常用、但也最容易用错的三个核心标签：标题（h1-h6）、段落（p）和图片（img）。

一、H系列标签：不是字大就牛，它是网页的“骨架”

H系列标签（Headline）包含从<h1>到<h6>六个级别，它们不仅是双标签、容器级标签，更是整个网页语义权重的“天花板”。

很多新手在使用时有个误区：觉得哪个字号合适，就挑哪个标签。这在实际开发中是绝对的禁忌！

1. 权重的秘密：SEO的命根子
在搜索引擎爬虫（比如百度蜘蛛、Googlebot）眼里，除了<meta>标签里的关键字，它们最先抓取、最看重的内容就是 H 系列标签。权重的逻辑严格按照h1 > h2 > ... > h6递减。

2. H1标签的“潜规则”：一个页面只能有一个
<h1>标签是整个页面的核心主旨。如果你为了让文字变大，在页面里狂堆<h1>，搜索引擎会直接判定你在作弊（Keyword Stuffing），从而毫不留情地降低你的网站排名。

老兵实战技巧：如何用好H1？
你去看看腾讯、新浪等大型门户网站的代码，会发现一个行业通用的潜规则：用 H1 标签包裹网站Logo。这样做既突出了核心语义，又把权重给到了网站品牌，一举两得。

我们来看一段代码对比：

<h1>欢迎来到我的网站</h1><p>网站介绍...</p><h1>最新文章列表</h1><ul>...</ul><h1class="logo"><ahref="https://www.qq.com"title="腾讯网"><imgsrc="images/logo.png"alt="腾讯网 - 首页"></a></h1><h2