HTML中 <head>标签里可以放入什么

1、<head> 标签用于定义文档的头部,它是所有头部元素的容器。
2、<head> 标签中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
3、<head> 绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
4、<head> 内部可以包含下面这些标签<base><link><meta><script><style> 以及<title>
5、<head>部分中唯一必需的元素是<title>标签,用来定义文档的标题。

提示:请记住始终为文档规定标题!

1、html的<base>标签

定义和用法:

<base> 标签为页面上的所有链接规定默认地址或默认目标。
通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写**相对 URL** 中的空白。
使用 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL,而使用**指定的基本 URL** 来解析所有的**相对 URL**。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。

提示:标签必须位于 head 元素内部。

属性:
属性是否必须描述
hrefURL规定页面中所有**相对链接**的基准 URL。
target_blank、_parent、_self、_top、framename在何处打开页面中的链接
来个例子:
<html>
<head>
<base href="http://www.w3school.com.cn/i/" />
<base target="_blank" />
</head>

<body>
<img src="eg_smile.gif" /><br />
<p>请注意,我们已经为图像规定了一个相对地址。但是我们又在 head 部分规定了一个基准 URL,浏览器最终将在如下地址寻找图片:</p>
<p>"http://www.w3school.com.cn/i/eg_smile.gif"</p>

<br /><br />
<p><a href="https://blog.csdn.net/z1324402468/article/details/85728591">认识Promise对象</a></p>
<p>请注意,链接会在新窗口中打开,即使链接中没有 target="_blank" 属性。这是因为 base 元素的 target 属性已经被设置为 "_blank" 了。</p>

</body>
</html>

2、HTML <link> 标签

定义和用法:

<link> 标签定义文档与外部资源的关系。
<link> 标签最常见的用途是链接样式表。

注释:此元素只能存在于 head 部分,不过它可出现任何次数。

属性:
属性是否必须描述
hrefURL规定被链接文档的位置。
relalternate、author、help、icon、licence、next、pingback、prefetch、prev、search、sidebar、stylesheet、tag规定当前文档 与被链接文档之间的关系。
typeMIME_type规定被链接文档的 MIME 类型。
sizesheightxwidth、any规定被链接资源的尺寸。仅适用于 rel=“icon”。
mediascreen、print、all、handheld规定被链接文档将显示在什么设备上,用于为不同的媒介类型规定不同的样式。
来个例子:
<html>

<head>
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
<link rel="stylesheet" type="text/css" href="/example/html/demo_screen.css"/>
<!-- 如果您打印本页面,或者在打印预览模式中打开它,此页面会通过 media="print" 样式表进行格式化 -->
<link rel="stylesheet" type="text/css" href="/example/html/demo_print.css" media="print" />

<!--DNS Prefetch 能够加快页面的解析速度,但是也不能滥用,有开发者指出 禁用DNS 预读取能节省每月100亿的DNS查询 。-->
<link rel="dns-prefetch" href="//api.share.zhix.net">
</head>

<body>
<h1>我通过外部样式表进行格式化。</h1>
<p>我也一样!</p>
</body>

</html>

如果需要禁止隐式的 DNS Prefetch

<meta http-equiv="x-dns-prefetch-control" content="off">
定义title标签前的小图标
<html>
<head>
<!-- 引用了favicon.ico图片作为图标 -->
	<link rel="shortcut icon" href="favicon.ico">
</head>
	<body>
		<p>定义一个title标签前的小图标。</p>
	</body>
</html>

实现一个动态的 ico 图标

<!-- 下面这个link可以实现一个动态的ico图标 -->
<link rel="icon" href="favicon.gif" type="image/gif">

一个在线转换ico图片的地址


3、html<meta>标签

定义和用法:

<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

注意:元数据总是以名称/值的形式被成对传递的。

属性:
属性是否必须描述
contentsome_text定义与 http-equiv 或 name 属性相关的元信息。
http-equivcontent-type、expires、refresh、set-cookie把 content 属性关联到 HTTP 头部。
nameauthor、description、keywords、generator、revised、others把 content 属性关联到一个名称。
schemesome_text定义用于翻译 content 属性值的格式。
来个例子
1) name属性
<!--
name 属性提供了名称/值对中的名称。
通常情况下,我们可以自由使用对自己和源文档的读者来说富有意义的名称。
"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。
某些搜索引擎在遇到这些关键字时,会用这些关键字对文档进行分类。
-->
<meta name="keywords" content="HTML,CSS,JS">
<!-- 这个meta属性定义了文档描述 -->
<meta name="description" content="HTML examples">
<!-- 这个meta属性定义了编辑器的名称 -->
<meta name="generator"  content="Dreamweaver8.0en">
<!-- 这个meta属性定义了修改时间 -->
<meta name="revised"  content="sai,17/1/19">

注意:如果没有提供name属性,那么名称/值对中的名称会采用http-equiv属性的值。

2)http-equiv 属性
<!--
	http-equiv 属性为名称/值对提供了名称。
	并指示服务器在发送实际的文档之前,要在先传送给浏览器的 MIME 文档头部包含名称/值对。
	当服务器向浏览器发送文档时,会先发送许多名称/值对。
	但是所有服务器都至少要发送一个:content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。
-->
<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">
<!--
	上面定义的meta会使服务器发送到浏览器头部应该包含如下信息
	content-type:text/html
	charset:iso-8859-1
	expires:18 Dec 2018
-->
<!--
下面meta定义了一个重定向,你将在5s内看到重定向的新地址
-->
<meta http-equiv="Refresh" content="5;url=https://blog.csdn.net/z1324402468/article/details/85954278" />

3) content 属性

content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。
content 属性始终要和 name 属性或 http-equiv 属性一起使用。


看一些页面的小技巧
1)彻底屏蔽鼠标右键
<!-- 此段代码屏蔽<body>区域的鼠标右键事件 -->
<body oncontextmenu="window.event.returnValue=false">
2)取消页面选取跟防止页面被复制
<!-- 此段代码可以使<body>区域的页面不能被选择跟复制 -->
<body onselectstart="return false">
3)页面不允许被粘贴
<!-- 此段代码可以使<body>区域的页面不能被粘贴 -->
<body onpaste="return false">
4)防止页面被复制
<!-- 此段代码可以使<body>区域的页面不能被复制 -->
<body oncopy="return false">
5)页面自动刷新
<!-- 把如下代码加入 <head> 区域中其中5指每隔5秒刷新一次页面. 可用户增加文章点击率,这是作弊行为。 -->
<meta http-equiv="refresh" content="5">
6)防止被人iframe

注意:此处我验证时没有生效

<!-- 把如下代码加入 可以防止你的页面被iframe。 -->
<script LANGUAGE=JAVASCRIPT><!if (top.location !=self.location)top.location=self.location;// –></script>
7)进入网页时淡入淡出的效果

注意:此处我验证时没有生效

<!-- 
在头部head之间加入此代码,你会发现点击链接的时候,网页现实的是淡入淡出的效果。
Page-Exit”(离开网页)、”Site-Enter”(进入站点)、”Site-Exit”(离开站点)其中”Duration=3.0″可以设定每个周期的时间为多久,单位是秒。
-->
<meta http-equiv="Page-Exit"; content="blendTrans(Duration=3.0)">
Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