HTML5新增元素的介紹

一:html5新增的主體元素

<article>定義頁面獨立的內容區域(可以嵌套使用,可以表示插件)。

<section>定義文檔中的節(section,區段)。

<nav>:定義導航鏈接的部分。

<aside>:定義頁面的側邊欄內容。

<time>:定義日期或時間。

二:html5新增的非主體元素

<header>:定義了文檔的頭部區域。

<footer>定義 section 或 document 的頁腳。

<hgroup>被用來對標題元素進行分組。

<adderss>定義文檔作者/所有者的聯繫信息。

三:form表單新增元素與屬性

html <input>formactiom:formaction 屬性規定當表單提交時處理輸入控件的文件的 URL。

html <input>formmethod:formmethod 屬性定義發送表單數據到 action URL 的 HTTP 方法。

html <input>formenctype:formenctype 屬性規定當表單數據提交到服務器時如何編碼,僅適用於 method="post" 的表單

html <input>formtarget:formtarget 屬性規定表示提交表單後在哪裏顯示接收到響應的名稱或關鍵詞。(_blank新窗口響應)

html <input>autofocus:autofocus 屬性規定當頁面加載時 <input> 元素應該自動獲得焦點。(布爾值)

html <input>requiredrequired 屬性規定必需在提交表單之前填寫輸入字段。(布爾值)

html <input>labels屬性:                      html <input>control屬性:設置默認值

四:form表單新增元素與屬性(續)

html <input>placeholder:placeholder屬性當文本框處於未輸入狀態時顯示輸入提示。

html <input>list:list屬性的值爲某個datalist元素的id,類似下拉選擇框,但是允許自行輸入。

html <input>autocomlistplete:cutocomlistplete屬性幫助輸入所用的自動完成功能,是一個既節省輸入時間又十分方便的功能。

html <input>patternpattern 屬性規定用於驗證 <input> 元素的值的正則表達式。

html <input>selectiondirection:當用戶在這兩個元素中用鼠標選取部分文字時,可以使用該屬性獲取選取方向。

html <input>indeterminate:可以在javascript腳本代碼中說明覆選框處於“尚未明確是否選取”狀態。(選取、非選取,不明確)

img提交按鈕的height和width:用來指定圖片按鈕的高度和寬度。

五:html5改良的input元素

type="url"(一個網址,帶自驗證)type="email"(一個郵箱,帶自驗證)type="date"(日期,可以自己選取)

type="time"(輸入時間的文本框,帶自驗證)type="datetime"(專門輸入utc時間的文本框)

type="datetimelocal"(專門在本地輸入時間的文本框)type="mouth"(專門輸入月份的文本框)

type="week"(專門輸入周號的文本框)type="unmber"(轉本輸入數字的文本框)type="search"(搜索關鍵字的文本框)

type="tel"(用來輸入電話號碼的文本框)type="color"(選取顏色,提供一個顏色選取器)

<output>:定義不同類型的輸入。

表單驗證:

六:html5增強的頁面元素

<figure>:用來表示網頁上獨立的內容(可以是圖片、統計表格、音視頻插件.....)

<figcaption>:從屬於figure元素,表示figure元素的標題

<details>:用來表示該元素內部的子元素,可以別展開或者收縮的元素(布爾類型)

<summary>:從屬於details元素

<mark>:突出顯示或者高量顯示的對當前用戶有參考作用的一段文字

<ol>:[ol---li,,,,,start="5"(列表從5開始),,,reversed(倒序效果)]

<dl>:[dl---dt----dd,,,表示多個名字的列表]

<cite>:表示作品的標題

<small>:表示標識小字印刷體的元素

<porgress>:代表任務的完成進度(進度條)

<meter>:規定範圍內的數值量(進度條)

七:html5編輯API之range對象

一個range對象代表頁面上的一段連續區域,通過range對象,可以獲取或修改網頁上的任何區域。

主要的對象屬性有:selection,selectNode,selecNodeContents,deleteContents,setstart,setstarBefore.........

例子:

例子:










發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章