2.特有属性 | OneYoung's Blog

这里的特有属性指的是只有部分的 HTML 元素所特有的属性，而非全部元素支持。

同样的，这里列举一些经常有可能遇见的属性。

1. `<meta>`

Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.

meta 元素通常用来表明页面的 description、keywords 以及网页的作者、上一次的更改时间和其他元数据信息。

The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

这些元数据可以被浏览器用来确定以何种方式来显示内容或者重载网页、被搜索引擎搜索到关键字、或者被其他 web 服务使用。

<meta> 的常用属性有以下几种：

charset
name
content
http-equiv
property

TIP

谨记，meta 信息是给浏览器看的，影响到的是浏览器。至于请求头和响应头会不会受影响，则完全看浏览器自身的策略。

1-1.charset

charset 属性用来表示文档使用的字符编码。

html

<meta charset="utf-8">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

上述两种写法是等价的。不过大多数情况下，我们选择第一种即可，比较精简。

1-2.name

name 属性通常用于定义描述网页信息的属性名。其具体值由 content 属性来定义。

其属性名有以下常用项：

1-2-1.description

网页的描述。

html

<meta name="description" content="...">

1-2-2.keywords

网页的关键字。

html

<meta name="keyword" content="...">

SEO 优化很重要的一点就是 TDK，以淘宝PC为例:

html

<title>淘宝网 - 淘！我喜欢</title>

<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！">

<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">

1-2-3.viewport

viewport 指代视口，该属性是移动端网页不可或缺的。

html

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">

1-2-4.referrer

TIP

Referer 属性在 http 中指的是来源网页、来源页面或称引用地址。

该属性实际上属于误记，正确拼写应该是 Referrer。但为了保持向下兼容，所以现版本并没有完全纠正。

它包含协议、域名、端口、路径以及 querystring。（不包含 hash）。

相对 http 中的 host 属性来说，Referer 属性的携带信息更为详细。

该属性的意义在于方便服务端判断具体的页面来源，以作响应处理。譬如图片防盗链等等。

该属性在 http 请求中会由浏览器自动添加在请求头中。

但又由于隐私问题，浏览器在一些情况下会限制该属性的使用：

来源页面采用的协议为 file 、data 或者 blob。
来源页面采用的协议是 https，而请求目标页面采用的协议是 http。
直接输入网址或者通过浏览器书签访问。
使用 JavaScript 中的 Location.href 或者 Location.replace。
使用 html5 中的 noreferrer。
使用 <meta> 中的 referrer 属性来限制。即本章内容。
使用 iframe 中的 hack 写法去除 Referer。
某些元素上可设置 referrerpolicy 进行自定义策略。

<meta> 标签中的 referrer 控制由当前页面发出的 http 请求的 Referer 请求头。其对应的 content 具体有以下值：

no-referrer: 不发送 Referer 请求头。
no-referrer-when-downgrade: 较低版本浏览器的默认值。在同等安全级别（http => http 、https => https）或者升级（http => https）的情况下，Referer 会被发送。降级（https => http）的话，则不会发送 Referer。
origin: 在任何情况下，仅发送文件的源作为引用地址。例如 https://example.com/page.html 会将 https://example.com/ 作为引用地址。
origin-when-cross-origin: 在跨域的情况下，仅发送文件的源作为引用地址。非跨域情况下，会发送完整的 Referer 地址。
same-origin: 对于同源的请求会发送 Referer，非同源请求则不发送 Referer。
strict-origin: 在同等安全级别或者升级的情况下，发送文件的源作为引用地址。在降级的情况下则不会发送。
strict-origin-when-cross-origin: 较高版本浏览器的默认值。在跨域的情况下，如果是同等安全级别或者升级的情况，发送文件的源作为引用地址，在降级的情况下则不会发送。如果不跨域，则发送完整的 Referer 路径。
unsafe-url: 无论是跨域请求还是非跨域请求，都发送完整的 URL（移除参数信息之后）作为引用地址。

除了在 <meta> 上设置 referrer，也可以为特定元素设置独立的请求策略。

譬如在 <a>、<area>、<img>、<iframe>、<script> 或者 <link> 元素上设置 referrerpolicy 属性：

html

<a href="http://example.com" referrerpolicy="same-origin">

TIP

MDN上说也可以在 <a>、<area> 以及 <link> 上将 rel 设置为 noreferrer：

html

<a href="http://example.com" rel="noreferrer">

我实际测试发现，该方式在 <a> 标签上的实际效果与将 referrer 设置为 no-referrer 表现一致。

关于此点，我与张鑫旭老师的观点并不一致。暂且记下。

关于 Referer 是请求头还是响应头，推荐阅读

其他可参考文章：

1-2-5.renderer

renderer 意为渲染器。

该属性是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面。比如说 360 浏览器。

html

<!-- 默认webkit内核 -->
<meta name="renderer" content="webkit">
<!-- 默认IE兼容模式 -->
<meta name="renderer" content="ie-comp">
<!-- 默认IE标准模式 -->
<meta name="renderer" content="ie-stand">

1-2-6.author

author 指网页作者。但该属性很少使用。

html

<meta name="author" content="noob,jsgoshu@126.com">

1-2-7.robots

robots 属性用来告诉爬虫哪些页面需要索引，哪些页面不需要索引。

其值有：

none: 搜索引擎将忽略此网页，等价于 noindex,nofollow。
noindex: 搜索引擎不索引此网页。
nofollow: 搜索引擎不继续通过此网页的链接索引搜索其它的网页。
all: 默认值。搜索引擎将索引此网页与继续通过此网页的链接索引，等价于 index,follow。
index: 搜索引擎索引此网页。
follow: 搜索引擎继续通过此网页的链接索引搜索其它的网页。

1-3.content

A value associated with http-equiv or name depending on the context.

content 属性给出与 name 或 http-equiv 属性相关的值。

1-4.http-equiv

equiv 一词来自于 equivale（中文译为等价于）。

所以 http-equiv 全词的意思就是等价于http。

那么可以理解为，修改该属性，相当于修改 http。

它在 <meta> 标签中的语法格式如下：

html

<meta http-equiv="key" content="value" >

其中的 key 可以设置为以下值。

1-4-1.Content-Type

用于设定网页字符集，便于浏览器解析与渲染页面。

html

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

1-4-2.X-UA-Compatible

用于告知浏览器以何种版本来解析渲染页面。

html

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

1-4-3.Cache-Control

该属性对应 http 中的 Cache-Control 响应头的使用方式。

其值有 public、private、no-cache、no-store、must-revalidate、proxy-revalidate、max-age、no-transform。

