内容参考 1 htmlhead.dev/ 2 wiki.developer.mozilla.org/

`<head>`内标签

1.概述

HTML head 元素规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。
有效<head>的元素包括<meta> <link> <title> <style> <script> <noscript> <base>

2.`<meta>`标签

2.1 介绍

表示那些不能由其它 HTML 元相关（meta-related）元素之一表示的任何元数据信息。
meta 元素定义的元数据的类型包括以下几种：

如果设置了 name 属性，meta 元素提供的是文档级别（document-level）的元数据，应用于整个页面。
如果设置了 http-equiv 属性，meta 元素则是编译指令，提供的信息与类似命名的HTTP头部相同。
如果设置了 charset 属性，meta 元素是一个字符集声明，告诉文档使用哪种字符编码。
如果设置了 itemprop 属性，meta 元素提供用户定义的元数据。

2.2 属性

charset

这个属性声明了文档的字符编码。如果使用了这个属性，其值必须是与ASCII大小写无关（ASCII case-insensitive）的"utf-8"。

content

此属性包含http-equiv 或name 属性的值，具体取决于所使用的值。

http-equiv

属性定义了一个编译指示指令。这个属性叫做 http-equiv(alent) 是因为所有允许的值都是特定HTTP头部的名称，如下：

content-security-policy 它允许页面作者定义当前页的内容策略。内容策略主要指定允许的服务器源和脚本端点，这有助于防止跨站点脚本攻击。
content-type 如果使用这个属性，其值必须是"text/html; charset=utf-8"。注意：该属性只能用于 MIME type 为 text/html 的文档，不能用于MIME类型为XML的文档。
default-style 设置默认 CSS 样式表组的名称。
x-ua-compatible 如果指定，则 content 属性必须具有值 "IE=edge"。用户代理必须忽略此指示。
refresh 这个属性指定: 如果 content 只包含一个正整数，则为重新载入页面的时间间隔(秒)
如果 content 包含一个正整数，并且后面跟着字符串 ';url=' 和一个合法的 URL，则是重定向到指定链接的时间间隔(秒)

name
name 和 content 属性可以一起使用，以名-值对的方式给文档提供元数据，其中 name 作为元数据的名称，content 作为元数据的值。在标准元数据名称中查看 HTML 规范等规范中定义的标准元数据名称。

2.3 用例

<!-- 以下两个meta标记必须在`<head>`中排在第一位 -->
<!-- 始终确保正确的文档呈现。  -->
<!-- 任何其他head元素都应该在这些标记之后。 -->


<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--允许控制从何处加载资源。尽可能早地放置在`<head>`中，作为标签仅适用于在其后声明的资源。-->

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

<!--Web应用程序的名称（仅当网站用作应用程序时才应使用）-->

<meta name="application-name" content="Application Name">

<!--Chrome，Firefox OS和Opera的主题色-->

<meta name="theme-color" content="#4285f4">


<!--文档简短说明（最多150个字符）-->
<!--此内容*可能*用作搜索引擎结果的一部分-->

<meta name="description" content="A description of the page">

<!--控制搜索引擎爬网和建立索引的行为 -->
<!--所有搜寻引擎 -->

<meta name="robots" content="index,follow">

<!--谷歌搜索-->

<meta name="googlebot" content="index,follow">


<!--告诉Google不要显示附加链接搜索框-->

<meta name="google" content="nositelinkssearchbox">

<!-- 告诉Google不要为此文档提供翻译 -->
<meta name="google" content="notranslate">

<!-- 验证网站所有权 -->
<meta name="google-site-verification" content="verification_token"><!-- Google Search Console -->
<meta name="yandex-verification" content="verification_token"><!-- Yandex Webmasters -->
<meta name="msvalidate.01" content="verification_token"><!-- Bing Webmaster Center -->
<meta name="alexaVerifyID" content="verification_token"><!-- Alexa Console -->
<meta name="p:domain_verify" content="code_from_pinterest"><!-- Pinterest Console-->
<meta name="norton-safeweb-site-verification" content="norton_code"><!-- Norton Safe Web -->

<!-- 识别用于构建文档的软件（即-WordPress，Dreamweaver） -->
<meta name="generator" content="program">

<!-- 文档主题的简短描述 -->
<meta name="subject" content="your document's subject">

<!-- 根据文件内容给出一般年龄等级 -->
<meta name="rating" content="General">

