html代码规范

HTML代码规范

1,单标签不要写闭合标签,这是为什么呢?因为写了也没什么用,即使不会出错,但是显得不懂得HTML规范,常用的单标签有 img ,link,input,hr,br,下面是不好的写法

<img src=' 1.jpg'></img>
<input type=' email' value='  输入' />

上面的代码应该这样写

<img src="1.jpg">
 <input type="email" value="输入">

2,自定义的属性要以data-开头 ,我们自己定义的非标准的属性要以data-开头,不然w3c会认为是不规范的代码。

不好的代码如下

<div count='5'></div>

上面的代码应该这样写

<div data-count="5"></div>

3,td要在tr里面,li要在ul/ol里面,我们在编写是一定要注意,用到td时,一定要包含在tr里面,li标签一定要在ul里面,这样的都是不规范的代码 运行时很容易出错误,有的时候浏览器会帮忙矫正,但是会根据浏览器的不同二不同 ,所以不要这样写。

4,ul里面的子元素只能是li,有时候我们为了实现页面效果会直接在ul里面直接添加一个div或者span标签,觉得这样没问题,其实这样写也是不规范的,这样写不同的浏览器会有不同的效果这样不能稳定的实现我们要求的效果。有事会造成页面错误,不能实现功能。

5,行内标签不能使用块级元素了,比如a标签中添加一个div,这样会造成我们的a标签不能正常点击了,span里面最好也不要添加块级元素,非要添加的话,需要设置一下inline元素显示设置为display为block,代码如下;

<a href="www.baidu.com"  style="display: block">
    <div></div>
</a>

 如上代码会正常显示。

6,每个页面要写<!DOCTYPE html>,这个我们用软件编写时 一般会给出,但是不给出的时候一定要记得写,这个是设置页面的渲染模式为标准模式,忘记写的话,会变成怪异模式,很多渲染效果会不同,不能达到我们代码的预期效果

7,特殊的情况下才会在html中添加style和script属性,这样是为了我们把css,js,html的问价分开,这样是为了简洁代码,也会加快页面的加载速度,写在一起的话,会造成页面的闪屏问题,不建议这样使用。

8,style标签尽量写在head里面,最好都写在一起,不然页面加载,突然就跳出一个样式,上面的样式已经渲染好了,再出来一个就要重新渲染,有可能造成闪屏问题,会造成不好的用户体验。

9,要在head标签靠前的位置协商charest的meta标签

<head>
    <meta charset="UTF-8">
</head>

现在的浏览器基本都支持utf-8,对于原来的utf-7已经不在支持了。

10,类的命名使用小写字母加中划线链接。如下,尽量不要使用驼峰式。

<div class="hello-world"></div>

11,对于属性和id尽量不要重复,如果我们在一个页面定义了两个相同的id,那么解析时会取第一个id,同理,相同的属性页也只会取第一个属性,避免出错,我们不要写重复的属性和id。

12,使用合适的标签:

1.比如字体,如果粗体我们就用b,而不是自己设置font-weight。

2,输入就用input标签,而不是写一个p标签,再去定义属性。

3,表单就用form标签,但是切记form标签中不可以在嵌套form 标签。

4,如果超链接就用a标签而不是自己写onclick跳转,a标签中不能嵌套a标签。

5,如果是按钮就用button,不要写一个a标签再去设置样式。

相关推荐