html编写规范

时间:2022-04-21
本文章向大家介绍html编写规范,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

今天我为大家介绍一下html的基本知识。

什么是html

html指的是超文本标记语言(Hyper Text Markup Language),它包含一系列的标签,我们把这些标签叫做HTML标签,它是HTML语言中最基本的单位、最重要的组成部分。html是用来描述网页的一种语言。

上面是一个基本的html代码文件,下面我们来看看其具体含义。

html属性

DOCTYPE标签是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档。

意思是文档种类为超文本标记性语言或超文本链接标示语言。声明必须是 HTML 文档的第一行,位于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

lang

强烈建议为根元素指定属性,从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音,有助于翻译工具确定其翻译时所应遵守的规则等等。

简体中文页面:

英语页面:

title

网页标题。

meta

META标签是HTML标记HEAD区的一个关键标签,提供文档字符集、使用语言、作者等基本信息,以及对关键词和网页等级的设定等,最大的作用是能够做搜索引擎优化(SEO)。

1. charset

2. http-equiv

相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助浏览器正确地显示网页内容。

X-UA-Compatible IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式,以此来解决部分兼容问题。

以上代码IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame.

3. name

name属性主要用于描述网页,比如网页的关键词,叙述等。与之对应的属性值为content,content中的内容是对name填入类型的具体描述,便于搜索引擎抓取。

a. renderer

b. viewport

4. 移动端配置

5. 图标设置

6. description、keywords

编码规范

不管有多少人参与同一个项目,一定要确保每一行代码都像是同一个人编写的。

这就需要在一个项目中,我们永远遵循同一套编码规范。在项目开发前,制定一套行之有效的编码规范,每个项目组成员都要按这个规范来编码。

块级元素和行内元素

说到代码规范,我先来说说html的块级元素和行内元素。

行内、块状元素区别:

(1).块级元素会独占一行,其宽度自动填满其父元素宽度;行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化。

(2).一般情况下,块级元素可以设置 width, height属性;行内元素设置width,height无效(注意:块级元素即使设置了宽度,仍然是独占一行的);

(3).块级元素可以设置margin 和 padding;行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。(水平方向有效,竖直方向无效);

块级元素和行内元素有哪些,我就不在这一一说明。

块级元素和行内元素间如何相互转化,大家可以思考一下。

规范

1. 标签以及标签属性小写。

2. 可省略的闭合标签不省略,自闭合的标签可不写结束斜线。

3. 嵌套的标签必须被正确的嵌套,嵌套的子元素有一格的缩进。

4. 使用2个空格进行缩进。

5. 有良好的注释规范,针对页面模块有简要的注释,便于维护。

6. 尽量使用语义化的标签,例如header,footer,nav,article,filedset,section等,避免全页使用div布局。

7. 尽量减少标签嵌套。

8. 尽量减少classname,采用语义化标签来代替。

9. 属性值使用双引号,不要使用单引号。

10. 属性的使用顺序 class id name data- src for type href title alt aria role。

11. 布尔型属性 不用赋值,有就是true,没有就是false。

12. 行内元素中不要嵌套块级元素,比如:。

13. 段落文字应该用,避免使用。

14. css、js尽量使用文件引入的形式,不要使用内联。

15. 使用link将css文件引入,并置于head中。使用script将js文件引入,并置于body底部。

今天就为大家介绍到这里,祝大家新年快乐!