search

anjia / blog

博客，积累与沉淀
106 stars 4 forks source link

HTML 基础 #91

Open anjia opened 2 years ago

anjia commented 2 years ago

目录

  1. HTML 元素
    • 元素 vs 标签
    • 元素种类：6种
    • 元素一览表：按功能划分
  2. HTML 属性
    • 属性的两个方面
      • 内容属性
        • 类型始终是字符串
        • 读取和设置 element.setAttribute() 和 element.getAttribute()
      • IDL 属性，也称 JavaScript property
        • 类型不全是字符串，且它会返回元素真正使用的值
          • eg. 数值类型、URL 类型、布尔属性、枚举属性
        • 读取和设置 element.foo
    • 全局属性
      • 基本全局属性（28个）
      • aria-* 系列属性（未展开）
      • on* 系列属性（未展开）
      • xml:lang 和 xml:base（已废弃）
    • 与特定元素关联的属性（95个）
      • 10个 元数据
      • 7个 最常用/最多元素
      • 32个 表单
      • 18个 多媒体
      • 5+5+5+3个：状态+链接+表格+iframe
      • 6个 其它
      • 4个 实验中
  3. HTML 元数据
    1. <meta> 内容很多
      • <meta charset="">
      • <meta name="" content="">
      • <meta http-equiv="" content="">
      • <meta itemprop="">
    2. <title>（与 SEO）
    3. <base>
      • href, target
    4. <link> 外部资源
      • type, rel, href, hreflang
      • media
      • sizes, disabled, imagesizes, imagesrcset, as
      • crossorigin, integrity, referrerpolicy, prefetch
    5. <style>
      • media, title
      • nonce
    6. <script> 脚本/亦可内联
      • src, type
      • async, defer, nomodule
      • crossorigin, integrity, referrerpolicy, nonce
    7. <noscript>
anjia commented 2 years ago

一. HTML 元素

元素是网页的一部分。在 XML 和 HTML 中，元素可能包含数据项/文本块/图像，或什么都没有。一个典型的元素通常包括一个带属性的开始标签、文本内容和一个结束标签。

每个元素里可以放哪些内容是由该元素的内容模型决定的

元素 vs 标签

虽然元素和标签的名称是一样的，但它们不是一个东西。在 HTML 中，标签用于创建元素，元素是由开始标签和结束标签组成的，故而标签是在网页的源代码里，而元素则存在于 DOM 中（DOM 就是在浏览器中展示网页的文档模型）。

源码字符串 → token → tag → element

  • tag, 标签
  • element, 元素

元素种类

有 6 种不同的元素，如下：

种类 元素
void elements 空元素 <meta>, <base>, <link>
<input>, <img>, <area>, <source>, <track>
<br>, <wbr>, <hr>, <col>
<embed>, <param>
raw text elements 原始文本元素 <script>, <style>
escapable raw text elements 可转义的原始文本元素 <textarea>, <title>
template element 模板元素 <template>
foreign elements 外来元素 来自 MathML 命名空间和 SVG 命名空间的元素
normal elements 普通元素 除以上 5 种之外的所有元素

元素一览表

为了方便理解和使用，我们按照功能对元素进行如下分类。

分类 元素 说明
根元素 <html> HTML 文档的根元素
<body> 代表 HTML 文档的内容。只能有一个
元数据 <head> 元数据包含了页面相关的信息。 比如：
<style>, <link> 样式
<script>, <noscript> 脚本
<meta>, <base>, <title> 帮助软件使用和渲染的数据（eg.浏览器/搜索引擎）
内容块 <main>
<aside>, <article>, <nav>, <section>
<header>, <footer>		 内容块元素允许我们将文档内容组织成逻辑片段
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<address>
文本内容 <ol>, <ul>, <li>
<dl>, <dt>, <dd>		 文本内容元素有助于 accessibility 和 SEO
它们能标识出内容的目的和结构
<figure>, <figcaption>
<pre>
<blockquote>
<p>
<hr>
<div> 没啥语义，一般用于分块
内联文本 <a> 定义单词/行或任意文本的含义,结构或样式
<cite>, <q>
<code>, <samp>
<sub>, <sup>
<ruby>, <rp>, <rt>
<abbr>, <dfn>, <time>, <var>
<kbd>, <data>
<mark>
<strong>, <em>, <i>, <small>
<s>, <u>
<del>, <ins>
<br>, <wbr>
<bdi>, <bdo>
<span> 没啥语义，一般用于分组，为了样式/共享属性
表格 <table> 表格数据
<caption>
<colgroup>,<col>
<thead>, <tbody>, <tfoot>
<tr>, <th>, <td>
表单 <form> 包含用于提交信息的可交互控件
<input>, <button>
<textarea>
<select>, <optgroup>, <option>
<label>
<fieldset>, <legend>
<datalist>, <option>
<progress>, <meter>
<output>
交互 <details>, <summary> 可交互
<dialog>
<menu> <ul>的语义化表示（目前兼容性不好）
多媒体资源 <img>
<area>, <map>
<picture>, <source>		 图片+音频+视频
<audio>, <video>
<track>, <source>
内嵌内容 <iframe>, <portal> 嵌入网页+其它内容
<embed>
<object>, <param>
脚本 <canvas> 可创建 dynamic content 和 Web applications
可使用以下 API 绘制 graphics 和 animations
- canvas scripting API
- WebGL API
SVG 和 MathML <svg>
<math>		 另外两个命名空间，可直接写
Web Components <template> <slot>

