但也正因为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>