<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無标題文檔</title>
</head>
<body>
<header><!--定義頁眉-->
<hgroup><!--定義文檔中的标題組-->
<h1>HTML5</h1>
<h2>HTML4.01</h2>
<h3>XHTML1.0</h3>
</hgroup>
<nav><!--定義主要的導航區域,對于側邊欄則不大适用-->
<ul>
<li>get waht</li>
<li>get waht</li>
<li>get waht</li>
</ul>
</nav>
</header>
<p contenteditable="true">aaa</p><!--可編輯性-->
<label for="input" >内容</label>
<input type="text" id="input" spellcheck="true" hidden="hidden"><!--斜體-->
<article><!--定義獨立闆塊,容器元素,可嵌套(類似div)-->
<header>題目</header>
<p>文章内容</p>
<article>
<header>
<h3>評論者:訪客甲</h3>
</header>
<p>so nice!</p>
</article>
<article>
<header>
<h3>評論者:訪客乙</h3>
</header>
<p>what a waste!</p>
</article>
<aside>附屬資訊
<b>bold粗體</b>
<i>italic斜體</i>
<u>underline下劃線</u>
<code>定義計算機代碼,有種CData節的感覺,安全性增高</code>
<pre>定義多行計算機代碼 var result=0</pre><!--定義預格式化的文本-->
<q>quote定義引用文本,自帶雙引号
<cite>——引用文本,通常為書籍或者雜志的标題</cite>
<p><!--datetime:表示具體的時間戳-->
<!--pubdate:是否為特定的文檔釋出标簽-->
釋出時間<time datetime="2015-03-15" pubdate="pubdate">2015年3月15日</time>
</p>
</q>
<blockquote>标記長引用文本,相當于q的更新版本</blockquote>
</aside><!--定義article的附屬資訊-->
<footer>作者</footer>
</article>
<section><!--定義文檔組成内容,與父标簽從屬關系,可自己嵌套或與article嵌套-->
<h1>HTML5</h1>
<article>
<p>artile</p>
<section>
<em>so?</em>
</section>
</article>
</section>
<!--method:get通過URL傳遞(盡量少用,URL長度短于2KB),post通過背景直接傳遞,适用于資料量較大、安全性要求較高-->
<!--action:設定伺服器接收和處理表單資料的URL-->
<!--enctype:發送伺服器之前進行編碼的編碼方式,可選,盡在post時有效(這裡是無效的)-->
<form action="#" method="get" enctype="multipart/form-data" accept="image/gif,image/jpg" accept-charset="iso-8859-1" target="_parent" novalidate autocomplete="off/on"><!--accept:指定通過檔案上傳送出的檔案類型-->
<!--指定伺服器處理表單資料所接受的字元集,可選-->
<!--novalidate:是否啟用表單驗證功能,屬性為布爾值-->
<p>
姓名:
<input formaction="#" type="text" formenctype="multipart/form-data" name="usrName"><!--formaction:任何輸入控件都可以設定,讓不同的表單資料傳輸給不同的伺服器--><!--formenctype:任何輸入控件都可以設定,為不同的表單資料指定編碼格式,對于檔案上傳輸入型必須選擇m/f以使用二進制編碼确定能連續傳送到伺服器(其餘一般用a/x)-->
</p>
<lable><!--設定輸入型控件的說明資訊,點選觸發控件-->
<input id="usrMess">
</input>
</lable>
<input type="submit"></form>
<button type="button" disabled="false" autofocus form="相應表單的ID"><!--formmethod,formenctype,formtarget,formnovalidata-->
<img src="" alt="">
</button>
</form>
<form action="#" method="post">
<fieldset><!--在控件周圍建立邊框表明控件是相關的-->
<legend><em>必填項</em></legend><!--為表單控件組制定一個名稱,必須作為fieldset的第一個元素-->
<label>姓名
<input type="text" name="name">
</label>
</fieldset>
<fieldset>
<legend><em>選填項</em></legend>
<label>身高:
<select name="height" multiple="multiple" disabled="true" data- form="相應表單的ID" autofocus><!--size屬性不再支援。--><!--data:定義使用外部資料--><!--multiple:是否一次選擇多項-->
<option value="100">under 100cm</option>
<option value="100">above 100cm</option>
</select>
</label>
<label>職位:
<select>
<optgroup label="學生" disabled"disable">
<option value="大學生">大學生</option>
<option value="研究所學生">研究所學生</option>
</optgroup>
<optgroup label="">
<option>職業的</option>
<option value="兼職的"></option>
</optgroup>
</select>
</label>
</fieldset>
</form>
<form action="#" method="post">
<label>
<input type="text" list="remined" name="school">
</label>
<datalist id="remined"><!--輸入選項-->
<option value="html5是什麼" label="top1"/>
<option value="html5"></option>
<option value="make">nake?</option>
</datalist>
</form>
<form action="#" method="post">
<label>
安全強度:
<keygen name="security"><!--規定用于表單的額密鑰對生成器字段-->
</label>
<input type="submit">
</form>
<form method="post" action="#" id="myform">
<label>
圖檔:
<input type="file" name="pic" accept="image/gif,img/jpeg" formenctype="multipart/form-data"><!--input type="image":圖像式送出按鈕;"radio":定義單選按鈕;"checkbox":定義複選框;"submit""reset":送出重置-->
</label>
</form>
<form method="post" action="#">
<label>
電子郵件:
<input type="email" name="useEmail"/>
<input type="submit">
</label>
<label>
網址:
<input type="url" name="usrUrl"/>
<input type="submit">
<!--"number":定義數字的輸入域,min定義允許輸入的最小值,step定義變化間隔;
"range":滑動條數字輸入域;
"search":定義搜尋域,result定義顯示搜尋結果的條數。
"color":定義顔色選擇域;
"date":定義日期選擇域;"time":定義時間輸入域;"month";"week";"dateyime":date+time;"datatime-local":預設顯示本地時間;
"telephone":定義電話号碼輸入域,但是沒有目前沒有浏覽器支援,還是得加正則比對。-->
</label>
</form>
<!--form的屬性:
placeholder:定義一個占位符,提示使用者輸入域期望輸入的值。
required:定義必填項。
pattern:定義正規表達式對輸入域進行驗證。
multiple:定義輸入域可以選擇多個值。
list:與datalist标簽組合定義輸入域的選項清單。
-->
<!--表單驗證:
validity:自帶屬性,是否合法
validity.valueMissing:是否為空
typeMismatch:類型不合法
tooLong:輸入超過規定長度
stepMismatch:傳回使用者的輸入數字是否合法(符合step)
rangeUnderflow:輸入的數字是否小于設定的最小值
rangeOverflow:輸入的數字是否大于設定的最大值
patternMismatch:輸入的内容是否滿足規定的驗證要求
valid:傳回所有輸入的字段是否有效
customError:傳回是否使用者自定義的錯誤
preventDefault()關閉浏覽器的預設錯誤提示資訊,并且可以自定義錯誤資訊
-->
<textarea cols="10" rows="10" name="message" readonly disabled="flase" required inputmode>
<!--readonly:設定文本區域是否可讀--><!--required:是否必填-->
</textarea>
<footer>
Copyrights! make<em>get</em><!--斜體-->
</footer><!--定義頁腳-->
</body>
</html>