码迷,mamicode.com
首页 > Web开发 > 详细

HTML规范(基于HTML5)

时间:2019-01-28 10:54:16      阅读:308      评论:0      收藏:0      [点我收藏+]

标签:相同   height   foo   frame   区分大小写   语义   错误代码   使用   rip   

 

1. HTML基础规范—整体结构

1.1 文件应以<!doctype html>首行定格开始,这句话告诉浏览器这是一个什么文件,我们推荐使用<!doctype html>。

1.2 必须在head元素内部的meta标签内声明文档的字符编码charset, 如:<meta charset="UTF-8">,这句代码告诉浏览器应该此HTML文件使用的字符集是什么,如果不加此行代码,那么在浏览器中可能显示为乱码。

1.3 页面的title是极为重要的不可缺少的一项。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>示例1</title>
 6 </head>
 7 <body>
 8 
 9 </body>
10 </html>

1.4 结构顺序和视觉顺序基本保持一致

?按照从上至下、从左到右的视觉顺序书写HTML结构。

?有时候为了便于索取引擎抓取,我也会将重要内容在HTML结构顺序上提前,因为搜索引擎抓取网页内容是自上而下的,所以将重要的内容在HTML结构顺序上提前可便于抓取重要内容。

?用div代替table布局,可以使HTML更具有灵活性,也方便利用css控制。

? table不建议用于布局,但表现具有明显表格形式的数据,table还是首选项。

1.5 结构、表现、行为三者分类,避免内联。

?使用link将css文件引入,并置于head中。注意:一般我们不适用@import来引入外部css文件。

?使用script将js文件引入,并置于body底部,js文件最后加载,HTML会最先加载,用户体验会更好。注意:并不是所有的js文件都要放置与body底部,如果我们需要使用js文件动态修改meta元素内容时,需要将js文件引入head标签中。

1.6 保持良好的树形结构

?每一个块级元素都另起一行,每一行都使用tab缩进对齐。如果不是块级元素,比如几个行内元素,我们把它写在一行即可。注意:html、head、body以及body下的几个第一级标签(即直接子元素)不缩进,其他的都正常缩进。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>示例1</title>
 6 </head>
 7 <body>
 8     <h1>缩进问题</h1>
 9     <div>我是块级元素</div>
10     <div>
11         <div>
12             <p>我是段落标签</p>
13         </div>
14     </div>
15 </body>
16 </html>

  1.7 其他问题

    • 结构上如果可以并列书写,就不要嵌套。例如:如果可以写成<div></div><div></div>那么就不要写成<div><div></div></div>
    • 如果结构已经可以满足视觉和语义的要求,那么就不要有额外的冗余的结构。例如:比如<div><h2></h2></div>已经能满足要求,那么就不要再写成<div><div><h2></h2></div></div>
    • 一个标签上应用的类名不要过多,越少越好。例如:<div class="class1 class2 class3 class4"></div>
    • 对于一个语义化的内部标签,应该尽量避免使用类名。例如:li标签中的itm应去除:<ul class="m-help"><li class="itm"></li><li class="itm"></li></ul>

1.8  Renderer

<meta http-equiv="X-UA-Compatible" content="edge,chrome=1" />

或者<meta http-equiv="X-UA-Compatible" content="edge" />

chrome=1值,目的是触发Google Chrome Frame,不过现在Google已经抛弃Google Chrome Frame了,因此也不用这样写了。

    <meta name="renderer" content="webkit|ie-comp|ie-stand">

content的取值为webkit,ie-comp,ie-stand之一,区分大小写,分别代表用webkit内核,IE兼容内核,IE标准内核。 若页面需默认用极速核,增加标签:<meta name=”renderer” content=”webkit” /> 若页面需默认用ie兼容内核,增加标签:<meta name=”renderer” content=”ie-comp” /> 若页面需默认用ie标准内核,增加标签:<meta name=”renderer” content=”ie-stand” /> 
这里发现一个问题,官方给的信息里结尾是“>”,实际测试时不起作用,这时只要把结尾改为“ />”(注意 / 前面有空格)。 

2. HTML基础规范—代码格式

2.1 说明文案的注释方法

    • 开始注释:<!--注释文案-->
    • 结束注释:<!--/注释文案-->
    • 允许只有开始注释。
 1 <div class="public-header">
 2         <div class="public-container clearfloat">
 3             <div class="header-logo"><a href="javascript:;"></a></div><!-- a也可以,但是,同一级:要么内联要么块级 -->
 4             <ul class="header-nav clearfloat">
 5                 <li class="item"><a href="javascript:;">Our Story</a></li><!--不建议直接给li进行命名-->
 6                 <li class="item"><a href="javascript:;">Menu</a></li>
 7                 <li class="item"><a href="javascript:;">Reservations</a></li>
 8                 <li class="item"><a href="javascript:;">News</a></li>
 9                 <li class="item"><a href="javascript:;">Reviews</a></li>
10             </ul>
11         </div><!-- 没有高度的,所以要加浮动 -->
12     </div><!-- 1. 公共头 -->

   2.2 严格嵌套

(1)应当以最严格的XHTML script标准来嵌套,不如内联元素不能包含块级元素等。

(2)正确闭合标签且必须闭合。

2.3 严格的属性

(1)属性和值全部小写,每个属性都必须有一个值,每个值必须加双引号。

(2)没有值的属性必须使用自己的名称作为值(checked、disabled、readonly、selected等等)。

(3)可以省略style标签和script标签的type属性。

3. HTML基础规范—HTML内容语义

1.加强资源型内容的可访问型和可用性。

比如在img标签内加入alt属性,在audio内加入文案和链接等等。

2.加强不可见内容的可访性

比如背景图片的文字应该同时卸载HTML中,并使用css使其不可见,有利于搜索引擎抓取你的内容,也可在css失效的情况下看到内容。

3.适当使用实体(以实体代替与HTML语法相同的字符,避免浏览器解析错误)

   常用的HTML字符实体(建议使用实体):

 技术分享图片

      常用的字符实体(不建议使用实体):

 技术分享图片

4. HTML基础规范—正确闭合HTML标签

自闭和标签和闭合标签应该按照要求书写。标签不要交叉嵌套。

如下的这几种写法不符合规范,应该严格禁止:

<!-- 错误:非自闭合标签没有结束标签 --><a href="demo.html" title="demo">simple
<!-- 错误:非自闭合标签使用自闭合标签的语法 --><a href="demo.html" title="demo" />
<!-- 错误:自闭合标签使用非自闭合标签的语法 --><img src="demo.png" alt="demo"></img>

当元素的起始标签和结束标签不在同一个元素的内容中时,则会出现交叉嵌套。应该严格禁止标签之间的交叉嵌套。
下面的例子中起始标签“<span>”在元素div的内容中,而结束标签“</span>”则在div元素的内容之外:

<!-- 错误: 起始标签“<span>”在元素div的内容中,结束标签“</span>”则在div元素的内容之外 --><div>foo <span>bar</div> baz</span>

一般通过编写层次缩进良好的HTML代码能够最大化避免出现这样交叉嵌套的错误代码。

5. HTML基础规范—停止使用不标准的标签和属性

标签没有实际的语义,仅仅是用于设置样式

不推荐使用单纯设置样式的标签,如:basefont、big、center、font等。应该通过CSS设置样式,让HTML标签功能更单一。不推荐的示例如下:

<!--不推荐代码:不推荐使用单纯设置样式的标签,应该通过CSS设置样式--><font color=blue>don‘t use it!</font><big>don‘t use it!</big><center>don‘t use it!</center>

不推荐在HTML标签中添加样式属性,如:iframeimginputdiv等标签中的align属性,body标签上的background属性,tdtr标签上的heightwidthnowrapbgcolorvalign等属性,iframe标签中的framebordermarginheightscrolling等属性。此类属性应该废弃,并通过添加CSS样式来实现相同的效果。不推荐的示例如下:

<!—不推荐代码:标签中添加border、width、height等样式属性--><img src=”#” alt=”demo” border=”1” width="194" height="37" /><div id="focusViwer" align=center> </div>

不推荐使用 <blink> 或<marquee> (闪动,滚动)。这两个标签的职能已经超出了HTML本身,并且也存在浏览器的兼容问题。以如今的审美来说,这两个标签实现的效果丑陋无比,如果一定要这样的效果,可以通过JavaScript代码来实现,并且效果会更好,如:可以使用jQuery Marquee插件 。不推荐的示例如下:

<!--不推荐代码:效果丑陋,并且存在浏览器兼容问题,不推荐使用,如果需要实现这样的效果,可以通过JavaScript代码来实现,并且效果会更好--><blink>don‘t use it!</blink><marquee scrollamount=3 scrolldelay=100 >don‘t use it</marquee>

6. HTML基础规范—其他

   书写链接地址时, 必须避免重定向,例如:href=”http://baidu.com/”, 即须在URL地址后面加上“/”;

引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式为库名称+插件名称, 比如jQuery.cookie.js;

能以背景形式呈现的图片,尽量写入css样式中;

书写过程中,考虑向后扩展性。

HTML规范(基于HTML5)

标签:相同   height   foo   frame   区分大小写   语义   错误代码   使用   rip   

原文地址:https://www.cnblogs.com/chenqilin-516/p/10328444.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!