禁止百度转码：

html

<!-- 方式一 -->
<meta http-equiv="Cache-Control" content="no-transform">

<!-- 方式二 -->
<meta http-equiv="Cache-Control" content="no-siteapp">

其中，方式一是百度站长官方的说明文档上记录的。但实际效果可能并不尽如人意。

方式二是在 google 中的大多数搜索结果。

根据场景需要，可以实际测试下。也可以保险起见，两种方式同时使用。

1-4-4.Pragma

用来设置禁止浏览器从本地缓存中访问页面。

html

<meta http-equiv="Pragma" content="no-cache" />

设置之后，用户将无法脱机浏览。

1-4-5.Expires

用来设置网页的过期时间。

html

<meta http-equiv="Expires" content="Fri May 13 2016 22:49:44 GMT+0800 (CST)" />

注意：必须使用 GMT 的时间格式。

1-4-6.Refresh

用来设置自动刷新并跳转新页面。

html

<meta http-equiv="Refresh" content="5;URL=http://jsgoshu.cn" />

以上设置，将使浏览器在 5s 后跳转到 http://jsgoshu.cn。

用来设置 cookie。

html

<meta http-equiv="Set-Cookie" content="user=Jerry;path=/;expires=Sat Apr 16 2022 14:49:36 GMT+0800" />

但是，要注意的是，在 <meta> 标签上设置 Set-Cookie 这种方式已被废弃。

我在 chrome 100 版本测试时，已发现控制台会报错 Blocked setting the 'user=yxp;path=/;expires=Sat Apr 16 2022 14:49:36 GMT+0800' cookie from a '<meta>' tag.。

更多信息可参考stackoverflow

1-5.property

property 常用于需要分享到 SNS 第三方网站的网站中。

譬如 facebook 自创了开放图谱协议（Open Graph Protocol）。

在使用该协议后，facebook 就能根据设置读取网站的配置，以更好的显示在 facebook 中，这对于推广很友好。

可以在og开放图谱控制台读取网站看下效果。

此处笔者只是列举总结了常用属性，更多meta属性用法。

最后列举一些网站的 <meta> 标签，并说明其用途：

淘宝PC

html

<!-- 字符编码 -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 双核浏览器下以webkit内核优先 -->
<meta name="renderer" content="webkit">
<!-- 网页描述 -->
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！">
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">
<!-- 以下属性均为阿里自定义meta 部分属性的具体含义没有查到-->
<!-- 淘宝流量跟踪 -->
<meta name="spm-id" content="a21bo">
<meta name="aplus-xplug" content="NONE">
<!--
  日志发送时机设置
  "1":等待6秒后尝试发送
  "N": N取值为300-3000之间的整数值, 所有日志指令在SDK初始化完成后的N毫秒内将被hold在指令队列, 直至N毫秒等待结束.
  "MAN": 取消自动化PV日志采集. 设置为MAN之后, 所有PV日志均需手动触发, 但其他类型的事件日志不受影响
-->
<meta name="aplus-waiting" content="MAN">
<meta name="def-grey" content="false">

哔哩哔哩PC

html

<!-- 字符编码 -->
<meta charset="UTF-8">
<!-- 网页描述 -->
<meta name="description" content="bilibili是国内知名的视频弹幕网站，这里有及时的动漫新番，活跃的ACG氛围，有创意的Up主。大家可以在这里找到许多欢乐。">
<!-- 网页关键字 -->
<meta name="keywords" content="Bilibili,哔哩哔哩,哔哩哔哩动画,哔哩哔哩弹幕网,弹幕视频,B站,弹幕,字幕,AMV,MAD,MTV,ANIME,动漫,动漫音乐,游戏,游戏解说,二次元,游戏视频,ACG,galgame,动画,番组,新番,初音,洛天依,vocaloid,日本动漫,国产动漫,手机游戏,网络游戏,电子竞技,ACG燃曲,ACG神曲,追新番,新番动漫,新番吐槽,巡音,镜音双子,千本樱,初音MIKU,舞蹈MMD,MIKUMIKUDANCE,洛天依原创曲,洛天依翻唱曲,洛天依投食歌,洛天依MMD,vocaloid家族,OST,BGM,动漫歌曲,日本动漫音乐,宫崎骏动漫音乐,动漫音乐推荐,燃系mad,治愈系mad,MAD MOVIE,MAD高燃">
<!-- 指定双核浏览器默认以webkit内核渲染 -->
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 当安全降级的时候 请求头不发送Referer -->
<meta name="referrer" content="no-referrer-when-downgrade">
<meta name="spm_prefix" content="333.1007">

淘宝H5

html

<!-- 保留历史记录以及动画效果 -->
<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">
<!-- 添加到主屏幕后 打开时以全屏展示 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<!-- 关闭电话和邮箱的检测 -->
<meta name="format-detection" content="telephone=no,email=no">
<!-- 视口 -->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
<!-- 自定义属性 -->
<meta name="aplus-waiting" content="MAN">
<meta name="wpk-bid" content="jstracker">
<meta name="data-spm" content="a215s">
<meta name="def-grey" content="false">

哔哩哔哩H5

html

<!-- 应用名 -->
<meta name="application-name" content="哔哩哔哩">
<!-- 视口 -->
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,viewport-fit=cover">
<!-- 手机状态栏的主题色 -->
<meta name="theme-color" content="#de698c">
<!-- 添加到主屏幕后 打开时全屏展示 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 关闭电话检测 -->
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<!-- 声明该应用的目标使用设备 'pc' or 'mobile' -->
<meta name="applicable-device" content="mobile">
<!-- UC浏览器私有meta属性 portrait竖屏 landscape横屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ浏览器私有meta属性 portrait竖屏 landscape横屏  -->
<meta name="x5-orientation" content="portrait">
<!-- 百度站长验证 方便百度快速收录网站地址 -->
<meta name="baidu-site-verification" content="code-fgRMNavF7m">
<!-- name="name" -->
<meta itemprop="name" content="哔哩哔哩 (゜-゜)つロ 干杯~-bilibili" data-vue-meta="true">
<!-- 网页描述 -->
<meta itemprop="description" name="description" content="bilibili是国内知名的在线视频弹幕网站，拥有最棒的ACG氛围，哔哩哔哩内容丰富多元，涵盖动漫、电影、二次元舞蹈视频、在线音乐、娱乐时尚、科技生活、鬼畜视频等。下载客户端还可离线下载电影、动漫。" data-vue-meta="true">
<!-- 关键字 -->
<meta itemprop="keywords" name="keywords" content="B站,bilibili,哔哩哔哩,哔哩哔哩动画,动漫,电影,在线动漫,高清电影" data-vue-meta="true">
<!-- facebook开放图谱协议(open graph protocol) 在将网站地址分享到facebook时 facebook会根据该系列属性构建分享内容-->
<meta property="og:type" content="video" data-vue-meta="true">
<meta property="og:title" content="哔哩哔哩 (゜-゜)つロ 干杯~-bilibili" data-vue-meta="true">
<meta property="og:url" content="https://m.bilibili.com/" data-vue-meta="true">
<!-- 自定义属性 -->
<meta name="spm_prefix" content="333.400" data-vue-meta="true">

推特PC

html

<!-- 字符编码 -->
<meta charset="utf-8">
<!-- 视口 -->
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">
<!-- google站点验证 -->
<meta name="google-site-verification" content="acYOOcR5z6puMzLn6hLDZI1nNHXPxt57OIstz1vnCV0">
<!-- facebook域验证 -->
<meta name="facebook-domain-verification" content="x6sdcc8b5ju3bh8nbm59eswogvg6t1">
<!-- 安卓手机添加到主屏幕后 打开时全屏 -->
<meta name="mobile-web-app-capable" content="yes">
<!-- 添加到主屏幕后 桌面title -->
<meta name="apple-mobile-web-app-title" content="Twitter">
<!-- 添加到主屏幕后 打开时手机状态栏 -->
<meta name="apple-mobile-web-app-status-bar-style" content="white">
<!-- 浏览器打开时 手机状态栏颜色 -->
<meta name="theme-color" content="#FFFFFF">
<meta http-equiv="onion-location" content="https://twitter3e4tixl4xyajtrzo62zg5vztmjuricljdp2c5kshju4avyoid.onion/">
<meta http-equiv="origin-trial" content="AlpCmb40F5ZjDi9ZYe+wnr/V8MF+XmY41K4qUhoq+2mbepJTNd3q4CRqlACfnythEPZqcjryfAS1+ExS0FFRcA8AAABmeyJvcmlnaW4iOiJodHRwczovL3R3aXR0ZXIuY29tOjQ0MyIsImZlYXR1cmUiOiJMYXVuY2ggSGFuZGxlciIsImV4cGlyeSI6MTY1NTI1MTE5OSwiaXNTdWJkb21haW4iOnRydWV9">
<!-- facebook分析工具的自定义属性 -->
<meta property="fb:app_id" content="2231777543">
<!-- facebook开放图谱协议 -->
<meta property="og:site_name" content="Twitter">
<meta property="og:type" content="article" data-rh="true">
<meta property="og:url" content="https://twitter.com/explore" data-rh="true">
<meta property="og:title" content="探索" data-rh="true">
<meta property="og:description" content="Twitter 上的最新故事，通过推文讲述。" data-rh="true">
<meta property="og:image" content="https://abs.twimg.com/a/1602199131/img/moments/moments-card.jpg" data-rh="true">
<meta property="og:image:width" content="600" data-rh="true">
<meta property="og:image:height" content="315" data-rh="true">

2.`<link>`

<link> 指的是HTML外部资源链接元素。

该元素用来链接当前文档与外部资源。最常见的外部资源的使用方式有 3 种：

样式表 stylesheet。即 css 文件。

html

<link rel="stylesheet" href="/path/to/index.css" >

PC 端的 favicon 图标。

html

<link rel="icon" href="/path/to/favicon.ico" >

Mobile 端的网站由浏览器添加到手机主屏幕上时的图标。

html

<!-- 114尺寸为iphone准备 144尺寸为ipad准备 -->
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-iphone-144.png" />

<!-- apple-touch-icon-precomposed会禁止apple官方给图标增加额外效果 而apple-touch-icon在apple上官方会添加圆角或者高亮等效果-->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="touch-icon-iphone-114.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="touch-icon-iphone-144.png" />

<!-- 另外，apple-touch-icon-precomposed的优先级高于apple-touch-icon -->

当然除了上述常见的使用方式，还有额外的一些需要知晓的比较重要的使用方式。

TIP

<link> 标签，并不局限于上述 css 和图标，它在某些情况下（譬如 prefetch 与 preload）还能声明 js 和 video等等

先逐步了解下 <link> 标签上可设置的属性：

2-1.rel

rel 是 relationship 的简写。

很显然，该属性用来表明当前文档与外链资源的联系。

其常用值有以下：

2-1-1.alternate

alternate 意为替补、代替。

该属性用来定义可替换的样式表。

我们借此能够实现网页换肤的效果。但这种方式的兼容性有待考量。

html

<link rel="stylesheet" href="./css/global.css" title="global">

<link rel="stylesheet alternate" href="./css/white.css" data-mode="white" class="alternate-css" title="白色主题">

<link rel="stylesheet alternate" href="./css/dark.css" data-mode="dark" class="alternate-css" title="黑色主题">

具体 demo 线上效果可见这里

当 stylesheet 与 alternate 连用的时候，浏览器会加载但不会立刻使用。

另外想要起到切换 stylesheet 的效果，每个 link 标签必须有 title 属性。

参考资料：张鑫旭link rel=alternate网站换肤功能最佳实现

2-1-2.canonical

canonical 意为规范。

它主要用来声明网站的规范权威索引地址。有利于 SEO。

譬如有两个网址：http://example.com/ 与 http://example.com/home。

尽管这两个地址的访问结果有可能是一致的，但是对于浏览器来说，这俩网址是两个不同的标识。

所以浏览器官方建议使用 canonical 来指定网站的正确版本。

其中的一种方式是使用 <link> 标签：

html

<link rel="canonical" href="http://example.com/">

关于 canonical 的更多信息可参考权威内容标签—简明入门指南

2-1-3.icon

该属性定义一个在用户界面上代表这个页面的资源，通常是一个图标。

在现在的开发中，通常利用该属性指定 favicon。

html

<link rel="icon" href="/path/to/favicon.ico">

另外，某些网站可能使用 shortcut icon 这样的写法：

html

<link rel="shortcut icon" href="/path/to/favicon.ico">

但事实上，shortcut 已经不被推荐使用。我们只使用 icon 就可以。

关于二者，更多信息可以参考icon 与 shortcut icon 的区别和联系

2-1-4.manifest

manifest 意为清单。

该属性表示链接到的文件是 Web App Manifest。

详见PWA之Web App Manifest。

2-1-5.prefetch

prefetch 意为预取。

该属性提示浏览器提前加载链接的资源，因为它可能会被用户请求。

预取是一种浏览器机制。

