前端代码标准最佳实践: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个空格;值为空的元素定义应该单独占用一行;包含子元素的元素的起始标签和闭合标签分别单独占用一行。

例子:

<div id="info_container" class="info-container">
    <div class="container-top"></div>
    <article>
         ...
    </article>
    <div class="container-bottom"></div>
</div>

2 CSS代码和HTML代码分离

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

3. 写标准的HTML代码

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

停止规范不支持的标签,如下的标签规范已经不推荐使用,尽管浏览器可以正确的解析:<center><font><s><strike><u><menu>等。

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

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

(2)高可读性的HTML代码

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

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

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

<h1>~<h6>

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

<em>和<strong>

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

<table>

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

<ul>,<ol>,<li>

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

不好的例子:

<div class="title">文章标题</div>

<p>
正文内容,<b>需要强调的内容</b>
</p>

<div class="main-menu">
    <span>导航1</span>
    <span>导航2</span>
    <span>导航3</span>
</div>

规范的例子:

<h1>文章标题</h1>

<p>
正文内容,<strong>需要强调的内容</strong>
</p>

<ul class="main-menu">
    <li>导航1</li>
    <li>导航2</li>
    <li>导航3</li>
</ul>

2. 给页面添加必要的meta

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

<meta name="author" content="John Doe">
<meta name="copyright" content="&copy; 1997 Acme Corp.">
<meta name="keywords" content="corporate,guidelines,cataloging">
<meta name="date" content="1994-11-06T08:49:37+00:00">

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

<img>标签的alt属性的作用是当图片不能正常显示的时候的替换文字,<a>标签的title属性可作为说明信息,并且当鼠标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代码。

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

删除多余标签

多余的标签大多是为了方便布局而加入的,例如如下的代码:

<div>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </ul>
</div>

代码中最外层的div标签大部分情况下是没有必要,其内层的ul标签可以完全担当其作用,可以直接删除此标签,并适当调整ul的样式。

动态加载和渲染非关键区域

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

3. 谨慎使用iframe

iframe有两个缺点:1,iframe会阻塞主页面的Onload事件;2,iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。使用iframe之前需要考虑这两个缺点。 如果需要使用iframe,最好是通过javascript动态给iframe添加src属性值,这样可以可以绕开以上两个问题。

总结

以上是一些常见的HTML开发过程中要注意的地方,其实有关HTML还有很多细节的技巧,需要我们在实践中不断的总结。本文的目的在于抛砖引玉,让大家重视代码的可读性,可维护性,以及代码的性能,在开发的过程中有意识地去考虑这些问题,养成良好的编码习惯比熟悉某项开发技术更重要。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏韩东吉的Unity杂货铺

零基础入门 15: UGUI Button

按钮对于一个应用或者游戏来说。必不可少,今天这篇分享,来说下UGUI里的按钮,Button组件。

16810
来自专栏JetpropelledSnake

Python入门之Pycharm开发中最常用快捷键

35720
来自专栏挖坑填坑

Angular练习之animations动画

让我们隆重介绍Angular动画。Angular是基于最新的Web Animations API,我们使用动画触发器(animation triggers)来定...

12910
来自专栏葡萄城控件技术团队

ActiveReports 区域报表中的事件介绍

1、仅触发一次的事件 以下是在报表的处理过程中仅触发一次的所有事件这些事件在报表的处理周期中仅在最开始和结束前触发一次。 ReportStart 该事件在Dat...

24470
来自专栏吴裕超

原生js怎么为动态生成的标签添加各种事件

这几天用zepto.js写了不少事件,突然想到一个问题,那就是原生的js如何给动态生成的标签添加事件?因为这些标签都是后来通过ajax或者运行其他点击事件生成的...

36050
来自专栏行者常至

(20)Struts2_主题

8910
来自专栏每日一篇技术文章

weex-17-组件list

我们根据数组动态的添加子区域,这里我们要使用到组件cell,当列表上数据比较多时,使用cell能够更高效的管理内存和组件重用

14320
来自专栏微信小开发

五分钟掌握微信小程序轮播图

从公共库v1.4.0开始,change事件返回detail中包含一个source字段,表示导致变更的原因,可能值如下: autoplay 自动播放导致 swip...

24160
来自专栏前端儿

CSS布局 -- 左侧定宽,右侧自适应

14820
来自专栏macOS 开发学习

一步一步,开始上手Mac 开发(三)

1.1 先选中MasterViewController.xib,重新调整view 的尺寸和排列内部的各个控件,(以你喜欢的方式)让控件看起来更协调,而且能够全部...

12320

扫码关注云+社区

领取腾讯云代金券