在HTML5页面开发中，合理设置标签属性是构建规范页面结构的基础，其中class和id是最常用的两个通用属性，结合语义化标签的使用，能让CSS选择更加高效，也让页面结构更清晰易懂。
HTML5中class和id的基本设置规则
class和id都属于HTML5标签的全局属性，几乎所有标签都支持这两个属性，设置方式非常统一，直接在标签的起始标签中添加对应属性即可。
id属性的设置要求
id属性用于为单个元素设置唯一标识，同一个页面中id的值不能重复，命名时建议采用小写字母加连字符的形式，避免和数字开头，方便后续CSS和JavaScript调用。
<!-- 正确设置id属性示例 --> <header id="page-header"> <h1>网站标题</h1> </header> <!-- 错误示例：id重复 --> <div id="page-header"></div>
class属性的设置要求
class属性用于为一组具有相同特征的元素设置分类标识，同一个页面中class的值可以重复，一个元素也可以同时设置多个class，多个class之间用空格分隔。
<!-- 单个class设置 --> <p class="article-text">这是第一段文章内容</p> <!-- 多个class设置 --> <p class="article-text highlight">这是需要高亮的段落</p> <!-- 多个元素使用相同class --> <p class="article-text">这是第二段文章内容</p>
结合语义化标签设置属性的优势
HTML5新增了很多语义化标签，比如<header>、<nav>、<main>、<article>、<footer>等，这些标签本身就带有明确的语义，再结合class和id设置属性，能让页面结构的可读性大幅提升。
比如导航区域使用<nav>标签，再给其设置id为"main-nav"，后续不管是写CSS样式还是用JavaScript操作，都能快速定位到这个区域，不需要再额外嵌套无意义的<div>标签。
<nav id="main-nav" class="site-nav">
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于我们</a></li>
<li><a href="/contact">联系我们</a></li>
</ul>
</nav>
如何通过class和id实现高效CSS选择
合理设置的class和id能让CSS选择器更加精准，减少选择器的层级，提升样式匹配效率，也能让CSS代码更易维护。
id选择器的使用
id选择器以#开头，优先级较高，适合用于设置页面中唯一元素的样式，比如页头、页脚等区域。
/* 选择id为page-header的元素设置样式 */
#page-header {
background-color: #f5f5f5;
padding: 20px;
text-align: center;
}
/* 选择id为main-nav的导航下的列表项设置样式 */
#main-nav li {
display: inline-block;
margin-right: 15px;
}
class选择器的使用
class选择器以.开头，优先级低于id选择器，适合用于设置一组相同样式元素的公共样式，或者给特定元素添加额外样式。
/* 选择所有class为article-text的元素设置公共样式 */
.article-text {
line-height: 1.8;
font-size: 16px;
color: #333;
}
/* 选择同时有article-text和highlight类的元素设置高亮样式 */
.article-text.highlight {
background-color: #fff3cd;
padding: 5px 10px;
}
/* 选择class为site-nav的导航下的链接设置样式 */
.site-nav a {
color: #333;
text-decoration: none;
}
.site-nav a:hover {
color: #1890ff;
}
设置时的常见注意事项
- 不要滥用id属性，因为id的唯一性会导致样式复用困难，非唯一元素尽量用class设置样式
- class和id的命名要见名知意，比如用header而不是box1，用nav-current而不是active1，方便后续维护
- 语义化标签本身已经有语义，不需要再额外加class描述语义，比如<header>标签不需要再加class="header"，除非需要区分多个同类型标签
- 避免class和id的值包含特殊字符，尽量只用小写字母、数字和连字符，减少兼容性问题
按照上述方法设置HTML5标签的class和id属性，既能保证页面结构符合语义化规范，又能让CSS选择更加高效，大幅降低后续页面维护和样式调整的成本，是前端开发中非常实用的基础技巧。