HTML 頭部標簽


HTML <head>元素

head 元素包含了 所有頭部標簽元素。

可以在頭部標簽添加的元素包括:<title>、<style>、<link>、<script>、<noscript>、<base>、<script>

 

HTML <title>元素

  title 標簽定義了不同文檔的標題

  title 標簽的內容作為搜索結果的超鏈接上面的文字顯示

  title 標簽的作用:定義瀏覽器工具欄的標題;當網頁添加到收藏夾時,顯示在收藏夾中的標題;顯示在搜索引擎結果。

注意:title 在HTML/XHTML 文檔中是必須要求的。

<title> document </title>

 

HTML <meta> 元素

meta 標簽主要用於設置網頁中的一些元數據(元數據不是給用戶看的,而是給瀏覽器看的)

元數據通常用於指定網頁的描述,關鍵詞,文件的最后修改時間,作者,和其他元數據。

元數據可以用於瀏覽器(如何顯示內容或嘗新加載頁面),搜索引擎(關鍵詞),或是Web服務

  charset,即將對網頁使用的字符集做出聲明

  name,這是一個文檔級元數據,將附着在整個頁面上

  http-equiv,這是一個編譯指令,即服務器提供的來指示頁面應該如何加載

  itemprop,將定義一個用戶自定義的元數據

meta 的屬性

1、charset  指定網頁字符集(但是該聲明可以被任何一個元素的 lang特性的值覆蓋)

文檔編碼一定要文件原本編碼相同,否則就會出現亂碼。鼓勵使用UTF-8字符集

    <meta charset="UTF-8">

2、content  指定的數據的內容(這個屬性包含http-equiv 或 name 屬性的值,具體取決於所使用的值。)

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

3、name  指定數據的名稱(全局屬性)

  keywords【關鍵字】

表示網站的關鍵字,可以同時使用多個關鍵字,關鍵字之間使用逗號隔開;

<meta name='Keywords' content='網上購物,網上商城,手機,筆記本,電腦'>

  discription 【描述】

用於指定網站的描述,網站的描述會顯示在搜索引擎的搜素結果中

<meta name='discription' content='京東JD.COM-專業的綜合網上購物商城'>

  author【作者名】

<meta name="author" content="jojo">

  generator【標識符】

包含生成頁面的軟件的標識符

<meta name='copyright' content='nyw'>

referer【請求】所有從該文檔發出的 HTTP 請求中HTTP Referer 首部的內容
    
4、http-equiv  這個枚舉屬性定義了能夠改變服務器和用戶引擎行為的編譯。這個編譯直接使用 content 來定義

  refresh【刷新】

【定時跳轉】

  如果 content 只包含一個正整數,則是重新載入頁面的時間間隔(秒)

<meta http-equiv='refresh' content='3'>

 【重定向】

    如果 content 包含一個正整數並且跟着一個字符串,則是重定向到指定的連接所用的時間間隔(秒)

<meta http-equiv='refresh' content='3;url=https://www.baidu.com'>

   Expires【緩存過期時間】

可以用於設定網頁到期時間,一旦過期必須到服務器上重新調用。需要注意的是必須使用的是 GMT時間格式

<meta http-equiv="Expires" Content="0">
<meta http-equiv="Expires" Content="Sat Nov 28 2016 21:19:15 GMT+0800">

  pragma【禁止緩存】

用於禁止瀏覽器從本地機的緩存中查閱頁面內容,用戶脫機無法瀏覽

<meta http-equiv="Pragma" Content="No-cach">

  windows-Target【獨立頁面】

強制頁面在當前頁面以獨立頁面顯示,可以防止自己的頁面被當別人當做一個 frame頁調用

<meta http-equiv="windows-Target" content="_top">

  robots【機器人】

為搜索引擎抓取機器人准備一些信息,禁止搜索引擎緩存和跟蹤網頁

<meta name="robots" content="noindex,nofollow">
<!-- name定義的是機器人,內容部分表示不要被搜索引擎緩存,也不要被搜索引擎跟蹤 -->

default-style:指定了在頁面上使用的首選樣式表。content 屬性必須包含 <link> 元素的標題,href屬性鏈接到CSS樣式或是包含CSS樣式表的<style>元素的標題

HTML base元素

base:指定網頁跳轉基准URL,如果不指定的話默認為當前網站的當前路徑。

寫法:<base href="http://www.aaa.zzz/">

base屬性值:

  • href  指定網頁跳轉到基准URL,如果不指定的話則默認為當前網站的當前路徑。
<base href="http://baidu.com/"> 
<!-- 這是將頁面跳轉到百度的網站打開 -->
  • target  指定鏈接的跳轉幀如果不指定的話,則是在當前頁面中跳轉。
<base target="_blank"> 
<!-- 網頁中的鏈接都應該在新的窗口中打開 -->

terget屬性值:(指定頁面跳轉的位置)

  • _blank  在新窗口中打開被鏈接的文檔
  • _self   默認值,在相同框架中打開被鏈接的文檔
  • _parent   在父框架集中
  • _top   在整個窗口中打開被鏈接文檔·
  • framename   在指定框架中打開被鏈接文檔

 

HTML link 標簽

link標記:鏈接外部文件時使用的標記,可以把外部文件的內容引入到當前文件中來,使當前網頁實現更多的功能。

具有屬性  href、rel、media、hreflang、type和sizes。

【 href 】指定鏈接外部路徑的路徑和文件名,要設置全路徑並且帶文件名(絕對URL)

【 rel 】引用文件,引用資源的類型定義。我們在使用 linkb標簽引用外部文件時,外部文件的類型是多種多樣的

