HTML头部三大常用元信息介绍

最新推荐文章于 2023-04-19 19:39:43 发布

扶公瑾以苏

最新推荐文章于 2023-04-19 19:39:43 发布

阅读量723

点赞数 2

分类专栏：前端文章标签：头部元信息 link base meta

本文链接：https://blog.csdn.net/qq_36470686/article/details/82814280

版权

前端专栏收录该内容

27 篇文章 0 订阅

订阅专栏

使用<head...>元素可以定义HTML文档头，该元素可以包含如下子元素。

<script>:该元素用于包含JavaScript脚本。
<no编辑script>:该元素用于向禁用了JavaScript脚本或不支持JavaScript脚本的浏览器显示提示信息。
<style>:该元素用于定义内部CSS样式。关于内部CSS样式的介绍，请参考本书中介绍CSS的相关章节。
<link>:该元素用于链接图标，CSS样式文件等各种外部资源。
<base>:该元素用于指定该页面中所有链接的基准路径。
<meta>：该元素用于定义HTML页面的元数据。

我们将会重点介绍<link.../>、<base.../>和<meta.../>3个元素。

link元素：

href:该属性指定所链接资源的URL。
hreflang:该属性指定所链接资源的语言。
media:设置所链接的资源仅使用哪些设备。
rel:设置文档与所链接资源的关系，该属性设置的值会决定浏览器处理外部资源的方式。
sizes:指定图标的大小。仅当rel为icon时该属性才有效。
type:指定所链接资源的MIME类型。

下面以几个<link.../>元素的常用案例来示范该元素的用法。

1.使用<link.../>元素载入CSS样式单

例如，在HTML页面的<head.../>元素中添加如下<link.../>子元素即可载入外部CSS样式单。

<!--引入outer.css样式单文件-->
<link href="outer.css" rel="stylesheet" type="text/css"/>

2.定义页面title的图标

例如，在HTML页面的<head.../>元素中添加如下<link.../>子元素即可设置页面的图标。

<!--引入outer.css样式单文件-->
<link href="java.ico" rel="shortcut icon" type="image/x-icon"/>

3.预先加载资源

例如，如下HTML页面中有一个超链接，如果项目希望该页面加载时能提交预加载超链接所链接的资源，此时即可通过<link.../>元素来实现。

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 预加载资源 </title>
	<!-- 引入outer.css样式单文件 -->
	<link href="base.html" rel="prefetch" type="text/html" />
</head>
<body>
<a href="base.html">访问base.html</a>
</body>
</html>

base元素：

<base.../>元素必须是空元素，该元素除了可以指定id作为其唯一标识之外，还可以指定如下两个属性。

href:指定所有链接的基准路径
target:指定超链接默认在哪个窗口打开链接。该属性值只能是_blank、_parent、_self和_top其中之一。

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> base元素 </title>
	<base target="_blank" href="http://www.crazyit.org" />
</head>
<body>
	<a href="index.php">疯狂Java联盟</a>
</body>
</html>

上面页面代码中使用<base.../>指定了所有链接的基准路径为http://www.crazyit.org,默认使用新窗口打开链接。页面中超链接的地址为index.php,则实际URL为http://www.crazyit.org/index.php，并使用新窗口打开链接。

meta元素：

http-equiv:指定元信息的名称，该属性指定的名称具有特殊意义，它可以向浏览器传回一些有用的信息，帮助浏览器正确处理网页内容。
name:指定元信息的名称，该名称值可以随意指定。
content：指定元信息的值。
charset:指定该页面的字符集。

根据上面可知：<meta.../>元素里http-equiv属性和name属性的作用基本相同，只是http-equiv属性值通常规定为应该是浏览器可以识别的、具有特殊意义的名称。而name通常当作网页关键字使用，为网页指定有效的关键字有利于搜索引擎收录本站点。

如果只需要简单地设置本网页所使用的字符集，则可通过为<meta.../>元素指定charset属性来完成。例如：

<meta charset="utf-8"/>

http-equiv属性所支持的值主要有如下几个。

expires:指定网页的过期时间。一旦网页过期，必须重新从服务器上下载。例如如下代码：

<meta http-equiv="expires" content="Sat Sep 27 16:12:36 CST 2008"/>

pragma:指定禁止浏览器从本地磁盘缓存中获取该页面内容(内存上的缓存当程序结束时自动清楚)，浏览器一旦离开该网页就无法脱机访问该页面。例如：

<meta http-equiv="pragma" content="no-cache"/>

refresh:指定浏览器多长时间后自动刷新指定页面。例如：

<!--设置2秒后自动刷新本页面-->
<meta http-equiv="refresh" content="2"/>
<!--设置2秒后自动刷新URL指定页面-->
<meta http-equiv="refresh" content="2;URL=http://www.crazyit.org"/>

set-cookie:设置Cookie.如果网页过期，那么客户端上的Cookie也将被删除。例如：

<meta http-equiv="set-cookie" content="name=value expires=Sat Sep 27 16:12:36 CST 2008,path=/"/>

content-type:设置该页面的内容类型和所用的字符集。例如：

<meta http-equiv="content-type" content="text/html;charset=utf-8"/>

扶公瑾以苏

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML头部三大常用元信息介绍

使用&lt;head...&gt;元素可以定义HTML文档头，该元素可以包含如下子元素。&lt;script&gt;:该元素用于包含JavaScript脚本。 &lt;no编辑script&gt;:该元素用于向禁用了JavaScript脚本或不支持JavaScript脚本的浏览器显示提示信息。 &lt;style&gt;:该元素用于定义内部CSS样式。关于内部CSS样式的介绍，请参考本书...
复制链接

扫一扫