Head 配置项

   日期:2020-05-13     浏览:156    评论:0    
核心提示:< head> 标签用于定义文档的头部下面这些标签可用在 head 部分< base>该标签为页面上的所有链接规定默认地址或默认目标,使用指定的基本 URL 来解析所有的相对 URL。这其中包括 < a>、< img>、< link>、< form> 标签中的 URL

< head> 标签用于定义文档的头部

下面这些标签可用在 head 部分

< base>

该标签为页面上的所有链接规定默认地址或默认目标,使用指定的基本 URL 来解析所有的相对 URL。这其中包括 < a>、< img>、< link>、< form> 标签中的 URL

<!DOCTYPE html>
<html>
  <head>
    <base href="https://www.baidu.com" target="_self" />
  </head>
  <body>
    <img src="/img/bd_logo1.png" />
    <p><a href="/">百度</a></p>
  </body>
</html>

< link>

定义文档与外部资源的关系

<!-- href 属性指向了一个外部资源的位置 -->

<!-- rel 属性规定当前文档与被链接文档之间的关系 -->

<!-- rel 属性的 "stylesheet" 定义样式表 -->
<link rel="stylesheet" href="theme.css" />

<!-- rel 属性的 "icon" 定义网站图标 -->
<link rel="icon" href="icon.png" />

<!-- media 属性用于为不同的媒介类型规定不同的样式 -->

<!-- 所有浏览器都支持值为 "screen"(默认)、"print" 以及 "all" 的 media 属性。 -->

<link rel="stylesheet" href="print.css" media="screen and (max-width: 600px)" />

<!-- 媒体类型(通常称为 Multipurpose Internet Mail Extensions 或 MIME 类型 )是一种标准,用来表示文档、文件或字节流的性质和格式。 -->

<!-- type 属性规定被链接文档的 MIME 类型。-->
<link rel="stylesheet" type="text/css" href="theme.css" />

< meta>

元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词,其中 http-equiv 会加入到 http 头中

<!-- charset 此特性声明当前文档所使用的字符编码,但该声明可以被任何一个元素的 lang 特性的值覆盖 -->
<meta charset="utf-8" />

<!-- http-equiv 这个枚举属性定义了能改变服务器和用户引擎行为的编译。这个编译值使用content 来定义 -->

------------------------------Content-Security-Policy-----------------------------
<!-- Content-Security-Policy 内容安全策略 允许站点管理者控制用户代理能够为指定的页面加载哪些资源。这有助于防止跨站点脚本攻击 .也没法注入脚本,除非还控制了一台列入了白名单的可信主机-->
<!-- 只允许通过 https加载这些资源 -->
<meta http-equiv="Content-Security-Policy" content="default-src https:" />
<!-- 限制外链接通过哪些域名进行加载,比如允许记载来自 http://127.0.0.1:8100 和 https://www.baidu.com 这两个站点的外部资源 -->

<!-- 只限制script 标签允许从以下两个站点加载 , 其中 'unsafe-inline' 表示不需要进行安全验证 -->
<meta http-equiv="Content-Security-Policy" content="script-src http://127.0.0.1:8100 https://www.baidu.com 'unsafe-inline'" />
<!-- 只限制图片资源从以下站点加载 -->
<meta http-equiv="Content-Security-Policy" content="img-src https://www.baidu.com " />
<!-- default-src 表示所有资源类型的默认值,比如所有的资源自能从当前域名加载 'self' -->
<meta http-equiv="Content-Security-Policy" content="defaule-src 'self'" />

<!-- 更过资源类型 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/default-src -->

------------------------------content-type-----------------------------
<!--这个属性定义了文档的 MIME type。但由于它位于HTML页面内,因此除了text / html之外的大多数值都不能使用-->
<meta http-equiv="content-type" content="text/html" />

------------------------------refresh-----------------------------
<!--这个属性指定: 如果content 只包含一个正整数,则是重新载入页面的时间间隔(秒); 如果content 包含一个正整数并且跟着一个字符串,则是重定向到指定链接的时间间隔(秒)-->
<meta http-equiv="refresh" content="3 'http://www.baidu.com'" />

<!-- name 该属性定义文档级元数据的名称。与 content 正好形成键值对 -->

------------------------------author-----------------------------
<!-- author,就是这个文档的作者名称 -->
<meta name="author" content="龙龙老表" />

------------------------------description-----------------------------
<!-- description,其中包含页面内容的简短和精确的描述。 -->
<meta name="description" content="你好,世界" />

------------------------------keywords-----------------------------
<!-- keywords, 包含与逗号分隔的页面内容相关的单词 -->
<meta name="keywords" content="你好,世界,ahaha" />

------------------------------referrer-----------------------------
<!-- Referer 会告诉服务器我是从哪个页面链接过来的,服务器基此可以获得一些信息用于处理。 -->

<!-- no-referrer 不要发送 HTTP Referer 首部。 -->
<meta name="referrer" content="no-referrer" />

<!-- origin 在 referrer 中只显示站点信息,不显示携带的数据 -->
<meta name="referrer" content="origin" />

------------------------------robots-----------------------------
<!-- robots 设置搜索引擎如何索引本页面 -->

<!-- index 告诉搜索引擎可以索引本页面,这也是默认属性 -->
<meta name="robots" content="index" />

<!-- noindex 告诉搜索引擎不可以索引本页面 -->
<meta name="robots" content="noindex" />

<!-- noimageindex 禁止搜索引擎索引本页面上的图片,本页面上的图片不会显示在搜索结果中 -->
<meta name="robots" content="noimageindex" />

<!-- follow 告诉搜索引擎爬虫可以爬行本页面上的链接 -->
<meta name="robots" content="follow" />

<!-- nofollow 告诉搜索引擎不要爬行本页面上的链接 -->
<meta name="robots" content="nofollow" />

<!-- 不许抓取本页,也不许顺着本页抓取索引别的链接 -->
<meta name="robots" content="noindex,nofollow" />

<!-- none none是noindex,nofollow的缩写 -->
<meta name="robots" content="none" />

------------------------------viewport-----------------------------
<!-- 规定移动设备 显示我们的网页的那一块区域 -->
<!-- width ,定义 viewport 的宽度,表示在样式代码中 width:100% 就只有 200px -->
<meta name="viewport" content="width=200px" />

<!-- height ,定义 viewport 的高度,表示在样式代码中 height:100% 就只有 200px -->
<meta name="viewport" content="height=200px" />

<!-- initial-scale ,定义页面缩放的比例( 设备的宽度/页面的显示宽度 ) -->
<meta name="viewport" content="initial-scale=1" />

<!-- user-scalable ,如果设置为 no,用户将不能放大或缩小网页。默认值为 yes。 -->
<meta name="viewport" content="user-scalable=no" />

< style>

标签用于为 HTML 文档定义样式信息,type 定义 style 元素的内容一般就是 “text/css”

< title>

定义文档的标题

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服