已废弃

分类 元素 说明
已废弃 <font>, <basefont>, <big>, <blink>
<center>, <marquee>		 已废弃（用CSS更合适）
<acronym>, <strike>, <rb>,<rtc>
<plaintext>, <tt>, <xmp>
<dir>, <menuitem>
<frameset>, <frame>, <noframes>
<keygen>
<shadow>, <content>		 已废弃（有更合适的替代元素）
<image>, <bgsound>, <noembed>
<spacer>, <nobr>		 已废弃（非标准）
<applet>, <hgroup> 已废弃（其它） 
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element
document.querySelectorAll('.standard-table').forEach(table => { console.log("\n"); table.querySelectorAll("tr td:first-child code").forEach(code => console.log(code.innerText)) });
anjia commented 2 years ago

二. HTML 属性

HTML 元素的属性有的用来配置该元素，有的可以让其灵活调整行为以满足用户的需求。大部分属性都有两个方面，即内容属性和 IDL 属性。

  • content attribute
  • Interface Definition Language attribute, 接口定义语言属性

内容属性就是从内容里设置的属性，即从 HTML 代码里。我们可以通过 element.setAttribute() 和 element.getAttribute() 来设置和获取内容属性。内容属性的类型始终是字符串，即使它的预期值是个整数，比如 <input maxlength="34">, setAttribute("maxlength", "34")。

IDL 属性也称 JavaScript 属性，可以通过 element.foo 来读取和设置，它本质上反映的也是内容属性。

IDL attribute 即 JavaScript property

大多数情况下，IDL 属性都会返回元素真正使用的值。比如 <input type="foo"> 虽然我们指定了内容属性 type="foo"，但因为它是无效的所以 <input> 元素会按照默认值显示为 type="text"（在外观和行为上），此时读取内容属性依然是 foo，而读取 IDL 属性是当前实际使用的 text，如下：

IDL 属性的类型不总是字符串。当我们使用 IDL 属性的时候，读取和设置的值类型都是元素属性所需要的类型。 比如 <input type="text" maxlength="150">，input.maxLength 总是返回一个数字， 当我们给它设置值的时候也应该是个数字，如果传的是非数值类型那么 JavaScript 会自动进行类型转换。

IDL 属性可以反映（reflect）其它类型，比如无符号长整数、URL、布尔值等。但不幸的是，并没有明确的规则和方式列出 IDL 属性和内容属性的行为对应关系，具体的行为表现还是取决于相关的属性。不过除去有历史包袱的个别属性（比如 select.size）之外，大多数属性的行为还是符合标准的，详见 Reflecting content attributes in IDL attributes。

当 IDL 属性是 URL 类型时，比如 href。内容属性会返回 HTML 里写的值，而 IDL 属性会返回完整的 URL，如下：

当 IDL 属性是布尔类型时，比如 checked。如果元素上存在该属性那么值就是 true，如果不存在则值就是 false。布尔属性要表示 false 只能是完全省略该属性，一旦存在该属性那么值就是 true，哪怕它没值或值为空字符串或值为'false'字符串。如下：

当 IDL 属性是枚举类型时，比如 <input> 元素的 type 属性。一般会给出两种默认状态，缺失值默认值和无效值默认值，如下：