浏览器完成当前页面的加载后开始静默地拉取指定的文档并将其存储在缓存中。会发送带有 purpose: prefetch 请求头的 http 请求。
当用户访问预取文档时，可以快速的从浏览器缓存 prefetch cache 中得到。

html

<link rel="prefetch" href="http://example.com/path/to/js">

毫无疑问，预取能够提高网站的性能。

因为部分资源已经在浏览器空闲的时候预取完了，不至于在切换页面的时候出现卡顿等现象。

TIP

另外关于 Vue-CLI 打包的生产版本，所有异步加载的 chunk（js 、css）都会默认以 prefetch 的方式进行预取。

官方脚手架已经帮我们考虑到了细节处的性能优化。给尤大点赞。

Link Prefetching FAQ

2-1-6.preload

preload 意为预加载。

与 prefetch 影响的是下一页面不同，preload 影响的是当前页面。

该属性会告知浏览器，指定的类型资源会在当前页面使用，你可以采取 预加载。

本质上是对首屏渲染的优化。

另外在使用 preload 的时候，必须使用 as 属性指定类型：

html

<link rel="preload" href="http://example.com/path/to/js" as="script">

TIP

Vue-CLI 打包的生产版本，它会将同步 chunk（js、css）标记上 preload。

分析下该网站

html

<!-- preload -->
<link href="/css/app.e63fa3b7.css" rel="preload" as="style">
<link href="/css/chunk-elementUI.93db5682.css" rel="preload" as="style">
<link href="/js/runtime.c7b78674.js" rel="preload" as="script">
<link href="/js/chunk-elementUI.b1981c7a.js" rel="preload" as="script">
<link href="/js/chunk-libs.bd1d2e08.js" rel="preload" as="script">
<link href="/js/app.65620956.js" rel="preload" as="script">

<!-- 懒加载组件 动态创建link标签与script加载异步chunk -->
<link rel="stylesheet" type="text/css" href="/css/chunk-4c747d87.c4d4adcf.css">
<script charset="utf-8" src="/js/chunk-4c747d87.a2ac8aa2.js"></script>

<!-- 该页面的所需资源 -->
<link href="/css/app.e63fa3b7.css" rel="stylesheet">
<link href="/css/chunk-elementUI.93db5682.css" rel="stylesheet">
<script src="/js/runtime.c7b78674.js"></script>
<script src="/js/chunk-elementUI.b1981c7a.js"></script>
<script src="/js/chunk-libs.bd1d2e08.js"></script>
<script src="/js/app.65620956.js"></script>

2-1-7.stylesheet

stylesheet 意为样式表。

该属性指定链接的外部资源是样式表。

如果没有设置 <link> 标签的 type 属性，则浏览器会默认是 text/css。

2-2.href

该属性指定了被链接资源的 URL。

该 URL 可以是绝对路径，也可以是相对路径。

2-3.as

as 指定了 <link> 标签加载的资源类型。

当指定 rel 为 preload 时，该属性是必须声明的。

必须声明的原因是有助于浏览器正确处理资源优先级、正确匹配 http 请求、正确设置内容安全策略 CSP、正确设置 accept 请求头。

该属性的可用值有以下：

audio: <audio> 元素。
document: <iframe> 和 <frame> 元素。
embed: <embed> 元素。
fetch: fetch、XHR，需要在 <link> 标签上额外声明 crossorigin 属性。
font: 字体图标，CSS @font-face。
image: 图片，<img>、<picture> 等。
object: <object> 元素。
script: <script> 元素。
style: <link rel=stylesheet> 元素、CSS @import。
track: <track> 元素。
video: <video> 元素。
worker: Worker、SharedWorker。

2-4.media

media 用来作媒体查询使用，根据不同的媒体加载不同的外部资源。

在 HTML4 和 CSS2 中，media 属性只能设置媒体类型。目前可使用的值有以下几种：

all：适用于所有设备。
screen: 计算机屏幕（默认值）。
print: 打印预览模式/打印页面。
speech: 应用于屏幕阅读器等发声系统。

而在 HTML5 和 CSS3 中，media 属性还可以设置媒体特性：

min-width
max-width

当然，为了保证向下兼容，通常可以结合两者使用：

html

<link rel="stylesheet" href="//example.com/path/to/css" media="screen and (max-width: 640px)">

事实上，我们在开发中应用更多的始终是在 CSS 中设置媒体查询 @media 从而实现响应式布局，而不是在 <link> 标签上。

我们也比较推荐前者 @media，因为比较规范。

推荐阅读media属性用法详解

2-5.title

title 属性，正如表面意思，表示标题。

但该属性在 <link> 标签上有额外使用方式。

当设置 <link> 的 rel 为 stylesheet alternate 时，即备用样式表，此时必须在 <link> 上设置 title 属性。

否则将导致备用样式表的 disabled 属性在变化时，备用样式表并不能正确切换。

2-6.type

type 属性用于定义外部链接资源的内容类型。

其值通常是 MIME 类型。

譬如：text/css。

2-7.sizes

sizes 属性用来定义外部链接资源的尺寸。

该属性只有在 rel 设置为 icon 时才会起作用。

它的设置方式有两种：

any: 表示图标可以按矢量格式缩放到任意大小，例如 image/svg+xml。
WidthxHeight: 宽度x高度，如果有多个值的话，以空格分隔。但大多数情况下都只有一个值。

html

<!-- any -->
<link rel="icon" href="icon.svg" sizes="any" type="image/svg+xml">

<!-- WidthxHeight or WidthXHeight -->
<link rel="icon" href="favicon.png" sizes="16x16" type="image/png">
<link rel="icon" href="favicon.png" sizes="16x16 32X32" type="image/png">

TIP

目前大多数浏览器已经逐渐不再支持该属性。

而苹果的 IOS 系统更不支持这个属性，IPhone 以及 IPad 使用特殊的、非标准的 link 类型值去定义 rel：

apple-touch-icon
apple-touch-startup-icon

2-8.disabled

disabled 表示禁用/启用元素。

该属性同样是在备用样式表的使用中发挥奇效。

如果在加载 HTML 时在 HTML 中指定了 Disabled，则在页面加载期间不会加载样式表。

相反，如果禁用属性更改为 false 或删除时，样式表将按需加载。

更改此属性的值只是启用和禁用应用于文档的 stylesheet。

3.`<script>`

3-1.src

该属性定义外链内容的 URL。

所有能使用该属性的目标元素有：<audio>、<embed>、<iframe>、<img>、<input>、<script>、<source>、<track>、<video>。

该属性可以使用相对路径或者绝对路径。