<!-- 允许控制引荐来源信息的传递方式 -->
<meta name="referrer" content="no-referrer">

<!-- 禁用自动检测和格式化可能的电话号码 -->
<meta name="format-detection" content="telephone=no">

<!-- 通过设置为'off/on'，设置是否进行DNS预读取 -->
<meta http-equiv="x-dns-prefetch-control" content="off">

<!-- 指定要显示在特定框架中的文档 -->
<meta http-equiv="Window-Target" content="_value">

<!-- 地理标签 -->
<meta name="ICBM" content="latitude, longitude">
<meta name="geo.position" content="latitude;longitude">
<meta name="geo.region" content="country[-state]"><!-- Country code (ISO 3166-1): mandatory, state code (ISO 3166-2): optional; eg. content="US" / content="US-NY" -->
<meta name="geo.placename" content="city/town"><!-- eg. content="New York City" -->
<!-- Smart App Banner -->
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">


<!-- 启动图标标题 -->
<meta name="apple-mobile-web-app-title" content="App Title">

<!-- 启用独立（全屏）模式 -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- 状态栏外观（除非启用独立模式，否则无效） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!-- iOS应用深度链接 -->
<meta name="apple-itunes-app" content="app-id=APP-ID, app-argument=http/url-sample.com">

<!--添加到主屏幕-->
<meta name="mobile-web-app-capable" content="yes">
<!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen -->

<!-- 安卓应用深度链接 -->
<meta name="google-play-app" content="app-id=package-name">
<!--360浏览器-->
<!-- 选择渲染引擎顺序 -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<!--QQ手机浏览器-->
<!-- 将屏幕锁定到指定的方向 -->
<meta name="x5-orientation" content="landscape/portrait">

<!-- 全屏显示 -->
<meta name="x5-fullscreen" content="true">

<!-- 文档将以“应用程序模式”显示（全屏等） -->
<meta name="x5-page-mode" content="app">

<!--UC移动浏览器-->
<!-- 将屏幕锁定到指定的方向 -->
<meta name="screen-orientation" content="landscape/portrait">

<!-- 全屏显示 -->
<meta name="full-screen" content="yes">

<!-- 即使在“文本模式” UC浏览器也将显示图片 -->
<meta name="imagemode" content="force">

<!-- 文档将以“应用程序模式”显示（全屏，禁止手势等） -->
<meta name="browsermode" content="application">

<!-- 禁用UC浏览器的“夜间模式” -->
<meta name="nightmode" content="disable">

<!-- 简化文件以减少数据传输-->
<meta name="layoutmode" content="fitscreen">

<!-- 禁用UC浏览器的“当文档中有很多单词时放大字体”功能-->
<meta name="wap-font-scale" content="no">

3.`<link>`标签

3.1 介绍

HTML外部资源链接元素 (<link>) 规定了当前文档与外部资源的关系。该元素最常用于链接样式表，此外也可以被用来创建站点图标(比如PC端的“favicon”图标和移动设备上用以显示在主屏幕的图标) 。

3.2 属性

该属性仅在<link>元素设置了 rel="preload" 时才能使用。它规定了元素加载的内容的类型，对于内容的优先级、请求匹配、正确的内容安全策略的选择以及正确的 Accept请求头的设置，这个属性是必需的。

type

这个属性被用于定义链接的内容的类型。这个属性的值应该是像text/html，text/css等MIME类型。这个属性常用的用法是定义链接的样式表，最常用的值是表明了CSS的text/css。

rel

此属性命名链接文档与当前文档的关系。该属性必须是链接类型值的用空格分隔的列表。

href

此属性指定被链接资源的URL。 URL 可以是绝对的，也可以是相对的。

3.3 用例

<!-- Points to an external stylesheet -->
<link rel="stylesheet" href="https://example.com/styles.css">

<!-- Helps prevent duplicate content issues -->
<link rel="canonical" href="https://example.com/article/?page=2">

<!-- Links to an AMP HTML version of the current document -->
<link rel="amphtml" href="https://example.com/path/to/amp-version.html">

<!-- Links to a JSON file that specifies "installation" credentials for the web applications -->
<link rel="manifest" href="manifest.json">

<!-- Links to information about the author(s) of the document -->
<link rel="author" href="humans.txt">

<!-- Refers to a copyright statement that applies to the link's context -->
<link rel="license" href="copyright.html">

<!-- Gives a reference to a location in your document that may be in another language -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">

<!-- Provides information about an author or another person -->
<link rel="me" href="https://google.com/profiles/thenextweb" type="text/html">
<link rel="me" href="mailto:name@example.com">
<link rel="me" href="sms:+15035550125">

<!-- Links to a document that describes a collection of records, documents, or other materials of historical interest -->
<link rel="archives" href="https://example.com/archives/">

<!-- Links to top level resource in an hierarchical structure -->
<link rel="index" href="https://example.com/article/">

<!-- Provides a self reference - useful when the document has multiple possible references -->
<link rel="self" type="application/atom+xml" href="https://example.com/atom.xml">

<!-- The first, last, previous, and next documents in a series of documents, respectively -->
<link rel="first" href="https://example.com/article/">
<link rel="last" href="https://example.com/article/?page=42">
<link rel="prev" href="https://example.com/article/?page=1">
<link rel="next" href="https://example.com/article/?page=3">

<!-- Used when a 3rd party service is utilized to maintain a blog -->
<link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD">

<!-- Forms an automated comment when another WordPress blog links to your WordPress blog or post -->
<link rel="pingback" href="https://example.com/xmlrpc.php">

<!-- Notifies a URL when you link to it on your document -->
<link rel="webmention" href="https://example.com/webmention">

<!-- Enables posting to your own domain using a Micropub client -->
<link rel="micropub" href="https://example.com/micropub">

<!-- Open Search -->
<link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Search Title">

<!-- Feeds -->
<link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS">
<link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">

<!-- Prefetching, preloading, prebrowsing -->
<!-- More info: https://css-tricks.com/prefetching-preloading-prebrowsing/ -->
<link rel="dns-prefetch" href="//example.com/">
<link rel="preconnect" href="https://www.example.com/">
<link rel="prefetch" href="https://www.example.com/">
<link rel="prerender" href="https://example.com/">
<link rel="preload" href="image.png" as="image">
<!-- For IE 10 and below -->
<!-- Place favicon.ico in the root directory - no tag necessary -->

<!-- Icon in the highest resolution we need it for -->
<link rel="icon" sizes="192x192" href="/path/to/icon.png">

<!-- Apple Touch Icon (reuse 192px icon.png) -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">

<!-- Safari Pinned Tab Icon -->
<link rel="mask-icon" href="/path/to/icon.svg" color="blue">

4.`<title>`标签

4.1 介绍

HTML <title> 元素定义文档的标题，显示在浏览器的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。

页面标题的内容可能对搜索引擎优化（SEO）具有重要意义。通常，较长的描述性标题要比简短或一般性标题更好。标题的内容是搜索引擎算法用来确定在搜索结果中列出页面顺序的组件之一。同样，标题是初始的“挂钩”，您可以通过它吸引浏览浏览结果页面的读者的注意力。

撰写好标题的一些准则和技巧：

避免使用一两个单词的标题。对于词汇表或参考样式的页面，请使用描述性短语或术语-定义对。搜索引擎通常显示页面标题的前55至60个字符。超出此范围的文本可能会丢失，因此请尽量不要使标题更长。如果您必须使用较长的标题，请确保重要的部分出现在前面，并且标题中可能要删除的部分中没有关键内容。不要使用“关键字Blob”。如果标题只是单词列表，则算法通常会降低页面在搜索结果中的位置。尝试确保您的标题在您自己的网站中尽可能唯一。标题重复（或几乎重复）可能会导致搜索结果不准确。

4.2 属性

只拥有全局属性

4.3 用例

<title>第十五届秋季运动会</title>

5.`<style>`标签

5.1 介绍

HTML的<style>元素包含文档的样式信息或者文档的部分内容。默认情况下，该标签的样式信息通常是CSS的格式。

5.2 属性

type

该属性以MIME类型（不应该指定字符集）定义样式语言。如果该属性未指定，则默认为 text/css。

media

该属性规定该样式适用于哪个媒体。属性的取值CSS媒体查询，默认值为 all。

nonce

一种加密的随机数（一次使用的数字），用于在style-src Content-Security-Policy中将内联样式列入白名单。服务器每次发送策略时都必须生成一个唯一的随机数值。提供一个无法猜测的随机数非常重要，因为绕开资源策略是微不足道的。

5.3 用例

<style type="text/css">
p {
  color: #26b72b;
}
</style>

6.`<script>`标签

6.1 介绍

