元信息类标签headtitlemeta的使用目的和配置方法

28次阅读

共计 3705 个字符,预计需要花费 10 分钟才能阅读完成。

Head 中的全局属性

base

base 标签指定了一个 url 地址作为基准,那么当前文档中的所有超链接都遵循这一规则,在 a 中设置访问目标的相对地址,浏览器会自动解析出一个完整的链接地址,若 a 的 href 为空,浏览器也会根据 base 所给的 url 进行访问。
注意:base 标签需放在包含 url 地址的语句前面

<head>
  <base href="https://cloud.baidu.com/" target="_blank">
</head>
<body>
  <a href="solution/marketing.html"> 可以跳到百度云数字营销解决方案 </a>
</body>

Link

link 标签:用于引入外部的文档,常用到引用 css 样式或 icon 图标
其中:rel 属性是 link 标签的核心
注意:在 HTML 中,<link> 标签没有结束标签
在 XHTML 中,<link> 标签必须被正确地关闭

charset 属性规定被链接文档的字符编码方式。

在下面的例子中,charset 属性指示被链接文档是用英文编写的:

<head>
  <link href="shanghai.htm" rel="parent" charset="en" />
</head>

HTML5 中不支持

href 属性规定被链接文档的位置(URL)

在下面的例子中,href 属性指向了一个外部样式表的位置:

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

reflang 属性规定被链接文档中文本的语言
在下面的例子中,hreflang 属性指示被链接文档是用简体中文编写的:

<head>
  <link href="shanghai.htm" rel="parent" charset="UTF-8" hreflang="zh-Hans" />
</head>

media 属性规定被链接文档将显示在什么设备上

两种不同的样式表,针对两种不同的媒介类型(计算机屏幕和打印):

<head>
  <link rel="stylesheet" type="text/css" href="theme.css" />
  <link rel="stylesheet" type="text/css" href="print.css" media="print"/>
</head>

rel 属性规定当前文档与被链接文档之间的关系
只有 rel 属性的 “stylesheet” 值得到了所有浏览器的支持。其他值只得到了部分地支持
在下面的例子中,rel 属性指示被链接的文档是一个样式表:

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

1.stylesheet 外部样式表
2.icon 网站图标

<link rel="shortcut icon" href="favicon.ico" type="images/x-icon"></link>

3.canonical 指明网址的规范版本
canonical 属性用于让搜索引擎知道当前网站中的重复或相似网页中,哪一个页面才是站长想让其抓取与收录的。

title

浏览器会以特殊的方式来使用标题,当把文档加入链接列表或收藏夹时,文档标题将成为该链接的默认名称
<title> 标签是 <head> 标签中唯一要求包含的东西
1.dir
属性为 rtl 和 ltr 规定元素中内容的文本方向 - 正向和反向。
2.lang
规定元素中内容的语言代码
3.xml:lang
规定 XHTML 文档中元素内容的语言代码

meta

name 属性
主要用于描述网页,与之对应的属性值为 content,content 中的内容主要是便于搜索引擎机器人查找信息和分类信息用的.

<meta name="参数"content="具体的参数值">

1.keywords 关键字
keywords 用来告诉搜索引擎你网页的关键字是什么

<meta name="keywords"content="science,education,culture,politics,ecnomics,relationships,entertaiment,human">

2.description 网站内容描述

<meta name="description"content="这是一个学习的网站">

3.robots 机器人向导
robots 用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引
content 的参数有 all,none,index,noindex,follow,nofollow。默认是 all

<meta name="robots"content="none">

4.author 作者
标注网页的作者

<meta name="author" content="root,root@xxxx.com">

5.rendere 渲染模式

 <meta name="renderer" content="webkit">

6.viewport(视图模式)
对手机端而言很重要
可把 content=”width-device=width”,则宽度为使用手机的宽度

<meta name="viewport" 
content="
width=device-width,  //viewport 的高度
initial-scle=1.0,  // 初始的缩放比例
maximum-scale=1.0,  // 允许用户缩放到的最小比例
minimum-scale=1.0, // 允许用户缩放到的最大比例
user-scalable=no" // 用户是否可以手动缩放
/>

http-equiv 属性
http-equiv 顾名思义,相当于 http 的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为 content,content 中的内容其实就是各个参数的变量值。

meta 标签的 http-equiv 属性语法格式是:

<meta http-equiv="参数"content="参数变量值">

1.X-UA-Compatible 浏览模式

<meta http-equiv="X-UA-Compatible" content="IE=5" />

像是使用了 Windows Internet Explorer 7 的 Quirks 模式,这与 Windows Internet Explorer 5 显示内容的方式很相似。

<meta http-equiv="X-UA-Compatible" content="IE=7" />

无论页面是否包含 <!DOCTYPE> 指令,均使用 Windows Internet Explorer 7 的标准渲染模式。

<meta http-equiv="X-UA-Compatible" content="IE=8" />

开启 IE8 的标准渲染模式,但由于本身 X-UA-Compatible 文件头仅支持 IE8 以上版本,因此等同于冗余代码。

<meta http-equiv="X-UA-Compatible" content="edge" />

Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容,这实际上破坏了“锁定”模式。即如果你有 IE9 的话说明你有 IE789,那么就调用高版本的那个也就是 IE9。

2.Expires 期限
可以用于设定网页的到期时间,一旦网页过期,必须到服务器上重新传输

<meta http-equiv="expires"content="Fri,01Jan201618:18:18GMT">

3.Pragma cache 模式
说明:禁止浏览器从本地计算机的缓存中访问页面内容。
注意:这样设定,访问者将无法脱机浏览。

<meta http-equiv="Pragma" content="no-cache">

4.Refresh 刷新
说明:自动刷新并指向新页面
注意:其中的 2 是指停留 2 秒钟后自动刷新到 URL 网址。

<meta http-equiv="Refresh" content="2;URL=http://www.jb51.net">

5.Set-Cookie cookie 设定
说明:如果网页过期,那么存盘的 cookie 将被删除
注意:必须使用 GMT 的时间格式。

<meta http-equiv="Set-Cookie"content="cookievalue=xxx;expires=Friday,12-Jan-200118:18:18GMT;path=/">

6.Window-target 显示窗口的设定
说明:强制页面在当前窗口以独立页面显示。
注意:用来防止别人在框架里调用自己的页面。

<meta http-equiv="Window-target" content="_blank">

7.content-Type 显示字符集的设定
说明:设定页面使用的字符集

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

8.content-Language 显示语言的设定

<meta http-equiv="Content-Language" content="zh-cn"/>

此文章参考此链接

正文完
 0