但是要注意的一点是，<script> 利用 src 加载的外部 js 资源，默认是同步的。

由于网络通信以及 JS 代码执行都有可能影响页面加载线程，所以通常要将 <script> 标签放在页面底部加载。

其实主要目的就是防止页面加载阻塞。

3-2.type

该属性定义元素的类型。

所有能使用该属性的目标元素有：<button>、<input>、<command>、<embed>、<object>、<script>、<source>、<style>、<menu>。

该属性大多数场景下定义 <script> 引入的资源类型。其值为 MIME 类型：

text/javascript
text/ecmascript
application/javascript
application/ecmascript

TIP

text/javascript 与 application/javascript 这俩种 MIME 类型都是指代 JS。

两者的差异在于浏览器的兼容性不同。

IE8 以下版本支持 text/javascript，不支持 application/javascript。

在 HTML5 标准中，可以直接写 <script>...</script>，浏览器默认这个 script 是 ECMAScript。

除此以外，type 还可以被定义为 module。此时 script 会被当做 JavaScript 模块。

大多数主流浏览器目前已经支持 Es6 中的模块化，即 EsModule。

如果直接通过 <script> 引入了一个 EsModule 的 JS 文件：

html

<script src="/path/to/module.js"></script>

浏览器会给出如下错误：

Uncaught SyntaxError: Cannot use import statement outside a module。

解决办法就是添加 type="module":

html

<script type="module" src="/path/to/module.js"></script>

此时浏览器会将引入的 JS 资源当做一个模块，进而解析它。

又因为浏览器采用的是 Es6 模块化标准，而不是 AMD 或 CommonJS。所以 type="module" 的特点与 EsModule 一致：

静态导入。
即使多次导入，但代码只会加载执行一次。后续均从缓存中获取。
导出的是引用，方便开发者全局配置修改。而 CommonJS 导出的则是拷贝。

另外，type="module" 作用于 <script> 上时，会使得 <script> 有额外执行方式：

<script type="module"></script> 将以 defer 方式延迟加载。

最后，如果同时使用了 src 外链和内联代码，则 <script> 会以 src 属性为主：

html

<!-- 再执行该加载 因为defer延迟 -->
<script type="module" src="./tool.js">
  // 此处的内联代码会被忽略 执行外链tool.js文件
  import { getPartName } from './part.js'
  getPartName()
</script>
<!-- 先执行该加载 -->
<script src="./main.js"></script>

更多详细介绍请见type="module"

3-3.nomodule

nomodule 是为了兼容不支持 EsModule 的浏览器。

html

<!-- 现代浏览器执行type="module" 而且会自动忽略带有nomodule的script -->
<script type="module">
  alert("Runs in modern browsers")
</script>
<!-- 旧版本浏览器执行 -->
<script nomodule>
  alert("Modern browsers know both type=module and nomodule, so skip this")
  alert("Old browsers ignore script with unknown type=module, but execute this.")
</script>

3-4.defer

可使用的目标元素：<script>。

现代浏览器中，执行 <script> 标签时，会阻塞 DOM 的执行。

对于外部脚本 <script src=""></script>，浏览器也是先要等待脚本下载完，并执行结束，才能继续处理剩余的代码。

也就是说 <script> 标签默认是同步加载的。

这样的话就有两个问题：

script 代码不能访问到位于其结构下方的 DOM 元素。
script 代码执行会阻塞页面加载和渲染，导致白屏。

对于第 1 个问题，我们一般可以使用页面的生命周期来解决，譬如 load：

// 使用onload事件监听 这样的话，即使script标签在页面头部，但js代码会等页面加载完后，就能访问DOM元素
window.onload = function () {
  ...
}

对于第 2 个问题，我们一般会将 <script> 标签放到页面底部来解决：

html

<body>
  ...all content is above the script...

  <script src="https://example.com/path/to/js"></script>
</body>

但是这种解决方案远非完美。例如，浏览器只有在下载了完整的 HTML 文档之后才会注意到该脚本（并且可以开始下载它）。对于长的 HTML 文档来说，这样可能会造成明显的延迟。

这对于使用高速连接的人来说，这不值一提，他们不会感受到这种延迟。但是这个世界上仍然有很多地区的人们所使用的网络速度很慢，并且使用的是远非完美的移动互联网连接。

在这种情况下，我们可以使用 defer 属性来完美解决上述问题。

defer 属性将会使浏览器不再等待 <script> 的加载，而是继续处理 HTML，构建 DOM。

<script>会在后台下载，然后等 DOM 构建完成后，脚本才会执行。

它具有以下特点：

具有 defer 特性的脚本不会阻塞页面。
具有 defer 特性的脚本总是要等到 DOM 解析完毕，但在 DOMContentLoaded 页面生命周期之前执行。
具有 defer 特性的脚本会在浏览器后台并行下载。
具有 defer 特性的脚本根据文档顺序从上至下依次执行，就像常规脚本一样。

可以使用 DOMContentLoaded 来监听脚本加载：

document.addEventListener('DOMContentLoaded', () => alert('DOM ready after defer!'))

TIP

defer 特性仅适用于外部脚本。

如果 <script> 标签没有 src，则会忽略 defer 特性。

3-5.async

async 也能够不阻塞页面。

async 脚本会在后台加载，并在加载就绪时运行。DOM 和其他脚本不会等待它们，它们也不会等待其它的东西。

async 脚本就是一个会在加载完成时执行的完全独立的脚本。

它具有以下特点：

async 脚本不阻塞页面，异步加载执行。
async 脚本不会等待其他脚本。其他脚本也不会等待 async 脚本加载完成。
async 脚本和 DOMContentLoaded 不会彼此等待，也就是说 async 脚本有可能在 DOMContentLoaded 前执行，也可能在 DOMContentLoaded 后执行。
async 脚本会在浏览器后台并行下载。
async 脚本根据加载顺序执行，不一定是从上至下依次执行。

当我们将独立的第三方脚本（计数器、广告等）集成到页面时，此时采用 async 加载方式是非常棒的。

因为它们不依赖于我们的脚本，我们的脚本也不应该等待它们：

html

<!-- Google Analytics 脚本通常是这样嵌入页面的 -->
<script async src="https://google-analytics.com/analytics.js"></script>

参考文章：脚本：async，defer

3-6.动态脚本

除了在 html 中直接声明 <script> 引入之外，还可以在 JS 代码中动态创建 <script> 引入：

var script = document.createElement('script')
script.src = 'https://example.com/path/to/js'
document.body.append(script)

以这种方式创建的 <script> 在添加进页面后，会立即执行。

而且默认的加载方式是以 async 规则。

