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 条评论
登录 后参与评论

相关文章

来自专栏HT

基于 HTML5 Canvas 的 3D 碰撞检测

这是公司大神写的一个放官网上给用户学习的例子,我一开始真的不知道这是在干嘛,就只是将三个形状图元组合在一起,然后可以同时旋转、放大缩小这个三个图形,点击“Ani...

2265
来自专栏柠檬先生

NEC html规范

HTML规范 - 整体结构 HTML基础设施 文件应以“<!DOCTYPE ......>”首行顶格开始,推荐使用“<!DOCTYPE html>”。 必须申明...

2785
来自专栏HT

基于HTML5和WebGL的碰撞测试

这是公司大神写的一个放官网上给用户学习的例子,我一开始真的不知道这是在干嘛,就只是将三个形状图元组合在一起,然后可以同时旋转、放大缩小这个三个图形,点击“Ani...

2439
来自专栏向治洪

React Native之样式

样式 React Native 不实现 CSS,而是依赖于 JavaScript 来为你的应用程序设置样式。这是一个有争议的决定,你可以阅读那些幻灯片,了解...

2225
来自专栏web编程技术分享

HTML&CSS Table元素详细解说

3838
来自专栏阮一峰的网络日志

CSS in JS 简介

1、 以前,网页开发有一个原则,叫做"关注点分离"(separation of concerns)。 ? 它的意思是,各种技术只负责自己的领域,不要混合在一起,...

3217
来自专栏hightopo

原 基于 HTML5 Canvas 的 3

1475
来自专栏Nian糕的私人厨房

CSS 消除 inline-block 元素间的间隙

从上图的运行结果可以看到,添加 display: inline-block; 属性后,水平呈现的元素间产生了空隙,出现这一现象的本质是,HTML 中存在的空白符...

1114
来自专栏施炯的IoT开发专栏

《101 Windows Phone 7 Apps》读书笔记-Silly Eye

课程内容 Ø Animation Ø Event Triggers Ø Named Resources Ø Settings Page Ø Color...

2057
来自专栏阮一峰的网络日志

如何做到 jQuery-free?

jQuery是现在最流行的JavaScript工具库。 据统计,目前全世界57.3%的网站使用它。也就是说,10个网站里面,有6个使用jQuery。如果只考察使...

3164

扫码关注云+社区

领取腾讯云代金券