至此，我们介绍了以下内容：

  1. 内容属性
    • 始终是字符串类型
    • 读取和设置 element.setAttribute() 和 element.getAttribute()
  2. IDL 属性，也称 JavaScript property
    • 类型可以是字符串、数值、URL、布尔等
    • 读取和设置 element.foo
    • IDL 属性都会返回元素真正使用的值，比如：
      • 数值类型、URL 类型
      • 布尔属性、枚举属性

接下来，让我们看看 HTML 里都有哪些属性。

全局属性

全局属性是所有 HTML 元素的共有属性，即便它们可能对某些元素没有影响。

我们可以在所有的 HTML 元素上指定全局属性，即便是非标准的 HTML 元素，因为现代浏览器会自动处理那些全局属性，比如带有 hidden 属性的元素会被隐藏。

属性名 说明
最常用 id, class, style
title, tabindex
data-*
lang
dir 枚举属性
交互相关 hidden, autofocus 布尔属性
draggable, contenteditable 枚举属性
spellcheck, translate, autocapitalize 枚举属性
键盘相关 accesskey 快捷键
inputmode, enterkeyhint 虚拟键盘，枚举属性
Web Components is, slot
part, exportparts Shadow DOM 相关
内容安全 nonce
微数据相关 itemid, itemprop
itemref
itemscope, itemtype

contextmenu 已废弃

// https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes
$0.querySelectorAll("dt").forEach(item => console.log(item.innerText));

除了以上基本的全局属性之外，还有 3 类全局属性：

与特定元素关联的属性

分类 属性名 关联元素 元素说明
元数据（10个） charset
http-equiv
content		 <meta>
async
defer		 <script>
rel <link>
<a>, <area>
media <link>, <style>
<a>, <area>
<source>
crossorigin <script>, <link>
<img>, <audio>, <video>
referrerpolicy <script>, <link>
<img>, <area>
<iframe>
<a>
integrity <script>, <link>
状态相关（5个） disabled <input>, <textarea>, <select>
<optgroup>, <option>
<button>
<fieldset>
required <input>, <textarea>, <select>
readonly <input>, <textarea>
checked <input>
selected <option>
最常用（7个） name <meta> 元数据
<form>
<input>, <textarea>, <select>
<button>
<output>, <fieldset>		 表单控件
<iframe>, <object>, <param> 内嵌内容
<map> 多媒体资源
form <input>, <textarea>, <select>, <button>
<label>, <fieldset>, <output>
<progress>, <meter>		 表单控件
<object> 内嵌内容
src <script> 脚本
<img>, <audio>, <video>
<source>, <track>		 多媒体
<iframe>, <embed> 内嵌内容
<input>
type <script>, <link>, <style> 元数据
<input>, <button> 表单控件
<source> 多媒体
<embed>, <object> 内嵌内容
<menu> 交互
value <input>, <button>, <option>
<progress>, <meter>		 表单控件
<param> 内嵌
<li>, <data>
width
height		 <img>, <video> 多媒体
<canvas> 脚本画布
<iframe>
<embed>, <object>		 内嵌内容
<input>
链接相关（5个） href <a>, <area>
<link>, <base>
hreflang <a>, <area>
<link>
target <a>, <area>
<base>
<form>
ping
download		 <a>, <area>
多媒体（18个） alt <img>, <area>
<input>
decoding
ismap		 <img> 图片
usemap <img>
<object>
<input>
coords
shape		 <area> 图片
srcset <img>, <source> 图片
sizes <img>, <source>
<link>
controls
loop
muted
autoplay
preload
buffered		 <audio>, <video> 音频+视频
poster <video> 视频
kind
srclang
default		 <track> 字幕
表单（32个） action
method
enctype
accept-charset
novalidate		 <form>
autocomplete <form>
<input>, <select>, <textarea>
accept <input> 文件类型
placeholder
maxlength
minlength
dirname		 <input>, <textarea>
size
multiple		 <input>, <select>
rows
cols
wrap		 <textarea>
max <input>, <meter>, <progress>
min <input>, <meter>
low
high
optimum		 <meter>
step
capture
list
pattern		 <input>
for <label>, <output>
label <optgroup>, <option>, <track>
formaction
formenctype
formmethod
formnovalidate
formtarget		 <input>, <button>
表格（5个） span <colgroup>, <col>
scope <th>
rowspan
colspan
headers		 <th>, <td>
iframe（3个） sandbox
srcdoc
allow		 <iframe> 内嵌网页
其它（6个） cite <blockquote>, <q> 文本引用
<del>, <ins> 文本编辑
datetime <del>, <ins>
<time>
reversed
start		 <ol>
open <details>, <dialog> 交互
data <object> 内嵌内容
实验中（4个） importance <script>, <link> 元数据
<img>, <iframe>
loading <img>, <iframe>
csp <iframe>
enterkeyhint <textarea>
contenteditable

