2. 程式人生 > >html頭部meta標籤詳解

html頭部meta標籤詳解

阿新 • • 發佈：2019-01-19 
<!DOCTYPE HTML>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="keywords" content="關鍵詞">
    <meta name="description" content="對網頁的描述">
    <meta name="author" content="網頁作者">
    <meta http-equiv="content-type" content="text/html">
    <meta
 
 http-equiv="expires" content="31 Dec 2008">
    <meta http-equiv="refresh" content="30">
    <meta http-equiv="set-cookie" content="3434hgh3vv4433dg3g43">
    </head>
    <body>
    </body>
</html>

一、name屬性（鍵值對，只列出常用的）

1、keywords（關鍵詞，用於搜尋引擎優化）

<meta name="keywords"
 
 content="i石大APP,i石大,i石大APP官網">

這樣搜尋引擎在抓取此頁面時，會把關鍵詞收錄進去。以後在百度上搜索關鍵詞 i石大APP i石大 i石大APP官網 三個關鍵詞任何一個，會直接作為搜尋記錄的第一條進行展示。注意關鍵詞中間用英文狀態下的逗號隔開。
2、description（用於網頁描述）

<meta name="description" content="石大立體化校園學習生活平臺">

告訴搜尋引擎對於此網頁的描述是 石大立體化校園學習生活平臺
3、author（網頁作者，可以留自己的聯絡方式）

<meta name="author"
 
 content="深山老鴨">

二、charset屬性

<meta charset="utf-8">

中文網頁一定要寫上這句話，否則在某些瀏覽器網頁會出現亂碼

三、http-equiv屬性（此屬性值針對伺服器端）

伺服器端給客戶端傳送帶有http-equiv屬性的html文件時，會把http-equiv屬性轉化成http響應的頭部，例如：

<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">

伺服器把這兩個屬性轉化成http請求的頭部，發給客戶端瀏覽器（只有瀏覽器可以理解這些鍵值對含義，一般app的api請求作用無效）

content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008

1、content-type（內容型別）

<meta http-equiv="content-type" content="text/html">

文件型別，事實上，不寫這句，伺服器端也會在http響應頭部加入content-type:text/html，因為這表明是一個html文件
2、expires（快取時間）

<meta http-equiv="expires" content="31 Dec 2008">

代表此文件有效快取在2008.12.31，在此時間前都不會再次請求伺服器下載網頁，而是從快取中讀取。以前一直以為只有js、css、image這些靜態檔案才可以設定快取（需要在nginx、apache配置檔案中修改），現在明白html檔案也可以這樣快取。
3、refresh（間隔重新整理時間）

<meta http-equiv="refresh" content="30">

瀏覽器將會每隔30秒重新整理網頁。用的不多，即使有這樣的需求，我們一般是用jquery的ajax請求來不斷重新整理網頁的區域性內容。
4、set-cookie（設定瀏覽器的cookie，用於標示客戶端身份）

<meta http-equiv="set-cookie" content="3434hgh3vv4433dg3g43">

根本用不到，因為伺服器已經做好了一切了，會自動在http響應中放入cookie，瀏覽器接收到cookie時，會把cookie儲存到本地，下次再次訪問此站點時，會自動把cookie放入http請求的頭部，伺服器根據cookie來標識客戶端身份。

相關推薦

html頭部meta標籤詳解

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="keywords" content="關鍵詞">

meta 標籤 詳解

定義與用法 <meta> 元素可提供有關頁面的元資訊（meta-information），通常用於指定網頁的描述，關鍵詞，檔案的最後修改時間，作者、搜尋引擎和更新頻度及其他元資料。 元資料可以被使用瀏覽器（如何顯示內容或重新載入頁面），搜尋引擎（關鍵詞），或其他 Web

82_h5筆記6_多媒體標籤 +棄用和新增標籤 + meta標籤詳解

一，video標籤 作用: 播放視訊 格式1: <video src=""> </video> video標籤的屬性 src: 告訴video標籤需要播放的視訊地址 autoplay: 告訴video標籤是否需要自動播放視訊

Meta標籤詳解，base網頁元素詳解

您的個人網站即使做得再精彩，在“浩瀚如海”的網路空間中，也如一葉扁舟不易為人發現，如何推廣 個人網站，人們首先想到的方法無外乎以下幾種： ● 在搜尋引擎中登入自己的個人網站 ● 在知名網站加入你個人網站的連結 ● 在論壇中發帖子宣傳你的個人網站 很多人卻忽視了HTML標籤ME

HTML之marquee標籤詳解

marquee語法:     <marquee></marquee> 例項一 <marquee>Hello, World</marquee>marquee常用到的兩個事件： onMouseOut="this.start()"

關於html頭部meta的設定詳解

