3-HTML常用标签运用
2016-12-24 本文已影响30人
饥人谷_刘冲
一.<!DOCTYPE> 文档声明
-
格式：
1.<!DOCTYPE>声明必须是 HTML 文档的第一行，位于<html>标签之前。
2.<!DOCTYPE>不区分大小写。
-
作用：
HTML文档有很多个版本规范，每个版本的规范之间又有一定的差异。所以为了让浏览器能够正确的编译，解析，渲染我们的页面，我们需要在HTML文件的第一行告诉浏览器这个页面是用哪一个版本的HTML规范来编写的。
-
注意点：
1.HTML5的文档声明是向下兼容的。在 HTML 4.01 中，<!DOCTYPE>声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
2.<!DOCTYPE>声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
3.虽然浏览器有自己的一套机制来解析HTML文件，但由于W3C制定的标准必须有<!DOCTYPE>声明在HTML文件第一行，所以必须填写。
4.在HTML5的网页中HTML4也能运行。
-
严格模式和混杂模式
二者的含义：严格模式即标准模式，当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种呈现模式：标准模式和混杂模式（quirks mode）。在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器（比如 Microsoft IE 4和Netscape Navigator 4）的行为以防止老站点无法工作。
如何触发：浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档包含形式完整的DOCTYPE，那么它一般以标准模式 呈现。对于HTML 4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过 渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。
二.<html>标签
- 格式：
<html>
</html>
-
作用：
是用来告诉浏览器这是一个HTML文件。 -
注意点：
所有标签都必须写在<html></html>之间。
三.<head>标签
- 格式：
<head>
<meta charset="utf-8"/>
<title>选项卡标题</title>
<style> </style>
</head>
-
作用：
用于给页面配置基本基本信息。
1.指定网站标题，网站小图标。
2.添加网站的SEO相关信息（网站的关键字或描述信息）。
3.添加浏览器配置的相关内容。 -
注意点：
1.<head>标签一般包含有<title><meta />标签和css样式标签<style>。且必须要有<title>标签。
2.<head>标签里的信息不会显示给用户查看。除了写在<title>中的标题信息。
四.<title>标签
-
格式：
<title>选项卡标题信息</title> -
作用：
用于定义文档的标题。浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。 -
注意点：
<title>标签是<head>标签中唯一必须要求包含的。
五.<meta />标签
-
格式：
1.搜索引擎定义关键词:
<meta name="keywords" content="搜索 百科">
2.网页定义描述内容:
<meta name="description" content="百度 最大的中文搜索引擎">
3.定义浏览器用什么标准渲染：
<meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1" />
意为告诉浏览器按照最新的内核进行渲染。若IE有安装Google Chrome Frame，那么就优先走GCF进行渲染，如果没有就和<meta http-equiv="X-UA-Compatible" content="edge" />一样以IE最新模式渲染。
4.定义浏览器用那种标准解析代码：
<meta charset="utf-8" />
即按照utf-8字符集标准解析代码。 -
作用：
1.<meta>元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
2.<meta>标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。 -
注意点：
1.<meta>标签是一个单标签。
2.<meta>标签中一般必须包含content属性用来定义与 http-equiv 或 name 属性相关的元信息。
3.<meta>标签中定义的字符集标准必须与文件保存所用标准一致，否则会出现乱码问题。 -
字符集与乱码问题：
乱码产生的原因：当我们用编辑器编写HTML文件然后保存的时候会把我们写入的文字使用编辑器默认的编码方式进行保存。但是在浏览器中打开文件时浏览器采用了自己默认的解码方式打开文件。比如我们文件保存的时候用的是GBK编码标准，而浏览器解码使用的是UNICODE标准，因为标准不同相冲突产生乱码。
如何解决乱码问题：保存文件的时候明确自己用哪种编码方式进行保存。如文件保存的是UTF-8格式，那么在HTML中的<head>里必须添加<meta charset="utf-8">，明确告诉浏览器以UTF-8的格式对文件进行解码。
字符集选择：如果一个网站仅仅只包含中文，那么可以使用GBK2312，因为体积较小，但如果包含其它文字那么用UTF-8，一般只有早期的中文网站使用GBK2312，所以开发中一般用UTF-8。
六.<body>标签
- 格式：
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
-
作用：
<body>标签用于定义文档的主体。 -
注意点：
1.<body>元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
2.HTML中有时候文字写在<body>外面也有可能显示出来，但是绝对不要这么做。
七.<H>标签
- 格式：
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
-
作用：
用来给文本添加标题语义。 -
注意点：
1.<h>系列标签最多只能从<h1>到<h6>。
2.<h>系列标签所包含的内容独占一行。<h1>标题最大，<h6>标题最小。
3.一个html中只能有一个<h1>。
八.<div>与< p>标签
- 格式：
<div>
<h>这是一个区块</h>
<p>这是一个段落</p>
</div>
-
作用：
1.<div>可定义文档中的分区或节（division/section）。
2.<p>标签定义段落。 -
注意点：
1.<div>就是普通的块标签，多用于布局；<p>是语义化的段落标签，用于文章分段。
2.<div>默认没有边距，<p>标签为了表示文章分段，有默认的间距。
九.
与
标签
-
格式：
<hr/>文本<br/> -
作用：
1.<hr/>标签在 HTML 页面中创建一条水平线。可以在视觉上将文档分隔成各个部分。
2.<br/>可插入一个简单的换行符。 -
注意点：
1.<hr/>单独占据一行表示分际线。
2.<br/>可以连续使用多个，要换多少行就用都少个<br/>。
3.在开发中一般文本需要换行都是因为文本所表达的意思已经完成需要另起一行，而<br/>的换行语义是指文本语义未完且要另起一段。所以一般都使用<p>标签。<br/>标签则用在当需要告诉浏览器立即停止当前的文本流，并在下一行的左边，或者在左对齐的内联图形或表格的右边开始继续输出文本流的时侯。
十. 注释标签
- 格式：
<!--这是一段注释。注释不会在浏览器中显示。-->
<p>这是一段普通的段落。</p>
-
作用：
注释标签用于在源代码中插入注释。 -
注意点：
1.注释不会显示在浏览器中。
2.在编写代码的时候一些关键节点段落等重要位置都要加入适当的注释，方便开发人员理解和维护。
