沉澱-初級html5（一）

泠泠在路上發表於2017-03-27
HTML

HTML5與HTML4的區別

推出的理由及目標和語法的改變

推出的理由及目標：
解決web上存在的各種問題：
1.web瀏覽器相容性很低，規範不統一，沒有被標準化。
2.文件結構不夠明確
3.web應用程式的功能受到了限制
世界知名瀏覽器廠商對html5的支援：微軟的IE9及以上，google的chrome，蘋果的safari，Opera的歐朋，Mozilla的火狐Firefox

語法的改變：
1.內容型別：text/html沒啥變化
2.DOCTYPE宣告：直接簡短的<!DOCTYPE html>
3.制定字元編碼：<meta charset="UTF-8">
4.可以省略標記的元素
5.具體boolean值的屬性：disabled，checked，true，false
6.省略引號

新增的元素和廢除的元素

新增的結構元素：
section【內容塊】、article【與上下文不相關的獨立內容（文章）】、aside【與article相關的輔助資訊】、header【頭部內容】、hgroup【整個頁面結合內容塊】、footer【頁尾】、nav【導航連結】、figure【文章主體流一個獨立的單元】

新增的其他元素：
video【視訊】、audio【音訊】、embed、mark、progress、meter、time、ruby、rt、rp、wbr、canvas【畫布，圖形】、command、details、datalist、datagrid、keygen、output、source、menu

新增的input元素的型別：
email【郵箱】、url【地址】、number【數字】、range【範圍值】、Date Pickers【日期】

廢除的元素：
1.能使用CSS替代的元素：basefont、big、center、font、s、tt、u等
2.不再使用frame框架 frameset frame no-frame，只支援iframe
3.只有部分瀏覽器支援的元素
4.其他被廢除的元素

新增的屬性和廢除的屬性

新增的屬性：
1.表單相關的屬性：form、formaction、formmethod、formenctype、formtarget、autofocus、required、labels、control、placeholder、indeterminate、image提交按鈕的width和height、list、AutoComplete、pattern、selectionDirection

2.連結相關的屬性

3.其他屬性

廢除的屬性：

全域性屬性
1.contentEditable屬性：微軟開發，允許使用者編輯元素中的內容，true和false指定是否可編輯，未指定的話，繼承父元素的屬性
2.designMode屬性：指定整個頁面是否可編輯，只能在JavaScript裡被修改編輯，屬性有on【頁面可編輯】和off【頁面不可編輯】
3.hidden屬性：使元素不可見
4.spellcheck屬性：針對input和textarea提供的，用於拼寫檢查
5.tabindex屬性：控制按tab鍵對控制元件元素進行遍歷，可指定順序，預設只有input和連結可tab獲取焦點

新增元素的使用方法

article元素：
1.article元素代表文件、頁面或應用程式中獨立的、完整的、可以獨自被外部引用的內容。可以是一篇部落格、報刊中的文章、論壇的帖子、使用者評論或獨立的外掛，或其他任何獨立的內容。

2.article元素是可以巢狀使用的。

3.article元素可以用來表示外掛。
<article><h1>標題</h1><object><embed>插入的內容</embed></object></article>

aside元素：
aside元素用來表示當前頁面或文章的附屬資訊部分，它可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、導航條，以及其他類似的有區別於主要內容的部分。

nav元素：
nav元素是一個可以用作頁面導航的連線組，其中的導航元素連結到其他頁面或當前頁面的其他部分。並不是所有的連線組都要被放進nav元素，只需要將主要的、基本的連線組放進nav元素即可。
nav元素應用場景：
1.傳統導航條
2.側邊欄導航
3.頁內導航
4.翻頁導航

section元素：
section元素用於對網站或應用程式中頁面上的內容進行分塊。一個section元素通常由內容及其標題組成。但section元素並非一個普通的容器元素，當一個容器需要被直接定義樣式或通過指令碼定義行為時，推薦使用div而非section元素。

time元素與微格式：

<time datetime="2017-03-28">2017-03-28</time>
<time datetime="2017-03-28T20:00">2017-03-28</time>
<time datetime="2017-03-28T20:00Z">2017-03-28</time>標準時間
<time datetime="2017-03-28T20:00+09:00">2017-03-28</time>時差

