html5:語義化的結構標籤,"非革命性的發展"
html5的Doctype聲明:
<!doctype html>
<!doctype html system "about:legacy-compat">
html5指定文件中的字符編碼
<meta charset="utf-8">
html5可以省略標記的元素:
1>不允許寫結束標記的元素有:
area,base,br,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr
2>可以省略結束標記的元素有:li,dt,dd,p,rt,rp,optgroup,option,colgroup,thead,tbody,tfoot,tr,td,th
3>可以省略全部標記的元素有:
html,head,body,colgroup,tbody
html5對於具有boolean值的屬性
對於具有boolean值的屬性，例如disabled與readonly等,當只寫屬性而不指定屬性值時，表示屬性值爲true,不使用該屬性則默認爲false
html5省略引號
當屬性值不包括空字符串，"<",">","=",單引號,雙引號等字符時，屬性值兩邊的引號可以省略.如下:
<input type=text >
html5新增的結構元素
1>section元素表示頁面中的一個內容區塊，比如章節，或頁面中的其他部分，可以與h1,h2,h3,h4等元素結合使用，標示文檔結構
<section>...</section>
2>article元素,表示頁面中的一塊與上下文不相關的獨立的內容，譬如博客中的一篇文章或報紙中的一篇文章
<article>...</article>
3>aside元素
aside元素表示article元素的內容之外的，與article元素的內容相關的輔助信息.
<aside>...</aside>
4>header元素表示頁面中的一個內容區塊或整個頁面的標題
<header>...</header>
5>hgroup元素,用於對整個頁面或頁面中的一個內容區塊的標題進行組合.
<hgroup>...</hgroup>
6>footer元素,表示整個頁面或頁面中的一個內容區塊的腳註。一般來說，它會包含創作者的姓名，創作日期以及聯繫信息
<footer>...</footer>
7>nav元素表示頁面中導航鏈接的部分
<nav></nav>
(html4中代碼爲:)
<ul></ul>
8>figure元素表示一段獨立的流內容，一般表示文檔文體流內容中的一個獨立單元，使用figcaption元素爲figure元素組添加標題
<figure>
<figcation>PRC</figcaption>
<p>The People's Republic of China was born in 1949...
</figure>
在html4中代碼示例:
<dl>
<h1>PRC</h1>
<p>The People's Republic of China was born in 1949...</p>
</dl>
除了結構元素外，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元素,主要用來在視覺上向用戶呈現出那些需要突出顯示或高亮顯示的文字。其典型應用就是在搜索結果中向用戶高亮顯示搜索關鍵詞.
<mark></mark>
5>progress元素,表示運行中的進程，可以使用progress元素來顯示JavaScript中耗費時間的函數的進程
<progress>
<span id="objprogress">85</span>%
</progress>
6>time元素，表示日期或時間，也可以同時表示兩者
<time></time>
7>ruby元素,表示ruby註釋(中文注意或字符)
<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>
8>rt元素,表示字符(中文注音或字符)的解釋或發音
<ruby>
漢 <rt> ㄏㄢˋ </rt>
</ruby>
9>rp元素在ruby註釋中使得，以定義不支持ruby元素的瀏覽器所顯示的內容
<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>
10>wbr元素,表示軟換行.wbr元素與br元素的區別是:br元素表示此處必須換行;而wbr元素的意思是瀏覽器窗口或父級窗口的寬度足夠寬時（沒必要換行時）,不進行換行，而當寬度不夠時，主動在此處進行換行.wbr元素好像對字符型的語言作用很大，但是對於中文，貌似沒多大用處.
<p>To learn AJAX,you must be fmi<wbr>liar with the XMLHttp</wbr>
Request Object.</p>
11>canvas元素,表示圖形，比如圖表和其他圖像。這個元素本身沒有行爲，僅提供一塊畫布，但它把一個繪圖API展現給客戶端JavaScript,以使腳本能夠把想繪製的東西繪製到這塊畫布上
<canvas id=myCanvas width=200 height=200></canvas>
12>command元素，表示命令按鈕，比如單選按鈕，複選按鈕
<command label="cut">
13>details元素,表示用戶要求得到並且可以得到的細節信息。它可以與summary元素配合使用。summary元素提供標題或圖例。標題是可見的，用戶點擊標題時，會顯示出細節信息。summary元素應該是details元素的第一個子元素
<details>
<summary>HTML 5</summary>
This document teaches you eveything you have to learn about HTML 5
</details>
14>datalist元素,表示可選數據的列表，與input元素配合使用，可以製作出輸入值的下拉列表
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
15>datagrid元素，表示可選數據的列表，它以樹形列表的形式來顯示
<datagrid></datagrid>
16>keygen元素,表示生成密鑰
<keygen>
17>output元素,表示不同類型的輸出，比如腳本的輸出
<output></output>
18>source元素,爲媒介元素(比如<video>和<audio>)定義媒介資源.
<source>
19>menu元素,表示菜單列表，當希望列出表單控件時使用該標籤
<menu>
<li><input type=checkbox />Red></li>
<li><input type=checkbox />Blue</li>
</menu>
新增的input元素的類型
1>email類型,表示必須輸入E-mail地址的文本輸入框
2>url類型，表示必須輸入URL地址的文本輸入框
3>range類型，表示必須輸入一定範圍內數字值的文本輸入框
4>Date Pickers擁有多個可供選取日期和時間的新型輸入文本框
date選取日，月，年
month選取月、年
week選取周和年
time選取時間(小時和分鐘)
datetime選取時間、日、月、年(UTC時間)
datetime-local選取時間、日、月、年(本地時間)
廢除的元素
1>能使用css替代的元素
對於basefont,big,center,font,s,strike,tt,u這些元素，由於它們的功能都是純粹爲畫面展示服務的，而HTML5中提倡把畫面展示性功能放在css樣式表中統一編輯，所以將這些元素廢除了
2>不再使用frame框架,只支持iframe框架，或者用服務器方創建的由多個頁面組成的複合頁面的形式，
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元素相結合的方式替代
5.listing元素,使用pre元素替代
6.xmp元素，使用code元素替代
7.nextid元素,使用GUIDS替代
8.plaintext元素,使用"text/plian" MIME類型替代
新增的屬性和廢除的屬性
1新增的屬性
1.表單相關的屬性
1>可以對input(type=text),select,textarea與button元素指定autofocus屬性,它以指定屬性的方式 讓元素在畫面打開時自動獲得焦點
2>可以對input(type=text) 與textarea元素指定的placeholder屬性，它會對用戶的輸入進行提示，提示用戶可以輸入的內容
3>可以對input,output,select,textarea,button與feildset指定from屬性,聲明它屬於哪個表單，然後將其放置在頁面上任何位置，而不是表單之內
4>可以對input(type=text)與textarea元素指定required屬性,該屬性表示在用戶提交的時候進行檢查，檢查該元素內一定要有輸入內容
5>爲input元素增加了幾個新的屬性:autocomplete,min,max,multiple,pattern與step
6>爲input元素與button元素增加了新屬性formaction,formenctype,formmethod,formnovalidate與formtarget,他們可以重載from元素的action,enctype,method,novalidate與target屬性.爲fieldset元素增加了disabled屬性,可以把它的子元素設爲disabled(無效狀態)
7>爲input元素、button元素、form元素增加了novalidate屬性，該屬性可以取消提交時進行的有關檢查，表單可以被無條件地提交
2.鏈接相關的屬性
1>爲a與area元素增加了media屬性，該屬性規定目標URL是爲什麼類型的媒介/設備進行優化的，只能在href屬性存在時使用
2>爲area元素增加了hreflang屬性與rel屬性,以保持與a元素、link元素的一致性
3>爲link元素增加了sizes屬性。該屬性可以與icon元素結合使用(通過rel屬性),該屬性指定關聯圖標(icon元素)的大小
4>爲base元素增加了target屬性，主要目的是保持與a元素的一致性
3.其他屬性
1>爲ol元素增加了reversed屬性,
2>meta元素增加charset屬性
3>爲menu元素增加了兩個新的屬性,type與label.label爲菜單定義一個可見的標註，type屬性讓菜單可以以上下文菜單，工具條與列表菜單的三種形式出現
4>爲style元素增加scoped屬性,用來規定樣式的作用範圍
5>爲script元素增加了async屬性，定義腳本是否異步執行
6>爲html元素增加manifest,開發離線Web應用程序時它與API結合使用，定義一個URL，在這個URL上描述文檔的緩存信息
7>爲iframe元素增加三個屬性sandbox,seamless與srcdoc,用來提高頁面安全性，防止不信任的Web頁面執行某些操作
2廢除的屬性
四.全局屬性
HTML5新增了一個"全局屬性"的概念,指可以對任何元素都使用的屬性.
一>.contentEditable屬性
該屬性值是一個布爾值屬性,可以被指定爲true或false
二>.designMode屬性用來指定整個頁面是否可編輯
該屬性只能在JavaScript腳本里被修改。該 屬性有兩個值 "on"和"off".
修改方法: document.designMode="on"
三>.hidden屬性,在HTML5中，所有的元素都有一個hidden屬性.該屬性類似於input元素中的hidden元素.
四>.spellcheck屬性是HTML5針對input元素(type=text)與textarea這兩個文本輸入框提供的一個新屬性,它的功能爲對用戶輸入的文本內容進行拼寫和語法檢查。它書寫在一個特殊的地方，就是必須明確聲明屬性值爲true或false,書寫方法如下
<textarea spellcheck="true">
<input type="text" spellcheck=false >
五>.tabindex屬性,是開發中的一個基本概念，當不斷敲擊Tab鍵讓窗口或頁面中的控件獲得焦點,對窗口或頁面中的所有控件進行遍歷的時候，每一個控件的tabindex表示該控件是第幾個被訪問到的.
如果，將元素的tabindex值設置爲負數(如-1)，則當按下Tab鍵時該元素就不能獲得焦點了,但仍然可通過編程的方式讓該元素獲得焦點.
第三章,HTML5的主體結構元素
一.新增的主體結構元素
1>article元素代表文檔，頁面或應用程序中獨立的、完整的、可以獨自被外部引用的內容。它可以 是一篇博客或報刊中的文章、一篇論壇帖子、一段用戶評論或獨立的插件，或其他任何獨立的內容.除了內容部分，一個article元素通常有它自己的標題(一般放在一個header元素裏面),有時還有自己的腳註
e.g:
<article>
<h1>My Fruit Spinner</h1>
<object>
<param name="allowFullScreen" value="true">
<embed src="#" width=600 height=395></embed>
</object>
</article>
2>section元素用於對網站或應用程序中頁面上的內容進行分塊。一個section元素通常由內容及標題組成(注意:標題部分位於它的內部，而不是它的前面)。但section元素並非一個普通的容器元素,如果一個容器需要被直接定義樣式或通過腳本定義行爲時，推薦使用div而非section元素
<section>
<h1>蘋果</h1>
<p><b>蘋果</b>.植物類水果,多次花果...("蘋果" 文章正文)</p>
</section>
section元素沒有標題是不合理的，但是nav元素或aside元素沒有標題是合理的
最後，關於section元素的使用禁忌，總結如下:
(1)不要將section元素用作設置樣式的頁面容器,那是div元素的工作
(2)如果article元素、aside元素或nav元素更符合使用條件,不要使用section元素
(3)不要爲沒有標題的內容區塊使用section元素
3>nav元素,是一個可以用作頁面導航的鏈接組，其中的導航元素鏈接到其他頁面或當前頁面的其他部分。並不是所有的鏈接組都要被放進nav元素，只需要將主要的、基本的鏈接組放進nav元素即可.
nav元素可用於以下場合
(1)傳統導航條
(2)側邊欄導航條
(3)頁內導航,頁內導航的作用是在本頁面的幾個主要的組成部分之間進行跳轉
(4)翻頁操作
注意:在html5中不要用menu元素代替nav元素，menu元素是用在一系列發出命令的菜單上的，是一種交互性的元素，常使用在Web應用程序中
4>aside元素用來表示當前頁面或文章的附屬信息部分，它可以包含當前頁面或主要內容相關的引用、側邊欄、廣告、導航條，以及其他類似的有別於主要內容的部分
5>time元素與微格式,微格式是一種利用html的class屬性來對網頁添加附加信息的方法，time元素明確地對機器的日期和時間進行編碼，並且以讓人易讀的方式來展現它
<time datetime="2010-11-13">2010年11月13日</time>
編碼時機器讀到的部分在datetime屬性裏，而元素開始標記和結束標記中間的部分則顯示在網頁上.datetime屬性中日期與時間之間要用"T"文字分隔
6>pubdate屬性是一個可選的、boolean值的屬性，它可以用到article元素中的time元素上，意思是time元素代表了文章(article元素的內容)或整個網頁的發佈日期
二.新增的非主體結構元素
1>header元素是一種具有引導和導航作用的結構元素，通常用來旋轉整個頁面或頁面內的一個內容區塊的標題，但也可以包含其他內容，例如數據表格、搜索表單或相關的logo圖片
header元素通常包括至少一個heading元素(h1-h6),或包括hgroup元素，或包括其他元素(table或form),還可以包括nav元素
2>hgroup元素是將標題及子標題進行分組的元素。通常會將h1-h6元素進行分組。譬如一個內容區塊的標題及其子標題算一組
<article>
<header>
<hgroup>
<h1>文章標題</h1>
<h2>文章子標題</h2>
<p><time datetime="2010-03-20">2010年10月29日</time></p>
</hgroup>
</header>
</article>
3>footer元素可以作爲其上層父級內容區塊或是一個根區塊的腳註。footer通常包括其相關區塊的腳註信息，如作者、相關閱讀鏈接及版權信息等
<section>
<h2>分段內容</h2>
<p>內容...</p>
<footer>
分段內容的腳註...
</footer>
</section>
4>address元素用來在文檔中呈現聯繫信息，包括文檔作者或文檔維護者的名字、他們的網站鏈接、電子愚笨、真實地址、電話號碼等。
<footer>
<div>
<address>
<a title="文章作者:陸毅" href="http://blog.sina.com.cn/luyi"
陸毅
</a>
發表於<time datetime="2010-10-04">2010年10月4日</time>
</address>
</div>
</footer>
三.HTML5結構
1>大綱，簡單來說是文檔中各內容區塊的結構編排。內容區塊可以使用標題元素(h1-h6)來展示各級內容區塊的標題。綜合運用各級內容區塊的標題創建好文檔的目錄後，該目錄就是一個大綱了
關於內容區塊的編排，可分爲"顯示編排" 與"隱匿編排"兩種方式
(1)顯式編排批明確使用section等元素創建文檔結構，在每個內容區塊內使用標題(h1-h6,hgroup等)
(2)隱式編排內容區塊,指不明確使用section等元素，而是根據頁面中所書寫的各級標題(h1-h6,hgroup)等把內容區塊自動創建出來。因爲html5分析器只要看到書寫了某個級別的標題，就會判斷存在相應的內容區塊。
(3)標題分級,h1級別最高,h6級別最低
爲了使用文檔結構清晰，請儘量使用顯式編排
(4)不同的內容區塊可以使用相同級別的標題
2>對新的結構元素使用樣式
我們需要使用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的方法使用這些尚未支持的結構元素，需要使用JavaScript腳本，如下所示:
<script>
document.createElement("header");
document.createElement("nav");
document.createElement("article");
document.createElement("footer");
</script>
3>article元素的樣式
一個網頁中可能有多個獨立的article元素，每一個article元素都允許有自己的標題與腳註,並允許對自己的從屬元素單獨使用樣式。
如:
header{display:block;color:red;text-align:right;}
article header{color:blue;text-align;center}
第61頁 第4單表單與文件
html5筆記
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章