如果我们显式地设置了 script.async=false，则可以改变这个规则。动态脚本将按照脚本在文档中的顺序执行，就像 defer 那样。

3-7.document.readyState

当我们提供一个外链 JS 时，由于使用者有可能利用 <script> 加载或者使用动态形式加载。所以我们需要完美考虑代码的执行时机。

在这种前提下，额外讨论一种情况：脚本使用了 DOMContentLoaded 生命周期，且是动态加载。

由于 async 与 DOMContentLoaded 的执行顺序的先后并不一定，所以假设有文件：

index.html:

html

<script>
  // 动态引入 dynamic.js
  var script = document.createElement('script')
  script.src = './dynamic.js'
  document.body.appendChild(script)
</script>

dynamic.js:

// 这里会打印 interactive
console.log(document.readyState)
// 但这里并不会触发执行
window.addEventListener('DOMContentLoaded', function () {
  alert('The event is triggered')
})

关于 document.readyState 属性，其值有 3 种：

loading: 表示 document 正在加载。
interactive: 文档已被解析，"正在加载"状态结束，但是 img 图像，link 样式表和 iframe 框架之类的子资源仍在加载。
complete: 文档和所有子资源已完成加载。表示 load 状态的事件即将被触发。

页面的具体执行顺序和时机有如下：

Document.readyState状态	DOM事件
loading
interactive
	DOMContentLoaded (HTML文档加载完毕其他静态资源链接正在加载)
		属性为defer的script脚本执行
complete
	load（页面完全加载完毕）

根据上表，当 document.readyState 等于 interactive 时，其实是能够注册并监听 DOMContentLoaded 的事件的。

但在动态脚本中则不能，针对此，总结如下：

之所以使用 DOMContentLoaded 而不使用 load，是因为页面性能，前者的触发时机明显更快。
在正常情况下，能够在 document.readyState 为 interactive 时注册 DOMContentLoaded 事件。
但在动态脚本中，document.readyState 为 interactive 时不能注册 DOMContentLoaded 事件。
为了兼容动态脚本中使用的 DOMContentLoaded 监听事件，可以利用 document.readyState 做一下兼容。

TIP

我个人的理解是：

async 脚本的执行有可能在 DOMContentLoaded 事件触发前，也有可能是在 DOMContentLoaded 时间触发后。（这一点是可以测试得出的）
但动态脚本的执行一定是在 DOMContentLoaded 事件触发后。（个人推测）

这应该是 async 脚本与动态脚本的一点差异。

所以我们应该使用向下兼容的方式：

// 加一处判断
if (document.readyState !== 'loading') {
  alert('The event is triggered')
} else {
  // 只有在loading状态下添加该监听 才有意义
  window.addEventListener('DOMContentLoaded', function () {
    alert('The event is triggered')
  })
}

之所以在这里探讨 document.readyState 属性，是因为在 iconfont 的 Symbol 图标方式下的 JS 代码中发现此属性。

故作记录。

本处与张鑫旭的文章的结论并不完全一致。

3-8.integrity

integrity 意为完整性。

更常见的名词是 SubResource Integrity，即子资源完整性，简称为 SRI。

顾明思义，该属性用来检测资源的完整性，防止恶意内容注入。

integrity 值分成两个部分：

第一部分指定哈希值的生成算法（目前支持 sha256、sha384 及 sha512）;
第二部分是经过 base64 编码的实际哈希值，两者之间通过一个短横（-）分割。

譬如：

html

<script src="http://cdn.com/example.js" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC
">

TIP

integrity 值可以包含多个由空格分隔的哈希值，只要文件匹配其中任意一个哈希值，就可以通过校验并加载该资源。

浏览器根据以下步骤处理 SRI：

当浏览器在 <script> 或者 <link> 标签中遇到 integrity 属性之后，会在执行脚本或者应用样式表之前对比所加载文件的哈希值和期望的哈希值。
当脚本或者样式表的哈希值和期望的不一致时，浏览器必须拒绝执行脚本或者应用样式表，并且必须返回一个网络错误说明获得脚本或样式表失败。

4.`<a>`

4-1.href

该属性定义资源的 URL。

可使用的目标元素：<a>、<area>、<base>、<link>。

4-2.target

该属性定义链接的打开方式。

可使用的目标元素：<a>、<area>、<base>、<form>。

我们通常会直接使用以下 4 个保留值：

_self 在当前窗口中载入目标。
_blank 在一个新打开、未命名的窗口中载入目标。
_parent 在父窗口中载入目标。
_top 在顶级窗口中载入目标。

target 还可以设置 <iframe> 或者 <frame> 的 name 值。

这样当点击 <a> 标签的时候，其 href 属性对应的链接地址就会在 <iframe> 或者 <frame> 中打开。

可以在这个例子试一试。

4-3.download

该属性表示元素将被用作下载资源。

它将指示浏览器下载 URL 而不是导航到它，因此将提示用户将其保存为本地文件。

如果该属性有值，那么此值将在下载保存过程中作为预填充的文件名。

可使用的目标元素：<a>、<area>。

通常的用法是这样：

function download () {
  var a = document.createElement('a')
  a.href = '/blog/avatar.jpeg'
  // 文件将被重命名为 avatar.jpeg
  a.download = 'avatar.jpeg'
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
}

TIP

注意：

download 属性仅适用于同源 URL。
或者可以使用 blobURL 及 dataURL，以方便用户下载利用 javascript 生成的资源。
如果 HTTP 头属性 Content-disposition 已经设置了不同于 download 属性的文件名，HTTP 头属性的优先级高于此属性。

5.`<img>`

5-1.src

src 属性用来定义图片的 href 链接。

5-2.alt

alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。

假设由于一些原因（比如网速太慢、src 属性中的错误、浏览器禁用图像、用户使用的是屏幕阅读器）用户无法查看图像，alt 属性可以为图像提供替代的信息。

5-3.crossorigin

该属性表示元素如何处理 cross-origin 请求。

可使用的目标元素：<audio>、<img>、<link>、<script>、<video>。

可设置的值有以下：

use-credentials 对此元素的 CORS 请求将设置凭证标志。cookies，http authentication 和客户端 ssl 证书。
anonymous 对此元素的 CORS 请求将不设置凭据标志。
"" 空值，和设置 anonymous 的效果一样。譬如 crossorigin 与 crossorigin=""。

默认情况下，CORS 根本不会使用。所以即使 <audio>、<img>、<link>、<script>、<video> 这些元素都能加载跨域资源，但是在某些情况下浏览器对其有限制。

譬如，在不处理跨域的情况下：