已废弃

分类 属性名 关联元素 元素说明
已过时 align <table>
<caption>
<colgroup>, <col>
<thead>, <tbody>, <tfoot>
<tr>, <th>, <td>		 建议用 CSS
bgcolor <body>
<table>, <tbody>, <tfoot>
<colgroup>, <col>
<tr>, <th>, <td>
<img>
<iframe>
<hr>
background <body>, <table>, <th>, <td>
border <table>, <img>, <object>
color <hr>
已废弃 manifest <html>
language <script>
scoped <style>
summary <table>
intrinsicsize <img>

上面两个表格都没有列出“已废弃”的 HTML 元素

// https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
document.querySelectorAll("tbody td:first-child").forEach(td => console.log(td.innerText));

小结

本文介绍了 HTML 元素的属性，重点介绍了属性的两个方面，即内容属性和 IDL 属性，并列出了全局属性和与特定元素关联的属性。

anjia commented 2 years ago

三. HTML 元数据

元数据就是描述数据的数据。在 HTML 中，HTML 文档是数据，而它里面的 <head> 元素包含着描述这份文档的数据（比如作者/摘要）。所以，我们常说 <head> 元素包含着元数据，即关于文档的机器可读的信息。

metadata, machine-readable information

属于元数据内容的 HTML 元素有 <meta>, <title>, <base>, <link>, <style>, <script> 和 <noscript>。它们有的是修改文档的显示方式和行为，有的是设置到其它文档的链接，有的是传达了其它信息。

其中 <meta>, <base>, <link> 属于空元素（empty element）。空元素是 HTML, SVG 和 MathML 里不能带有任何子节点（即嵌套元素和文本节点）的元素。在 HTML 中，空元素通常是不带结束标签的，也不自闭合，即直接写一个纯粹的开始标签就行。如下：

<meta charset="utf-8">
<base href="https://www.example.com">
<link href="main.css" rel="stylesheet">

其余 4 个都是由一个开始标签和一个结束标签组成的。

<meta>

<meta> 元素表示其它元相关（meta-related）元素没法表示的元数据。它能提供以下类型的元数据：

  1. <meta charset>：如果设置了 charset 属性，则 <meta> 元素是一个 charset 声明，将给出文档的字符编码
  2. <meta name>：如果设置了 name 属性，则 <meta> 元素提供文档级的元数据，将应用于整个页面
  3. <meta http-equiv>：如果设置了 http-equiv 属性，则 <meta> 元素是一个 pragma 指令，将提供类似 HTTP 头的信息
  4. <meta itemprop>：如果设置了 itemprop 属性，则 <meta> 元素提供用户定义的元数据
<meta charset="utf-8">
<meta name="theme-color" content="#4F4F4F">
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">

<meta> 元素可以有全局属性。其中：

下面介绍 4 个比较重要的属性。

charset 属性

这个属性声明文档的字符编码。如果存在该属性，其值必须是字符串“utf-8”（不区分大小写），因为 UTF-8 是 HTML5 文档的唯一有效编码。声明字符编码的 <meta> 元素必须完全在文档的前 1024 个字节内。

<meta charset="utf-8">

name 属性

name 属性和 content 属性一起使用，以 name-value 对的形式提供文档元数据。name 给出元数据的名称，content 给出元数据的值。

