HTML5 和 CSS3 是当前前端开发最常用的技术，HTML 是页面结构标记语言，CSS 用于样式的设计和控制，如何将 HTML 和 CSS 结合使用才能写出规范的代码？
1. HTML5 编码规范
HTML5 作为最新的 HTML 标准，必须遵循以下规范：
1.1 DOCTYPE 说明文档类型
<!DOCTYPE html> 是 HTML5 标准的声明。在 HTML4 中，DOCTYPE 是指使用哪个 DTD，以便浏览器知道应该使用哪个规范进行渲染。通常我们使用 HTML5 的声明：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
...
</body>
</html>
1.2 HTML 语义化标签
语义化的标签与语意是紧密关联的，页面结构清晰，有助于 SEO，符合 W3C 规范，方便团队协作。HTML5 引入了一些新标签：
<header> -- 定义文档的页眉
<nav> -- 定义导航链接
<main> -- 定义文档的主要内容
<article> -- 定义页面的一篇文章
<aside> -- 定义文章的附属信息
<footer> -- 定义文档的页脚
1.3 属性命名规范
属性名尽量使用小写，多个单词使用中横线分割（如：data-name="value"）。
<div class="wrapper" data-name="value"> ... </div>
1.4 其他规范
- 图片必须添加 alt 属性，表示该图片用于什么用途；
- 每个标签内都要加上结束标签，除了 img、input、br 等；
- 最好不要使用 table 进行布局。
2. CSS3 编码规范
CSS3 作为最新的 CSS 标准，具有更多的样式控制能力，使用之前，需要了解以下规范：
2.1 样式命名规范
名称要具有语义化，方便团队协作，建议小写并使用中横线分割。
.header { ... }
.about-me { ... }
2.2 注释
注释对代码的可读性和可维护性很重要，注释的内容要清楚明了，并且注意缩进。
/* 主体样式 */
body { ... }
/* 导航样式 */
.nav { ... }
2.3 选择器
选择器要具有一定的权重，并且与 HTML 的语义化结构相匹配。建议不要使用标签选择器（如：div、a、ul），尽可能使用类和 ID。
/* ID 选择器 */
#header { ... }
/* 类选择器 */
.branding { ... }
2.4 其他规范
- 每个属性独占一行；
- 尽量使用缩写属性（如：background: #fff url(bg.png) no-repeat）；
- 避免使用 !important，除非绝对必要。
总之，HTML5 和 CSS3 编码规范对于我们的日常开发非常重要，不仅能够提高代码的可读性和可维护性，还有利于多人协作和代码管理。