• :绿叶现版本暂时不再更新维护,全新版本已经在开发中,新系列图书(暂时8本,后面再续)也将于12月后陆续出版,敬请期待~

3.2 head标签

我们在“HTML基本结构”这一小节论述了HTML的文档结构,也大概说了<head>标签的作用。上一节已经说过,<head>标签是比较特殊的,只有一些比较特殊的标签才能放在<head>标签内,其他大部分标签都是放在body标签内。

这一节课可能比较抽象,对于初学者也缺乏实操性,因为这几个标签一般都是“前端学习中期”或者“建站时期”才用得到,一般读者在刚刚接触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属性

我们先看一个实例:

 
<head>    
    <!--网页关键字-->
    <meta  name="keywords" content="绿叶学习网"/>
    <!--网页描述-->
    <meta  name="description" content="绿叶学习网是一个富有活力的技术学习网站"/>
    <!--本页作者-->
    <meta  name="author" content="helicopter">
    <!--版权声明-->
    <meta  name="copyright" content="本站所有教程均为原创,版权所有,禁止转载。否则将追究法律责任。"/>
    </head>

下面我们来总结一下meta标签name属性的主要属性值:

meta标签name主要属性值及其作用
name属性值 说明
keywords 网页的关键字(关键字可以是多个,而不仅仅是一个)
description 网页的描述
author 网页的作者
copyright 版权信息

上面只是列举了最常用的meta标签的name属性值,而name属性值远远不止以上那几个,对于初学者,我们仅仅了解上面几个就完全足够了。

2、meta标签http-equiv属性

学习meta标签的http-equiv属性,我们只需要了解它的两个作用就行了:

一,定义页面所使用的语言

二,实现页面的自动刷新跳转

(1)定义页面所使用的语言

语法:

 
<head>
    <meta  http-equiv="content-type" content="text/html; charset=gb2312"/>
</head>

说明:

这段代码告诉浏览器该页面所使用的字符集是gb2312,即国际汉字码。我们不需要记住,只需要了解就行了。

(2)页面自动跳转

语法:

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

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta  http-equiv="refresh" content="6;url=http://www.baidu.com"/>
    </head>
    <body>
        <p>这个页面在6秒之后自动跳转到百度首页</p>
</body>
</html>

<meta>标签对于一般页面制作者来说,实际意义不大,在前期过程中我们几乎涉及不到,只有在整站设计开发的实战中,我们才会用到非常多的meta标签属性。读者只需要了解meta标签的基本功能就行了,哪怕代码不会写都没关系,以后不会再回过头来看就行了。

三、<head>标签内的<style>标签

<head>标签内的<style>标签用于定义元素的CSS样式。在“CSS入门课程”我们会详细给大家介绍,在“HTML入门教程”中我们不需要深入探究。

语法:

 
    <head>
        <style type="text/css">
            <!--这里写CSS样式-->
        </style>
    </head>

举例:

 
    <head>
        <style type="text/css">
            div
            {
                font-size:14px;
                color:red;
                border:1px solid gray;
            }
        </style>
    </head>

四、<head>标签内的<script>标签

<head>标签内的<script>标签用于定义页面的脚本。在“jQuery入门教程”我们会详细给大家介绍,在“HTML入门教程”中我们不需要深入探究。

语法:

 
<head>
    <script type="text/javascript">
        alert("绿叶学习网HTML入门教程!");
    </script>
</head>
                        

五、<head>标签内的<link>标签

<head>标签内的<link>标签用于外部文件的链接,一般用于链接外部CSS样式表文件和JS文件。<link>标签是属于“CSS入门课程”的内容,在“HTML入门教程”中我们不需要深入探究。

语法:

 
<head>
    <link  rel="stylesheet"  type="text/css"  title="temp"  href="/temp.css/">
</head>
                        

六、<head>标签内的<base>标签

<head>标签内的<base>标签为整个页面定义所有链接的基础定位,其主要的作用是为了确保文档中所有的相对URL,都可以被分解成正确的文档地址,使在文档本身被移动或重命名的情况下也可以正确解析。

语法:

 
<head>
    <base  href="http://lvyestudy"/>
</head>
                        

<base>标签经常使用在创建文档集合中,为了不破坏文档中任何链接,使用者通过在每个文档中放置正确的<base>标签,便可以再目录甚至服务器之间移动整个文档集合。

:<base>标签用得非常少,可以几乎忽略。

总结

1、<head>标签内部标签

<head>标签内部标签
<head>内部标签 说明
<title> 定义网页的标题
<meta> 定义网页的基本信息(供搜索引擎)
<style> 定义CSS样式
<link> 链接外部CSS文件或脚本文件
<script> 定义脚本语言
<base> 定义页面所有链接的基础定位

这些标签不记住没关系,感性认知即可。以后在碰到的时候至少要有一个印象。

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取更多学习资源和配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:593173594(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部