首頁 > 開發者 > 網站開發

HTML5基礎與Meta http-equiv屬性詳解

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：


HTML基礎知識<!DOCTYPE> 聲明協助瀏覽器正確地顯示網頁。<html> 元素定義了整個 HTML 文檔。現代網站都使用meta來聲明頁面內容的編碼格式，我們推薦這種方式 :<meta http-equiv="Content-Type" content="text/html; charset=GBK">參考:

head元素（head）及其包含的子項目

<head>    定義關於文檔的資訊。
<title>    定義文檔標題。<title> 標籤定義文檔的標題。 title 元素是必需的。 title 元素能夠： 定義瀏覽器工具列中的標題。 提供頁面被添加到收藏夾時顯示的標題。 顯示在搜尋引擎結果中的頁面標題。
<base>    定義頁面上所有連結的預設地址或預設目標。屬性 href:       指定了body中的相對URL的基準URL target:    告訴瀏覽器如何開啟URL
<link>    定義文檔與外部資源之間的關係。屬性 href:      被連結文檔的位置。rel:         被連結文檔與當前文檔的關係 （只有 rel 屬性的 "stylesheet" 值得到了所有瀏覽器的   支援。其他值只得到了部分地支援。）type:      被連結文檔的 MIME 類型。

<meta>    定義關於 HTML 文檔的中繼資料。中繼資料（metadata）是關於資料的資訊。 <meta> 標籤提供關於 HTML 文檔的中繼資料。中繼資料不會顯示在頁面上，但是對於機器是可讀的。典型的情況是，meta 元素被用於規定頁面的描述、關鍵詞、文檔的作者、最後修改時間以及其他中繼資料。 <meta> 標籤始終位於 head 元素中。中繼資料可用於瀏覽器（如何顯示內容或重新載入頁面），搜尋引擎（關鍵詞），或其他 web 服務。
<script>    定義用戶端指令碼。
<style>    定義文檔的樣式資訊。 。<style> 標籤用於為 HTML 文檔定義樣式資訊。 您可以在 style 元素內規定 HTML 元素在瀏覽器中呈現的樣式： 屬性 type:      規定樣式表的 MIME 類型。 media:    為樣式表規定不同的媒介類型（裝置類型）。



<body> 元素：
標記文本的元素








