css與html相關標籤

meta標籤：

META標籤是HTML語言HEAD區的一個輔助性標籤，它位於HTML文檔頭部的標記和 標題標記之間，它提供用戶不可見的信息。meta標籤一般用來爲搜索引擎robots定義頁面主題，或者是定義用戶瀏覽器上的cookie；它能夠用於鑑別做者，設定頁面格式，標註內容提要和關鍵字；還能夠設置頁面使其能夠根據你定義的時間間隔刷新本身，以及設置RASC內容等級，等等。

META標籤分兩大部分：HTTP標題信息（HTTP-EQUIV）和頁面描述信息（NAME）。

HTTP-EQUIV

HTTP-EQUIV相似於HTTP的頭部協議，它迴應給瀏覽器一些有用的信息，以幫助正確和精確地顯示網頁內容。經常使用的HTTP-EQUIV類型有：

一、Content-Type和Content-Language （顯示字符集的設定）

說明：設定頁面使用的字符集，用以說明主頁製做所使用的文字已經語言，瀏覽器會根據此來調用相應的字符集顯示page內容。

用法：<Meta http-equiv="Content-Type" Content="text/html; Charset=utf-8">

<Meta http-equiv="Content-Language" Content="zh-CN">

注意：　該META標籤訂義了HTML頁面所使用的字符集爲utf-8，就萬國碼。若是將其中的「charset=utf-8」替換成「BIG5」，則該頁面所用的字符集就是繁體中文Big5碼。當你瀏覽一些國外的站點時，IE瀏覽器會提示你要正確顯示該頁面須要下載xx語支持。這個功能就是經過讀取HTML頁面META標籤的Content-Type屬性而得知須要使用哪一種字符集顯示該頁面的。若是系統裏沒有裝相應的字符集，則IE就提示下載。其餘的語言也對應不一樣的charset，好比日文的字符集是「iso-2022-jp 」，韓文的是「ks_c_5601」。

二、Refresh （刷新）

說明：讓網頁多長時間（秒）刷新本身，或在多長時間後讓網頁自動連接到其它網頁。

用法：<Meta http-equiv="Refresh" Content="30">

<Meta http-equiv="Refresh" Content="5; Url=http://www.xia8.net">

注意：其中的5是指停留5秒鐘後自動刷新到URL網址。

三、Expires （期限）

說明：指定網頁在緩存中的過時時間，一旦網頁過時，必須到服務器上從新調閱。

用法：<Meta http-equiv="Expires" Content="0">

<Meta http-equiv="Expires" Content="Wed, 26 Feb 1997 08:21:57 GMT">

注意：必須使用GMT的時間格式，或直接設爲0（數字表示多少時間後過時）。

四、Pragma （cach模式）

說明：禁止瀏覽器從本地機的緩存中調閱頁面內容。

用法：

注意：網頁不保存在緩存中，每次訪問都刷新頁面。這樣設定，訪問者將沒法脫機瀏覽。

五、Set-Cookie （cookie設定）

說明：瀏覽器訪問某個頁面時會將它存在緩存中，下次再次訪問時就可從緩存中讀取，以提升速度。當你但願訪問者每次都刷新你廣告的圖標，或每次都刷新你的計數器，就要禁用緩存了。一般HTML文件沒有必要禁用緩存，對於ASP等頁面，就可使用禁用緩存，由於每次看到的頁面都是在服務器動態生成的，緩存就失去意義。若是網頁過時，那麼存盤的cookie將被刪除。

用法：<Meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Wednesday,

21-Oct-98 16:14:21 GMT; path=/">

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

六、Window-target （顯示窗口的設定）

說明：強制頁面在當前窗口以獨立頁面顯示。

用法：<Meta http-equiv="Widow-target" Content="_top">

注意：這個屬性是用來防止別人在框架裏調用你的頁面。Content選項：_blank、_top、_self、_parent.

七、Pics-label （網頁RSAC等級評定）

說明：在IE的Internet選項中有一項內容設置，能夠防止瀏覽一些受限制的網站，而網站的限制級別就是經過該參數來設置的。

用法：：<META http-equiv="Pics-label" Contect="(PICS－1.1'http://www.rsac.org/ratingsv01.html'I gen comment 'RSACi North America Sever' by 'inet@microsoft.com'for 'http://www.microsoft.com' on '1997.06.30T14:21－0500' r(n0 s0 v0 l0))">

注意：不要將級別設置的過高。RSAC的評估系統提供了一種用來評價Web站點內容的標準。用戶能夠設置Microsoft Internet Explorer（IE3.0以上）來排除包含有×××和暴力內容的站點。上面這個例子中的HTML取自Microsoft的主頁。代碼中的（n 0 s 0 v 0 l 0）表示該站點不包含不健康內容。級別的評定是由RSAC，即美國娛樂委員會的評級機構評定的，若是你想進一步瞭解RSAC評估系統的等級內容，或者你須要評價本身的網站，能夠訪問RSAC的站點：http://www.rsac.org/.

八、Page-Enter、Page-Exit （進入與退出）

說明：這個是頁面被載入和調出時的一些特效。

用法：<Meta http-equiv="Page-Enter" Content="blendTrans(Duration=0.5)">

<Meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.5)">

2、

name的content指定實際內容。如：若是指定level(等級)爲value(值)，則Content多是beginner(初級)、intermediate(中級)、advanced(高級)。

一、Keywords (關鍵字)

說明：爲搜索引擎提供的關鍵字列表轉自環 球 網校edu24ol.com轉自環 球 網校edu24ol.com轉自環 球 網校edu24ol.com

用法：<Meta name="Keywords" Content="關鍵詞1,關鍵詞2，關鍵詞3,關鍵詞4,……">

注意：各關鍵詞間用英文逗號「,」隔開。META的一般用處是指定搜索引擎用來提升搜索質量的關鍵詞。當數個META元素提供文檔語言從屬信息時，搜索引擎會使用lang特性來過濾並經過用戶的語言優先參照來顯示搜索結果。例如：

<Meta name="Kyewords" Lang="EN" Content="vacation,greece,sunshine">

<Meta name="Kyewords" Lang="FR" Content="vacances,grè:ce,soleil">

二、Description (簡介)

說明：Description用來告訴搜索引擎你的網站主要內容。

用法：<Meta name="Description" Content="你網頁的簡述">

注意：

三、Robots (機器人嚮導)轉自環 球 網校edu24ol.com轉自環 球 網校edu24ol.com轉自環 球 網校edu24ol.com

說明：Robots用來告訴搜索機器人哪些頁面須要索引，哪些頁面不須要索引。Content的參數有all、none、index、noindex、follow、nofollow。默認是all。

用法：<Meta name="Robots" Content="All|None|Index|Noindex|Follow|Nofollow">

注意：許多搜索引擎都經過放出robot/spider搜索來登陸網站，這些robot/spider就要用到meta元素的一些特性來決定怎樣登陸。

all：文件將被檢索，且頁面上的連接能夠被查詢；

none：文件將不被檢索，且頁面上的連接不能夠被查詢；(和 "noindex, no follow" 起相同做用)

index：文件將被檢索；（讓robot/spider登陸）

follow：頁面上的連接能夠被查詢；轉自環 球 網校edu24ol.com轉自環 球 網校edu24ol.com轉自環 球 網校edu24ol.com

noindex：文件將不被檢索，但頁面上的連接能夠被查詢；(不讓robot/spider登陸)

nofollow：文件將不被檢索，頁面上的連接能夠被查詢。(不讓robot/spider順着此頁的鏈接往下探找)

四、Author (做者)

說明：標註網頁的做者或製做組

用法：<Meta name="Author" Content="張三，abc@sina.com">

注意：Content能夠是：你或你的製做組的名字,或Email

五、Copyright (版權)

說明：標註版權轉自環 球 網校edu24ol.com轉自環 球 網校edu24ol.com轉自環 球 網校edu24ol.com

用法：<Meta name="Copyright" Content="本頁版權歸Zerospace全部。All Rights Reserved">

注意：

六、Generator (編輯器)

說明：編輯器的說明

用法：<Meta name="Generator" Content="PCDATA|FrontPage|">

注意：Content="你所用編輯器"

七、revisit-after (重訪)

說明：

用法：<META name="revisit-after" CONTENT="7 days" >

注意：

Head中的其它一些用法

一、scheme (方案)

說明：scheme can be used when name is used to specify how the value of content shouldbe interpreted.

用法：<meta scheme="ISBN" name="identifier" content="0-14-043205-1" />

注意：

二、Link (連接)

說明：連接到文件

用法：<Link href="soim.ico" rel="Shortcut Icon">

注意：不少網站若是你把她保存在收件夾中後，會發現它連帶着一個小圖標，若是再次點擊進入以後還會發現地址欄中也有個小圖標。如今只要在你的頁頭加上這段話，就能輕鬆實現這一功能。<LINK> 用來將目前文件與其它 URL 做連結，但不會有連結按鈕，用於 <HEAD> 標記間， 格式以下：

<link href="URL" rel="relationship">

<link href="URL" rev="relationship">

三、Base (基連接)

用法：<Base href="http://www.xia8.net/" target="_blank">

注意：你網頁上的全部相對路徑在連接時都將在前面加上「http://www.cn8cn.com/」。其中target="_blank"是連接文件在新的窗口中打開，你能夠作其餘設置。將「_blank」改成「_parent」是連接文件將在當前窗口的父級窗口中打開；改成「_self」連接文件在當前窗口（幀）中打開；改成「_top」連接文件全屏顯示。

以上是META標籤的一些基本用法，其中最重要的就是：Keywords和Description的設定。爲何呢？道理很簡單，這兩個語句可讓搜索引擎能準確的發現你，吸引更多的人訪問你的站點!根據如今流行搜索引擎(Google，Lycos，AltaVista等)的工做原理，搜索引擎先派機器人自動在WWW上搜索，當發現新的網站時，便於檢索頁面中的Keywords和Description，並將其加入到本身的數據庫，而後再根據關鍵詞的密度將網站排序。

由此看來，咱們必須記住添加Keywords和Description的META標籤，並儘量寫好關鍵字和簡介。不然，
後果就會是：

若是你的頁面中根本沒有Keywords和Description的META標籤，那麼機器人是沒法將你的站點加入數據庫，網友也就不可能搜索到你的站點。

若是你的關鍵字選的很差，關鍵字的密度不高，被排列在幾十甚至幾百萬個站點的後面被點擊的可能性也是很是小的。

寫好Keywords(關鍵字)要注意如下幾點： 轉自環 球 網校edu24ol.com轉自環 球 網校edu24ol.com轉自環 球 網校edu24ol.com

不要用常見詞彙。例如www、homepage、net、web等。

不要用形容詞，副詞。例如最好的，最大的等。

不要用籠統的詞彙，要儘可能精確。例如「愛立信手機」，改用「T28SC」會更好。

div標籤與span標籤和laber標籤的區別和用法

div：指定渲染HTML的容器

span：指定內嵌文本容器

通俗地講就是若是裏面還有其餘標籤的時候就用div，若是裏面只有文本就應該用spandiv是一個塊級元素，用來爲HTML文檔內大塊的內容提供結構和背景span是行內元素，在行內定義一個區域（也就是一行內能夠被<span>劃分好幾個區域）div標籤中能夠鑲嵌span標籤，（div能夠看作是一個大容器，span是一個小容器，大容器固然能夠放下一個小容器啦）label標籤主要用於綁定一個表單元素, 當點擊label標籤的時候, 被綁定的表單元素就會得到輸入焦點span則是對普通的文本的一種容器。

Video標籤的使用

Video標籤含有src、poster、preload、autoplay、loop、controls、width、height等幾個屬性， 以及一個內部使用的標籤<source>。Video標籤內除了能夠包含<source>標籤外，還能夠包含當指定的視頻都不能 播放時，返回的內容。

(1) src屬性和poster屬性

你能想象src屬性是用來幹啥的。跟<img>標籤的同樣，這個屬性用於指定視頻的地址。而poster屬性用於指定一張圖片，在當前視頻數據無效時顯示（預覽圖）。視頻數據無效多是視頻正在加載，多是視頻地址錯誤等等。

< video width="658" height="444" src="http://www.youname.com/p_w_picpaths/first.mp4" poster="http://www.youname.com/p_w_picpaths/first.png" autoplay="autoplay"></ video >

(2) preload屬性

這個屬性也能經過名字瞭解用處，此屬性用於定義視頻是否預加載。屬性有三個可選擇的值：none、metadata、auto。若是不使用此屬性，默認爲auto

< video width="658" height="444" src="http://www.youname.com/p_w_picpaths/first.mp4" poster="http://www.youname.com/p_w_picpaths/first.png" autoplay="autoplay" preload="none"></ video >

None：不進行預加載。使用此屬性值，多是頁面製做者認爲用戶不指望此視頻，或者減小HTTP請求。

Metadata：部分預加載。使用此屬性值，表明頁面製做者認爲用戶不指望此視頻，但爲用戶提供一些元數據（包括尺寸，第一幀，曲目列表，持續時間等等）。

Auto：所有預加載。

(3) autoplay屬性

又是一個看名字知道用處的屬性。Autoplay屬性用於設置視頻是否自動播放，是一個布爾屬性。當出現時，表示自動播放，去掉是表示不自動播放。

< video width="658" height="444" src="http://www.youname.com/p_w_picpaths/first.mp4" poster="http://www.youname.com/p_w_picpaths/first.png" autoplay="autoplay" preload="none"></ video >

注意，HTML中布爾屬性的值不是true和false。正確的用法是，在標籤中使用此屬性表示true，此時屬性要麼沒有值，要麼其值恆等於他的名字 （此處，自動播放爲<video autoplay />或者<video autoplay=」autoplay」 />）；而在標籤中不使用此屬性表示false（此處不進行自動播放爲<video />）。

(4) loop屬性

< video width="658" height="444" src="http://www.youname.com/p_w_picpaths/first.mp4" poster="http://www.youname.com/p_w_picpaths/first.png" autoplay="autoplay" loop="loop"></ video >

一目瞭然，loop屬性用於指定視頻是否循環播放，一樣是一個布爾屬性。

(5) controls屬性

< video width="658" height="444" src="http://www.youname.com/p_w_picpaths/first.mp4" poster="http://www.youname.com/p_w_picpaths/first.png" autoplay="autoplay" preload="none" controls="controls"></ video >

Controls屬性用於向瀏覽器指明頁面製做者沒有使用腳本生成播放控制器，須要瀏覽器啓用自己的播放控制欄。

控制欄須包括播放暫停控制，播放進度控制，音量控制等等。

每一個瀏覽器默認的播放控制欄在界面上不同。因爲我瀏覽器的詭異問題，Firefox和Safari的Video標籤不正常，因此這兩個只能在網上找截圖了。

(6) width屬性和height屬性

屬於標籤的通用屬性了，這個不用多說。

(7) source標籤

< video width="658" height="444" poster="http://www.youname.com/p_w_picpaths/first.png" autoplay="autoplay" preload="none" controls="controls">< source src="http://www.youname.com/p_w_picpaths/first.ogv" />< source src="http://www.youname.com/p_w_picpaths/first.ogg" /></ video >

 Source標籤用於給媒體（由於audio標籤一樣能夠包含此標籤，因此這兒用媒體，而不是視頻）指定多個可選擇的（瀏覽器最終只能選一個）文件地址，且只能在媒體標籤沒有使用src屬性時使用。

瀏覽器按source標籤的順序檢測標籤指定的視頻是否可以播放（多是視頻格式不支持，視頻不存在等等），若是不能播放，換下一個。此方法多用於兼容不一樣的瀏覽器。Source標籤自己不表明任何含義，不能單獨出現。

此標籤包含src、type、media三個屬性。

src屬性：用於指定媒體的地址，和video標籤的同樣。

Type屬性：用於說明src屬性指定媒體的類型，幫助瀏覽器在獲取媒體前判斷是否支持此類別的媒體格式。

Media屬性：用於說明媒體在何種媒介中使用，不設置時默認值爲all，表示支持全部媒介。你想到<style>標籤的media屬性了麼？同樣同樣同樣的。

(8) 一個完整的例子

< video width="658" height="444" poster="http://www.youname.com/p_w_picpaths/first.png" autoplay="autoplay" preload="none" controls="controls">< source src="http://www.youname.com/p_w_picpaths/first.ogv" />< source src="http://www.youname.com/p_w_picpaths/first.ogg" /></ video >

 

這段代碼在頁面中定義了一個視頻，此視頻的預覽圖爲poster的屬性值，顯示瀏覽器的默認媒體控制欄，預加載視頻的元數據，循環播放，寬度爲900像素，高度爲240像素。

第一選擇視頻地址爲第一個source標籤的src屬性值，視頻類別爲Ogg視頻，視頻編碼譯碼器爲Theora，音頻編碼譯碼器爲Vorbis，播放媒 介爲顯示器；第二選擇視頻地址再也不累述。若是你還要兼容IE的話，能夠在最後一個source標籤後再加上Flash播放器的標籤集，或者使用一點 JavaScript代碼。