HTML中<head>标签里可以放入什么
HTML中<head>标签里可以放入什么
- <head> 标签用于定义文档的头部，它是所有头部元素的容器。
- <head> 标签中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
- <head> 绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
- <head> 内部可以包含下面这些标签<base>、<link>、 <meta>、 <script>、<style> 以及<title>。
- <head>部分中唯一必需的元素是<title>标签，用来定义文档的标题。
提示：请记住始终为文档规定标题！
1、html的<base>标签
定义和用法：
<base> 标签为页面上的所有链接规定默认地址或默认目标。
通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写**相对 URL** 中的空白。
使用 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用**指定的基本 URL** 来解析所有的**相对 URL**。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。
提示：标签必须位于 head 元素内部。
属性：
属性 值 是否必须 描述
href URL 是 规定页面中所有**相对链接**的基准 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 部分，不过它可出现任何次数。
属性：
属性 值 是否必须 描述
href URL 是 规定被链接文档的位置。
rel alternate、author、help、icon、licence、next、pingback、prefetch、prev、search、sidebar、stylesheet、tag 是 规定当前文档 与被链接文档之间的关系。
type MIME_type 否 规定被链接文档的 MIME 类型。
sizes heightxwidth、any 否 规定被链接资源的尺寸。仅适用于 rel=“icon”。
media screen、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">
3、html<meta>标签
定义和用法：
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 <meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
注意：元数据总是以名称/值的形式被成对传递的。
属性：
属性 值 是否必须 描述
content some_text 是 定义与 http-equiv 或 name 属性相关的元信息。
http-equiv content-type、expires、refresh、set-cookie 否 把 content 属性关联到 HTTP 头部。
name author、description、keywords、generator、revised、others 否 把 content 属性关联到一个名称。
scheme some_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)">