meta的設定詳解meta作用：定義頁面的說明，關鍵字，最後修改日期，和其他元資料，這些資料將服務於瀏覽器，告訴瀏覽器如何佈局和過載頁面，搜尋引擎和其他網路服務。charset屬性想必大家都知道，設定網頁的編碼格式：<meta charset="UTF-8">co

python學習之網站的編寫（HTML，CSS，JS）（三）----------input系列的標籤詳解及示例程式碼（可上傳到伺服器form標籤）

文章編排，我們首先來講一下input系列的各種內容，然後用一個示例程式碼來清晰的理解其中特定的含義 input系列： 1.輸入文字內容： <input type="text" name="user"/>起個名字易於在伺服器端進行處理 2.輸入密碼內容:

HTML中head標籤內的使用標籤詳解

一、head包含元素簡介 <head>元素包含了所有的頭部標籤元素，在head中你可以插入指令碼（scripts）,樣式檔案（CSS）,及各種meta資訊，可以新增到頭部區域的元素為 <title> 定義網頁的標題(瀏覽器工具欄標題，搜素引擎結果頁面標題，收藏夾標題) <m

HTML-embed標籤詳解(Flash,avi,mp3等視訊音樂檔案活起來)

下來讓我們來仔細看看吧！ Embed （一）、基本語法：embed src=url說明：embed可以用來插入各種多媒體，格式可以是 Midi、Wav、AIFF、AU、MP3等等，      Netscape及新版的IE 都支援。url為音訊或視訊檔案及其路徑，可以是相對

（22）HTML標籤詳解之

圓形：shape="circle"，coords="x,y,z" 這裡的 x 和 y 定義了圓心的位置（"0,0" 是影象左上角的座標），r 是以畫素為單位的圓形半徑。 多邊形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..." 每一對 "x,y" 座標都定

重新認識HTML系列003——base標籤詳解

HTML-base標籤詳解 文件檢視 屬性說明 href 文件中說此屬性是“用於文件中相對URL地址的基礎URL”，不好理解，我們來做幾個實驗。 實驗一 base-href-1.html <!DOCTYPE html

HTML-embed標簽詳解

url ive 頂部 play 居右 col abs unit align HTML-embed標簽詳解 Embed（一）、基本語法：embed src=url說明：embed可以用來插入各種多媒體，格式可以是 Midi、Wav、AIFF、AU、MP3等等， Ne

http頭部信息詳解

http頭部信息打開一個網頁（以淘寶網站為例）就會出現相對應的內容，這些內容是通過怎麽樣的方式展現在我們的面前呢？我們可以通過查看網頁的http頭部信息來獲取相關的內容，如HTTP的請求報文與響應報文等，如下所示 1、General：Request URL:https://img.alicdn.com/tfs

html頭部meta屬性大全——各種奇葩屬性設置大歸類

前端開發 html標簽設置常用通用屬性：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><!-

h5標籤詳解（新增的以及改良的）

文章來自：原始碼線上https://www.shengli.me/h5/62.html      1、progress 標籤：進度條；   2、ol標籤改良：starttype reversed;翻轉排序；   3、dat

shape標籤詳解

前言：最近也是忙的夠嗆，但要總結還是要總結出來，不然過段時間就不想寫部落格了，堅持每月至少出四篇部落格的節奏，無論多忙，堅持。任何一個成功人物的背後總是透露著辛酸與不易。 今天看到一篇文章《世界是公平的：你富不過馬雲，比慘你也未必比的過》，分享給大家，

Struts2標籤 %{ } %{# }詳解

?<%@ taglib prefix="s" uri="/struts-tags" %> 一.Struts2的值棧l結構？ 1.root--結構是List集合 2.context--結果是map集合 可通過jsp頁面<s:debug></s:debug&

Mybatis的mapper檔案中trim標籤詳解

0、背景 parameterType引數型別student是別名，裡面的欄位有id，name，age，sex被封裝成bean物件，跟資料庫中student表中欄位一一對應，以下案例只為一個SQL語句。(初入SSM坑，請多多指教) update student set name='

Android佈局優化之merge標籤詳解

我們都知道View的繪製流程需要經歷measure、layout、draw這個三個過程，如果佈局巢狀層次比較深的話，每一步都需要進行遍歷所有子View進行對應的measure、layout、draw過程，由此就會降低繪製效率，巢狀越多，耗時就越多；其實不光光只會影響view的繪製效率，同

Spring註解標籤詳解@Autowired @Qualifier

@Autowired spring2.1中允許使用者通過@Autowired註解對Bean的屬性變數.屬性Setter方法以及建構函式進行標註,配合AutowiredAnnotationBeanProcessor完成Bean的自動配置。使用@Autowired註釋進行byType注入。 在a