這篇文章帶給大家的內容是關於head標籤中有什麼屬性？有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
head 標籤裡有什麼？
每一個HTML 文件中，都有一個不可或缺的標籤：
，它作為一個容器，主要包含了用於描述HTML 文件自身資訊（元資料）的標籤，這些標籤一般不會在頁面中被顯示出來，大多情況下是給瀏覽器和搜尋引擎看的。
可用在
裡面的標籤有：
, <base> , <link> , < ); ,> noscript> 。 </p>
<p style="white-space: normal;">元資訊標籤介紹</p>
<p style="white-space: normal;"><title></p>
<p>定義文件的標題，顯示在瀏覽器的標題列或標籤頁上，一般會完整地概括整個網頁的內容。 </p>
<p style="white-space: normal;"><base></p>
<p>給頁面上所有相對 URL 的提供一個基礎。一份文件中只能有一個 <base> 標籤。 </p>
<p>目前我只觀察到「淘寶網」使用了這個標籤。 </p>
<p style="white-space: normal;"><link></p>
<p>規定外部資源與目前文件的關係，常於連結樣式表，如下：</p>
<pre class="brush:php;toolbar:false"><link rel="stylesheet" href="xxx.css" type="text/css"></pre>
<p>當然還有很多其他的作用： </p>
<ol><li>例如用於SEO，主要給搜尋引擎看的：</li></ol>
<pre class="brush:php;toolbar:false"><link rel="canonical" href="..."></pre>
<p>在網站中常有多個url 指向同一個頁面的情況，上述標籤告知搜尋引擎頁面的主url 是什麼，以便搜尋引擎保留主要頁面而去除其他重複頁面。 </p>
<ol><li>提供 rss 訂閱的：</li></ol>
<pre class="brush:php;toolbar:false"><link rel="alternate" type="application/rss+xml" title="RSS" href="..."></pre>
<p>上述標籤除搜尋引擎可以看懂以外，也能被許多瀏覽器外掛程式辨識。 </p>
<ol><li>表示頁面 icon 的：</li></ol>
<pre class="brush:php;toolbar:false"><link rel="icon" href="https://xxx.png"></pre>
<p>多數瀏覽器會讀取這個 link 的資源並展示在頁面上。 </p>
<ol><li>對頁面提供預處理的：</li></ol>
<pre class="brush:php;toolbar:false"><link rel="dns-prefetch" href="//xxx.com"></pre>
<p>提前對一個網域做 dns 查詢。強制對域名進行預讀取在有的情況下很有用,。 </p>
<p>例如, 在網站的主頁上，強制在整個網站上對頻繁引用的網域做預解析處理，即使它們不在主頁本身上使用。雖然主頁的效能可能不受影響，但是會提高網站整體效能。 </p>
<p><style></p>
<p>包含文件的樣式資訊。 </p>
<p><meta></p>
<p>一種通用的元資料資訊表示標籤，一般以鍵值對出現，如：<meta name="xxx" content="yyy"> </p>
<p>charset 屬性</p>
<pre class="brush:php;toolbar:false"><meta charset="UTF-8"></pre>
<p>從HTML5 開始，上述寫法被建議使用，用於宣告目前文件所使用的字元編碼，建議放在 <head> 中的第一位。 </p>
<p style="white-space: normal;">http-equiv屬性</p>
<pre class="brush:php;toolbar:false"><meta http-equiv="content-type" content="text/html; charset=UTF-8"></pre>
<p>在 HTML4 中，上述程式碼用於宣告字元集，但現在已不被推薦。 </p>
<p>除了content-type ，還有其他幾個值：</p>
<p>content-language （過時）、set-cookie （過時）、default-style 、refresh 、content-security- policy</p>
<p>因為不常用，所以就不一一介紹了，也蠻容易理解，有興趣點這裡了解。 </p>
<p style="white-space: normal;">name 屬性</p>
<p>其實 <meta> 標籤可以被自由定義，只要讀取和寫入的雙方約定好 name 和 content 的格式就可以了。來看一個例子：</p>
<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>
<p>上面這種用法並不在 HTML 標準中，但卻是行動裝置開發的事實標準。這裡來解釋 content 中的內容：</p>
<p>width ：頁面寬度，可以是一個正整數；也可以一個字串 "device-width" ，表示跟裝置寬度相等。 height ：頁面高度，可以是一個正整數；也可以一個字串 "device-height" ，表示跟裝置高度相等。 initial-scale ：初始縮放比例。 minimum-scale ： 最小縮放比例。 maximum-scale ： 最大縮放比例。 user-scalable ：是否允許使用者縮放。 </p>
<p>name 屬性的值除了可以是 viewport 之外，還有相當多的值：</p>
<p>application-name 、author 、description 、generator 、keywords 、referrer 、robots 等。 </p>
<p>同樣的，就不一一介紹了，有興趣可以點選 這裡 了解。 </p>
<p><script></p>
<p>用於嵌入或引用可執行腳本。來看看幾個 script 標籤常見的全域屬性：</p>
<p>async</p>
<p>讓瀏覽器使用另一個執行緒下載腳本，這時不會阻塞頁面渲染。當腳本下載完成後，瀏覽器會暫停渲染，執行腳本，執行完畢後繼續渲染頁面。 </p>
<p>async 無法保證腳本的執行順序，哪個腳本先下載結束就會先執行。 </p>
<p>defer</p>
<p>同樣會使瀏覽器並行下載腳本，但下載完畢不會立即執行，而是會等到 DOM 載入完成後（也就是剛讀完 </html> 標籤）再執行腳本。 </p>
<p>defer 可以保證腳本的執行順序就是它們在頁面上出現的順序。 </p>
<p>src</p>
<p>定義引用外部腳本的位址，指定此屬性的 script 標籤內不應再有嵌入的腳本。如果腳本檔案使用了非英語字符，也應該註明字符的編碼。如：</p>
<p><script charset="utf-8" src="https://www.example.com/script.js"></script><br>type</p>
<p>#預設值是text/javascript</p>
<p>想了解更多關於 <script> 標籤的詳細內容可以點擊這裡。 </p>
<p><noscript></p>
<p>如果頁面上的腳本類型不受支援或目前在瀏覽器中關閉了腳本，則在此中定義腳本未被執行時的替代內容。 </p>
<p>總結</p>
<p>本文到這裡就結束了，其實關於link 和meta 標籤還有很多沒有介紹到，很多相關標籤都是有特殊的需求，只有在特定情況下才會使用，例如行動端開發就會用許多在PC 上並不需要的標籤。 </p>
<p>當然平常使用也主要是看需求，就拿我目前來說，只是些許用到過一些與 viewport 和 SEO 相關的標籤。 </p>
<p>鑑於此我推薦一個不錯的學習方法，就是去各大網站查看它們的 head 標籤裡都有什麼，遇到沒見過的就去搜索一下，熟悉起來會很快。 </p>
<p>我這邊看過的網站有：「淘寶網」、「阿里巴巴」、「京東」、「網易嚴選」、「起點中文網」等。 </p>
<p>這篇文章到這裡就已經全部結束了，更多其他精彩內容可以關注PHP中文網的<a href="http://www.php.cn/course/list/11.html" target="_blank">HTML教學影片</a>專欄！ </p>
<p></p>#<p>以上是head標籤中有什麼屬性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">php</a> <a href="javascript:void(0);">JavaScript</a> <a href="javascript:void(0);">html5</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">Cookie</a> <a href="javascript:void(0);">字符串</a> <a href="javascript:void(0);">线程</a> <a href="javascript:void(0);">JS</a> <a href="javascript:void(0);">default</a> <a href="javascript:void(0);">dom</a> <a href="javascript:void(0);">样式表</a> <a href="javascript:void(0);">viewport</a> <a href="javascript:void(0);">http</a> <a href="javascript:void(0);">https</a> <a href="javascript:void(0);">搜索引擎</a> <a href="javascript:void(0);">SEO</a><div class="clear"></div></div><div class="nphpQianSheng"><span>陳述：</span><div>本文轉載於：segmentfault.com。如有侵權，請聯絡admin@php.cn刪除</div></div></div><div class="nphpSytBox"><span>上一篇：<a class="dBlack" title="如何使用.htaccess從URL中刪除檔案副檔名（.php和.html）" href="http://m.php.cn/zh-tw/faq/416206.html">如何使用.htaccess從URL中刪除檔案副檔名（.php和.html）</a></span><span>下一篇：<a class="dBlack" title="如何使用.htaccess從URL中刪除檔案副檔名（.php和.html）" href="http://m.php.cn/zh-tw/faq/416684.html">如何使用.htaccess從URL中刪除檔案副檔名（.php和.html）</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>相關文章</h2><em><a href="http://m.php.cn/zh-tw/article.html" class="bBlack"><i>看更多</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/zh-tw/faq/348757.html" title="Html小知識總結" class="aBlack">Html小知識總結</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh-tw/faq/348804.html" title="如何快速學習HTML" class="aBlack">如何快速學習HTML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh-tw/faq/348873.html" title="html xhtml xml的區別" class="aBlack">html xhtml xml的區別</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh-tw/faq/348884.html" title="src與href屬性的差別" class="aBlack">src與href屬性的差別</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh-tw/faq/348902.html" title="關於HTML5和CSS替換使用" class="aBlack">關於HTML5和CSS替換使用</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>公益線上PHP培訓，幫助PHP學習者快速成長！</p></div><div class="footermid"><a href="http://m.php.cn/zh-tw/about/us.html">關於我們</a><a href="http://m.php.cn/zh-tw/about/disclaimer.html">免責聲明</a><a href="http://m.php.cn/zh-tw/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>