标准 name 名称 content 值 说明
HTML application-name 简单的网页不应该定义此项
不同于 <title> 元素
author
generator		 作者
生成页面的软件
description
keywords		 简短而准确的总结. eg.用于书签的默认描述
关键词, 以逗号分隔
referrer 控制 HTTP 请求头的 Referer 字段
no-referrer 不发
origin 发 origin
no-referrer-when-downgrade 若目标至少与当前页一样安全时发完整的 URL. ie.HTTP(S)→HTTPS
若目标不安全时不发, ie.HTTPS→HTTP
以上是浏览器的默认行为
strict-origin 若目标至少与当前页一样安全时发 origin. ie.HTTP(S)→HTTPS
若目标不安全时不发, ie.HTTPS→HTTP
unsafe-URL 为同源和跨源请求发完整 URL (去除参数)
origin-when-cross-origin 若同源则发完整 URL (去除参数)
否则只发 origin
same-origin 若同源则发完整 URL (去除参数)
跨域请求则不发
strict-origin-when-cross-origin 若同源则发完整 URL (去除参数)
若目标至少与当前页一样安全时发 origin, ie.HTTP(S)→HTTPS
否则不发
theme-color
color-scheme normal
[light | dark]+
only light		 指定文档兼容的一种或多种颜色方案
eg.浅/深色模式的兼容性和优先顺序
W3C viewport width
height（没浏览器用）		 正整数或以下字符串
device-width, device-height
initial-scale
maximum-scale
minimum-scale		 正数 [0.0, 10.0]
user-scalable yes 或 no
viewport-fit auto, contain, cover
尚未 creator 创建者 eg.组织/机构
可使用多个 <meta creator="xxx">
publisher 发布者
robots index（默认）
noindex
follow（默认）
nofollow		 ALL
noarchive
nosnippet
all（即 index, follow）
none（即 noindex, nofollow）
noimageindex		 Google
nocache（同 noarchive） Bing
googlebot robots 的同义词

origin = scheme + hostname + port 或
origin = protocol + domain + port

<meta name="description" content="The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.">
<meta name="theme-color" content="#4F4F4F">
<meta name="application-name" content="Google 翻译">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

http-equiv 属性

定义一个 pragma 指令。该属性之所以被命名为 http-equiv 是因为所有允许的值都是特定的 HTTP 头。

equiv, equivalent, 相等的

http-equiv 名 content 值 说明
content-security-policy content policy
可指定允许的服务 origins 和脚本端点
以防止跨站点脚本攻击
script-src, script-src-elem, script-src-attr
style-src, style-src-elem, style-src-attr
img-src, media-src, font-src
frame-src, worker-src, child-src
prefetch-src, manifest-src
connect-src, default-src
object-src（算已废弃）		 Fetch 指令
特定资源类型的加载位置
base-uri
sandbox		 Document 指令
策略应用的文档/worker的属性
form-action
navigate-to
frame-ancestors		 Navigation 指令
report-to
report-uri（即将废弃）		 Reporting 指令
upgrade-insecure-requests（HTTP→HTTPS）
trusted-types
require-trusted-types-for
require-sri-for		 其它指令
referrer（用 Referrer-Policy 替代）
block-all-mixed-content
plugin-types		 已废弃
content-type 若指定, 则必须含有字符串
text/html; charset=utf-8		 声明文档的 MIME type 和字符编码
x-ua-compatible 若指定, 则内容必须含有字符串
IE=edge
refresh 页面重新加载的秒数
页面重定向之前的秒数
default-style 
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="x-dns-prefetch-control" content="on">

content

这个属性包含着 name 或 http-equiv 属性的值，取决于上下文。

<title>

<title> 元素定义文档的标题，显示在浏览器标题栏上或页面选项卡中。它只包含文本，如果内部有标签则会被忽略。

该元素只包含全局属性。

标题和 SEO

页面的标题内容在一定程度上会影响搜索引擎算法对于本页面的搜索排序。一般来说，较长的描述性标题比短标题或通用标题表现更好。此外，好的标题也能在搜索结果页面更好地吸引用户的注意。

SEO, Search Engine Optimization

关于标题的一些建议/注意事项：

<base>

<base> 元素指定文档中所有相对 URL 的 base URL。

我们可以通过 Node 的 baseURI 属性访问到页面的 base URL。如果没有设置 <base> 元素，那么 baseURI 的默认值就是 location.href。

该元素可以有全局数据。此外：

属性 值 说明
href 绝对/相对 URL 相对 URL 的 base URL
target 可选的 keywords：
_self
_blank
_parent
_top		 keyword 或 author-defined 名字
当 <a>, <area>, <form> 元素
没有显式指定 target 属性时

说明：

<link>

<link> 元素可指定外部资源，比如最常用的样式表、站点图标（favicon/主屏幕/移动端的应用程序）等。

