![HTML+CSS+JavaScript网页制作:Web前端开发(第3版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/108/41865108/b_41865108.jpg)
2.1 head元素
在网页的头部中,通常存放一些介绍页面内容的信息,例如:页面标题、页面描述、关键字、链接的CSS样式文件和客户端的JavaScript脚本文件等。
其中,页面标题和页面描述称为页面的摘要信息。摘要信息的生成在不同的搜索引擎中存在比较大的差别,即使在同一个搜索引擎中也会由于页面的实际情况而有所不同。一般情况下,搜索引擎会提取页面标题标签中的内容作为摘要信息的标题,而描述则来自页面描述标签的内容或页面正文。如果设计者希望自己发布的网页能被百度、谷歌等搜索引擎搜索到,那么在制作网页时就需要注意编写网页的摘要信息。
2.1.1 页面标题标签<title>
<title>标签是页面标题标签,它将HTML文件的标题显示在浏览器的标题栏中,用以说明文件的用途。这个标签只能应用于<head>与</head>之间。<title>标签是对文件内容的概括,一个好的标题能使读者从中判断出该文件的大概内容。
页面标题不会显示在文本窗口中,而是以窗口的名称显示出来,每个文档只允许有一个标题。页面标题能给浏览者带来方便,如果浏览者喜欢该网页,将它加入书签或保存到磁盘上,标题就作为该页面的标识或文件名。另外,使用搜索引擎时显示的结果也是页面标题。<title>标签格式如下。
![](https://epubservercos.yuewen.com/3CD032/21889224408630006/epubprivate/OEBPS/Images/22_01.jpg?sign=1738841833-lOYRqiGi4EU7avzfNJ7dW6XmxbLUoYU8-0-5e4999b28c574f56c2e34dfbd447282c)
例如,腾讯网站的主页,对应的网页标题如下。
![](https://epubservercos.yuewen.com/3CD032/21889224408630006/epubprivate/OEBPS/Images/22_02.jpg?sign=1738841833-qSKWC9kxbacoMLurYNMpM4qQjlF2OGJH-0-387b7c554725fe43c8ae4442504782f8)
打开网页后,将在浏览器窗口的标题栏中显示“腾讯”网页标题。在网页文档头部定义的标题内容不在浏览器窗口的内容区域中显示,而是在浏览器的标题栏中显示。尽管文档头部定义的信息很多,但能在浏览器标题栏中显示的信息只有标题内容。
2.1.2 元信息标签<meta>
<meta>标签是元信息标签,在HTML中是一个单标签。该标签可重复出现在头部标签中,用来指明本页的作者、制作工具、关键字,以及其他一些描述网页的信息。
<meta>标签具备两大属性:HTTP标题属性(http-equiv)和页面描述属性(name)。每个属性又有不同的参数值,这些不同的参数值就实现了网页的不同功能。本节主要讲解name属性,用它来设置搜索关键字和页面描述。<meta>标签的name属性的语法格式如下。
![](https://epubservercos.yuewen.com/3CD032/21889224408630006/epubprivate/OEBPS/Images/22_03.jpg?sign=1738841833-msJMAWNDBi5ahXEO8Fr8VFGpPcLXJ46X-0-5644eb9d233fa39bc73f945199adb986)
name属性主要用于描述网页摘要信息,与之对应的参数值为content。content中的内容主要是便于搜索引擎查找信息和分类信息用的。
name属性主要有以下两个参数,通过为参数设置不同的参数值可以实现不同的功能。
1.keywords(关键字)
keywords用来告诉搜索引擎网页使用的关键字。例如,国内著名的腾讯网,其主页的关键字设置如下。
![](https://epubservercos.yuewen.com/3CD032/21889224408630006/epubprivate/OEBPS/Images/23_01.jpg?sign=1738841833-PXtwQ6OkFWwQam64OaHFHFKbV0r5MxTM-0-ea84b7ac64cc3ec6e596a4a63443d401)
2.description(网站内容描述)
description用来告诉搜索引擎网站的主要内容。例如,腾讯网站主页的内容描述设置如下。
![](https://epubservercos.yuewen.com/3CD032/21889224408630006/epubprivate/OEBPS/Images/23_02.jpg?sign=1738841833-WsifWUqxuDqbYuR1P2XnNWsMVC9HetEW-0-cf7963d370aca294b6e663ed63786e29)
当浏览者通过百度搜索引擎搜索“腾讯”时,就可以看到搜索结果中显示出页面摘要信息,包括标题、关键字和内容描述,如图2-1所示。
![](https://epubservercos.yuewen.com/3CD032/21889224408630006/epubprivate/OEBPS/Images/23_03.jpg?sign=1738841833-bExmQlGl8Ny60Vsu3Rh7YkysTMA060ue-0-b2877df116f512c8d6973e13e8eaf449)
图2-1 页面摘要信息
2.1.3 关联标签<link>
<link>标签是关联标签,用于定义当前文档与Web集合中其他文档的关系,建立一个树状链接组织。<link>标签并不将其他文档实际链接到当前文档中,只是提供链接该文档的一个路径。<link>标签最常用于链接CSS样式文件,格式如下。
![](https://epubservercos.yuewen.com/3CD032/21889224408630006/epubprivate/OEBPS/Images/23_04.jpg?sign=1738841833-PnisU0G9yG8kXh22LypVNu9ENrWmQeSl-0-91f1e20640303f8a72926b90faa1d9b0)
2.1.4 脚本标签<script>
<script>标签是脚本标签,用于为HTML文档定义客户端脚本信息。可通过此标签在文档中包含一段客户端脚本程序。此标签可以位于文档中任何位置,但常位于<head>标签内,以便于维护。格式如下。
![](https://epubservercos.yuewen.com/3CD032/21889224408630006/epubprivate/OEBPS/Images/23_05.jpg?sign=1738841833-n4JXwOiQOEjSctgm8qnSL5cNfNrn2rgD-0-7b0301ab1ef9ce6232072aa664b9a5f1)
【例2-1】制作“爱心包装”页面的摘要信息部分。由于摘要信息不能显示在浏览器窗口中,因此这里只给出本例的代码。
![](https://epubservercos.yuewen.com/3CD032/21889224408630006/epubprivate/OEBPS/Images/23_06.jpg?sign=1738841833-fG46IKD1r4GottHmQrugSCsmSdTgfaX8-0-8ec2f0dd6f0b31c71a8fba9b79b9249f)
![](https://epubservercos.yuewen.com/3CD032/21889224408630006/epubprivate/OEBPS/Images/24_01.jpg?sign=1738841833-m5ApvpwUwCSQvmsXmWTQzwYjSHq1ZDYi-0-3542fa57639aea22a30afe54fac3f2f4)
![](https://epubservercos.yuewen.com/3CD032/21889224408630006/epubprivate/OEBPS/Images/24_02.jpg?sign=1738841833-U2qS1beF7aKPIEEvm1VcVA0d1XJJ4FbR-0-8f052a4fefe54cfeb5ed69217c7cd7ca)
5 基本块级元素-1