1.基本标签 - 码农教程

一、HTML结构

一个页面是由 4 个部分组成的：

一个文档声明：<!DOCTYPE html>
一个html标签对：<html></html>
一个head标签对：<head></head>
一个body标签对：<body></body>

所谓的一个 HTML 页面，其实就是由一对对标签组成的。

1.文档声明

<!DOCTYPE html>

这就是一个文档声明，告诉这是一个HTML文件。

2.HTML标签

HTML标签作用是告诉浏览器，此页面是从<html>开始，然后到 </html>结束。

（1）W3C标准的XHTML

在实际开发中，可能会经常看到这样一行代码：

<html xmlns="http://www.w3.org/1999/xhtml">

这段代码的意思是告诉浏览器，当前页面使用的是W3C的 XHTML 标准。此处了解即可，不用深究。一般情况下，我们不需要加上xmlns="http://www.w3.org/1999/xhtml“这一句。

3.head标签

<head> </head> 是网页的头部。用于定义一些特殊的内容，比如：页面标题、定时刷新、外部文件等。

4.body标签

<body> </body> 是网页的身体。对于一个网页来说，大部分代码都是在这个标签内部编写的。

二、head标签

HTML中最特殊的部分，只有一些特殊的标签才可以放在 head 标签内，其它大部分标签都是放在 body 标签内的。在 HTML 中，一般来说，只有 6 个标签能放在 head 标签内：

title 标签
meta 标签
link 标签
style 标签
script 标签
base 标签

1.title标签

在 HTML 中，title 标签唯一的作用就是定义网页的标题。

title标签.png

在这个页面中，网页标题就是 見贤思齊。其实，在学习过程中没必要在每个页面中都写上 title 标签；但在实际开发中，要求每个页面的 title 都写上。

2.meta标签

在 HTML 中，meta 标签一般用于定义页面的特殊信息，例如：页面关键字、页面描述等。这些信息不是提供给人看的，而是提供给搜索引擎蜘蛛，如：百度蜘蛛、谷歌蜘蛛。简单来说，meta 标签就是用来告诉搜索蜘蛛，这个页面是干嘛的。在 web 技术中，我们一般形象地称搜索引擎为 ‘搜索蜘蛛’ 或 ‘搜索机器人’。在HTML中 meta 标签有两个重要的属性：name 和 http-equiv。

（1）name属性

① name属性取值

属性值	说明
keywords	网页的关键字，可以是多个，而不仅仅是一个。
description	网页的描述。
author	网页的作者。
copyright	版权信息。

以上只是列举了最常用的几个属性值。 在实际开发中，一般只会用到 keywords 和 description。（也就是记住这两个就可以了，其它的暂时不用管）

Ⅰ.例

meta标签name属性.png

（2）http-equiv属性

在 HTML 中，meta 标签的 http-equiv 属性只有两个重要作用：定义网页所使用的编码、定义网页自动刷新跳转。

① 定义网页所使用的编码

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

以上代码，告诉浏览器该页面所使用的编码是 utf-8 。

Ⅰ.简写形式

不过在 HTML5 标准中，上述代码可简写为：

<meta charset=utf-8/>

若发现页面打开后是乱码，极有可能就是没有加上上述代码。 在实际开发中，为了确保不出现乱码，必须要在每一个页面中加上这句代码，且必须放在 title 标签以及其它 meta 标签前面。

② 定义网页自动刷新跳转

<meta http-equiv="refresh" content="3;url=http://www.baidu.com"/>

当前页面在 3 秒后会自动跳转到 http://www.baidu.com 这个页面。

meta标签http-equiv属性-自动刷新跳转.png

3.style标签

在 HTML 中，style 标签用于定义元素的CSS样式。

① 语法

style标签.png

4.script标签

在 HTML 中，script 标签用于定义页面的 JavaScript 代码，也可以引入外部 JavaScript文件。

① 语法

script标签.png

5.link标签

在 HTML 中，link 标签用于引入外部样式文件（CSS文件）。

① 语法

link标签.png

6.base标签

此标签一点意义都没有，可以直接忽略。看到直接忽略处理。

三、body标签

在 HTML 中，head 标签表示页面的” 头部 “，而 body 标签表示页面的” 身体 “。之后学习的所有标签都是位于body标签内部，也就是说，日后的大部分代码都是在这个标签内部编写。

① 例

body标签.png

<meta charset="utf-8"> 是为了防止页面出现乱码，以后在每一个HTML页面中我们都要为其添加上。
此外，<meta charset="utf-8">这一句必须放在 title 标签以及其它 meta 标签前面，这一点一定要记住。
h3标签是一个第3级标题标签，一般用于显示 “标题内容” 。

四、HTML注释

在实际开发中，我们需要在一些关键的 HTML 代码旁边标明这段代码的含义，这时就需要用到 HTML注释了。

在 HTML 中，对一些关键代码进行注释，好处有非常多，比如：方便理解、方便查找，以及方便同一个项目组的小伙伴快速理解你的代码，以便于快速修改。

1.语法

又叫注释标签，“<!- -” 表示注释的开始，” --> “ 表示注释的结束。

（1）例

注释标签.png

2.注释内容不会显示

用注释的内容不会显示在浏览器中。在 HTML 中，浏览器遇到 “HTML标签” 就会进行解释，然后显示 “HTML标签” 中的内容；而当浏览器遇到 “HTML标签” 就会自动跳过，因此不会显示注释标签中的内容。也可理解成， “HTML标签” 是给浏览器看，而注释标签是给我们看的。

3.对关键代码注释

对关键代码注释是一个非常好的习惯。 在实际开发中，对功能模块代码进行注释尤为重要。这是因为，在日后工作时，一个页面的代码往往成百上千行，若不对关键代码进行注释，当返回来看自己写的代码，有可能连自己都读不懂自己写的代码。特别是在团队开发中，不注释的后果是当其它小伙伴来维护你的代码时，需要花大量的时间来理解，这样就是在坑别人。还有一点就是，并不需要对每一行代码都进行注释，只有最重要、最关键的代码才去注释。

五、例题

1.下面哪一个标签不能放在 head 标签内？
A.title标签
B.style标签
C.body标签
D.script标签
E.link标签
F.script标签
G.meta标签


2.属于 HTML 正确的注释方式是()
A.//注释内容//
B.//注释内容
C.<!--注释内容-->
D./*注释内容*/


3.若网页出现乱码，一般使用()来解决。
A.<meta charset="utf-8">
B.<script></script>
C.<link type="text/css" rel="stylesheet" href="css/index.css">
D.<style type="text/css"></style>

1.选 C
只有 6 个标签能放进 head 标签内
 - title 标签
 - meta 标签
 - link 标签
 - style 标签
 - script 标签
 - base 标签

2.选 C
略

3.选 A
也可以是 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>，
但在 HTML5 中可简写为: <meta charset="utf-8">