首頁 > web前端 > html教學 > HTML中head標籤是什麼意思?一篇文章教你正確使用head標籤

HTML中head標籤是什麼意思?一篇文章教你正確使用head標籤

寻∝梦
發布: 2018-08-25 18:02:44
原創
28453 人瀏覽過

這篇文章為大家介紹了什麼是HTML中的head標籤,head標籤中有哪些元素,看完這篇文章你會對HTML中的頭部標籤head了解的更透徹,本文用簡單的方法讓大家懂得這些標籤怎麼使用,都會了的話就能更好的使用head標籤了, 現在讓我們一起閱讀本篇文章吧

首先我們要知道什麼是HTML中head標籤:

head標籤是作用於網頁的頭部,它的內容不會在正文中顯示出來。

html head標籤中的元素:

要學會head標籤,就把裡面的元素弄清楚就差不多,其實,head標籤裡有不少標籤可以使用,但是正文中的那些

標籤都不能在這使用

要說到html head標籤中的元素,第一個能想到的肯定是標籤

標籤定義了網頁的標題,也是必須要有的標籤,如果不寫的話,網頁會自動為你加上一個標題,會在一個正常的網頁上都能看到,下圖為一整個HTML中頭部head標籤的使用代碼:(後面有詳細解釋)<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><!doctype html> <html> <head> <meta charset="utf-8"> <title>PHP中文网</title> <meta name="keywords" content="PHP,PHP中文网"> <meta name="description" content="网页描述的内容,这有不少字的,在搜索页面呈现的"> <meta http-equiv="refresh" content="5;http://www.php.cn"> </head> <body> hello world </body> </html></pre><div class="contentsignin">登入後複製</div></div><p>效果圖:</p><p><img src="https://img.php.cn//upload/image/172/278/695/1535184665914726.png" title="1535184665914726.png" alt="HTML中head標籤是什麼意思?一篇文章教你正確使用head標籤"/></p><p>這就是title標籤的效果,顯示出了標題。 </p><p><strong>第二個說<meta>標籤:</strong></p><p>#這個標籤有以下四種用法:</p><p>1.這個<mate>標籤講的是在head標籤中的第一行顯示的,是用來<strong>設定網頁文檔編碼</strong>的,對當前瀏覽器進行聲明這是什麼編碼方式,防止瀏覽器出現亂碼。 </p><p>這個就是這麼用的:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><meta charset="utf-8"></pre><div class="contentsignin">登入後複製</div></div><p>這是html5的規範,</p><p>HTML4.01的規範是這樣的:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></pre><div class="contentsignin">登入後複製</div></div><p>2.這個<mate>標籤講的是<strong>網頁設定關鍵字</strong>用的,是專為搜尋引擎提供服務的。 </p><p>用法是:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><meta name="keywords" content="PHP,PHP中文网"></pre><div class="contentsignin">登入後複製</div></div><p>說明:name="keywords"這是固定的寫法,後面的content屬性的屬性值裡面就是設定關鍵字的,用逗號隔開。 </p><p>3.<strong>這個<mate>標籤是用來描述網站的</strong>,寫在這裡如果有相應的描述,就會被搜尋引擎將資訊顯示在網站的簡介之中</p><p>這個的用法是:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><meta name="description" content="网页描述的内容,这有不少字的,在搜索页面呈现的"></pre><div class="contentsignin">登入後複製</div></div><p>不好顯示,給個圖看看吧</p><p><img src="https://img.php.cn//upload/image/801/962/237/1535184715501457.png" title="1535184715501457.png" alt="HTML中head標籤是什麼意思?一篇文章教你正確使用head標籤"/></p><p>在那裡面設定的文字都會在搜尋中以這框裡的文字呈現。 </p><p>4.最後一種<mate>標籤是定義<strong>網站重定向</strong>的。 </p><p>用法:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><meta http-equiv="refresh" content="5;http://www.php.cn"></pre><div class="contentsignin">登入後複製</div></div><p>content屬性裡面寫了兩個參數,用分號隔開,表示的意思的是5秒後將跳到目標網址頁去。 </p><p><strong>第三個說說HTML中head標籤中的<base>標籤:</strong></p><p>html的head中base標籤是定義視窗裡面的連結開啟的方式,只要在網頁頭部設定了這個,那麼這個網頁就不需要再為超連結加上這種target屬性了。 </p><p><base target=_blank>表示網頁中所有的超連結的目標位址都在新視窗中開啟(該屬性會被每個連結中的target 屬性覆蓋。)</p><p><strong>#跟大家介紹base標籤的target屬性的兩個屬性值:</strong></p><ul class=" list-paddingleft-2" style="max-width:90%"><li><p>#_blank:在新視窗中開啟目標網址</p></li><li> <p>_self:在原始視窗開啟目標網址(瀏覽器預設的)</p></li></ul><p>#如果不設定target屬性,點選網址就會在原網址上直接跳到目標網址就想設定了_self一樣。 </p><p>還有一個就是<strong>href屬性</strong>,這是設定網址的,有了這個屬性,在點選這個網址,就會在新的視窗進目標網址,</p><p>一般都是這麼用的:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><base href="http://www.php.cn" target="_blank"/></pre><div class="contentsignin">登入後複製</div></div><p><strong>其實還有三個元素</strong>,只不過我們現在只是學HTML,所以沒必要會這三個,知道就行了,都是寫在head標籤裡面,做個簡單的介紹吧</p> <ul class=" list-paddingleft-2" style="list-style-type: disc;"> <li><p><style>這個是這一個網頁中寫css程式碼的</style></p></li> <li><p>< ;link>這個是用於外鏈一個css程式碼的(大家應該都知道css可以不寫在一個頁面的吧)</p></li> <li><p><script>這個是用於在當前網頁中插入一段JavaScript程式碼的。 </script></p></li> </ul> <p>好了,到這就把head常用的都差不多介紹完了,看完這些,你應該能自己正確的使用HTML中的head頭部標籤了。有問題可以在下方提問</p> <p>【小編的相關推薦】</p> <p><a href="http://www.php.cn/php-weizijiaocheng-409071.html" target="_blank">駭客應該學PHP還是python?理性分析PHP和python的十處差異</a><br></p> <p><a href="http://www.php.cn/html5-tutorial-408225.html" target="_blank">什麼是HTML檔? HTML檔案的初步認知</a><br></p>#

以上是HTML中head標籤是什麼意思?一篇文章教你正確使用head標籤的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板