tag   創建應用於當前文檔的標簽

help  幫助文件的鏈接

prev   如果是連續網頁

next  如果是連續網頁的時候,指定下一個網頁

icon  網頁的圖標,新的size屬性和這屬性相結合使用,指定鏈接圖片的寬高

author   網頁的作者

search   鏈接到可以用於搜索當前頁面和相關頁面的資源

license   鏈接到當前文檔的版權聲明

sidebar   鏈接到可以作為附屬上下文的文檔

prefetch   把鏈接外部資源時提前緩存起來,需要鏈接的目標文件。

alternate   代替文檔(種子,其他語言版本,其他格式等等)

pingback   處理當前文檔被引用情況的服務器地址

stylesheet   引入樣式表

【media】鏈接文件或是資源屬於哪一種資源

tv   電視

all   所有

tty   終端

print   打印的頁面

aural   語音合成器

braille  盲文設備

screen   計算機屏幕

handheld   手持設備

projection  投影儀

【hreflang鏈接文件的語言種類

【type】鏈接文件的mi/me類型(比如說,圖片圖標文本)

【sizes】根據 link鏈接文件的類型,來指定文件的大小

鏈接網頁圖標:

網站的圖標指定,可以顯示在瀏覽器的圖標欄,也可以被手機讀取作為網站的圖標存入收藏夾
1 <!-- 網站的圖標指定,可以顯示在瀏覽器的圖標欄,也可以被手機讀取作為網站的圖標存入收藏夾 --> 2 <link rel="icon"> 3 <!-- 示例 --> 4 <link rel="icon" href="img/favicon.png" type="image/png"> 5 <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"> 6 <link rel="apple-touch-icon" href="img/apple-touch-icon.png" type="image/png">

注意:后面的href和前面type標注的類型要一致,這樣既可以顯示在瀏覽器,又可以顯示在手機上

鏈接外部樣式單

1 <link rel="stylesheet"> 2 <link rel="stylesheet" href="style1.css" media="screen"> 3 <link rel="stylesheet" href="style2.css" title="主題樣式文件"> 4 <link rel=" alternate stylesheet" href="style3.css" title="可選樣式單">

說明:

alternate 會在瀏覽器中會彈出一個對話框,供用戶可以進行選擇

media  表示媒體類型為屏幕,可以是手機,但不包括打印機和投影儀

title  對這個link進行簡單的說明

網站RSS種子指定

<!-- 網站RSS種子指定 --> <link rel="alternate" type="application/rss+xml">

為搜索引擎的准備的網頁的URL

<!-- 為搜索引擎的准備的網頁的URL --> <link rel="canonical"> <link rel="canonical" href="http://www.aaa.zzz/help.html">

告訴搜索引擎代替URL是哪里。

 

HTML style 標簽

style 標簽定義 HTML 文檔的樣式信息

如果要使用外部樣式表需要使用 link 標簽

開始和結束 style 標簽中的樣式稱為 文檔樣式表(document style sheet) ,還可以使用@import指令 包含多個外部樣式表鏈接

style 元素屬性:

【type】

該屬性以MIME類型(不應該指定字符集)定義樣式語言。如果該屬性未指定,則默認為 text/css

<style type="text/css"></style>

【media】

規定該樣式適用於哪個媒體,默認值是all

【title】

指定可選的樣式表。

【scoped】范圍

如果該屬性存在,則樣式應用於其父元素;如果不存在,則應用於整個文檔

實例:

<article>
    <div>scoped屬性允許您在文檔中間包含樣式元素。內部規則僅適用於父元素。</div>
    <p>此文本應為黑色。如果它是紅色的,則表示瀏覽器不支持作用域屬性。</p>
    <section>
          <style scoped>
            p { color: red; }
          </style>
        <p>這里應該是紅色</p>
    </section>
</article>

 

HTML script 標簽

使用<script> 元素在HTML元素中插入JavaScript。

在HTML5 中 <script>定義了六個屬性

【async】異步

  可選,表示應該立即下載腳本,但是不應該妨礙頁面中的其他操作,比如下載其他資源或等待加載其他腳本,只對外部腳本文件有用。

<script type="text/javascript" src="demo.js" defer='defer'></script>

【charset】字符集

  可選,表示通過 src 屬性指定的代碼的字符集。

【defer】延遲

  可選,表示腳本可以延遲到文檔完全解析和顯示之后再執行。只對外部腳本文件有效

注意:在H5中 defer 屬性只適用於外部腳本文件

<script type="text/javascript" src="demo.js" defer='defer'></script>

【src】

  可選,表示包含要執行代碼的外部文件

<script type="text/javascript" src="demo.js">  </script>

【type】

  必選,表示編寫代碼使用的腳本語言的內容類型(type=‘text/javascript’)

【ecmascript】

  目前 type 屬性值依舊還是 text/javascript

 

HTML <noscript> 標簽

<noscript> 標簽是為了處理當瀏覽器不支持JavaScript 時如何讓頁面平穩的退化。

使用 <noscript> 用以在不支持 JavaScript 的瀏覽器中顯示替代的內容。

這個元素可以包含能夠出現在文檔 body 中的任何HTML 元素(script 元素除外)

包含在 noscript 中的內容只有在以下情況之下才會顯示:

  1、瀏覽器不支持腳本;

  2、瀏覽器支持腳本但是腳本被禁用;

 


 

參考資料:

https://www.cnblogs.com/nyw1983/p/11485899.html

https://www.cnblogs.com/xiaohuochai/p/6214015.html

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/style

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM