您的位置：首页 > Web前端 > HTML

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

2015-12-03 18:37 471 查看

定义网页的标题

<!--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，关键字。用于说明网页所包含的关键字等信息，从而提高被搜索引擎搜索到的概率。一般可设多个关键字，之间用英文半角的逗号隔开。关键字的内容要简洁精炼。 <meta name ="keywords" content ="关键字" /> content属性的值为用户所设置的具体关键字。 2) description，描述，用于描述网页的主要内容、主题等，合理的设置也可提高被搜索引擎搜索到的概率。 <meta name ="description" content ="对网页的描述" /> content属性的值最多可以容纳1024个字符，但搜索引擎一般只显示大约前175个字符。 3) author，作者。用于设置网站作者的名称。 <meta name ="author" content ="作者名称" /> 4) generator，生成器。用于设置网站编辑工具的名称。 <meta name ="generator" content ="网站编辑工具名称" /> 网站制作软件在创建HTML文档时会自动添加generator的content值。 5) robots，机器人。用于限制页面搜索方式。搜索引擎的“搜索机器人”沿着网站上的链接（如http和src链接），不断地检索资料建立自己的数据库。通过这种meta标签可以限制部分内容不被搜索引擎检索到，从而降低部分信息公开性。 <meta name ="robots" content ="指令组合" /> 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，内容类别。用于设置页面的类别和语言字符集。 <mata http-equiv ="content-type" content ="text/html; charset =utf-8" /> content属性的值代表页面采用HTML代码输出，字符集为utf-8。 2) refresh，刷新。用于设置多长时间内网页自己刷新一次，或者过一段时间自动跳转到其他页面。 <meta http-equiv ="refresh" content ="5" /> content属性的值代表页面自动刷新的时间间隔为5秒。 <meta http-equiv ="refresh" content ="5; url = www.google.com" /> content属性的值代表5秒后页面自动跳转到www.google.com网站。 3) expires，到期。用于设置页面到期时间，一旦页面过期，必须到服务器上重新调用网页。 <meta http-equiv ="expires" content ="Wed, 30 Mar 2016 12:00:00 GMT"> content属性的值表示网页过期的时间，必须使用GMT的时间格式。 <meta http-equiv ="expires" content ="0"> content属性的值为数字时代表多长时间后过期。 4) cache-control，缓存控制。用于禁止在缓存中调用网页。 <meta http-equiv ="cache-control" content ="no-cache" /> content属性值“no-cache”代表不缓存。为了加快浏览速度，一般都会在浏览者的硬盘上保存一个网页的文件作为临时版本。用户再次打开同一个网页时，浏览器会直接调用硬盘上这个版本的网页而不是服务器上的版本。如果想让用户每次都看到最新版本，则需要使用这种meta标签近乎浏览器调用缓存中的版本。设定了禁止调用缓存后，用户一旦离开网页，就无法从缓存中再调用该页面了，而要到服务器请求该页面。 5) set-cookie，设置cookie。用于设置本页面cookie多久过期。 <meta http-equiv ="set-cookie" content ="Wed, 30 Mar 2016 12:00:00 GMT"> 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>

头部信息的其他设置

1) 页面切换特效 <meta http-equiv ="page-enter" content ="blendtrans(duration=0.5)" /> http-equiv属性的值为page-enter是代表进入该页面时启用特效，http-equiv属性的值为page-exit时代表离开该页面时启用该特效； content属性的值代表特效的种类，这种特效也叫动态滤镜。blendtrans的效果为淡入淡出，duration的值代表效果持续的时间（单位为s）。 <meta http-equiv ="page-enter" content ="revealtrans(duration=1, transition=1)" /> duration的值代表效果持续的时间（单位为s），transition是滤镜类型，表示使用哪种特效，取值为0~23 2)强制页面在当前窗口以独立页面显示，以防止网站被其他网站框架 <meta http-equiv ="window-target" content ="_top"> 3) 页面图标的设置 <link rel ="Shortcut Icon" href ="/favicon.ico"> href属性的值是ico图标文件的路径，这里采用的是相对根目录路径。应把用于网页图标的ico文件命名为favicon.ico，并放置于网站的根目录。注：以上内容为本人笔记，内容取自《网页开发手记：HTML+CSS+JAVASCRIPT 实战详解》

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： HTML

相关文章推荐

新的分享

章节导航