快捷搜索:  as  2018  FtCWSyGV  С˵  test  xxx  Ψһ  w3viyKQx

新葡新京论坛:前端代码标准最佳实践:HTML篇



Web前端代码中,HTML是根本,CSS和JavaScript也是环抱着既有的HTML布局来构建,以是优越的HTML代码布局,除了前进了HTML代码的可读性,可掩护性和履行机能之外,也可以让相对应的CSS和JavaScript代码更好的构建。距前面两篇探究JavaScript(前端代码标准最佳实践:JavaScript篇)和CSS(前端代码标准最佳实践:CSS篇)之后,我们本日来探究Web前端HTML的一些最佳实践。

(1)HTML代码的基础规新葡新京论坛范

1. HTML的命名和款式

任何代码的纷乱都是从命名和款式的纷乱开始的,以是必然要有统一和规范的命名和款式,以下是一些基础的规范。

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

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

HTML代码的层级缩进为4个空格;值为空的元素定义应该零丁占用一行;包孕子元素的元素的肇端标签和闭合标签分手零丁占用一行。

例子:

Unicorn。

(2)高可读性的HTML代码

1. 相宜的地方用相宜的标签

HTML代码不是纯挚为了让浏览器展现,也必要优越的可读性,方便代码的反省和掩护,更紧张的是各类搜索引擎也能更好地识别页面内容,以是要写有语义的HTML代码,即常常提到的HTML标签语义化。

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

~

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

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

table标签最早是常常用于结构,至今还有大年夜量的页面是由table来结构的,table结构遭到了前端工程师们的同等藐视,使得很多新手不敢应用这个标签了,这里要强调的是table的语义是表格,假如必要列出一些统计数据等,table标签是首选。

,,

是无序列表,是有序列表,以是网页的导航菜单最相宜用ul,而一些有序的列表,比如章节列表等,则应该用ol标签。

不好的例子:

文章标题

正文内容,必要强调的内容

导航1

导航2

导航3

规范的例子:

文章标题

正文内容,必要强调的内容

导航1

导航2

导航3

2. 给页面添加需要的meta

meta信息描述有关页面的信息,放在页面的head部分,用于搜索引擎更友好的识别。如下是常用新葡新京论坛的一些定义:

3. 不要省略某些标签的属性

标签的alt属性的感化是当图片不能正常显示的时刻的调换翰墨,标签的tit新葡新京论坛le属性可作为阐明信息,并且当鼠标hover时显示为提示信息。

(3)高机能的HMTL代码

1. CSS文件在前,JavaScript文件在后,JavaScript代码放到页面底部

JavaScript文件的下载和解析会壅闭页面的加载,以是在head部分,CSS的引用写在前面,而JavaScript文件的引用写在后面;

别的script标签有两个属性async和defer,defer设置为true,则意味着此JavaScript文件滞后履新葡新京论坛行,不影响页面HTML的衬着,async是HTML5中新引入的属性,已经获得了大年夜多半今世浏览器的支持,此属性设置为true意味着文件异步加载和履行。两个属性的差别是async下载完成后就会履行,而defer则会照样按照在页面的的序次来履行,以是下载和履行不必然会继续。可以根据实际的项目环境设置这两个属性,前进页面加载的速率。

2. 精简HTML代码

越精简的HTML代码,页面的传输的光阴就会越短,页面的衬着的光阴也会更快,响应的用户体验就会越好,以是很有需要精简页面加载的HTML代码。

页面的精简主要从如下几个地方入手:

删除多余标签

多余的标签大年夜多是为了方便结构而加入的,例如如下的代码:

item1

item2

item3

代码中最外层的div标签大年夜部分环境下是没有需要,其内层的ul标签可以完全担当其感化,可以直接删除此标签,并适当调剂ul的样式。

动态加载和衬着非关键区域

在页面中某些区域并不是用户重点关注的区域,例如页面的广告,一些统计信息等,此类内容可以等待页面关键区域加载后经由过程javascript代码动态加载和显示。

3. 审慎应用iframe

iframe有两个毛病:1,iframe会壅闭主页面的Onload事故;2,iframe和主页面共享连接池,而浏览器对相同域的连接有限定,以是会影响页面的并行加载。应用iframe之前必要斟酌这两个毛病。

假如必要应用iframe,最好是经由过程javascript动态给iframe添加src属性值,这样可以可以绕开以上两个问题。

总结

以上是一些常见的HTML开拓历程中要留意的地方,着实有关HTML还有很多细节的技术,必要我们在实践中赓续的新葡新京论坛总结。本文的目的在于抛砖引玉,让大年夜家注重代码的可读性,可掩护性,以及代码的机能,在开拓的历程中故意识地去斟酌这些问题,养成优越的编码习气比认识某项开拓技巧更紧张。

您可能还会对下面的文章感兴趣: