`

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标签再去设置样式。

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    fairyly#front-end-summary#2.html 代码规范1

    声明一个明确的字符编码:IE 兼容模式: 使用兼容性 标签来指定使用什么版本的 IE 来渲染页面。如果不是特殊需要,通常通过 edge mode 来通知 IE

    代码规范代码规范.txt

    ### 代码规范详解 #### 一、引言 在软件开发过程中,良好的代码规范对于确保项目的可维护性、可读性和一致性至关重要。本篇将基于《代码规范代码规范.txt》的内容,详细介绍其中提及的各项规范要点及其重要性。 #...

    代码规范.pdf

    首先,标题为《代码规范.pdf》,这表明该文档是一份关于编程代码规范的文件,它很可能详述了在编写代码时应遵循的规则和标准。代码规范是为了统一开发人员的编码风格,提高代码的可读性、可维护性,从而确保项目的...

    前端代码规范 - v1.0.docx

    本文档旨在提供一个通用的前端代码规范,涵盖 HTML、CSS、JS 和 Vue 代码规范,适合公司开发人员参考和借鉴。 概述 前端代码规范的目的在于提高代码的质量和可维护性,确保代码的可读性和可扩展性,减少错误和 Bug...

    Js代码规范

    大公司或者多人项目规模化编写Web App时规定的代码规范,便于维护和拓展。让多人代码看起来像是同一个人写的

    百度前端代码规范.pdf

    百度前端代码规范是一份旨在统一前端开发标准的文档,由百度前端团队或社区成员共同维护和分享。该规范涵盖的内容非常全面,包括但不限于Javascript编码规范、HTML编码规范、CSS编码规范、Less编码规范、E-JSON数据...

    java、前端代码规范(阿里巴巴).zip

    Java和前端代码规范是软件开发中的重要组成部分,尤其是在大型企业如阿里巴巴这样的公司中,它们对于保持代码质量和团队协作至关重要。本压缩包包含了阿里巴巴制定的Java和前端开发的详细规范,帮助开发者遵循一致的...

    Web 前端开发代码规范

    Web 前端开发代码规范介绍,包括html,javascript,css 的代码规范。适用于团队开发。

    前端代码规范文档,js,css,html等

    前端代码规范文档@js、css、html 等 本文档旨在规范前端开发过程中的代码编写,涵盖 JavaScript、CSS、HTML 等多方面的规范,旨在提高代码的可读性、可维护性和可扩展性。 命名规范 1.1.1 项目命名:全部采用小写...

    HTML/CSS代码开发规范文档

    HTML/CSS代码开发规范文档

    代码编写规范(java、html、css、js).pdf

    2. **HTML代码规范** - **语义化标签**:使用有意义的标签如、、等,提高页面结构的可理解性。 - **ID与Class**:ID是唯一的,Class可复用,命名应具有描述性。 - **缩进与空格**:保持元素层次清晰,使用缩进来...

    HTML代码的美感

    文件"Beautiful-HTML-chs.png"可能是一张关于中文版HTML代码规范的示意图,而"Beautiful-HTML.txt"则可能包含了一份优美格式化的HTML代码实例。这些资源可以帮助读者更好地理解和实践HTML代码的美感。 总结来说,...

    CSS代码规范与命名规范

    CSS规范常见问题的解决方法

    前端代码规范总结(3篇).zip

    本文将深入探讨HTML、CSS和JavaScript这三种主要前端技术的代码规范,旨在提供一套综合的指导原则,帮助开发者编写更可读、可维护和可扩展的代码。 首先,我们来谈谈HTML规范。HTML作为网页的基础结构语言,其规范...

    html-css规范.pdf

    2. **HTML 代码规范** - **HTML 通用模板**:模板通常包括DOCTYPE声明,定义文档类型,如XHTML 1.0 Transitional。这确保浏览器以正确模式解析页面。接着是html标签,其中包含head和body两部分。head部分用于设置...

    网站前端代码规范,新整理了一份HTML+CSS+IMG的规范,不含JS

    前端开发是构建网页和应用程序的重要部分,而良好的代码规范能够提高代码可读性,降低维护成本,提升团队协作效率。以下是一份关于HTML、CSS和图像处理的前端规范的详细说明: 1. HTML规范: - 结构清晰:HTML代码...

    史上最全的前端开发规范1

    1. **HTML 代码规范**: - 使用4个空格替代制表符,保证代码在不同环境下的一致性。 - 嵌套元素缩进4个空格。 - 属性值始终使用双引号,不使用单引号。 - 自闭合元素如`&lt;img&gt;`不应在尾部添加斜线,HTML5中这是可...

    前端代码规范.docx

    前端代码规范 本文档介绍了 Java 前端开发代码书写规范,旨在帮助开发者编写整洁、规范的代码。以下是该规范的详细说明: HTML 开发约束 1. 标签套用:优先复用案列中提供的 HTML 模版(包括其中的 class),以...

Global site tag (gtag.js) - Google Analytics