前端代码标准最佳实践:HTML篇

合集下载
相关主题
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

我们今天来探讨Web前端HTML的一些最佳实践。

(1)HTML代码的基本规范

1. HTML的命名和格式

任何代码的混乱都是从命名和格式的混乱开始的,所以一定要有统一和规范的命名和格式,以下是一些基本的规范。

HTML代码所有的标签名和属性应该都为小写,虽然HTML代码是大小写不敏感的,但是W3c的规范建议为小写;属性值应该用双引号包括。

给所有的关键元素定义元素的id和class,便于和CSS,JavaScript的交互;id名称中的关键词用下划线(_)连接,class的关键词用中划线(-)连接,根据实际的意义和Dom树的层级关系定义合适的名称。

HTML代码的层级缩进为4个空格;值为空的元素定义应该单独占用一行;包含子元素的元素的起始标签和闭合标签分别单独占用一行。

例子:

?

1 2 3 4 5 6 7

...

2 CSS代码和HTML代码分离

样式可以直接写在标签的style属性里面,也可以写在页面head区域的style标签里面,这两种方式都是不好的方式,尤其第一种方式。应该把样式单独写到css样式文件中,方便代码的重用和维护。

3. 写标准的HTML代码

所有的HTML标签应该正确闭合;所有的元素定义都要有起始和闭合标签,即使元素的值为空,除了如下这些标签,如下的标签是可以自闭合:


等。

停止规范不支持的标签,如下的标签规范已经不推荐使用,尽管浏览器可以正确的解析:

等。

停止使用规范不支持的属性,如下的属性已经不推荐使用:body的background属性,某些标签的align 属性,td和th上的nowrap属性,某些标签的width和height属性等。其实这些规范不推荐的标签和属性都是一些影响外观的标签和属性,都可以通过CSS样式来设置。

应该经常验证代码的标准性,可以使用w3c提供的验证工具:Unicorn。

(2)高可读性的HTML代码

1. 合适的地方用合适的标签

HTML代码不是纯粹为了让浏览器展现,也需要良好的可读性,方便代码的检查和维护,更重要的是各种搜索引擎也能更好地识别页面内容,所以要写有语义的HTML代码,即经常提到的HTML标签语义化。

div和span是两个典型的没有任何语义的标签,所以使用这两个标签之前先确认,是否有更具有语义的标签可以代替。

~

h1到h6是作为标题的,h1是最高级别的标题,网页中显示标题的地方应该使用这些标题标签。

这两个标签的语义是强调和重点强调,代替了没有任何语义的标签

table标签最早是经常用于布局,至今还有大量的页面是由table来布局的,table布局遭到了前端工程师们的一致唾弃,使得很多新手不敢使用这个标签了,这里要强调的是table的语义是表格,如果需要列出一些统计数据等,table标签是首选。