Atrist

# head

在html文件中有一个 head 标签的存在，它与body不一样，它的内容不会在浏览器中显示，它的作用是保存页面的一些元数据，包括页面标题，网页语言，网页字符等等。

这是它可以包含的标签元素

# base

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

如果指定了以下任一属性，这个元素必须在其他任何属性是URL的元素之前。

  • href
    • 用于文档中相对 URL 地址的基础 URL。允许绝对和相对URL。
  • target
    • 默认浏览上下文的关键字或作者定义的名称，当没有明确目标的链接 <a> 或表单 <form> 导致导航被激活时显示其结果。
    • _self: 载入结果到当前浏览上下文中。（该值是元素的默认值）。
    • _blank: 载入结果到一个新的未命名的浏览上下文。
    • _parent: 载入结果到父级浏览上下文（如果当前页是内联框）。如果没有父级结构，该选项的行为和_self一样。
    • _top: 载入结果到顶级浏览上下文（该浏览上下文是当前上下文的最顶级上下文）。如果没有父级，该选项的行为和_self一样。

如果指定了多个 <base> 元素，只会使用第一个 href 和 target 值, 其余都会被忽略。

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

<link href="main.css" rel="stylesheet">

# 示例: 引入一个css文件

<link href="style.css" rel="stylesheet">

# 示例: 提供可替换的样式表

你也可以指定 "可替换的外部样式表" (opens new window)。

<link href="default.css" rel="stylesheet" title="Default Style">
<link href="fancy.css" rel="alternate stylesheet" title="Fancy">
<link href="basic.css" rel="alternate stylesheet" title="Basic">

# meta

meta元素定义的元数据的类型包括以下几种：

# charset

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

# content

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

# http-equiv

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

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

# 示例

<meta charset="utf-8">

<!-- Redirect page after 3 seconds -->
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">

# name

name 和 content 属性可以一起使用，以名-值对的方式给文档提供元数据，其中 name 作为元数据的名称，content 作为元数据的值。

# 示例

<meta name="color-scheme" content="dark light">

# script

<script ></script>

script 标签是用于加载javascript文件的，它可以放在任何地方, 一般会建议放在body后面。

存在以下几个属性

# src

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

# async

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

对于模块脚本，如果存在 async 属性，那么脚本及其所有依赖都会在延缓队列中执行，因此它们会被并行请求，并尽快解析和执行。

# defer

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

有 defer 属性的脚本会阻止 DOMContentLoaded 事件，直到脚本被加载并且解析完成。

如果缺少 src 属性（即内嵌脚本），该属性不应被使用，因为这种情况下它不起作用。

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

# 参考资料

body →