HTML学习笔记之--HTML的头部信息设置

最新推荐文章于 2024-08-02 23:53:00 发布

原创最新推荐文章于 2024-08-02 23:53:00 发布 · 2.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#HTML

本文详细介绍了HTML的头部信息设置，包括元信息标签<meta/>的name属性和http-equiv属性，如keywords、description、author等，以及content-type、refresh、expires等HTTP标题信息。此外，还提及了CSS和JavaScript的设置方法以及头部信息的其他设置，如页面切换特效和页面图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定义网页的标题

<!--HTML 头部信息设置 之 定义网页的标题-->
<!--每个网页都有一个标题，它显示在网页窗口的标题栏，它标识了网页的主要内容-->
<!--在<title></title>标签之间输入标题内容-->

<!DOCTYPE html>
<head>
    <title>此处设置标题</title>
</head>
<body>

</body>
</html>

设置网页的基底网址

<!--HTML 头部信息设置 之 设置网页的基底网址-->
<!--基底网址的实质是统一设置超链接的属性，基底网址的标签是<base/>-->
<!--基地网址有两个属性：href用于设置基地网址的路径，target用于设置超链接的打开方式-->
<!--通过基地网址的添加，页面中所有的相对网站根目录地址可转换成绝对地址。当浏览器浏览页面时，通过<base>标记将相对网站根目录地址附加在基地网址路径的后面，从而专员成绝对地址-->
<!--基地网址定义了一个全局的样式，-->

<!DOCTYPE html>
<head>
    <title>基地网址的设置</title>
    <base href="https://www.google.com" target="_blank" />
    <!--基地网址定义了一个全局的样式，页面中任何超链接的地址，都将在其前面加上“https://www.google.com”，即转换为绝对地址-->
    <!--页面中的超链接打开方式都是打开新窗口-->
    <!--<base/>是单标签，只需设置其属性即可-->
</head>
<body>

</body>
</html>

元信息标签

元信息标签<meta/>是头部信息的基本标签，是单标签。

meta元素提供的信息对于浏览用户是不可见的，一般用于定义页面信息的名称、关键字、作者等。在HTML页面中，一个meta标签内就是一个meta的内容，而在一个HTML头页面中可以有多个meta元素。

meta标签属性分两种：页面描述信息（name）和http标题信息（http-equiv）。

name属性

用于描述页面内容。正确地设置name属性，以便搜索引擎（baidu、Google等）的搜索机器人查找、分类，搜索引擎一般都会自动查找meta值来给网页分类。name的取值如下：

1）keywords，关键字。用于说明网页所包含的关键字等信息，从而提高被搜索引擎搜索到的概率。一般可设多个关键字，之间用英文半角的逗号隔开。关键字的内容要简洁精炼。

content属性的值为用户所设置的具体关键字。

2) description，描述，用于描述网页的主要内容、主题等，合理的设置也可提高被搜索引擎搜索到的概率。

content属性的值最多可以容纳1024个字符，但搜索引擎一般只显示大约前175个字符。

3) author，作者。用于设置网站作者的名称。

4) generator，生成器。用于设置网站编辑工具的名称。

网站制作软件在创建HTML文档时会自动添加generator的content值。

5) robots，机器人。用于限制页面搜索方式。搜索引擎的“搜索机器人”沿着网站上的链接（如http和src链接），不断地检索资料建立自己的数据库。通过这种meta标签可以限制部分内容不被搜索引擎检索到，从而降低部分信息公开性。

content属性的值包含4个命令，分别是：index、noindex、follow、nofollow。指令组合一共有4种：

index，follow（也可写成 all）	页面允许被检索，页面中的链接也允许被检索
index，nofollow	页面允许被检索，页面中的链接不允许被检索
noindex，follow	页面不允许被检索，页面中的链接允许被检索
noindex，nofollow（也可写成 none）	页面不允许被检索，页面中的链接也不允许被检索

只有部分搜索引擎支持robots meta标签。

name属性主要用于对搜索引擎的优化。

http-equiv属性

用于描述标题信息。取值如下：

1) content-type，内容类别。用于设置页面的类别和语言字符集。

content属性的值代表页面采用HTML代码输出，字符集为utf-8。

2) refresh，刷新。用于设置多长时间内网页自己刷新一次，或者过一段时间自动跳转到其他页面。

content属性的值代表页面自动刷新的时间间隔为5秒。

content属性的值代表5秒后页面自动跳转到www.google.com网站。

3) expires，到期。用于设置页面到期时间，一旦页面过期，必须到服务器上重新调用网页。

content属性的值表示网页过期的时间，必须使用GMT的时间格式。

content属性的值为数字时代表多长时间后过期。

4) cache-control，缓存控制。用于禁止在缓存中调用网页。

content属性值“no-cache”代表不缓存。

为了加快浏览速度，一般都会在浏览者的硬盘上保存一个网页的文件作为临时版本。用户再次打开同一个网页时，浏览器会直接调用硬盘上这个版本的网页而不是服务器上的版本。如果想让用户每次都看到最新版本，则需要使用这种meta标签近乎浏览器调用缓存中的版本。设定了禁止调用缓存后，用户一旦离开网页，就无法从缓存中再调用该页面了，而要到服务器请求该页面。

5) set-cookie，设置cookie。用于设置本页面cookie多久过期。

content属性的值代表到这个时间时，cookie将被删除，时间采用GMT时间格式。

cookie是服务器暂时存放在用户的电脑中的资料，以文本格式的文件保存，以便让服务器用来辨认用户的计算机。

当浏览网站时，Web服务器会先送一部分资料到浏览者的硬盘上，这就是cookie。当下次访问该网站时，Web服务器会先看看有没有上次留下的cookie资料，如果有，会根据cookie里的内容判断使用者。cookie广泛应用于网站的注册登录系统，同时，浏览者的cookie也常被网站运营者收集，便于分析浏览者的浏览习惯。

和 CSS 及 JavaScript 产生联系

CSS负责HTML网页的样式，JavaScript负责HTML网页的动态行为。

CSS的设置方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的设置</title>
    <style type="text/css">
        CSS的具体内容
    </style>
</head>
<body>

</body>
</html>

JavaScript的设置方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的设置</title>
    <style type="text/css">
        CSS的具体内容
    </style>
    <script type="text/javascript">
        JavaScript的具体内容
    </script>
</head>
<body>

</body>
</html>