HTML5代码编写细节规范
日期：2020-02-12
浏览量：1145
HTML作为一门标签语言，有着非常优秀和简单易懂的语法。近年来，因为主流浏览器对Html的友好支持，以及H5的诞生，使得HTML这门标签语言能做的事情越来越多了，同时也降低了初学者的学习和使用门槛。
但也正因为HTML语言的简单易学以及语法的友好性，导致越来越多的开发者在编写HTML的时候随心所欲，代码风格参差不齐，看起来非常的糟糕。
最近这一现象也出现在我的开发团队中，当我看到这些糟糕代码的时候，我的内心是非常抗拒的，总想把这些代码的风格统一起来，于是就有了今天这篇HTML5代码编写细节规范。
1：HTML页面第一行需声明文档类型。
<!doctype html>
2：所有元素名都采用小写字母。
不规范的写法：
<DIV><p>这是一个段落。</p></DIV> <Div><p>这是一个段落。</p></DIV>
符合规范的写法：
<div><p>这是一个段落。</p></div>
3：所有元素都必须关闭。
不规范的写法：
<br> <meta charset="utf-8"> <p>段落
符合规范的写法：
<br /> <meta charset="utf-8" /> <p>段落</p>
4：所有属性名需采用小写。
不规范的写法：
<div CLASS="menu"></div>
符合规范的写法：
<div class="menu"></div>
5：所有属性值需使用双引号，不得省略双引号，也不得使用单引号。
不规范的写法：
<div class=menu></div> <div class='menu'></div>
符合规范的写法：
<div class="menu"></div>
6：属性前使用一个空格即可，不得使用多个空格。
不规范的写法：
<meta name="renderer" content="webkit" />
符合规范的写法：
<meta name="renderer" content="webkit" />
7：等号（=）前后不允许有空格。
不规范的写法：
<meta name = "renderer" content = "webkit" />
符合规范的写法：
<meta name="renderer" content="webkit" />
8：缩进使用Tab键，嵌套的节点应该缩进，不得采用空格来代替Tab键。
9：不得无缘无故添加换行，导致空行太多。
不规范的写法：
<body> <h1>湖八爷博客</h1> <h2>HTML</h2> <p>在技术加营销的道路上越走越远</p> </body>
符合规范的写法：
<body> <h1>湖八爷博客</h1> <h2>HTML</h2> <p>在技术加营销的道路上越走越远</p> </body>
10：head标签里面一定要写上下面的代码。
<meta charset="utf-8" /> <title>网页标题</title> <meta name="keywords" content="我是关键字" /> <meta name="description" content="我是描述" />
11：img标签一定要写alt属性。
不规范的写法：
<img src="hubaye.png" />
符合规范的写法：
<img src="hubaye.png" alt="湖八爷" />
12：不允许省略省略<html>，<head>，<body>标签。
不规范的写法：
<!doctype html> <title>页面标题</title> <h1>这是一个标题</h1> <p>这是一个段落。</p>
符合规范的写法：
<!doctype html> <html> <head> <title>页面标题</title> </head> <body> <h1>这是一个标题</h1> <p>这是一个段落。</p> </body> </html>
上一篇:
机器人封面
下一篇:
JavaScript测试文章
