HTML5與CSS3權威指南.pdf2

標籤：style   blog   http   java   使用   io   strong   檔案   

第三章 HTML5的結構

article元素更強調獨立性，section元素強調分段，div元素強調css的套用，aretcle元素和section元素在核實的情況下可以調換

nav元素用作頁面導航的連結組，通常裡麵包含<ul><li><a>元素

aside元素表示頁面或文章的附屬資訊部分，可以是與當前頁面或內容相關的參考資料，名詞解釋

time元素表示24小時中的某個時刻或日期<time datetime="2014-8-6T19:53-14:00">時間</time>日期與時間用T間隔，在19:53後加Z表示使用UTC標準時間，-14:00表示時差，可不添加

pubdate屬性工作表示文章或網頁的發布日期<time datetime="2014-8-6" pubdate>....</time>

新增的非主體結構元素

<header>元素是一種具有引導和導航作用的結構元素，可以為每塊內容區加這個元素，通常其中會有一個heading元素（h1-h6）

hgroup元素，對標題及其子標題進行分組（擁有多個heading元素時）

footer元素，作為上層父級內容地區的根腳注（比之前div添加id=footer更加語義化）

address元素，表示作者名字等資訊，可與footer等其它元素使用

HTML5結構

內容區塊的編排可分為“顯式編排”（明確使用了section等元素）和“隱式編排”（未使用section等元素），盡量使用顯式編排

對新的結構元素使用樣式：

很多瀏覽器未對HTML5新增的元素提供支援，可以這樣設定

article,aside,dialog,figure,footer,header,legend,nav,section{display:block;}

nav{float;left;width:20%};

article{float:right;width:79%};

另外IE8及之前的瀏覽器不支援CSS方法，則需要使用Javascript指令碼

<script>

document.createElement(‘header‘);

　　...

document.createElement(‘nav‘);

</script>

<style>

nav{float;left;width:20%};

</style>

第四章 表單與檔案

 新增元素與屬性

form屬性（下列textarea元素從屬form元素）

<form id=‘testform‘>

<input type=‘text‘>

</form>

<textarea form=‘testform‘></textarea >

formaction屬性，在HTML4中所有的表單元素只能通過表單的action屬性統一提交到一個頁面，HTML5可以給所有的提交按鈕增加不同的提交地址

<form id="testform" action="serve.jsp">

　　<input type="submit" name="s1" value="v1" formaction="s1.jsp">提交到s1

　　<input type="submit" name="s1" value="v1" formaction="s2.jsp">提交到s2

　　...

</form>

formmethod屬性，與formaction同理，增加不同提交方法

<input type="submit" name="s1" value="v1" formaction="s2.jsp" formmethod="get">提交到s2

placeholder屬性，文字框處於未輸入狀態時，顯示的提示文字

autofocus屬性

list屬性，屬性的值是datalist元素的id，效果類似於<select>

autocomplete屬性，可以指定“on” “off” “”（不指定），自動完成時，可以將datalist元素中的資料作為候補資料

<input type="text" name="greeting" autocomplete="on" list="greetings">

大幅度增加與改良了input元素的種類

<input name="url1" type="url" value="http://www.baidu.com">

對新表單元素使用樣式

output元素，它定義了不同類型的輸出，比如計算結果或指令碼的輸出（它從屬於某個表單）

<form>

<input name="range1" type=range min=0 max=100 step=5/>

<output onforminput="value=range1.value">50</output>

</form>

以上例子會輸出一個數值，表示使用者拖動range元素的值