该元素可以有全局属性。其中，title 属性有特殊的语义，当在 <link rel="stylesheet"> 上使用时表示定义了默认或备用样式表/替代样式表（但它的浏览器兼容性不好，建议同功能的使用 CSS 媒体查询）。

还可以有以下属性：

分类 属性 值 说明
标准 type eg.
font/woff2
image/png
audio/ogg		 MIME 类型（内容类型/媒体类型）
Multipurpose Internet Mail Extensions

格式：
type/subtype
type/subtype;parameter=value

type 有以下：
text
application
image
audio
video
font
example
model
rel 可以在 <link> 中使用的值有：
stylesheet
icon
manifest
license

prefetch
preconnect
preload
prerender
dns-prefetch
modulepreload

shortlink（短链接）

search（相关搜索页）
author （包含联系方式的页面）
help（帮助页）
pingback（网页的评论/引用页）

canonical（规范链接, SEO）

next（下一个资源）
prev（上一个资源）

alternate（替代样式表）

archives（已废弃）
first（已废弃）
last（已废弃）
index（已废弃）
sidebar（已废弃）
up（已废弃）		 指明和当前文档的 relationship

以空格分隔的《link type》值

以下元素会用到：
<link>, <a>, <area>, <form>
href
hreflang href 的语言
media 媒体类型/查询
sizes 仅当 rel 中包含 icon 时
disabled 布尔属性（是否存在） 仅对 rel="stylesheet"
imagesizes
imagesrcset		 仅对 rel="preload" as="image"
as script, style, font
image, video, audio, track
object, embed, document
worker
fetch		 仅对 rel="preload|prefetch"
指定了 <link> 正在加载的内容类型
crossorigin anonymous
use-credentials		 跨域
integrity 包含内联元数据
eg.base64 编码的文件
referrerpolicy no-referrer
origin
unsafe-url
no-referrer-when-downgrade
origin-when-cross-origin		 当获取资源时用哪个 referrer
prefetch 标识下一次导航可能需要的资源
非标准 methods（不推荐）
target（不推荐）
已废弃 charset（已废弃）
rev（已废弃）		 
<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">

<link rel="icon" href="favicon.ico">
<link rel="apple-touch-icon-precomposed" href="apple-icon-114.png" type="image/png" sizes="114x114">
<link rel="apple-touch-icon-precomposed" href="favicon72.png" type="image/png" sizes="72x72">

<link rel="preload" href="myFont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

rel, relationship

<style>

该元素可以有全局属性。此外：

属性 说明
media
title		 同 <link> 元素的
nonce 加密随机数（只使用一次）
type（已废弃）
scoped（已废弃）

<script>

该元素可以有全局属性。此外：

属性 值 说明
type 无（忽略）
JavaScript MIME type		 HTML5 规范建议直接忽略该属性
默认就是 JavaScript 脚本
module 模块
其它值 会被当成数据块
src
async
defer
nomodule		 布尔属性
referrerpolicy
crossorigin
integrity
nonce		 Referer header
跨域相关, window.onerror
子资源完整性, 内联元数据
内容安全策略, 随机加密的数字<
charset（已废弃）
language（已废弃）		 
<script src="javascript.js"></script>

<script>
  console.log("Hello World!");
</script>

<script type="module" src="main.js"></script>
<script nomodule src="fallback.js"></script>

<!-- 嵌入数据（服务器生成）-->
<script id="data" type="application/json">{"userId":111, "userName":"Li" "memberSince":"2000-01-01T00:00:00.000Z"}</script>

<noscript>

<noscript> 定义的 HTML 内容会显示在页面上，当脚本的 type 不支持时，或者当浏览器禁用脚本功能时。

该元素只能有全局属性。

总结

本文介绍了 HTML 元数据，共有 7 个 HTML 元素，内容包括：

  1. <meta> 内容很多
    • <meta charset="">
    • <meta name="" content="">
    • <meta http-equiv="" content="">
    • <meta itemprop="">
  2. <title>（与 SEO）
  3. <base>
    • href, target
  4. <link> 外部资源
    • type, rel, href, hreflang
    • media
    • sizes, disabled, imagesizes, imagesrcset, as
    • crossorigin, integrity, referrerpolicy, prefetch
  5. <style>
    • media, title
    • nonce
  6. <script> 脚本/亦可内联
    • src, type
    • async, defer, nomodule
    • crossorigin, integrity, referrerpolicy, nonce
  7. <noscript>