<script> 加载的跨域资源如果报错了，浏览器端不会明确显示代码内部是第几行第几列出错了，而且报错信息也不会明确，不会显示错误的类型。
img 加载的跨域图片，如果使用 canvas 绘制了，那么该 canvas 将不能再使用 toDataURL 或者 toBlob。浏览器会认为 canvas 是被污染的画布。更多可见绘制图片

上述的解决办法是：

在元素标签上，添加 crossorigin 属性，并且服务端设置 Access-Control-Allow-Origin 响应头。

6.`<iframe>`

6-1.width

该属性定义元素的宽度。

可使用的目标元素：<canvas>、<embed>、<iframe>、<img>、<input>、<object>、<video>。

6-2.height

该属性定义元素的高度。

可使用的目标元素：<canvas>、<embed>、<iframe>、<img>、<input>、<object>、<video>。

6-3.sandbox

该属性对呈现在 iframe 框架中的内容启用一些额外的限制条件。

属性值可以为空字符串（这种情况下会启用所有限制），也可以是用空格分隔的一系列指定的字符串。

有效的值有:

allow-downloads-without-user-activation: 允许在没有征求用户同意的情况下下载文件。
allow-forms: 允许嵌入的浏览上下文提交表单。如果没有使用该关键字，则无法提交表单。
allow-modals: 允许嵌入的浏览上下文打开模态窗口。
allow-orientation-lock: 允许嵌入的浏览上下文锁定屏幕方向（比如智能手机、平板电脑的水平朝向或垂直朝向）。
allow-pointer-lock: 允许嵌入的浏览上下文使用 Pointer Lock API。
allow-popups: 允许弹窗 (例如 window.open, target="_blank", showModalDialog)。如果没有使用该关键字，相应的功能将自动被禁用。
allow-popups-to-escape-sandbox: 允许沙箱化的文档打开新窗口，并且新窗口不会继承沙箱标记。例如，安全地沙箱化一个广告页面，而不会在广告链接到的新页面中启用相同的限制条件。
allow-presentation: 允许嵌入的浏览上下文开始一个 presentation session。
allow-same-origin: 如果没有使用该关键字，嵌入的浏览上下文将被视为来自一个独立的源，这将使 same-origin policy 同源检查失败。
allow-scripts: 允许嵌入的浏览上下文运行脚本（但不能创建弹窗）。如果没有使用该关键字，就无法运行脚本。
allow-storage-access-by-user-activation: 允许嵌入的浏览上下文通过 Storage Access API 使用父级浏览上下文的存储功能。
allow-top-navigation: 允许嵌入的浏览上下文导航（加载）内容到顶级的浏览上下文。
allow-top-navigation-by-user-activation: 允许嵌入的浏览上下文在经过用户允许后导航（加载）内容到顶级的浏览上下文。

当被嵌入的文档与主页面同源时，强烈建议不要同时使用 allow-scripts 和 allow-same-origin。如果同时使用，嵌入的文档就可以通过代码删除 sandbox 属性，如此，就安全性而言还不如不用 sandbox。

TIP

但实际测试发现，即使同时设置了 allow-scripts 和 allow-same-origin，嵌入文档修改或移除 parent 中的 iframe 的 sandbox 属性，依然无法提交表单浏览器依然以初始声明的 sandbox 属性来控制。

虽然此处的文档上说动态更改 sandbox 属性会使 iframe 的加载不安全，但是浏览器对此的实现可能不同。

更多可见stackoverflow

关于 sandbox 属性的更多介绍可见MDN

7.`<ol>`

7-1.start

该属性定义元素的起始索引。

可使用的目标元素：<ol>。

html

<ol start="2">
  <li>China</li>
  <li>BeiJing</li>
  <li>ChaoYang</li>
</ol>

China
BeiJing
ChaoYang

7-2.reversed

该属性定义元素是否倒转排列。

可使用的目标元素：<ol>。

html

<ol reversed>
  <li>China</li>
  <li>BeiJing</li>
  <li>ChaoYang</li>
</ol>

China
BeiJing
ChaoYang

8.表单元素

8-1.method

该属性定义提交表单 form 时的 method 方式。可以是 GET 或者 POST。默认值是 GET。

可使用的目标元素：<form>。

8-2.name

该属性定义表单提交时元素的 name 值。

可使用的目标元素：<button>、<form>、<fieldset>、<iframe>、<input>、<keygen>、<object>、<output>、<select>、<textarea>、<map>、<meta>、<param>。

8-3.placeholder

该属性定义元素的提示 placeholder。

可使用的目标元素：<input>、<textarea>。

8-4.required

该属性定义元素是否必填。

可使用的目标元素：<input>、<textarea>、<select>。

8-5.selected

该属性定义元素是否被选择。

可使用的目标元素：<option>。

html

<select>
  <option>1.BeiJing</option>
  <option selected>2.ChengDu</option>
  <option>3.ShenZhen</option>
</select>

8-6.readonly

该属性定义元素是否可编辑。

可使用的目标元素：<input>、<textarea>。

8-7.multiple

该属性定义是否可以多选。一般是当 type 是 file 或者 email 时。

可使用的目标元素：<input>、<select>。

8-8.pattern

该属性定义元素是否校验通过的正则表达式。

可使用的目标元素：<input>。

8-9.min

该属性定义允许的最小值。

可使用的目标元素：<input>、<meter>。

8-10.max

该属性定义允许的最大值。

可使用的目标元素：<input>、<progress>、<meter>。

8-11.maxlength

该属性定义允许的字符最大长度。

可使用的目标元素：<input>、<textarea>。

8-12.disabled

该属性表示元素是否禁用。

可使用的目标元素：<button>、<command>、<fieldset>、<input>、<keygen>、<optgroup>、<option>、<select>、<textarea>。

8-13.checked

该属性可以用来申明该页面或脚本的字符编码。

可使用的目标元素：<command>、<input>。

8-14.autocomplete

该属性表示该表单中是否可以由浏览器自动完成填值。

可使用的目标元素：<form>、<input>、<select>、<textarea>。

填值的来源通常取决于浏览器。通常，值来自用户输入的过去值，但它们也可能来自预先配置的值。

autocomplete 可设置的值有：

on 开启自动填充。默认值，即不设置该属性时默认开启。
off 关闭自动填充。
email 电子邮件地址。
new-password 新密码。

上述只是列举了常用的设置值，更多信息可参考MDN。

TIP

在某些浏览器下，可能出现即使设置了 autocomplete 为 off，依然会自动填充信息的现象。

