HTML5與CSS3

html5:語義化的結(jié)構(gòu)標(biāo)簽,"非革命性的發(fā)展"

html5的Doctype聲明:
<!doctype html>
<!doctype html system "about:legacy-compat">

html5指定文件中的字符編碼
<meta charset="utf-8">

html5可以省略標(biāo)記的元素:
1>不允許寫結(jié)束標(biāo)記的元素有:
area,base,br,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr
2>可以省略結(jié)束標(biāo)記的元素有:li,dt,dd,p,rt,rp,optgroup,option,colgroup,thead,tbody,tfoot,tr,td,th
3>可以省略全部標(biāo)記的元素有:
html,head,body,colgroup,tbody

html5對于具有boolean值的屬性
對于具有boolean值的屬性，例如disabled與readonly等,當(dāng)只寫屬性而不指定屬性值時，表示屬性值為true,不使用該屬性則默認(rèn)為false

html5省略引號
當(dāng)屬性值不包括空字符串，"<",">","=",單引號,雙引號等字符時，屬性值兩邊的引號可以省略.如下:
<input type=text >

html5新增的結(jié)構(gòu)元素

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名與空間、雅安服務(wù)器托管、營銷軟件、網(wǎng)站建設(shè)、中方網(wǎng)站維護(hù)、網(wǎng)站推廣。

1>section元素表示頁面中的一個內(nèi)容區(qū)塊，比如章節(jié)，或頁面中的其他部分，可以與h2,h3,h4,h5等元素結(jié)合使用，標(biāo)示文檔結(jié)構(gòu)
<section>...</section>
2>article元素,表示頁面中的一塊與上下文不相關(guān)的獨(dú)立的內(nèi)容，譬如博客中的一篇文章或報(bào)紙中的一篇文章
<article>...</article>
3>aside元素
aside元素表示article元素的內(nèi)容之外的，與article元素的內(nèi)容相關(guān)的輔助信息.
<aside>...</aside>
4>header元素表示頁面中的一個內(nèi)容區(qū)塊或整個頁面的標(biāo)題
<header>...</header>
5>hgroup元素,用于對整個頁面或頁面中的一個內(nèi)容區(qū)塊的標(biāo)題進(jìn)行組合.
<hgroup>...</hgroup>
6>footer元素,表示整個頁面或頁面中的一個內(nèi)容區(qū)塊的腳注。一般來說，它會包含創(chuàng)作者的姓名，創(chuàng)作日期以及聯(lián)系信息
<footer>...</footer>
7>nav元素表示頁面中導(dǎo)航鏈接的部分
<nav></nav>
(html4中代碼為:)
<ul></ul>
8>figure元素表示一段獨(dú)立的流內(nèi)容，一般表示文檔文體流內(nèi)容中的一個獨(dú)立單元，使用figcaption元素為figure元素組添加標(biāo)題
<figure>
<figcation>PRC</figcaption>
<p>The People's Republic of China was born in 1949...
</figure>
在html4中代碼示例:
<dl>
<h2>PRC</h2>
<p>The People's Republic of China was born in 1949...</p>
</dl>

除了結(jié)構(gòu)元素外，html5中新增的其它元素

