我们在“”这一小节论述了HTML的文档结构，也大概说了<head>标签的作用。上一节已经说过，<head>标签是比较特殊的，只有一些比较特殊的标签才能放在<head>标签内，其他大部分标签都是放在标签内。
这一节课可能比较抽象，对于初学者也缺乏实操性，因为这几个标签一般都是“前端学习中期”或者“建站时期”才用得到，一般读者在刚刚接触HTML的过程中，实际用到并不多。但是为什么要在课程初给大家讲解<head>标签呢？这也是让大家有一个很流畅的学习思路，先把“页头”学了，然后再学“页身”。这一小节大家如果只需要记得<head>标签的内部标签有什么，都有什么用就足够了，如果你实在记不住，至少也要有个大概印象。等到我们把整一套前端教程学完，我们再回过头来看这一节，我们会受益匪浅的。
一般来说，只有6个标签能放在<head>标签内：
① <title>；
② <meta>；
③ <link>；
④ <style>；
⑤ <script>
⑥ <base>；
一、<head>标签内的<title>标签
在上一节我们知道，<title>标签唯一的作用就是定义网页的标题，标题的内容都是放在<title>标签内，如本节课页面标题是：
<title>HTML head标签_HTML入门教程_绿叶学习网</title>
大家在浏览器可以看到本页的标题效果
二、<head>标签内的<meta>标签
<meta>标签又叫“元信息标签”，是<head>标签内的一个辅助性标签。<meta>标签提供的信息不显示在页面中，一般用来定义页面的关键字、页面的描述等，以方便搜索引擎蜘蛛（如百度蜘蛛、谷歌蜘蛛）来搜索到你这个页面的信息。通俗点说，meta标签就是用来告诉“搜索蜘蛛”这个页面是干嘛的。
：在互联网中，我们一般很形象地称搜索引擎为“搜索蜘蛛”或“搜索机器人”。
meta标签有两个重要的属性name和http-equiv。
1、meta标签name属性
我们先看一个实例：
|
1
2
3
4
5
6
7
8
9
10
|
<
head
>
<!--网页关键字-->
<
meta
name
=
"keywords"
content
=
"绿叶学习网"
/>
<!--网页描述-->
<
meta
name
=
"description"
content
=
"绿叶学习网是一个富有活力的技术学习网站"
/>
<!--本页作者-->
<
meta
name
=
"author"
content
=
"helicopter"
>
<!--版权声明-->
<
meta
name
=
"copyright"
content
=
"本站所有教程均为原创，版权所有，禁止转载。否则将追究法律责任。"
/>
</
head
>
|
下面我们来总结一下meta标签name属性的主要属性值：
| name属性值 | 说明 |
|---|---|
| keywords | 网页的关键字（关键字可以是多个，而不仅仅是一个） |
| description | 网页的描述 |
| author | 网页的作者 |
| copyright | 版权信息 |
上面只是列举了最常用的meta标签的name属性值，而name属性值远远不止以上那几个，对于初学者，我们仅仅了解上面几个就完全足够了。
2、meta标签http-equiv属性
学习meta标签的http-equiv属性，我们只需要了解它的两个作用就行了：
一，定义页面所使用的语言
二，实现页面的自动刷新跳转
（1）定义页面所使用的语言
语法：
|
1
2
3
|
<
head
>
<
meta
http-equiv
=
"content-type"
content
=
"text/html; charset=gb2312"
/>
</
head
>
|
说明：
这段代码告诉浏览器该页面所使用的字符集是gb2312，即国际汉字码。我们不需要记住，只需要了解就行了。
（2）页面自动跳转
语法：
|
1
2
3
|
<
head
>
<
meta
http-equiv
=
"refresh"
content
=
"6;url=http:/www.baidu.com"
/>
</
head
>
|
举例：
|
1
2
3
4
5
6
7
8
9
|
<!DOCTYPE html>
<
head
>
</
head
>
<
body
>
<
p
>这个页面在6秒之后自动跳转到百度首页</
p
>
</
body
>
</
html
>
|
<meta>标签对于一般页面制作者来说，实际意义不大，在前期过程中我们几乎涉及不到，只有在整站设计开发的实战中，我们才会用到非常多的meta标签属性。读者只需要了解meta标签的基本功能就行了，哪怕代码不会写都没关系，以后不会再回过头来看就行了。
三、<head>标签内的<style>标签
<head>标签内的<style>标签用于定义元素的CSS样式。在“”我们会详细给大家介绍，在“”中我们不需要深入探究。
语法：
|
1
2
3
4
5
|
<
head
>
<
style
type
=
"text/css"
>
<!--这里写CSS样式-->
</
style
>
</
head
>
|
举例：
|
1
2
3
4
5
6
7
8
9
10
|
<
head
>
<
style
type
=
"text/css"
>
div
{
font-size:14px;
color:red;
border:1px solid gray;
}
</
style
>
</
head
>
|
四、<head>标签内的<script>标签
<head>标签内的<script>标签用于定义页面的脚本。在“”我们会详细给大家介绍，在“HTML入门教程”中我们不需要深入探究。
语法：
|
1
2
3
4
5
|
<
head
>
<
script
type
=
"text/javascript"
>
alert("绿叶学习网HTML入门教程！");
</
script
>
</
head
>
|
五、<head>标签内的<link>标签
<head>标签内的<link>标签用于外部文件的链接，一般用于链接外部CSS样式表文件和JS文件。<link>标签是属于“CSS入门课程”的内容，在“HTML入门教程”中我们不需要深入探究。
语法：
|
1
2
3
|
<
head
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
title
=
"temp"
href
=
"/temp.css/"
>
</
head
>
|
六、<head>标签内的<base>标签
<head>标签内的<base>标签为整个页面定义所有链接的基础定位，其主要的作用是为了确保文档中所有的相对URL，都可以被分解成正确的文档地址，使在文档本身被移动或重命名的情况下也可以正确解析。
语法：
|
1
2
3
|
<base>标签经常使用在创建文档集合中，为了不破坏文档中任何链接，使用者通过在每个文档中放置正确的<base>标签，便可以再目录甚至服务器之间移动整个文档集合。
：<base>标签用得非常少，可以几乎忽略。
1、<head>标签内部标签
| <head>内部标签 | 说明 |
|---|---|
| <title> | 定义网页的标题 |
| <meta> | 定义网页的基本信息（供搜索引擎） |
| <style> | 定义CSS样式 |
| <link> | 链接外部CSS文件或脚本文件 |
| <script> | 定义脚本语言 |
| <base> | 定义页面所有链接的基础定位 |
126
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