譬如，在项目中使用 element-ui 的 el-input、el-select 时，这些组件本身已经设置了 autocomplete="off"，可是在 chrome 浏览器下不起作用，依然填充信息。

解决办法是设置 autocomplete="new-password"。

8-15.autofocus

该属性表示元素是否自动聚焦。

可使用的目标元素：<button>、<input>、<keygen>、<select>、<textarea>。

html

<input
  type="text"
  autofocus
  placeholder="刷新页面后，鼠标会聚焦在该输入框内"
  style="width: 500px"/>

8-16.size

该属性定义元素的宽度 width，单位为 px。

但假如元素的 type 属性是 text 或者 password 的话，该属性表示字符的大小。

可使用的目标元素：<input>、<select>。

8-17.step

该属性定义元素的间隔数字。

可使用的目标元素：<input>。

html

<input type="number" step="3">

8-18.rows

该属性可以用来定义元素包含多少行。

可使用的目标元素：<textarea>。

8-18.cols

该属性可以用来定义元素包含多少列。

可使用的目标元素：<textarea>。

8-19.enctype

该属性定义当 method 是 POST 方式时，form 的 content-type。

可使用的目标元素：<enctype>。

8-20.for

该属性描述与当前元素绑定的元素。

可使用的目标元素：<label>、<output>。

8-21.value

该属性定义页面加载时，在元素内显示的默认值。

可使用的目标元素：<button>、<option>、<input>、<li>、<meter>、<progress>、<param>。

9.table

9-1.background

该属性指定图像文件的 URL，可以用来设置元素的背景图片。

可使用的目标元素：<body>、<table>、<td>、<th>。

该属性现在一般常见于 HTML Email 中。

WARNING

虽然浏览器和电子邮件客户端可能仍然支持此属性，但它已过时。

不推荐在现代网页中继续使用，可以改用 css 中的 background-image。

但在 HTML Email 的情况下，为了考虑邮件客户端的兼容性，可以使用该属性 background。

9-2.bgcolor

该属性可以用来设置元素的背景颜色。

可使用的目标元素：<body>、<col>、<colgroup>、<marquee>、<table>、<tbody>、<tfoot>、<td>、<th>、<tr>。

在现代网页中，推荐改用 css 中的 background-color。

9-3.border

该属性可以用来设置元素的边框宽度。

可使用的目标元素：<img>、<object>、<table>。

在现代网页中，推荐改用 css 中的 border。

9-4.rowspan

该属性用于指定一个单元格占用多少行。

可使用的目标元素：<td>、<th>。

9-5.colspan

该属性用于指定一个单元格占用多少列。

可使用的目标元素：<td>、<th>。

10.多媒体

10-1.controls

该属性表示浏览器是否对用户显示播放控制台 (前进或回退)。

可使用的目标元素：<audio>、<video>。

10-2.autoplay

该属性表示是否自动播放。

可使用的目标元素：<audio>、<video>。

10-3.loop

该属性定义当媒体资源播放完后是否循环。

可使用的目标元素：<audio>、<video>、<bgsound>、<marquee>。

1. <meta> ​

1-1.charset ​

1-2.name ​

1-2-1.description ​

1-2-2.keywords ​

1-2-3.viewport ​

1-2-4.referrer ​

1-2-5.renderer ​

1-2-6.author ​

1-2-7.robots ​

1-3.content ​

1-4.http-equiv ​

1-4-1.Content-Type ​

1-4-2.X-UA-Compatible ​

1-4-3.Cache-Control ​

1-4-4.Pragma ​

1-4-5.Expires ​

1-4-6.Refresh ​

1-4-7.Set-Cookie ​

1-5.property ​

2.<link> ​

2-1.rel ​

2-1-1.alternate ​

2-1-2.canonical ​

2-1-3.icon ​

2-1-4.manifest ​

2-1-5.prefetch ​

2-1-6.preload ​

2-1-7.stylesheet ​

2-2.href ​

2-3.as ​

2-4.media ​

2-5.title ​

2-6.type ​

2-7.sizes ​

2-8.disabled ​

3.<script> ​

3-1.src ​

3-2.type ​

3-3.nomodule ​

3-4.defer ​

3-5.async ​

3-6.动态脚本 ​

3-7.document.readyState ​

3-8.integrity ​

4.<a> ​

4-1.href ​

4-2.target ​

4-3.download ​

5.<img> ​

5-1.src ​

5-2.alt ​

5-3.crossorigin ​

6.<iframe> ​

6-1.width ​

6-2.height ​

6-3.sandbox ​

7.<ol> ​

7-1.start ​

7-2.reversed ​

8.表单元素 ​

8-1.method ​

8-2.name ​

8-3.placeholder ​

8-4.required ​

8-5.selected ​

8-6.readonly ​

8-7.multiple ​

8-8.pattern ​

8-9.min ​

8-10.max ​

8-11.maxlength ​

8-12.disabled ​

8-13.checked ​

8-14.autocomplete ​

8-15.autofocus ​

8-16.size ​

8-17.step ​

8-18.rows ​

8-18.cols ​

1. `<meta>`

1-1.charset

1-2.name

1-2-1.description

1-2-2.keywords

1-2-3.viewport

1-2-4.referrer

1-2-5.renderer

1-2-6.author

1-2-7.robots

1-3.content

1-4.http-equiv

1-4-1.Content-Type

1-4-2.X-UA-Compatible

1-4-3.Cache-Control

1-4-4.Pragma

1-4-5.Expires

1-4-6.Refresh

1-4-7.Set-Cookie

1-5.property

2.`<link>`

2-1.rel

2-1-1.alternate

2-1-2.canonical

2-1-3.icon

2-1-4.manifest

2-1-5.prefetch

2-1-6.preload

2-1-7.stylesheet

2-2.href

2-3.as

2-4.media

2-5.title

2-6.type

2-7.sizes

2-8.disabled

3.`<script>`

3-1.src

3-2.type

3-3.nomodule

3-4.defer

3-5.async

3-6.动态脚本

3-7.document.readyState

3-8.integrity

4.`<a>`

4-1.href

4-2.target

4-3.download

5.`<img>`

5-1.src

5-2.alt

5-3.crossorigin

6.`<iframe>`

6-1.width

6-2.height

6-3.sandbox

7.`<ol>`

7-1.start

7-2.reversed

8.表单元素

8-1.method

8-2.name

8-3.placeholder

8-4.required

8-5.selected

8-6.readonly

8-7.multiple

8-8.pattern

8-9.min

8-10.max

8-11.maxlength

8-12.disabled

8-13.checked

8-14.autocomplete

8-15.autofocus

8-16.size

8-17.step

8-18.rows

8-18.cols