html header设置语言,HTML header

前言：

这一片小文是说明header之中的常用标签以及相关的JS的使用的内容。

正文：

1、meta标签：定义当前页面的某些解析属性和SEO优化使用的内容。

html内容：

我们常常看到页面上面有许多的meta标签，他们具体是什么作用的呢。我们先来了解一下meta标签之中的属性。

-- charset ：H5之中会有charset这个属性的设置。这一属性的是H5之后才可单独使用的，表示当前文件内容字符编码格式。一般是使用的是UTF-8当然也不是是可以使用别的编码集，而是我们通常编写的网页的时候会使用到JS，而JS就是UTF字符集的编码，第二是通用性好。

-- name：表示的是属性名称，与content字段关联使用。name属性中浏览器可以识别的取值有

# application-name:规定页面所表示的web应用程序名称。

# author：表示应用作者。

# description：页面信息描述，搜索引擎会将这一信息结合到搜索结果之中去。所以这一属性也是SEO的优化点。

# generator :生成当前文档的软件包(不用于手写页面内容)

# keywords：其中传递多个值的时候使用都好分割开来，用于搜索引擎关键字内容设定。

# referrer：控制该文档发出的所有的HTTP请求的referrer头部。实验API。相关的content取值为。no-referrer(不发送referrer头部)，origin(当前文档的origin)，no-referrer-when-downgrade(当目的地是先验安全的(https->https)则发送 origin 作为 referrer ，但是当目的地是较不安全的 (https->http)时则不发送 referrer 。这个是默认的行为)，origin-when-crossorigin(在同源请求下，发送完整的URL (不含查询参数) ，其他情况下则仅发送当前文档的origin)，unsafe-URL(在同源请求下，发送完整的URL (不含查询参数))

# viewpoint：页面展示基础设置。这一属性内容将会在移动端的页面常常会看到，他的对应属性参数有很多：

1.width viewport 宽度(数值/device-width)

2.height viewport 高度(数值/device-height)

3.initial-scale 初始缩放比例

4.maximum-scale 最大缩放比例

5.minimum-scale 最小缩放比例

6.user-scalable 是否允许用户缩放(yes/no)

-- http-equiv：这一属性类似于一次http请求内容相关属性也是需要与content属性配合使用。

# content-type：规定文档的信息内容，方便浏览器解读和展示。相关的content属性之中传递的参数内容我们较长时用的属性是text/html(html文本),当然还有text/plain(纯文本)，text/xml(xml文本内容)等等。具体的内容可以点击查看

# default-style：使用预定义样式表，content之中传递的值需要是页面上link标签的title或者是style标签的title

#refresh：页面刷新机制。content属性对应的是时长。

-- content：表示属性键对应的值。具体内容上两项有相关介绍。

当然上面还是有一部分内容未列出，点击这里查看详情

JS内容：

使用JS来为我们的页面动态添加meta信息内容，通常使用document来创建meta标签来进行动态的添加。但是我们需要注意的是因为meta标签是在读取页面的时候就会较早的进行解析的内容，而且有些内容是动态添加无效的内容。所以在动态添加的时候十分的注意这两点。当然我们在操作的时候也应该注意一下属性项的可用性和兼容性。

2.link：外部样式链接

平常使用的时候我们常用来引入来接样式表。但是实际上link标签相当于一次请求，而且其可请求的资源不仅仅是样式表也可以是其他内容。我们先来了解一下其中的属性内容：

-- crossorigin：此属性指定在加载相关图片时候是否使用CORS(非同源跨域)启用了CORS的图片可以再canvas之中使用并避免被污染，其中可传递的属性内容是

# anonymous：发起跨域请求(包含origin头的HTTP请求)但是不发送任何的认证信息(不包含cookie， H,509证书和HTTP基本认证信息)，如果服务器没有给出源站凭证(没有设置Access-control-allow-Origin:http头)请求的图片将会被污染无法使用。

# use-credential：发起一个带有认证信息的跨域请求，如果服务器没有给出源站凭证，则图片内容被污染并限制使用。

如果当前属性没有设置的时候，默认情况不会使用CORS加载(不发送Origin：http头)，这将阻止其在canvas中进行使用，如果设置类非法值则认为是anonymous的情况。

-- href：链接资源的URL。URL可以使绝对的也可以是相对的。

-- hreflang：这一属性只有在href存在的时候使用才有效，指明了HREF的语言集。

-- media：这个属性规定了外部资源适用的媒体类型。其中输入的内容依照媒体查询进行编写，H4之中使用空格符和相关字段，H5之中依照CSS3的媒体查询方式。

-- rel：此属性指明被链接文档对于当前文档的关系。这属性一定是一个由空格分开的链接类型值的列表这个属性最通常的用法是指向一个连接到外部样式表的链接：将rel的值设置为stylesheet，href属性设置为外部样式表的URL来构造网页。这里面有一个我们可能会常用的属性那就是preload属性，这一属性可以帮助我们预加载许多的不常变更的内容

-- sizes：这个属性定义了包含相应资源的可视化媒体中的icons的大小。它只有在rel包含icon类型值，他的属性如下：

#any：意味着这个icon能够被缩放到任意尺寸当它是矢量形式

#一个由空白符分隔的尺寸列表。每一个都以x或X给出。尺寸列表中的每一个尺寸都必须包含在资源里。

--  type：这个属性被用于定义链接的内容的类型。这个属性的值应该是像text/html，text/css等MIME类型。这个属性常用的用法是定义链接的样式表，最常用的值是表明了CSS的text/css。

JS内容：

实际上操作link标签也就类似于我们平常操作一个普通的dom节点一样。我们可以为header标签之中动态的添加相关的link标签，来实现我们的动态引入。

3.script

我们常用这一标签来引入我们的脚本语言文件内容，平常的时候我们直接使用的形式来引入我们的JS文件。但是实际上script标签还有许多其他的属性和用途。我们想来了解一下属性内容吧。

-- async：该布尔属性指示浏览器是否在允许的情况下异步执行该脚本。该属性对于内联脚本无作用 (即没有src属性的脚本)。

-- defer：这个布尔属性被设定用来通知浏览器该脚本将在文档完成解析后，触发 DOMContentLoaded 事件前执行。如果缺少 src 属性(即内嵌脚本)，该属性不应被使用，因为这种情况下它不起作用。对动态嵌入的脚本使用 `async=false` 来达到类似的效果。

-- integrity：这一参数用来判别，当前的文档是否被进行了修改，以确保CDN资料的安全新的内容(具体可以见SRI安全)。

-- src：这一内容填写的是url内容，嵌入脚本文件。

-- type：该属性定义script元素包含或src引用的脚本语言。属性的值为MIME类型; 支持的MIME类型包括text/javascript, text/ecmascript, application/javascript, 和application/ecmascript。如果没有定义这个属性，脚本会被视作JavaScript。

如果MIME类型不是JavaScript类型(上述支持的类型)，则该元素所包含的内容会被当作数据块而不会被浏览器执行。

如果type属性为module，代码会被当作JavaScript模块

在Firefox中可以通过定义type=application/javascript;version=1.8来使用如let声明这类的JS高版本中的先进特性。 但请注意这是个非标准功能，其他浏览器，特别是基于Chrome的浏览器可能会不支持。

-- text：和 textContent 属性类似，本属性用于设置元素的文本内容。但和 textContent  不一样的是，本属性在节点插入到DOM之后，此属性被解析为可执行代码。

-- crossorigin：那些没有通过标准CORS检查的正常script 元素传递最少的信息到 {domxref('GlobalEventHandlers.onerror', 'window.onerror')}。可以使用本属性来使那些将静态资源放在另外一个域名的站点打印错误信息。参考 CORS 设置属性了解对有效参数的更具描述性的解释。

其实script也是相当于一次请求的，其请求为JSONP请求。JSONP请求就是可跨域请求，我们可以使用script标签来请求一些非同源的资源内容。

script标签的JS内容：

由于上面说的script标签有跨域请求的能力，我们可以在需要跨域资源的时候动态的添加script标签来进行数据的请求。当然在Jquery之中也已经封装了JSONP请求方式了。