一、Meta标签

1、简介

<meta>标签用来表示不能由其他HTML元相关元素(<base>、<link>、<script>、<style>或<title>)表示的元数据信息。

<meta>标签允许为空(<meta/>)，即可以没有闭合标签。

2、属性

  • charset

声明当前文档使用的字符编码，此属性值可以被元素的lang属性值覆盖，通常推荐使用UTF-8。含有此属性的<meta>标签必须包含在<head>标签中且在HTML代码的前1024个字节内，因为某些浏览器在选择编码时只看前面的这些字节。

此属性和以下内容等效：

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

IANAcharset与charset值一样，推荐使用<meta charset="utf-8"/>。

  • content

此属性为http-equiv或name属性的值。

  • http-equiv

    此属性命名为http-equiv(alent)，因为其所允许和值都是HTTP消息头的名称。它的值为content属性的值，此属性常用值如下：

    • content-type

      已过时，使用<meta>标签的charset属性代替。

    • content-language

      已过时，使用<html>标签的lang属性代替。

    • refresh

      如果content值为一个正整数，则表示重新载入页面的时间间隔，以秒为单位；

      如果content值为一个正整数，且数字后面跟着;url=xxx，则表示在指定的时间后重定向到url指向的地址。

        <meta http-equiv="refresh" content="5;https://www.baidu.com/">

    • content-security-policy

      指定当前页面定义的内容安全策略，可以指定允许的服务器源(src)和脚本来源等，有助于防止跨站点脚本功击。

  • name

    此属性定义文档级元数据的名称，如果已设置了itemprop、http-equiv或charset属性，则不应该再设置此属性。

    此属性可以取以下值：

    • application-name

      表示网页中运行的应用程序的名称

    • auth

      文档的作者

    • description

      对页面内容简短精确的描述，部分浏览器会将其作为书签页面的默认描述

    • keywords

      与页面内容相关的单词

    • referrer

      定义从该页面发出的HTTP请求中HTTP消息头Referer属性的值。

      动态插入<meta name="referrer">是不起作用的；如果同时定义了多个冲突的referrer属性值，则content值使用no-referrer。

    • robots

      定义爬虫对当前页面的交互规则，值以逗号分隔。

    • viewport

      提供了有关视口初始大小的提示，仅供移动设备使用，多个值之间用逗号分隔。例如：

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

      content属性可取值为：

      Key Value 说明
      width 正整数或device-width 以像素为单位，定义视口的宽度
      height 正整数或device-height 以像素为单位，定义视口的高度
      user-scalable 布尔值yes或no 默认值为yes，如果为no，则用户不能放大或缩小网页
      initial-scale 0.0~10.0之间的正数 定义设备宽度(纵向模式下的宽度或横向模式下的高度)与视口大小间的缩放比率
      minimun-scale 0.0~10.0之间的正数 定义缩放的最小值，必须小于maximun-scale的值
      maximun-scale 0.0~10.0之间的正数 定义缩放的最大值，必须大于minimun-scale的值

二、Link标签

1、简介

此标签规定了外部资源与当前文档的关系，最常用于链接样式表。此标签不需要结束标签。

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

2、属性

  • rel

此属性指明被链接的资源与当前文档的关系，值为由空格分隔的链接类型值(例如stylesheet、alternate和icon等)列表。

  • as

此属性仅在rel="preload"时使用，它规定了<link>元素加载内容的类型以及对内容优先级、内容安全策略的设置等。可设置的属性值及说明如下：

值 说明
audio或video 音频或视频文件
document 将要被嵌入到<frame>或<iframe>中的HTML文档
embed或object 将要被嵌入到<embed>中的资源
fetch 将要通过fetch和XHR请求获取的资源
font 字体文件
image 图片
script JavaScript文件
style 样式表文件
track 网络视频文本轨道(WebVTT)文件
worker JavaScript的web worker或shared worker
  • crossorigin

此属性表示在获取资源时是否必须使用CORS，可取值为anonymous或use-credentials。

  • href

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

  • integrity

可以通过此属性指定所加载资源文件的base64编码的哈希值，浏览器用此值来判断加载的资源是否被篡改。此属性可以包含多个由空格分隔的哈希值，只要资源文件匹配其中任意一个，就可以通过校验并加载该资源。参考：Subresource Integrity

  • media

此属性指定链接资源适用的媒体，其值必须是媒体类型或媒体查询。如果链接到的是样式表，则使用此属性可以为其运行的设备选择最合适的样式。

  • type

定义所链接内容的类型，值为MIME类型(text/html、text/css等)，

3、可替换的样式表

可以使用此标签指定多个样式供用户选择(IE下可在：查看>样式 中选择)。

<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">

4、使用rel="preload"预加载内容

对<link>标签设置rel属性为preload可以预加载各种资源，除此之外，还需设置as和href属性，分别指定资源类型和路径。

<head>
	<link rel="preload" href="style.css" as="style">
	<link rel="preload" href="main.js" as="script">
	<!-- 响应式预加载(media属性) -->
	<link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
	...

	<link rel="stylesheet" href="style.css">
</head>
<body>
	...

	<script src="main.js"></script>
</body>

三、Script标签

1、简介

此标签用来引用或嵌入可执行脚本，通常使用JavaScript代码，也可以与其他语言一起使用。此标签的结束标签不能省略。

<script src="test.js"></script>

2、属性

  • async

表示是否异步执行该脚本，对于内联脚本无效。

  • crossorigin

通常使用window.onerror捕获Javascript脚本错误信息，如果引入的跨域脚本出错，window.onerror只能获得反馈的很少的错误信息，可以使用此属性让加载出错的跨域脚本和同域脚本一样显示出具体的错误信息。

  • defer

表示该脚本将在文档解析完成后，在触发DOMContentLoaded事件前执行。此属性对内联脚本无效，对动态嵌入的脚本使用async=false可以实现类似的效果。

  • integrity

此属性包含内联元数据，用户代理可以使用该元数据来验证其获取的资源(例如从CDN获得的)是否被篡改。它通过验证获取文件的哈希值和此属性中指定的哈希值(元数据)是否一致来判断资源是否被篡改。参考：Subresource Integrity

  • src

定义引用的外部脚本的URI。

  • type

定义标签中引入或嵌入的脚本语言，属性值为MIME类型，支持的类型有：text/javascript、text/ecmascript、 application/javascript和application/ecmascript。如果值不是这几种类型，则该标签中的内容会被当做数据块而不会被执行。如果此属性省略，脚本会被视为JavaScript脚本。

如果此属性值为module，则代码会被当作JavaScript模块。

  • text

与textContent属性类似，设置Script元素的文本内容，与textContent不同之处在于，此属性在节点插入DOM后其值将被解析为可执行代码。

参考资料