----------------------------分割線-------------------------------------- Meta http-equiv屬性詳解
  • http-equiv顧名思義，相當於http的檔案頭作用，它可以向瀏覽器傳回一些有用的資訊，以協助正確和精確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變數值。 
    引用meat標籤的http-equiv屬性文法格式是：＜meta http-equiv="參數" content="參數變數值"＞ ；其中http-equiv屬性主要有以下幾種參數：

    1、Expires(期限) 
    說明：可以用於設定網頁的到期時間。一旦網頁到期，必須到伺服器上重新傳輸。 
    用法：Html代碼  
    1. ＜meta http-equiv="expires" content="Wed, 20 Jun 2007 22:33:00 GMT"＞  

    注意：必須使用GMT的時間格式。 

    2、Pragma(cache模式) 
    說明：是用於設定禁止瀏覽器從本地機的緩衝中調閱頁面內容，設定後一旦離開網頁就無法從Cache中再調出 
    用法：Html代碼  
    1. ＜meta http-equiv="Pragma" content="no-cache"＞  

    注意：這樣設定，訪問者將無法離線瀏覽。 

    3、Refresh(重新整理)   
    說明：自動重新整理並指向新頁面。 
    用法：Html代碼  注意雙引號
    1. ＜meta http-equiv="Refresh" content="2；URL=http://www.net.cn/"＞  

    注意：其中的2是指停留2秒鐘後自動重新整理到URL網址。 

    4、Set-Cookie(cookie設定) 
    說明：如果網頁到期，那麼存檔的cookie將被刪除。 
    用法：Html代碼  
    1. ＜meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Wednesday, 20-Jun-2007 22:33:00 GMT； path=/"＞  

    注意：必須使用GMT的時間格式。 

    5、Window-target(顯示視窗的設定) 
    說明：強制頁面在當前視窗以獨立頁面顯示。 
    用法：Html代碼  
    1. ＜meta http-equiv="Window-target" content="_top"＞  

    注意：用來防止別人在架構裡調用自己的頁面。 

    6、content-Type(顯示字元集的設定) 
    說明：設定頁面使用的字元集。 
    用法：Html代碼  
    1. ＜meta http-equiv="content-Type" content="text/html; charset=gb2312"＞  


    7、Pics-label(網頁等級評定) 
    用法：Html代碼  
    1. <meta http-equiv="Pics-label" contect="">  

    說明：在IE的internet選項中有一項內容設定，可以防止瀏覽一些受限制的網站，而網站的限制層級就是通過meta屬性來設定的。 

    8、Page_Enter、Page_Exit 
    設定進入頁面時的特殊效果Html代碼  
    1. <meta http-equiv="Page-Enter"    contect="revealTrans(duration=1.0,transtion=    12)">    

    設定離開頁面時的特殊效果Html代碼  
    1. <meta http-equiv="Page-Exit"    contect="revealTrans(duration=1.0,transtion=    12)">    


    Duration的值為網頁動態過渡的時間，單位為秒。  
    Transition是過渡方式，它的值為0到23，分別對應24種過渡方式。如下表：  
    0    盒狀收縮    1    盒狀放射  
    2    圓形收縮    3    圓形放射  
    4    由下往上    5    由上往下  
    6    從左至右    7    從右至左  
    8    垂直百葉窗    9    水平百葉窗  
    10    水平格狀百葉窗    11垂直格狀百葉窗  
    12    隨意溶解    13從左右兩端向中間展開  
    14從中間向左右兩端展開    15從上下兩端向中間展開  
    16從中間向上下兩端展開    17    從右上方向左下角展開  
    18    從右下角向左上方展開    19    從左上方向右下角展開  
    20    從左下角向右上方展開    21    水平線狀展開  
    22    垂直線狀展開    23    隨機產生一種過渡方式  

    9、清除緩衝（再訪問這個網站要重新下載！） 
    Html代碼  
    1. <meta http-equiv="cache-control" content="no-cache">  


    10、設定網頁的到期時間 
    Html代碼  
    1. <meta http-equiv="expires" content="0">  


    11、關鍵字,給搜尋引擎用的 
    Html代碼  
    1. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  


    12.頁面描述 
    Html代碼  
      1. <meta http-equiv="description" content="This is my page"> 


●meat標籤的NAME變數文法格式是： <META NAME="xxx" CONTENT="xxxxxxxxxxxxxxxxxx">其中xxx主要有下面幾種參數：1.Keywords(關鍵字) 說明：keywords用來告訴搜尋引擎你網頁的關鍵字是什麼。舉例：<META NAME ="keywords" CONTENT="life, universe, mankind, plants, relationships, the meaning of life, science">
2.description(簡介) 說明：description用來告訴搜尋引擎你的網站主要內容。舉例：<META NAME="description" CONTENT="This page is about the meaning of life, the universe, mankind and plants.">
3.robots(機器人嚮導) 說明：robots用來告訴搜尋機器人哪些頁面需要索引，哪些頁面不需要索引。 CONTENT的參數有all,none,index,noindex,follow,nofollow。預設是all。舉例：<META NAME="robots" CONTENT="none">
4.author(作者) 說明：標註網頁的作者舉例：<META name="AUTHOR" content="ajie,[email protected]">
以上是meta標籤的一些基本用法，其中最重要的就是:Keywords和description的設定。
另外為了提高搜尋點擊率，這裡還有一些"邪門歪道"：1.為了增加關鍵詞的密度，將關鍵字隱藏在頁面裡(將文字顏色定義成與背景顏色一樣)。2.在圖象的alt備註陳述式中加入關鍵字。 如：<IMG SRC="xxx.gif" Alt="keywords">3.利用HTML的備註陳述式，在頁面代碼裡加入大量關鍵字。用法： <!--- 這裡插入關鍵字 --->



HTML5基礎與Meta http-equiv屬性詳解

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More