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

我们常用这一标签来引入我们的脚本语言文件内容,平常的时候我们直接使用<script src=".." />的形式来引入我们的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请求方式了。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容