pubdate屬性代表文章的釋出日期：有2個time的情況下進行區分

header元素

header元素是一種具有引導和導航作用的結構元素，通常用來放置整個頁面或頁面內的一個內容區塊的標題，但是也可以包含其他內容，例如資料表格、搜尋表單或相關的logo圖片。header可以出現多次。

footer元素
footer元素可以作為其上層父級內容區塊或是一個根區塊的腳註。footer通常包括其相關區塊的腳註資訊，如作者、相關閱讀連結及版權資訊等。

hgroup元素
hgroup元素是將標題及其子標題進行分組的元素。hgroup元素通常會將h1~h6元素進行分組，譬如一個內容區塊的標題及其元素算一組。標題較多的情況下，進行分組。

address元素
address元素用來在文件中呈現聯絡資訊，包括文件作者或文件維護者的名字、他們的網站連結、電子郵箱、真實地址、電話號碼等。address應該不只用來呈現電子郵箱或真實地址，還用來展示跟文件相關的聯絡人的所有聯絡資訊。

html5結構
1.顯示編排內容區域塊：明確的使用section等建立區域塊。
2.隱示編排內容區域塊：根據需求用h1~h6或hgroup進行佈局。
3.標題分級：同級標題會出現新的區域塊。
4.不同區域塊使用相同標題
這裡寫圖片描述

這裡寫圖片描述

表單新增元素與屬性

表單內元素的form屬性
在HTML4中，表單內的從屬元素必須書寫在表單內部，而在HTML5中，可以把他們書寫在頁面的任何地方，然後為該元素指定一個form屬性，屬性值為該表單的id，這樣就可以宣告該元素從屬於指定表單了。
這裡寫圖片描述

表單內元素的formaction屬性
在HTML4中，一個表單內的所有元素只能通過表單的action屬性被統一提交到另一個頁面，而在HTML5中可以為所有的提交按鈕，增加不同的formaction屬性，使單擊不同的按鈕時可以將表單提交到不同的頁面。
這裡寫圖片描述

表單內元素的formmethod屬性
在HTML4中，一個表單內只能有一個action屬性用來對錶單內所有元素統一指定提交頁面，所以每個表單內頁只有一個method屬性來統一指定提交方法。在HTML5中，可以使用formmethod屬性來對每一個表單元素分別指定不同的提交方法（post或get）。

表單內元素的formenctype屬性
在HTML4中，表單元素具有一個enctype屬性，該屬性用於指定在表單傳送到伺服器之前應該如何對錶單內的資料進行編碼。在HTML5中，可以使用formenctype屬性對錶單元素分別指定不同的編碼方式( 1.text/plain【表單內的空格轉換為+號，但不對錶單內的特殊字元進行編碼】，2.mutipart/form-data【不對字元進行編碼，必須使用在檔案上傳控制元件表單】，3.application/x-www-form-urlencoded【表單資料轉為字元】)。

表單內元素的formtarget屬性
在HTML4中，表單元素具有一個target屬性，該屬性用於指定在何處開啟表單提交後所需要載入的頁面。
在HTML5中，可以對多個提交按鈕分別使用formtarget屬性（1._blank【在新的瀏覽器頁面開啟】2._self【在相同框架的frame頁面開啟】3._parent【在當前父frame頁面開啟】4._top【在當前視窗開啟】5.framename【在指定框架中開啟】）來指定提交後在何處開啟所需載入的頁面。

表單內元素的autofocus屬性
為文字框、選擇框或按鈕控制元件加上autofocus屬性，當畫面開啟時，該控制元件自動獲得游標焦點。

表單內元素的required屬性
在HTML5中新增的required屬性可以應用在大多數輸入元素上，在提交時，如果元素中內容為空白，則不允許提交，同時在瀏覽器中顯示資訊提示文字。

表單內元素的labels屬性
在HTML5中，為所有可使用標籤的表單元素、button、select元素等，定義一個labels屬性，屬性值為一個NodeList物件，代表該元素所繫結的標籤元素所構成的集合。
這裡寫圖片描述