1>video元素,定義視頻，比如電影片段或其他視頻流
<video src="movie.ogg" controls="controls">
video元素
</video>
2>audio元素定義音頻，比如音樂或其他音頻流
<audio src="someaudio.wav">
audio元素
</audio>
3>embed元素,用來插入各種多媒體，格式是Midi,Wav,AIFF,AU,MP3等
<embed src="horse.wav" />
4>mark元素,主要用來在視覺上向用戶呈現(xiàn)出那些需要突出顯示或高亮顯示的文字。其典型應(yīng)用就是在搜索結(jié)果中向用戶高亮顯示搜索關(guān)鍵詞.
<mark></mark>
5>progress元素,表示運(yùn)行中的進(jìn)程，可以使用progress元素來顯示JavaScript中耗費(fèi)時間的函數(shù)的進(jìn)程
<progress>
<span id="objprogress">85</span>%
</progress>
6>time元素，表示日期或時間，也可以同時表示兩者
<time></time>
7>ruby元素,表示ruby注釋(中文注意或字符)
<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>
8>rt元素,表示字符(中文注音或字符)的解釋或發(fā)音
<ruby>
漢 <rt> ㄏㄢˋ </rt>
</ruby>
9>rp元素在ruby注釋中使得，以定義不支持ruby元素的瀏覽器所顯示的內(nèi)容
<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>
10>wbr元素,表示軟換行.wbr元素與br元素的區(qū)別是:br元素表示此處必須換行;而wbr元素的意思是瀏覽器窗口或父級窗口的寬度足夠?qū)挄r（沒必要換行時）,不進(jìn)行換行，而當(dāng)寬度不夠時，主動在此處進(jìn)行換行.wbr元素好像對字符型的語言作用很大，但是對于中文，貌似沒多大用處.
<p>To learn AJAX,you must be fmi<wbr>liar with the XMLHttp</wbr>
Request Object.</p>
11>canvas元素,表示圖形，比如圖表和其他圖像。這個元素本身沒有行為，僅提供一塊畫布，但它把一個繪圖API展現(xiàn)給客戶端JavaScript,以使腳本能夠把想繪制的東西繪制到這塊畫布上
<canvas id=myCanvas width=200 height=200></canvas>
12>command元素，表示命令按鈕，比如單選按鈕，復(fù)選按鈕
<command label="cut">
13>details元素,表示用戶要求得到并且可以得到的細(xì)節(jié)信息。它可以與summary元素配合使用。summary元素提供標(biāo)題或圖例。標(biāo)題是可見的，用戶點(diǎn)擊標(biāo)題時，會顯示出細(xì)節(jié)信息。summary元素應(yīng)該是details元素的第一個子元素
<details>
<summary>HTML 5</summary>
This document teaches you eveything you have to learn about HTML 5
</details>
14>datalist元素,表示可選數(shù)據(jù)的列表，與input元素配合使用，可以制作出輸入值的下拉列表
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
15>datagrid元素，表示可選數(shù)據(jù)的列表，它以樹形列表的形式來顯示
<datagrid></datagrid>
16>keygen元素,表示生成密鑰
<keygen>
17>output元素,表示不同類型的輸出，比如腳本的輸出
<output></output>
18>source元素,為媒介元素(比如<video>和<audio>)定義媒介資源.
<source>
19>menu元素,表示菜單列表，當(dāng)希望列出表單控件時使用該標(biāo)簽
<menu>
<li><input type=checkbox />Red></li>
<li><input type=checkbox />Blue</li>
</menu>

新增的input元素的類型

1>email類型,表示必須輸入E-mail地址的文本輸入框
2>url類型，表示必須輸入U(xiǎn)RL地址的文本輸入框
3>range類型，表示必須輸入一定范圍內(nèi)數(shù)字值的文本輸入框
4>Date Pickers擁有多個可供選取日期和時間的新型輸入文本框
date選取日，月，年
month選取月、年
week選取周和年
time選取時間(小時和分鐘)
datetime選取時間、日、月、年(UTC時間)
datetime-local選取時間、日、月、年(本地時間)

廢除的元素

1>能使用css替代的元素
對于basefont,big,center,font,s,strike,tt,u這些元素，由于它們的功能都是純粹為畫面展示服務(wù)的，而HTML5中提倡把畫面展示×××放在css樣式表中統(tǒng)一編輯，所以將這些元素廢除了
2>不再使用frame框架,只支持iframe框架，或者用服務(wù)器方創(chuàng)建的由多個頁面組成的復(fù)合頁面的形式，
3>只有部分瀏覽器支持的元素,對開applet,bgsound,blink,marquee等元素，由于只有部分瀏覽器支持這些元素，特別是bgsound元素以及marquee元素，只被Internet Explorer所支持，所以在HTML5中被廢除,其中applet元素可由embed元素或object元素替代,bgsound元素可由audio元素替代,marquee可以由JavaScript編程的方式所替代
4>其他被廢除的元素,
1.rb元素使用ruby元素替代
2.acronym,使用abbr元素替代
3.dir元素，使用ul元素替代
4.isindex,使用form元素與input元素相結(jié)合的方式替代
5.listing元素,使用pre元素替代
6.xmp元素，使用code元素替代
7.nextid元素,使用GUIDS替代
8.plaintext元素,使用"text/plian" MIME類型替代

新增的屬性和廢除的屬性

1新增的屬性
1.表單相關(guān)的屬性
1>可以對input(type=text),select,textarea與button元素指定autofocus屬性,它以指定屬性的方式讓元素在畫面打開時自動獲得焦點(diǎn)
2>可以對input(type=text) 與textarea元素指定的placeholder屬性，它會對用戶的輸入進(jìn)行提示，提示用戶可以輸入的內(nèi)容
3>可以對input,output,select,textarea,button與feildset指定from屬性,聲明它屬于哪個表單，然后將其放置在頁面上任何位置，而不是表單之內(nèi)
4>可以對input(type=text)與textarea元素指定required屬性,該屬性表示在用戶提交的時候進(jìn)行檢查，檢查該元素內(nèi)一定要有輸入內(nèi)容
5>為input元素增加了幾個新的屬性:autocomplete,min,max,multiple,pattern與step
6>為input元素與button元素增加了新屬性formaction,formenctype,formmethod,formnovalidate與formtarget,他們可以重載from元素的action,enctype,method,novalidate與target屬性.為fieldset元素增加了disabled屬性,可以把它的子元素設(shè)為disabled(無效狀態(tài))
7>為input元素、button元素、form元素增加了novalidate屬性，該屬性可以取消提交時進(jìn)行的有關(guān)檢查，表單可以被無條件地提交
2.鏈接相關(guān)的屬性
1>為a與area元素增加了media屬性，該屬性規(guī)定目標(biāo)URL是為什么類型的媒介/設(shè)備進(jìn)行優(yōu)化的，只能在href屬性存在時使用
2>為area元素增加了hreflang屬性與rel屬性,以保持與a元素、link元素的一致性
3>為link元素增加了sizes屬性。該屬性可以與icon元素結(jié)合使用(通過rel屬性),該屬性指定關(guān)聯(lián)圖標(biāo)(icon元素)的大小
4>為base元素增加了target屬性，主要目的是保持與a元素的一致性
3.其他屬性
1>為ol元素增加了reversed屬性,
2>meta元素增加charset屬性
3>為menu元素增加了兩個新的屬性,type與label.label為菜單定義一個可見的標(biāo)注，type屬性讓菜單可以以上下文菜單，工具條與列表菜單的三種形式出現(xiàn)
4>為style元素增加scoped屬性,用來規(guī)定樣式的作用范圍
5>為script元素增加了async屬性，定義腳本是否異步執(zhí)行
6>為html元素增加manifest,開發(fā)離線Web應(yīng)用程序時它與API結(jié)合使用，定義一個URL，在這個URL上描述文檔的緩存信息
7>為iframe元素增加三個屬性sandbox,seamless與srcdoc,用來提高頁面安全性，防止不信任的Web頁面執(zhí)行某些操作

四.全局屬性

HTML5新增了一個"全局屬性"的概念,指可以對任何元素都使用的屬性.
一>.contentEditable屬性
該屬性值是一個布爾值屬性,可以被指定為true或false
二>.designMode屬性用來指定整個頁面是否可編輯
該屬性只能在JavaScript腳本里被修改。該屬性有兩個值 "on"和"off".
修改方法: document.designMode="on"
三>.hidden屬性,在HTML5中，所有的元素都有一個hidden屬性.該屬性類似于input元素中的hidden元素.
四>.spellcheck屬性是HTML5針對input元素(type=text)與textarea這兩個文本輸入框提供的一個新屬性,它的功能為對用戶輸入的文本內(nèi)容進(jìn)行拼寫和語法檢查。它書寫在一個特殊的地方，就是必須明確聲明屬性值為true或false,書寫方法如下
<textarea spellcheck="true">
<input type="text" spellcheck=false >
五>.tabindex屬性,是開發(fā)中的一個基本概念，當(dāng)不斷敲擊Tab鍵讓窗口或頁面中的控件獲得焦點(diǎn),對窗口或頁面中的所有控件進(jìn)行遍歷的時候，每一個控件的tabindex表示該控件是第幾個被訪問到的.
如果，將元素的tabindex值設(shè)置為負(fù)數(shù)(如-1)，則當(dāng)按下Tab鍵時該元素就不能獲得焦點(diǎn)了,但仍然可通過編程的方式讓該元素獲得焦點(diǎn).

第三章,HTML5的主體結(jié)構(gòu)元素

一.新增的主體結(jié)構(gòu)元素
1>article元素代表文檔，頁面或應(yīng)用程序中獨(dú)立的、完整的、可以獨(dú)自被外部引用的內(nèi)容。它可以是一篇博客或報(bào)刊中的文章、一篇論壇帖子、一段用戶評論或獨(dú)立的插件，或其他任何獨(dú)立的內(nèi)容.除了內(nèi)容部分，一個article元素通常有它自己的標(biāo)題(一般放在一個header元素里面),有時還有自己的腳注
e.g:
<article>
<h2>My Fruit Spinner</h2>
<object>
<param name="allowFullScreen" value="true">
<embed src="#" width=600 height=395></embed>
</object>
</article>
2>section元素用于對網(wǎng)站或應(yīng)用程序中頁面上的內(nèi)容進(jìn)行分塊。一個section元素通常由內(nèi)容及標(biāo)題組成(注意:標(biāo)題部分位于它的內(nèi)部，而不是它的前面)。但section元素并非一個普通的容器元素,如果一個容器需要被直接定義樣式或通過腳本定義行為時，推薦使用div而非section元素
<section>
<h2>蘋果</h2>
<p><b>蘋果</b>.植物類水果,多次花果...("蘋果" 文章正文)</p>
</section>
section元素沒有標(biāo)題是不合理的，但是nav元素或aside元素沒有標(biāo)題是合理的
最后，關(guān)于section元素的使用禁忌，總結(jié)如下:
(1)不要將section元素用作設(shè)置樣式的頁面容器,那是div元素的工作
(2)如果article元素、aside元素或nav元素更符合使用條件,不要使用section元素
(3)不要為沒有標(biāo)題的內(nèi)容區(qū)塊使用section元素
3>nav元素,是一個可以用作頁面導(dǎo)航的鏈接組，其中的導(dǎo)航元素鏈接到其他頁面或當(dāng)前頁面的其他部分。并不是所有的鏈接組都要被放進(jìn)nav元素，只需要將主要的、基本的鏈接組放進(jìn)nav元素即可.
nav元素可用于以下場合
(1)傳統(tǒng)導(dǎo)航條
(2)側(cè)邊欄導(dǎo)航條
(3)頁內(nèi)導(dǎo)航,頁內(nèi)導(dǎo)航的作用是在本頁面的幾個主要的組成部分之間進(jìn)行跳轉(zhuǎn)
(4)翻頁操作
注意:在html5中不要用menu元素代替nav元素，menu元素是用在一系列發(fā)出命令的菜單上的，是一種交互性的元素，常使用在Web應(yīng)用程序中
4>aside元素用來表示當(dāng)前頁面或文章的附屬信息部分，它可以包含當(dāng)前頁面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、導(dǎo)航條，以及其他類似的有別于主要內(nèi)容的部分
5>time元素與微格式,微格式是一種利用html的class屬性來對網(wǎng)頁添加附加信息的方法，time元素明確地對機(jī)器的日期和時間進(jìn)行編碼，并且以讓人易讀的方式來展現(xiàn)它
<time datetime="2010-11-13">2010年11月13日</time>
編碼時機(jī)器讀到的部分在datetime屬性里，而元素開始標(biāo)記和結(jié)束標(biāo)記中間的部分則顯示在網(wǎng)頁上.datetime屬性中日期與時間之間要用"T"文字分隔
6>pubdate屬性是一個可選的、boolean值的屬性，它可以用到article元素中的time元素上，意思是time元素代表了文章(article元素的內(nèi)容)或整個網(wǎng)頁的發(fā)布日期

