|  在技术加营销的道路上越走越远
温馨提示
我是弹窗内容
当前位置:首页 > 大前端开发 > HTML5代码编写细节规范
HTML5代码编写细节规范

HTML5代码编写细节规范

日期:2020-02-12 浏览量:300 原创作者:湖八爷
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>


上一篇: 机器人封面