HTML <script> 元素用于嵌入或引用可执行脚本。这通常用作嵌入或者指向 JavaScript 代码。<script>元素也能在其他语言中使用，比如 WebGL 的 GLSL 着色器语言。

6.2 属性

async

对于普通脚本，如果存在 async 属性，那么普通脚本会被并行请求，并尽快解析和执行。

对于模块脚本，如果存在 async 属性，那么脚本及其所有依赖都会在延缓队列中执行，因此它们会被并行请求，并尽快解析和执行。该属性能够消除解析阻塞的 Javascript。解析阻塞的 Javascript 会导致浏览器必须加载并且执行脚本，之后才能继续解析。defer 在这一点上也有类似的作用。

这是个布尔属性：布尔属性的存在意味着 true 值，布尔属性的缺失意味着 false 值。

defer

这个布尔属性被设定用来通知浏览器该脚本将在文档完成解析后，触发 DOMContentLoaded 事件前执行。

有 defer 属性的脚本会阻止 DOMContentLoaded 事件，直到脚本被加载并且解析完成。如果缺少 src 属性（即内嵌脚本），该属性不应被使用，因为这种情况下它不起作用。

defer 属性对模块脚本没有作用 —— 他们默认 defer。

src

这个属性定义引用外部脚本的URI，这可以用来代替直接在文档中嵌入脚本。指定了 src 属性的script元素标签内不应该再有嵌入的脚本。

type

该属性定义script元素包含或src引用的脚本语言。属性的值为MIME类型; 支持的MIME类型包括text/javascript, text/ecmascript, application/javascript, 和application/ecmascript。如果没有定义这个属性，脚本会被视作JavaScript。如果MIME类型不是JavaScript类型（上述支持的类型），则该元素所包含的内容会被当作数据块而不会被浏览器执行。如果type属性为module，代码会被当作JavaScript模块

6.3 用例

<script src="javascript.js"></script>
<script type="module" src="main.mjs"></script>
<script nomodule src="fallback.js"></script>
<script>
  // function(s) go here
</script>

7.`<noscript>`标签

7.1 介绍

如果页面上的脚本类型不受支持或者当前在浏览器中关闭了脚本，则在 HTML <noscript> 元素中定义脚本未被执行时的替代内容。

7.2 属性

只拥有全局属性

7.3 用例

<noscript>
  <!-- anchor linking to external file -->
  <a href="http://www.mozilla.com/">External Link</a>
</noscript>

8.`<base>`标签

8.1 介绍

HTML <base> 元素指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个 <base> 元素。

一个文档的基本 URL, 可以通过使用 document.baseURI 的 JS 脚本查询。如果文档不包含元素，baseURI 默认为 document.location.href。

8.2 属性

href

用于文档中相对 URL 地址的基础 URL。允许绝对和相对URL。 target

默认浏览上下文的关键字或作者定义的名称，当没有明确目标的链接 <a> 或表单 <form> 导致导航被激活时显示其结果。该属性值定位到浏览上下文（例如选项卡，窗口或内联框 <iframe> ）。以下的关键字指定特殊的意思：

_self: 载入结果到当前浏览上下文中。（该值是元素的默认值）。
_blank: 载入结果到一个新的未命名的浏览上下文。
_parent: 载入结果到父级浏览上下文（如果当前页是内联框）。如果没有父级结构，该选项的行为和_self一样。
_top: 载入结果到顶级浏览上下文（该浏览上下文是当前上下文的最顶级上下文）。如果没有父级，该选项的行为和_self一样。

8.3 用例

<base href="https://example.com/page.html">

`<body>`内标签

待续

HTML标签

<head>内标签

1.概述

2.<meta>标签

2.1 介绍

2.2 属性

2.3 用例

3.<link>标签

3.1 介绍

3.2 属性

3.3 用例

4.<title>标签

4.1 介绍

4.2 属性

4.3 用例

5.<style>标签

5.1 介绍

5.2 属性

5.3 用例

6.<script>标签

6.1 介绍

6.2 属性

6.3 用例

7.<noscript>标签

7.1 介绍

7.2 属性

7.3 用例

8.<base>标签

8.1 介绍

8.2 属性

8.3 用例

<body>内标签

3

`<head>`内标签

2.`<meta>`标签

3.`<link>`标签

4.`<title>`标签

5.`<style>`标签

6.`<script>`标签

7.`<noscript>`标签

8.`<base>`标签

`<body>`内标签