二.新增的非主體結(jié)構(gòu)元素
1>header元素是一種具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素，通常用來旋轉(zhuǎn)整個頁面或頁面內(nèi)的一個內(nèi)容區(qū)塊的標(biāo)題，但也可以包含其他內(nèi)容，例如數(shù)據(jù)表格、搜索表單或相關(guān)的logo圖片
header元素通常包括至少一個heading元素(h2-h7),或包括hgroup元素，或包括其他元素(table或form),還可以包括nav元素
2>hgroup元素是將標(biāo)題及子標(biāo)題進(jìn)行分組的元素。通常會將h2-h7元素進(jìn)行分組。譬如一個內(nèi)容區(qū)塊的標(biāo)題及其子標(biāo)題算一組
<article>
<header>
<hgroup>
<h2>文章標(biāo)題</h2>
<h3>文章子標(biāo)題</h3>
<p><time datetime="2010-03-20">2010年10月29日</time></p>
</hgroup>
</header>
</article>
3>footer元素可以作為其上層父級內(nèi)容區(qū)塊或是一個根區(qū)塊的腳注。footer通常包括其相關(guān)區(qū)塊的腳注信息，如作者、相關(guān)閱讀鏈接及版權(quán)信息等
<section>
<h3>分段內(nèi)容</h3>
<p>內(nèi)容...</p>
<footer>
分段內(nèi)容的腳注...
</footer>
</section>
4>address元素用來在文檔中呈現(xiàn)聯(lián)系信息，包括文檔作者或文檔維護(hù)者的名字、他們的網(wǎng)站鏈接、電子愚笨、真實(shí)地址、電話號碼等。
<footer>
<div>
<address>
<a title="文章作者:陸毅"
陸毅
</a>
發(fā)表于<time datetime="2010-10-04">2010年10月4日</time>
</address>
</div>
</footer>

三.HTML5結(jié)構(gòu)

1>大綱，簡單來說是文檔中各內(nèi)容區(qū)塊的結(jié)構(gòu)編排。內(nèi)容區(qū)塊可以使用標(biāo)題元素(h2-h7)來展示各級內(nèi)容區(qū)塊的標(biāo)題。綜合運(yùn)用各級內(nèi)容區(qū)塊的標(biāo)題創(chuàng)建好文檔的目錄后，該目錄就是一個大綱了
關(guān)于內(nèi)容區(qū)塊的編排，可分為"顯示編排" 與"隱匿編排"兩種方式
(1)顯式編排批明確使用section等元素創(chuàng)建文檔結(jié)構(gòu)，在每個內(nèi)容區(qū)塊內(nèi)使用標(biāo)題(h2-h7,hgroup等)
(2)隱式編排內(nèi)容區(qū)塊,指不明確使用section等元素，而是根據(jù)頁面中所書寫的各級標(biāo)題(h2-h7,hgroup)等把內(nèi)容區(qū)塊自動創(chuàng)建出來。因?yàn)閔tml5分析器只要看到書寫了某個級別的標(biāo)題，就會判斷存在相應(yīng)的內(nèi)容區(qū)塊。
(3)標(biāo)題分級,h2級別最高,h7級別最低
為了使用文檔結(jié)構(gòu)清晰，請盡量使用顯式編排
(4)不同的內(nèi)容區(qū)塊可以使用相同級別的標(biāo)題
2>對新的結(jié)構(gòu)元素使用樣式
我們需要使用css追加如下聲明,
(1)
追加block聲明
article,aside,dialog,figure,footer,header,legend,nav,section{display:block;}
然后就可正常使用樣式
nav{float:left;width:20%}
article{float:right;width:79%}
(2)IE8及之前的瀏覽器不支持用css的方法使用這些尚未支持的結(jié)構(gòu)元素，需要使用JavaScript腳本，如下所示:
<script>
document.createElement("header");
document.createElement("nav");
document.createElement("article");
document.createElement("footer");
</script>
3>article元素的樣式
一個網(wǎng)頁中可能有多個獨(dú)立的article元素，每一個article元素都允許有自己的標(biāo)題與腳注,并允許對自己的從屬元素單獨(dú)使用樣式。
如:
header{display:block;color:red;text-align:right;}
article header{color:blue;text-align;center}

文章題目：HTML5與CSS3
分享路徑：http://chinadenli.net/article12/gigidc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、品牌網(wǎng)站建設(shè)、服務(wù)器托管、網(wǎng)站建設(shè)、定制網(wǎng)站、網(wǎng)站內(nèi)鏈

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

HTML5與CSS3