前端编码规范--html 规范_html/css_WEB-ITnose

文档类型

推荐使用 html5 的文档类型申明:

     

语言属性

根据 html5 规范:

强烈建议为 html根元素指定 lang属性,从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音,有助于翻译工具确定其翻译时所应遵守的规则等等。

这里列出了 语言代码表。

     

IE 兼容模式

IE 支持通过特定的 meta标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求,否则最好是设置为 edge mode,从而通知 IE 采用其所支持的最新的模式。

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

省略自闭合元素的斜线

不要在自闭合(self-closing)元素的尾部添加斜线 – html5 规范中明确说明这是可选的。

不推荐

推荐

不要省略结束标签

不要省略可选的结束标签(closing tag)。

不推荐

推荐

省略 type 属性

省略 css 与 js 的 type属性。鉴于 html5 中以上两者默认的 type值就是 text/css和 text/javascript,所以 type属性一般是可以忽略掉的,甚至在老旧版本的浏览器中这么做也是安全可靠的。

语义化

使用具有语义的标签,比如 h1、 p等等。

    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    <meta name="renderer" content="webkit">    Document<body>    

标题

子标题

文本段落

加粗文本

<script src="main.js"></script>

实用为王

尽量遵循 html 标准和语义,但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。

不推荐

    

推荐

结构,表现与行为分离

一个完整的页面分为三个部分:结构(html)、表现(css)和行为(js)。为了使它们成为可维护的干净整洁的代码,我们要尽可能的将它们分离开来。

严格地保证结构、表现、行为三者分离,并尽量使三者之间没有太多的交互和联系。就是说,尽量在文档和模板中只包含结构性的 html;而将所有表现代码,移入样式表中;将所有动作行为,移入脚本之中。在此之外,为使得它们之间的联系尽可能的小,在文档和模板中也尽量少地引入样式和脚本文件。

清晰的分层意味着:

  • 不使用超过一到两张样式表
  • 尽量合并脚本
  • 不使用内嵌样式( <style>.no-good {}</style>)
  • 不使用行内样式(
  • 不使用内嵌脚本( <script>alert('no good')</script>)
  • 不使用表现元素(

小写

html 标签及属性(包括自定义属性)都是小写字母,不要使用大写字母。

绑定数据

如果需要为标签绑定一些数据的话,请使用 html5 的自定义属性 data-*来绑定相关数据。

张三

布尔型属性

布尔型属性可以在声明时不赋值。xhtml 规范要求为其赋值,但是 html5 规范不需要。

html 引号

html 属性的引号请使用双引号而不是单引号。

郑重声明:本文版权包含图片归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们(delete@yzlfxy.com)修改或删除,多谢。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

留言与评论(共有 0 条评论)
昵称:
匿名发表
   
验证码: