一、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">
网友评论