標籤的control屬性
在HTML5中，可以在標籤內部放置一個表單元素，並且通過該標籤的control屬性來訪問該表單元素。
這裡寫圖片描述

文字框的placeholder屬性
placeholder是指當文字框處於未輸入狀態是顯示的輸入提示。當文字框處於未輸入狀態且未獲取游標焦點時，模糊顯示輸入提示文字。

核取方塊的indeterminate屬性
對於核取方塊checkbox元素來說，過去只是選取與非選取這兩種狀態。在HTML5中，可以在javascript指令碼程式碼中對該元素使用indeterminate屬性，以說明覆選框處於“尚未明確是否選取”狀態。

image提交按鈕的height屬性與width屬性
針對型別為image的input元素，HTML5新增了兩個屬性，height、width分別用來指定圖片按鈕的高度和寬度。

文字框的list屬性
在HTML5中，為單行文字框增加了一個list屬性，該屬性的值為某個datalist元素的id。datalist元素也是HTML5中新增的元素，該元素類似於選擇框，但是當使用者想要設定的值不在選擇列表之內時，允許自行輸入。datalist元素本身並不顯示，而是當文字框獲得焦點時以提示輸入的方式顯示。
這裡寫圖片描述

文字框的autocomplete屬性
幫助輸入所用的自動完成功能，是一個既節省輸入時間又十分方便的功能。在HTML5之前，因為誰都可以看見輸入的值，所有在安全方面存在缺陷，只要使用AutoComplete屬性，安全性方面也可以得到很好的控制。有on/off/不填寫三種值。

文字框的pattern屬性
在HTML5中，對input元素使用pattern屬性，並且將屬性值設為某個格式的正規表示式，在提交時會針對這些進行檢查，檢查其內容是否符合給定格式。當輸入的內容不符合給定格式時，則不允許提交，同時在瀏覽器中顯示資訊提示文字，提示輸入的內容必須符合給定的格式。例：<input pattern="[A-Z]{5}">

文字框的SelectionDirection屬性
這對input元素與textarea元素，HTML5增加了SelectionDirection屬性。當使用者在這兩個元素中用滑鼠選取部分文字時，可以使用該屬性來獲取選取方向。當使用者正向選取文字時，改屬性值為“forward”，當使用者反向選取文字時，該屬性值為“backward”。當使用者沒有選取任何文字時，該屬性值為“forward”。

HTML5改良的input元素

url型別、email型別、date型別、time型別、datetime型別、datatime-local型別、month型別、week型別、number型別、range型別、search型別、Tel型別、color型別

例：<input type="url">

增加的input元素
output元素
例：

<script>
function value_change(){
var number=document.getElementById("range").value;
document.getElementById("output").value=number;
}
</script>
<form id="testform">
<input id="range" type="range" min="0" max="100" step="5" value="10" onchange="value_change()">
<output id="output">10</output>
</form>

表單驗證

<script>
function check(){
var email=document.getElementById("email");
if(email.value==""){
alert("請輸入email");
return false;
}else if(!email.checkValidity()){
alert("請輸入正確的email地址");
return false;
}
}
</script>
<form id="testform" onsubmit="check()" nobalidate="true">
<label for="">Email</label>
<input name="email" type="email" id="email">
<br/>
<input type="submit">
<input>
</form>

HTML5增強的頁面元素

progress元素

<script>
function btn(){
var i=0;
function thread_one(){
if(i<100){
i++;
updateprogress(i);
}
}
setInterval(thread_one,100);
}
function updateprogress(newValue){
var progressBar=document.getElementById("p");
progressBar.value=newValue;
progressBar.getElementsByTagName("span")[0].textContent=newValue;
}
</script>
<p>完成的百分比<progress id="p" max="100" background-color="green"><span>0</span>%</progress></p>
<input type="button" onclick="btn()" value="點選">

meter元素
規定範圍內的數值量，例如磁碟空間使用量，佔票選比例等

<meter value="40" min="0" max="100" low="10" high="90" optimum="80"></meter>

相關文章