head标签中有什么属性？-百分百源码网

本篇文章给大家带来的内容是对于head标签中有什么属性？有一定的参照价值，有需要的伴侣可以参照一下，但愿对你有所帮忙。

每一个 HTML 文档中，都有一个不成或缺的标签：，它作为一个容器，主要包括了用于描述 HTML 文档本身信息（元数据）的标签，这些标签个别不会在页面中被显示出来，大多状况下是给阅读器和搜寻引擎看的。

可以用在里面的标签有： , <base> , <link> , <style> , <meta> , 《script》 , <noscript> 。元信息标签介绍<title>定义文档的标题，显示在阅读器的标题栏或标签页上，个别会完备地具体整个网页的内容。<base>给页面上所有相对 URL 的供给一个根基。一份文档中只能有一个 <base> 标签。当前我只调查到「淘宝网」运用了这个标签。<link>规定外部资源与目前文档的关系，常于链接样式表，如下所示：<pre class="brush:php;toolbar:false"><link rel="stylesheet" href="xxx.css" type="text/css"></pre>固然还有许多其他的作用：<ol><li>比方用于 SEO，主要给搜寻引擎看的：</li></ol><pre class="brush:php;toolbar:false"><link rel="canonical" href="..."></pre>在网站中常有多个 url 指向统一个页面的状况，上述标签奉告搜寻引擎页面的主 url 有哪些，以便搜寻引擎保存主要页面而去掉其他反复页面。<ol><li>供给 rss 订阅的：</li></ol><pre class="brush:php;toolbar:false"><link rel="alternate" type="application/rss+xml" title="RSS" href="..."></pre>上述标签除搜寻引擎可以看懂之外，也能被许多阅读器插件辨认。<ol><li>表示页面 icon 的：</li></ol><pre class="brush:php;toolbar:false"><link rel="icon" href="https://xxx.png"></pre>多数阅读器会读取这个 link 的资源并展现在页面上。<ol><li>对页面供给预处置的：</li></ol><pre class="brush:php;toolbar:false"><link rel="dns-prefetch" href="//xxx.com"></pre>提早对一个域名做 dns 查询。强迫对域名进行预读取在有的状况下很实用,。比方, 在网站的主页上，强迫在整个网站上对频繁援用的域名做预解析处置，即便它们不在主页自身上运用。虽然主页的机能可能不挨影响，但是会提高站点整体机能。<style>包括文档的样式信息。<meta>一种通用的元数据信息表示标签，个别以键值对涌现，如：<meta name="xxx" content="yyy">charset 属性<pre class="brush:php;toolbar:false"><meta charset="UTF-8"></pre>从 HTML5 开端，上述写法被举荐运用，用于声明目前文档所运用的字符编码，举荐放在 <head> 中的首先位。http-equiv属性<pre class="brush:php;toolbar:false"><meta http-equiv="content-type" content="text/html; charset=UTF-8"></pre>在 HTML4 中，上述代码用于声明字符集，但是此刻已不被举荐。除了 content-type ，还有其他几个值：content-language （已过时）、set-cookie （已过时）、default-style 、refresh 、content-security-policy由于不常用，所以就纷歧一介绍了，也挺容易了解，感乐趣可以点击这里理解。name 属性其实 <meta> 标签可以被自在定义，只有读取和写入的双方约定好 name 和 content 的格局就可以了。来看一个例子：<pre class="brush:php;toolbar:false"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"></pre>上面这种用途并不在 HTML 规范中，但是却挪移端开发的事实规范。这里来解释一下 content 中的内容：width ：页面宽度，可以是一个正整数；也可以一个字符串 "device-width" ，表示跟设施宽度相称。height ：页面高度，可以是一个正整数；也可以一个字符串 "device-height" ，表示跟设施高度相称。initial-scale ：初始缩放比例。minimum-scale ：最小缩放比例。maximum-scale ：最大缩放比例。user-scalable ：可否允许会员缩放。name 属性的值除了可以是 viewport 以外，还有相当多的值：application-name 、author 、description 、generator 、keywords 、referrer 、robots 等。一样的，就纷歧一介绍了，感乐趣可以点击这里理解。《script》用于嵌入或援用可施行足本。来看几个 script 标签常见的全局属性：async使阅读器运用另一个线程下载足本，这时不会阻塞页面渲染。当足本下载完成后，阅读器会暂停渲染，施行足本，施行结束后继续渲染页面。async 没法保障足本的施行次序，哪个足本先下载完毕就会先施行。defer一样会使阅读器并行下载足本，但是下载结束不会立刻施行，而是会比及 DOM 加载完成后（即刚刚读取完 </html> 标签）再施行足本。defer 可以保障足本的施行次序就是它们在页面上涌现的次序。src定义援用外部足本的地址，指定此属性的 script 标签内不该再有嵌入的足本。要是足本文件运用了非英语字符，还应当说明字符的编码。如：<script charset="utf-8" src="https://www.example.com/script.js">《script》 type默许值是 text/javascript想理解更多对于《script》标签的细致内容可以点击这里。<noscript>要是页面上的足本类型不挨支撑或者目前在阅读器中关闭了足本，则在此中定义足本未被施行时的替换内容。总结本文到这里就完毕了，其实对于 link 和 meta 标签还有许多没有介绍到，许多相干标签都是有特别的需求，只要在特定状况下才会运用，比方挪移端开发就会用很多在 PC 上并不需要的标签。固然平时运用也主如果看需求，就拿我当前来说，只是些许用到过一些与 viewport 和 SEO 相干的标签。鉴于此我举荐一个不错的学习办法，就是去各大网站查看它们的 head 标签里都有什么，碰到没见过的就去搜寻一下，熟知起来会很快。我这边看过的网站有：「淘宝网」、「alibaba」、「京东」、「网易严选」、「起点中文网」等。本篇文章到这里就已经全部完毕了，更多其他出色内容可以关注百分百源码网的HTML教程视频栏目！以上就是head标签中有什么属性？的细致内容，更多请关注百分百源码网其它相干文章！ </div> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <script type="text/javascript" src="http://www.baidow.com/ds/js/jquery.min.js"></script> <title>打赏

打赏