2、HTML规范：语义化标签使用、属性顺序、模板语法规范、SEO友好写法
语义化标签：不只是div的替代品
说实话，我刚入行那会儿也觉得语义化标签挺虚的。不就是把<div>换成<header>、<footer>嘛？后来在一个大型后台项目中，团队来了个视障工程师，我才真正意识到语义化的价值——屏幕阅读器全靠这些标签来理解页面结构。
语义化标签的核心就一句话：让代码自己会说话。你想想看，一个<nav>标签，谁看了都知道这是导航区。换成<div class="nav">，意思一样，但机器读不懂。
我个人的常用标签清单：
<header>— 页眉，通常放logo、搜索框<nav>— 主导航区域<main>— 页面主体内容，一个页面只用一次<article>— 独立的内容块，比如博客文章<section>— 有主题的分区，一般带标题<aside>— 侧边栏，或者与主内容相关的补充信息<footer>— 页脚，版权、联系方式
我在项目中遇到过一种情况：产品经理要求页面结构大改，因为之前全是<div>嵌套，改起来简直噩梦。后来重构时用了语义化标签，每个区块职责清晰，改结构就像搭积木一样简单。
属性顺序：让代码有呼吸感
属性顺序这件事，很多团队不重视。但你知道吗？统一的属性顺序能让代码阅读效率提升30%以上。我自己带团队时，定了一套规则：
<!-- 推荐顺序 -->
<input
type="text"
class="form-input"
id="username"
name="username"
value="张三"
data-user-id="123"
aria-label="用户名"
disabled
/>
<!-- 不推荐：乱序 -->
<input disabled class="form-input" id="username" type="text" name="username" value="张三" data-user-id="123" aria-label="用户名" />
我建议的顺序规则：
- 核心属性：
type、href、src— 决定元素本质的放最前面 - 标识属性：
class、id、name— 用于选择和定位 - 内容属性：
value、placeholder、alt— 展示的数据 - 自定义属性：
data-*— 业务相关 - 无障碍属性：
aria-*、role— 辅助功能 - 布尔属性：
disabled、readonly、checked— 开关类放最后
一个小技巧：在VS Code里装个"HTML End Tag Labels"插件，配合统一的属性顺序，代码结构一目了然。
模板语法规范：别让模板变成意大利面
现在前端项目基本都用框架了，Vue、React、Angular各有各的模板语法。但不管用什么框架，有些底层规范是通用的。
我踩过的坑：曾经有个项目，模板里混用了v-if和v-show，还嵌套了五六层条件判断。后来需求变更，改一个条件要翻半天代码。说白了，模板语法混乱比JS逻辑混乱更可怕——因为它直接决定了页面的渲染结构。
几条硬性规范：
| 场景 | 推荐写法 | 不推荐 |
|---|---|---|
| 条件渲染 | v-if="isVisible" |
v-if="isVisible === true" |
| 列表渲染 | v-for="item in list" :key="item.id" |
v-for="(item, index) in list" :key="index" |
| 事件绑定 | @click="handleClick" |
@click="handleClick($event)" |
| 属性绑定 | :src="imageUrl" |
v-bind:src="imageUrl" |
注意：千万别在模板里写复杂逻辑！我见过有人直接在模板里写v-if="list.filter(item => item.status === 'active').length > 0"。这种代码应该提取到计算属性里。模板只负责展示，逻辑交给JS。
SEO友好写法：让搜索引擎爱上你的页面
SEO这事儿，前端能做的其实不多，但做对了效果很明显。我记得有个电商项目，仅仅优化了标题标签和图片alt属性，自然流量就涨了15%。
核心要点：
- 标题层级要严格：一个页面只有一个
<h1>，然后按<h2>→<h3>顺序往下。别跳级，别滥用。 - 图片必须加alt：不只是为了SEO，更是为了无障碍。我习惯把alt写成「场景+主体+动作」的格式，比如「用户在首页点击搜索按钮」。
- 链接要有描述性文字：别用「点击这里」、「更多」这种。用「查看2024年产品价格表」代替。
- 结构化数据：用JSON-LD格式添加
schema.org标记，让搜索引擎能理解你的内容类型。
<!-- 结构化数据示例 -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "前端代码规范与团队协作实践",
"author": {
"@type": "Person",
"name": "资深前端架构师"
},
"datePublished": "2024-01-15"
}
</script>
避坑指南：我曾经为了SEO在页面里堆了50多个<h1>，结果被搜索引擎降权了。搜索引擎不傻，它知道你在作弊。老老实实按语义来，比什么黑帽SEO都管用。
嗯，HTML规范说到底就四个字：清晰、一致。语义化让结构清晰，属性顺序让代码一致，模板语法让逻辑清晰，SEO写法让目标一致。这四点做到了，你的HTML代码基本就合格了。