html5 头部标签 - 码农知识堂

html5 头部标签

在页面加载完成的时候，head 标签里的内容，是不会在页面中显示出来的。它包含了诸如页面的（标题）、指向 CSS 的链接（如果你选择用 CSS 来为 HTML 内容添加样式）、指向自定义图标的链接和其它的元数据（描述 HTML 的数据，比如，作者和描述文档的重要关键词）等信息。 HTML head 元素规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。可用于<head>元素内的元素有：<title>, <base>, <link>, <style>, <meta>, <script>, <noscript>。 下面来分别介绍一下各个元素： <h5><a id="1title_5"></a>1、<title>：添加标题</h5> <title> 元素，它可以为文档添加标题。但别和 <h1> 元素搞混了，<h1> 是为 body 添加标题的。有时候<h1> 也叫作网页标题。但是二者并不相同。 <h1> 元素在页面加载完毕时显示在页面中，通常只出现一次，用来标记页面内容的标题（故事名称、新闻摘要，等等）。<title> 元素是一项元数据，用于表示整个 HTML 文档的标题（而不是文档内容）。 <pre data-index="0" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><!DOCTYPE html> <html lang="en-us"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title><title">> element</title> </head> <body> <h1><h1">> element</h1> </body> </html> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code></pre> <img src="https://1000bd.com/contentImg/2024/09/11/8d2b14213939f5e7.png" alt="在这里插入图片描述"> <title> 元素也被以其他的方式使用着。比如说，如果你尝试为某个页面添加书签，（在火狐浏览器中：点击书签 > 将当前标签页添加到书签，或点击地址栏末尾的星标），你会看到 <title> 的内容被作为建议的书签名。 <img src="https://1000bd.com/contentImg/2024/09/11/91ad948d6b37fe37.png" alt="在这里插入图片描述"> <title> 元素的内容也被用在搜索的结果中。 <h5><a id="2meta_27"></a>2、<meta>：元数据</h5> 元数据就是描述数据的数据，而 HTML 有一个“官方的”方式来为一个文档添加元数据——<meta> 元素。有很多不同种类的 <meta> 元素可以被包含进你的页面的 <head> 元素。 属性 charset：这个属性声明了文档的<a href="https://so.csdn.net/so/search?q=%E5%AD%97%E7%AC%A6%E7%BC%96%E7%A0%81&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E5%AD%97%E7%AC%A6%E7%BC%96%E7%A0%81&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"字符编码\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E5%AD%97%E7%AC%A6%E7%BC%96%E7%A0%81&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"字符编码\"}"}" data-tit="字符编码" data-pretit="字符编码">字符编码</a>。如果使用了这个属性，其值必须是与 ASCII 大小写无关（ASCII case-insensitive）的"utf-8"。 <pre data-index="1" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><meta charset="utf-8"> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code></pre> name：name 和 content 属性可以一起使用，以名 - 值对的方式给文档提供元数据，其中 name 作为元数据的名称，content 作为元数据的值。 HTML 规范定义了以下标准元数据名称： <ul><li>application-name：网页中所运行的应用程序的名称。</li><li>author：文档作者的名字。</li><li>description：一段简短而精确的、对页面内容的描述。一些浏览器，比如 Firefox 和 Opera，将其用作书签的默认描述。</li><li>generator：生成此页面的软件的标识符（identifier）。</li><li>keywords：与页面内容相关的关键词，使用逗号分隔。</li><li>referrer：控制由当前文档发出的请求的 HTTP Referer 请求头。</li><li>theme-color：表示当前页面的建议颜色，在自定义当前页面从或页面周围的用户界面的显示时，用户代理应当使用此颜色。content 属性应当包含一个有效的 CSS <color> 值。</li><li>viewport: 为viewport（视口）的初始大小提供指示（hint）。目前仅用于移动设备。</li></ul> <div class="table-box"><table><thead><tr><th align="left">值</th><th align="left">可能的值</th><th align="left">描述</th></tr></thead><tbody><tr><td align="left">width</td><td align="left">一个正整数，或者字符串 device-width</td><td align="left">定义 viewport 的宽度，如果值为正整数，则单位为像素。</td></tr><tr><td align="left">height</td><td align="left">一个正整数，或者字符串 device-height</td><td align="left">定义 viewport 的高度。未被任何浏览器使用。</td></tr><tr><td align="left">initial-scale</td><td align="left">一个 0.0 和 10.0 之间的正数</td><td align="left">定义设备宽度（宽度和高度中更小的那个：如果是纵向屏幕，就是 device-width，如果是横向屏幕，就是 device-height）与 viewport 大小之间的缩放比例。</td></tr><tr><td align="left">maximum-scale</td><td align="left">一个 0.0 和 10.0 之间的正数</td><td align="left">定义缩放的最大值，必须大于等于 minimum-scale，否则表现将不可预测。浏览器设置可以忽略此规则；iOS 10 开始，Safari iOS 默认忽略此规则。</td></tr><tr><td align="left">minimum-scale</td><td align="left">一个 0.0 和 10.0 之间的正数</td><td align="left">定义缩放的最小值，必须小于等于 maximum-scale，否则表现将不可预测。浏览器设置可以忽略此规则；iOS 10 开始，Safari iOS 默认忽略此规则。</td></tr><tr><td align="left">user-scalable</td><td align="left">yes 或者 no</td><td align="left">默认为 yes，如果设置为 no，用户将无法缩放当前页面。浏览器设置可以忽略此规则；iOS 10 开始，Safari iOS 默认忽略此规则。</td></tr><tr><td align="left">viewport-fit</td><td align="left">auto、contain 或者 cover</td><td align="left">The auto value doesn’t affect the initial layout viewport, and the whole web page is viewable.The contain value means that the viewport is scaled to fit the largest rectangle inscribed within the display.The cover value means that the viewport is scaled to fill the device display. It is highly recommended to make use of the safe area inset variables to ensure that important content doesn’t end up outside the display.</td></tr></tbody></table></div> <ul><li>creator：当前文档的创建者，例如某个组织或者机构。如果有不止一个创建者，则应当使用多个名称为 creator 的元素。（而不是像关键词一样使用逗号分隔：关键词不应包含逗号，但创建者名称可能含有逗号。）</li><li>googlebot：robots 的替代名称，只被 Googlebot（Google 的网页爬虫/索引搜寻器）使用。</li><li>publisher：当前文档的发布者/出版者。</li><li>robots：爬虫、协作搜寻器，或者“机器人”，对此页面的处理行为，或者说，应当遵守的规则。是一个使用逗号分隔的、由下列值构成的列表：</li></ul> <div class="table-box"><table><thead><tr><th align="left">值</th><th align="left">描述</th><th align="left">被用于</th></tr></thead><tbody><tr><td align="left">index</td><td align="left">允许机器人索引此页面（默认）。</td><td align="left">所有爬虫</td></tr><tr><td align="left">noindex</td><td align="left">要求机器人不索引此页面。</td><td align="left">所有爬虫</td></tr><tr><td align="left">follow</td><td align="left">允许机器人跟随此页面上的链接（默认）。</td><td align="left">所有爬虫</td></tr><tr><td align="left">nofollow</td><td align="left">要求机器人不跟随此页面上的链接。</td><td align="left">所有爬虫</td></tr><tr><td align="left">all</td><td align="left">与 index, follow 等价</td><td align="left">Google</td></tr><tr><td align="left">none</td><td align="left">与 noindex, nofollow 等价</td><td align="left">Google</td></tr><tr><td align="left">noarchive</td><td align="left">要求搜索引擎不缓存页面内容。</td><td align="left">Google、Yahoo、Bing</td></tr><tr><td align="left">nosnippet</td><td align="left">Prevents displaying any description of the page in search engine results.</td><td align="left">Google、Bing</td></tr><tr><td align="left">noimageindex</td><td align="left">Requests this page not to appear as the referring page of an indexed image.</td><td align="left">Google</td></tr><tr><td align="left">nocache</td><td align="left">noarchive 的替代名称。</td><td align="left">Bing</td></tr></tbody></table></div> content：此属性包含http-equiv 或name 属性的值，具体取决于所使用的值。 许多 <meta> 元素包含了 name 和 content 属性。name 指定了 meta 元素的类型；说明该元素包含了什么类型的信息。content 指定了实际的元数据内容。 <pre data-index="2" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><meta name="author" content="Chris Mills"> <meta name="description" content="The MDN Web Docs Learning Area aims to provide complete beginners to the Web with all they need to know to get started with developing web sites and applications."> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code></pre> 指定作者在某些情况下是很有用的：如果你需要联系页面的作者，问一些关于页面内容的问题。一些内容管理系统能够自动获取页面作者的信息，然后用于某些用途。 指定包含关于页面内容的关键字的页面内容的描述是很有用的，因为它可能或让你的页面在<a href="https://so.csdn.net/so/search?q=%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"搜索引擎\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"搜索引擎\"}"}" data-tit="搜索引擎" data-pretit="搜索引擎">搜索引擎</a>的相关的搜索出现得更多（这些行为在术语上被称为：搜索引擎优化，或 SEO。） 但是许多 <meta> 特性已经不再使用。例如，keyword <meta> 元素（<meta name=“keywords” content=“fill, in, your, keywords, here”>）——提供关键词给搜索引擎，根据不同的搜索词，查找到相关的网站——已经被搜索引擎忽略了，因为作弊者填充了大量关键词到 keyword，错误地引导搜索结果。 http-equiv：http-equiv属性定义了一个编译指示指令。这个属性叫做 http-equiv(alent) 是因为所有允许的值都是特定 HTTP 头部的名称，如下： <ul><li>content-security-policy：它允许页面作者定义当前页的内容策略 (en-US)。内容策略主要指定允许的服务器源和脚本端点，这有助于防止跨站点脚本攻击。</li><li>content-type：如果使用这个属性，其值必须是"text/html; charset=utf-8"。注意：该属性只能用于 MIME type 为 text/html 的文档，不能用于 MIME 类型为 XML 的文档。</li><li>default-style：设置默认 CSS 样式表组的名称。</li><li>x-ua-compatible：如果指定，则 content 属性必须具有值 “IE=edge”。用户代理必须忽略此指示。</li><li>refresh：这个属性指定： 如果 content 只包含一个正整数，则为重新载入页面的时间间隔 (秒)； 如果 content 包含一个正整数，并且后面跟着字符串 ‘;url=’ 和一个合法的 URL，则是重定向到指定链接的时间间隔 (秒) 无障碍相关考虑：设置了 refresh 值的页面可能有时间间隔太短的风险。使用诸如屏幕朗读这样的辅助技术来浏览网页的人可能会由于自动跳转而来不及读完或理解网页的内容。这样不经提示而突然进行的页面刷新也可能会让有视力障碍的人群感到迷惑。</li></ul> <h5><a id="3link_99"></a>3、<link>：外部资源链接</h5> HTML 外部资源链接元素 (<link>) 规定了当前文档与外部资源的关系。该元素最常用于链接样式表，此外也可以被用来创建站点图标 (比如 PC 端的“favicon”图标和移动设备上用以显示在主屏幕的图标) 。 要链接一个外部的样式表，你需要像这样在你的中包含一个元素： <pre data-index="3" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><link href="main.css" rel="stylesheet"> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code></pre> 在这个简单的例子中，使用了 href 属性设置外部资源的路径，并设置 rel 属性的值为“stylesheet”(样式表)。rel 表示“关系 (relationship) ”，它可能是元素其中一个关键的特性——属性值表示项的链接方式与包含它的文档之间的关系。 这里有一些你经常遇到的其它类型。例如，这里是一个网站图标的链接： <pre data-index="4" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><link rel="icon" href="favicon.ico"> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code></pre> 还有一些其它的与图标相关的rel值，主要用于表示不同移动平台上特殊的图标类型，例如： <pre data-index="5" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114.png" type="image/png"> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code></pre> sizes属性表示图标大小，type属性包含了链接资源的 MIME 类型。这些属性为浏览器选择最合适的图标提供了有用的提示。 你也可以提供一个媒体类型，或者在media属性内部进行查询；这种资源将只在满足媒体条件的情况下才被加载进来。例如： <pre data-index="6" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><link href="print.css" rel="stylesheet" media="print"> <link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code></pre> <link>也加入了一些新的有意思的性能和安全特性。举例如下： <pre data-index="7" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><link rel="preload" href="myFont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code></pre> 将rel设定为preload，表示浏览器应该预加载该资源。as属性表示获取特定的内容类。crossorigin属性表示该资源是否应该使用一个CORS请求来获取。 属性 as：该属性仅在元素设置了 rel=“preload” 或者 rel=“prefetch” 时才能使用。它规定了元素加载的内容的类型，对于内容的优先级、请求匹配、正确的内容安全策略的选择以及正确的 Accept请求头的设置，这个属性是必需的。 <div class="table-box"><table><thead><tr><th align="left">值</th><th align="left">应用于</th></tr></thead><tbody><tr><td align="left">audio</td><td align="left"><audio> 元素</td></tr><tr><td align="left">document</td><td align="left"><iframe> 和 <frame> 元素</td></tr><tr><td align="left">embed</td><td align="left"><embed> 元素</td></tr><tr><td align="left">fetch</td><td align="left">fetch, XHRThis value also requires <link> to contain the crossorigin attribute.</td></tr><tr><td align="left">font</td><td align="left">CSS @font-face</td></tr><tr><td align="left">image</td><td align="left"><img> and <picture> elements with srcset or imageset attributes, SVG <image> elements, CSS *-image rules</td></tr><tr><td align="left">object</td><td align="left"><object> elements</td></tr><tr><td align="left">script</td><td align="left"><script> elements, Worker importScripts</td></tr><tr><td align="left">style</td><td align="left"><link rel=stylesheet> elements, CSS @import</td></tr><tr><td align="left">track</td><td align="left"><track> elements</td></tr><tr><td align="left">video</td><td align="left"><video> elements</td></tr><tr><td align="left">worker</td><td align="left">Worker, SharedWorker</td></tr></tbody></table></div> crossorigin：此枚举属性指定在加载相关资源时是否必须使用 CORS. 启用 CORS 的图片可以在 <canvas> 元素中重复使用，并避免其被污染. 可取的值如下： <ul><li> “anonymous”：会发起一个跨域请求 (即包含 Origin: HTTP 头). 但不会发送任何认证信息 (即不发送 cookie, X.509 证书和 HTTP 基本认证信息). 如果服务器没有给出源站凭证 (不设置 Access-Control-Allow-Origin: HTTP 头), 资源就会被污染并限制使用. </li><li> “use-credentials”：会发起一个带有认证信息 (发送 cookie, X.509 证书和 HTTP 基本认证信息) 的跨域请求 (即包含 Origin: HTTP 头). 如果服务器没有给出源站凭证 (不设置 Access-Control-Allow-Origin: HTTP 头), 资源就会被污染并限制使用.当不设置此属性时，资源将会不使用 CORS 加载 (即不发送 Origin: HTTP 头), 这将阻止其在 <canvas> 元素中进行使用。若设置了非法的值，则视为使用 anonymous. 前往 CORS settings attributes 获取更多信息。 </li></ul> disabled：仅对于rel=“stylesheet” ，disabled 的 Boolean 属性指示是否应加载所描述的样式表并将其应用于文档。如果在加载 HTML 时在 HTML 中指定了 Disabled，则在页面加载期间不会加载样式表。相反，如果禁用属性更改为 false 或删除时，样式表将按需加载。但是，一旦加载样式表，对 Disabled 属性的值所做的更改将不再与StyleSheet.disabled 属性的值有任何关系。相反，更改此属性的值只是启用和禁用应用于文档的样式表表单。这与 StyleSheet 的 disable 属性不同；将其更改为 true 会将样式表从文档的document.styleSheets 列表中删除，并且在切换回 false 时不会自动重新加载样式表。 href：此属性指定被链接资源的URL。URL 可以是绝对的，也可以是相对的。 hreflang：此属性指明了被链接资源的语言。其意义仅供参考。可取的值参见 <a href="https://www.ietf.org/rfc/bcp/bcp47.txt" rel="nofollow">BCP47</a>。仅当设置了 href 属性时才应设置该属性。 media：这个属性规定了外部资源适用的媒体类型。它的值必须是all（适用于所有设备）、print（适用于在打印预览模式下在屏幕上查看的分页材料和文档）、screen（主要用于屏幕）、speech（主要用于语音合成器）。这个属性使得用户代理能选择最适合设备运行的媒体类型。 rel：此属性命名链接文档与当前文档的关系。该属性必须是链接类型值的用空格分隔的列表。 sizes：这个属性定义了包含相应资源的可视化媒体中的 icons 的大小。它只有在rel包含 icon 的link 类型值。它可能有如下的规则。 1、any 表示图标可以按矢量格式缩放到任意大小，例如 image/svg+xml。 2、一个由空白符分隔的尺寸列表。每一个都以<width in pixels>x<height in pixels> 或 <width in pixels>X<height in pixels>给出。尺寸列表中的每一个尺寸都必须包含在资源里。 title：属性在元素上有特殊的语义。当用于<link rel=“stylesheet”>时，它定义了一个首选样式表或备用样式表。 type：这个属性被用于定义链接的内容的类型。这个属性的值应该是像 text/html，text/css 等 MIME 类型。这个属性常用的用法是定义链接的样式表，最常用的值是表明了 CSS 的 text/css。 <h5><a id="4base_URL_173"></a>4、<base>：文档根 URL</h5> HTML <base> 元素指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个 <base> 元素。 如果指定了多个 <base> 元素，只会使用第一个 href 和 target 值，其余都会被忽略。如果指定了以下任一属性，这个元素必须在其他任何属性是 URL 的元素之前。例如：<link> 的 href 属性。 属性 href：用于文档中相对 URL 地址的基础 URL。允许绝对和相对 URL。 target：默认浏览上下文的关键字或作者定义的名称，当没有明确目标的链接 <a> 或表单 <form> 导致导航被激活时显示其结果。该属性值定位到浏览上下文（例如选项卡，窗口或内联框 <iframe> ）。以下的关键字指定特殊的意思： <ul><li>_self: 载入结果到当前浏览上下文中。（该值是元素的默认值）。</li><li>_blank: 载入结果到一个新的未命名的浏览上下文。</li><li>_parent: 载入结果到父级浏览上下文（如果当前页是内联框）。如果没有父级结构，该选项的行为和_self一样。</li><li>_top: 载入结果到顶级浏览上下文（该浏览上下文是当前上下文的最顶级上下文）。如果没有父级，该选项的行为和_self 一样。</li></ul> 指向文档中某个片段的链接，例如 <a href=“#some-id”> 用 <base> 解析，触发对带有附加片段的基本 URL 的 HTTP 请求。例如：给定 <base href=“https://example.com”>以及此链接 <a href=“#anchor”>Anker</a>，那么链接指向 https://example.com/#anchor。 <h5><a id="5script_190"></a>5、<script></h5> HTML <script> 元素用于嵌入或引用可执行脚本。这通常用作嵌入或者指向 JavaScript 代码。 <script> 元素没必要非要放在文档的 <head> 中，并包含 src 属性来指向需要加载的 JavaScript 文件路径，同时最好加上 defer 以告诉浏览器在解析完成 HTML 后再加载 JavaScript。这样可以确保在加载脚本之前浏览器已经解析了所有的 HTML 内容（如果脚本尝试访问某个不存在的元素，浏览器会报错）。实际上还有很多方法可用于处理加载 JavaScript 的问题，但这是现代浏览器中最可靠的一种方法。 <pre data-index="8" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><script src="my-js-file.js" defer></script> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code></pre> <script> 元素看起来像一个空元素，但它并不是，因此需要一个结束标记。您还可以选择将脚本放入 <script>元素中，而不是指向外部脚本文件。 属性 async：对于普通脚本，如果存在 async 属性，那么普通脚本会被并行请求，并尽快解析和执行。对于模块脚本，如果存在 async 属性，那么脚本及其所有依赖都会在延缓队列中执行，因此它们会被并行请求，并尽快解析和执行。该属性能够消除解析阻塞的 Javascript。解析阻塞的 Javascript 会导致浏览器必须加载并且执行脚本，之后才能继续解析。defer 在这一点上也有类似的作用。这是个布尔属性：布尔属性的存在意味着 true 值，布尔属性的缺失意味着 false 值。 crossorigin：那些没有通过标准CORS (en-US)检查的正常script 元素传递最少的信息到 window.onerror。可以使用本属性来使那些将静态资源放在另外一个域名的站点打印错误信息。 defer：这个布尔属性被设定用来通知浏览器该脚本将在文档完成解析后，触发 DOMContentLoaded 事件前执行。有 defer 属性的脚本会阻止 DOMContentLoaded 事件，直到脚本被加载并且解析完成。 如果缺少 src 属性（即内嵌脚本），该属性不应被使用，因为这种情况下它不起作用。defer 属性对模块脚本没有作用 —— 他们默认 defer。 integrity：包含用户代理可用于验证已提取资源是否已无意外操作的内联元数据。 nomodule：这个布尔属性被设置来标明这个脚本在支持 ES2015 modules 的浏览器中不执行。 — 实际上，这可用于在不支持模块化 JavaScript 的旧浏览器中提供回退脚本。 src：这个属性定义引用外部脚本的 URI，这可以用来代替直接在文档中嵌入脚本。指定了 src 属性的 script 元素标签内不应该再有嵌入的脚本。 type：该属性定义 script 元素包含或src引用的脚本语言。属性的值为 MIME 类型; 支持的 MIME 类型包括text/javascript, text/ecmascript, application/javascript, 和application/ecmascript。如果没有定义这个属性，脚本会被视作 JavaScript。如果 MIME 类型不是 JavaScript 类型（上述支持的类型），则该元素所包含的内容会被当作数据块而不会被浏览器执行。如果 type 属性为module，代码会被当作 JavaScript 模块实验性。 text：和 textContent 属性类似，本属性用于设置元素的文本内容。但和 textContent 不一样的是，本属性在节点插入到 DOM 之后，此属性被解析为可执行代码。 <h5><a id="6style_218"></a>6、<style></h5> HTML 的 <style> 元素包含文档的样式信息或者文档的部分内容。默认情况下，该标签的样式信息通常是CSS的格式。 属性 type：该属性以 MIME 类型（不应该指定字符集）定义样式语言。如果该属性未指定，则默认为 text/css。 media：该属性规定该样式适用于哪个媒体。属性的取值CSS 媒体查询，默认值为 all。 nonce：一种加密的随机数（一次使用的数字），用于在style-src Content-Security-Policy (en-US)中将内联样式列入白名单。服务器每次发送策略时都必须生成一个唯一的随机数值。提供一个无法猜测的随机数非常重要，因为绕开资源策略是微不足道的。 title：指定可选的样式表。 在下面的例子中，我们将简单的样式应用到文档中： <pre data-index="9" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><!doctype html> <html> <head> <style> p { color: red; } </style> </head> <body> <p>This is my paragraph.</p> </body> </html> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code></pre> </div> </div> </li> <li class="list-group-item ul-li"> 相关阅读: <a href="/Article/Index/1453784">2023 PostgreSQL 数据库生态大会：解读拓数派大数据计算系统及其云存储底座</a> <a href="/Article/Index/785022">企业申请CMMI认证选择武汉好地科技的优势</a> <a href="/Article/Index/1079019">Makefile(二）</a> <a href="/Article/Index/610979">python自动化测试工具selenium使用指南</a> <a href="/Article/Index/1188641">基于 Delphi 的前后端分离：之二</a> <a href="/Article/Index/823975">前端高频面试题——有做过权限相关的事情吗？</a> <a href="/Article/Index/1496346">Object转List</a> <a href="/Article/Index/1404107">maven仓库改国内源</a> <a href="/Article/Index/1166278">前端面试题：找出任意一个HTML中的所有不重复的标签</a> <a href="/Article/Index/1106156">pytest中allure特性</a> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/weixin_49346755/article/details/127117017 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <a href="/Article/Index/888177">十款代码表白小特效一个比一个浪漫赶紧收藏起来吧！！！</a> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> </li> </ul> </div> </div> </div>     <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a> <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" />京公网安备 11010502049817号</a> </div> </div> </div> </div> </nav>   <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script>   </body> </html>