今天我为大家介绍一下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底部。
今天就为大家介绍到这里,祝大家新年快乐!
领取专属 10元无门槛券
私享最新 技术干货