专栏首页编程html编写规范

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底部。

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

本文来自企鹅号 - 逸儒媒体

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【CSS选择符】后代选择符

    在学习后代选择符之前,首先要了解一下组成一个网页的HTML家谱,每个HTML标签标示其中一个家庭成员。网页中的第一个HTML标签(标签),相当于所有其他标签的始...

    企鹅号小编
  • Python读书笔记9

    我们针对列表需要进行整体的排序,今天就和大家聊一聊列表的排序应用。 一、永久性排序 什么是永久性排序呢,之前很多方法比如针对字符串的title方法,针对列表的重...

    企鹅号小编
  • 苹果 AI 主管展示苹果自动驾驶技术,识别功能强大

    根据 Wired 报告,苹果人工智能(AI)主管 Ruslan Salakhutdinov 出席机器学习大会 NIPS 时,展示了苹果公司如何使用机器学习实现自...

    企鹅号小编
  • 【小知识】小例子说明Spring的核心思想之一:控制反转。

    目的:改写已存在的类的某个方法或某些方法,使方法增强了。装饰设计模式(也即包装设计模式) 口诀:

    黑泽君
  • Silverlight学习笔记:布局之stackpanel

    在用户界面设计方面的竞争多半是围绕着如何制作出有吸引力、实用、灵活的用户界面而展开的。在基于浏览器的应用中进行界面的设计则是一项更加需要技巧的工作,因为我们的客...

    大江小浪
  • 与一个移民新西兰的前端同学的聊天记录(节选)

    今天早晨在跟一个先行者计划的同学聊天中,觉得他的情况和需求很有代表性,所以在征得他同意之后,把我俩的聊天记录发出来,他的个人隐私信息已经隐藏。

    web前端教室
  • Jquery的属性操作和DOM操作

           3 val()    :     获取或设置表单内容    (原生JS使用value)

    用户3159471
  • JMeter http(s)测试脚本录制器的使用

    http(s) Test Script Recorder允许Jmeter在你使用普通浏览器浏览web应用时,拦截并录制你的操作.

    授客
  • Python每天五分钟-操作MySQL(mysql.connector)

    MySQL是现今最流行的数据库之一,接下来使用Python对MySQL进行curd操作。

    用户2475223
  • 第99天:CSS3中透视perspective

    与之前的过程相同,视点与移动后的元素的连线与屏幕的焦点就是在屏幕上的呈现的元素的大小,与元素相比较变大了。

    半指温柔乐

扫码关注云+社区

领取腾讯云代金券