Html5屬性與元素(第二講)

1、Html5Html5屬性與元素（屬性與元素（二）二）前端技術(shù)開發(fā)2016.11.16v Html5 Html5與之前版本的不同與之前版本的不同v 新增的元素和廢除的元素新增的元素和廢除的元素v 新增的屬性和廢除的屬性新增的屬性和廢除的屬性 目錄目錄視覺設(shè)計視覺設(shè)計 可以省略標(biāo)簽的元素可以省略標(biāo)簽的元素 擁有擁有boolbool值的屬性值的屬性 省略屬性的引用符省略屬性的引用符前端頁面實現(xiàn)前端頁面實現(xiàn)1. Html51. Html5與之前版本的不同與之前版本的不同前端開發(fā) 視覺設(shè)計 Html5的語法與之前的Html語法在某種程度上達(dá)到了一定的兼容性。例如，有時可以看到“標(biāo)簽沒有結(jié)束符”等現(xiàn)象，在

2、Html5中不將這些視為錯誤，而是“允許這些現(xiàn)象存在，并明確記錄在Html5規(guī)范中”。下面具體看看Html5與之前版本的不同： 1.1.可以省略標(biāo)簽的元素（可以省略標(biāo)簽的元素（3 3種情況種情況） （1）不允許寫結(jié)束標(biāo)記的元素有： input、link、area、base、br、col、hr、command、embed、img、keygen、meta、param、source、track、wbr等； （2）可省略結(jié)束標(biāo)簽的元素有： li、dt、dd、p、rt、rp、option、optgroup、colgroup、thead、tbody、tfoot、tr、td、th等； （3）可省略整個標(biāo)簽的

3、元素有： html、head、body、colgroup、tbody等。注：雖然這些元素可以省略，但實際上卻是隱式存在的，在DOM樹上它是存在的。前端開發(fā) 視覺設(shè)計 2 2. .擁有擁有boolbool值的屬性：值的屬性： 擁有布爾值（boolean）的屬性，例如disabled和readonly等，通過省略屬性的值來表達(dá)值為“true”，如果要表達(dá)值為“false”，則直接省略屬性本身即可。此外，當(dāng)寫明屬性值為“true”時，可以將屬性名設(shè)定為屬性值，也可以將屬性值設(shè)為空字符串。前端開發(fā) 視覺設(shè)計 3 3. .省略屬性的引用符省略屬性的引用符： 設(shè)置屬性值時，可以使用雙引號或單引號來引用。在

4、Html5中進(jìn)一步進(jìn)行了改進(jìn)，只要屬性值不包含字符串、單引號、雙引號、“”、“=”等字符，都可以省略屬性的引用符。 新增的結(jié)構(gòu)元素新增的結(jié)構(gòu)元素 新增的行內(nèi)（新增的行內(nèi)（inlineinline）語義元素）語義元素 新增的塊級（新增的塊級（blockblock）語義元素）語義元素 新增的新增的inputinput元素的類型元素的類型 新增的多媒體元素與交互性元素新增的多媒體元素與交互性元素 廢除的元素廢除的元素前端頁面實現(xiàn)前端頁面實現(xiàn)2. 2. 新增的元素和廢除的元素新增的元素和廢除的元素前端開發(fā) 視覺設(shè)計HTML5互設(shè)計2.1 新增的結(jié)構(gòu)元素在HTML5中，新增了以下與結(jié)構(gòu)相關(guān)的元素：s s

5、ectionection元素：元素：section元素表示頁面或應(yīng)用程序中的一個區(qū)塊，比如章節(jié)、頁眉、頁腳或文檔中的其他部分。它可以與h1、h2、h3、h4、h5、h6等元素結(jié)合起來使用，標(biāo)示文檔結(jié)構(gòu)。內(nèi)容內(nèi)容HTML4互設(shè)計前端開發(fā) 視覺設(shè)計HTML5互設(shè)計articlearticle元素：元素：article元素表示頁面中的一塊獨立的內(nèi)容，如博客中的一篇文章或者報紙中的一篇文章。內(nèi)容內(nèi)容HTML4互設(shè)計前端開發(fā) 視覺設(shè)計HTML5互設(shè)計headerheader元素：元素：header元素表示頁面中一個內(nèi)容區(qū)塊或整個頁面的標(biāo)題。內(nèi)容內(nèi)容HTML4互設(shè)計前端開發(fā) 視覺設(shè)計HTML5互設(shè)計nav

6、nav元素：元素：nav元素表示頁面中導(dǎo)航鏈接的部分（導(dǎo)航欄）。內(nèi)容內(nèi)容HTML4互設(shè)計前端開發(fā) 視覺設(shè)計HTML5互設(shè)計footerfooter元素：元素：footer元素表示整個頁面或者頁面中的一個內(nèi)容區(qū)塊的標(biāo)注。一般來說，它會包含作者的姓名、創(chuàng)作日期以及創(chuàng)建者聯(lián)系信息。內(nèi)容內(nèi)容HTML4互設(shè)計前端開發(fā) 視覺設(shè)計HTML5互設(shè)計2.2 新增的行內(nèi)（inline）語義元素在HTML5中，新增了以下與行內(nèi)的語義相關(guān)的元素：markmark元素：元素：mark元素主要用來在視覺上向用戶呈現(xiàn)那些需要突出顯示或高亮顯示的文字。mark元素的一個比較典型的應(yīng)用就是在搜索結(jié)果中向用戶高亮顯示搜索關(guān)鍵字。

7、內(nèi)容內(nèi)容HTML4互設(shè)計前端開發(fā) 視覺設(shè)計HTML5互設(shè)計timetime元素：元素：time元素表示日期或時間，也可以同時表示兩者。內(nèi)容內(nèi)容HTML4互設(shè)計前端開發(fā) 視覺設(shè)計HTML5互設(shè)計metermeter元素：元素：meter元素表示度量衡。僅用于已知最大和最小值的度量。必須定義度量的范圍，既可以在元素的文本中，也可以在min/max屬性中定義。內(nèi)容前端開發(fā) 視覺設(shè)計HTML5互設(shè)計progressprogress元素：元素：progress元素表示運行中的進(jìn)程。可以使用progress元素來顯示JavaScript中耗費時間的函數(shù)的進(jìn)程。例如：下載進(jìn)度提示。前端開發(fā) 視覺設(shè)計HTML

8、5互設(shè)計2.3 新增的塊級（block）語義元素在HTML5中，新增了以下與塊級的語義相關(guān)的元素：asideaside元素：元素：aside元素主要表示article元素的內(nèi)容之外的與article元素的內(nèi)容相關(guān)內(nèi)容。內(nèi)容內(nèi)容HTML4互設(shè)計前端開發(fā) 視覺設(shè)計figurefigure元素：元素：figure元素表示一段獨立的流內(nèi)容，一般表示文檔主體流內(nèi)容中的一個獨立單元。使用元素為figure元素組添加標(biāo)題。 fruit The person have an apple. fruit The person have an apple.前端開發(fā) 視覺設(shè)計2.4 新增的input元素的類型在HTM

9、L5中，新增了許多input元素的類型，列舉如下：e emailmail：email類型需要輸入E-mail地址的輸入框；urlurl：url類型需要輸入URL地址的輸入框；numbernumber：number類型需要輸入數(shù)值的輸入框；Data PickersData Pickers（數(shù)據(jù)檢出器）：（數(shù)據(jù)檢出器）：HTML5擁有多個可供選擇日期與時間的新型輸入框：date- 選取年、月、日month- 選取年、月week- 選取周、年time- 選取時間（小時和分鐘）datetime- 選取時間、日、月、年（UTC時間）datetime-local 選取時間、日、月、年（本地時間）前端開發(fā)

10、視覺設(shè)計2.5 新增的多媒體元素與交互性元素新增video和audio元素，顧名思義，分別是用來插入視頻和音頻的。值得注意的是可以在開始標(biāo)簽和結(jié)束標(biāo)簽之間放置文本內(nèi)容，這樣在舊的瀏覽器中就可以顯示出不支持該標(biāo)簽的提示信息。這些標(biāo)簽的增加是為了提高頁面的交互體驗。 您的瀏覽器不支持video標(biāo)簽。前端開發(fā) 視覺設(shè)計HTML5互設(shè)計detailsdetails元素：元素：details元素表示用戶要求得到并且可以得到的細(xì)節(jié)信息。它可以與元素配合使用，元素提供標(biāo)題或圖例，標(biāo)題是可見的，用戶點擊標(biāo)題時，會顯示出details。同時應(yīng)該是元素的第一個子元素。 HTML5 How to learn Htm

11、l5 ?前端開發(fā) 視覺設(shè)計HTML5互設(shè)計menumenu元素：元素：menu元素表示菜單列表，當(dāng)希望列出表單控件時使用該標(biāo)簽。 black green前端開發(fā) 視覺設(shè)計2.6 廢除的元素由于種種原因，在Html5中廢除了很多元素，下面簡單介紹一下被廢除的元素：1、可以使用css代替的元素 對于basefont、big、center、font、s、strike、tt、u這些元素，由于它們的功能都是純粹為了畫面服務(wù)的，而在Html5中提倡把畫面展示性功能放在css樣式表中統(tǒng)一編輯，所以將這些元素廢除，并使用編輯css樣式表的方式進(jìn)行替代；2、不可以使用frame框架 對于frameset元素、f

12、rame元素與nofrances元素，由于frame框架對頁面存在負(fù)面影響，在html5中已不再支持frame框架，只支持iframe框架，或者用服務(wù)器方創(chuàng)建的由多個頁面組成的復(fù)合頁面的形式，同時將以上三個元素廢除；前端開發(fā) 視覺設(shè)計3、只有部分瀏覽器支持的元素： 對于applet、bgsound、blink、marguee等元素，由于只有部分瀏覽器支持這些元素，特別是bgsound元素以及marguee元素，只被IE瀏覽器支持，所以在Html5中被廢除。 其中，applet元素可由embed元素替代，bgsound元素可由audio元素替代，marguee可由JavaScript來實現(xiàn)。 新

13、增與鏈接相關(guān)的屬性新增與鏈接相關(guān)的屬性 新增與表單相關(guān)的屬性新增與表單相關(guān)的屬性 新增的新增的其他屬性其他屬性 廢除的屬性廢除的屬性前端頁面實現(xiàn)前端頁面實現(xiàn)3.3.新增的屬性和廢除的屬性新增的屬性和廢除的屬性前端開發(fā) 視覺設(shè)計mediamedia屬性屬性：為與元素增加media屬性，該屬性規(guī)定目標(biāo)URL是為什么類型的媒介/設(shè)備進(jìn)行優(yōu)化的，只能在href屬性存在時使用；sizessizes屬性屬性：為元素增加了新屬性sizes，該屬性可以與icon元素結(jié)合使用（通過rel屬性），該屬性指定關(guān)聯(lián)圖標(biāo)（icon元素）的大??；targettarget屬性屬性：為元素增加了target屬性，主要目的是保

14、持與元素的一致性，同時target元素在web應(yīng)用程序中，尤其是在與iframe結(jié)合使用時，是非常有用的。3.1 與鏈接相關(guān)的屬性前端開發(fā) 視覺設(shè)計(1)placeholder屬性 當(dāng)用戶還沒有輸入值的時候，input輸入框中可以通過placeholder屬性向用戶顯示描述性說明或提示信息，除普通的text文本框之外，email、number、url等其他類型的輸入框也都支持placeholder屬性。 在Firefox等支持placeholder屬性的瀏覽器中，提示文字會以淺灰色的樣式顯示在輸入框中，當(dāng)頁面失去焦點切換到輸入框中，或者輸入框中有值時，提示信息會消失。3.2 與表單相關(guān)的屬性前

15、端開發(fā) 視覺設(shè)計 在不支持placeholder的瀏覽器中運行時，該屬性會被忽略，以輸入框的默認(rèn)方式顯示，同時在輸入框輸入內(nèi)容之后，也不會顯示。前端開發(fā) 視覺設(shè)計(2)autocomplete屬性 瀏覽器通過autocomplete屬性來確定是否應(yīng)該保存輸入值以備將來使用，例如不保存的代碼： autocomplete屬性應(yīng)該用來保護(hù)敏感的用戶數(shù)據(jù)，避免本地瀏覽器對它們進(jìn)行不安全地存儲，對于autocomplete屬性，可以指定on、off與不指定三個值。其中，不指定時，使用瀏覽器的默認(rèn)值；屬性為on時，可以顯示指定候補輸入的數(shù)據(jù)列表。前端開發(fā) 視覺設(shè)計(3)autofocus屬性 給文本框、選

16、擇框或按鈕控件加上該屬性，當(dāng)畫面打開時，該控件自動獲得光標(biāo)焦點，一個頁面中只能有一個控件具有該屬性。 注：只有當(dāng)一個頁面是以使用某個控件為主要目的時，才對該控價使用autofocus屬性，例如搜索頁中的搜索文本框。前端開發(fā) 視覺設(shè)計(4)list屬性 在html5中，為單行文本框添加一個list屬性，該屬性的值為某個datalist元素的id。datalist元素也是html5新增元素，該元素類似于選擇框（select），但當(dāng)用戶想要設(shè)置的值不在選擇列表之內(nèi)時，允許其自行輸入。該元素本身并不顯示，而是當(dāng)文本框獲得焦點時以提示輸入的方式顯示。Text： 下拉列表1 下拉列表2 下拉列表3前端開發(fā)

17、 視覺設(shè)計(5)min和max屬性 通過設(shè)置min和max屬性，可以將range輸入框的數(shù)值范圍限定在最小值和最大值之間，這兩個屬性既可以只設(shè)置一個，可以同時設(shè)置兩個，也可以都不設(shè)置，輸入控件會根據(jù)設(shè)置的參數(shù)對值范圍作出相應(yīng)調(diào)整。例如，創(chuàng)建一個表示型大小的range控件，值范圍從0%-100%。/ 默認(rèn)min為0，max為100前端開發(fā) 視覺設(shè)計(6)step屬性 對于輸入型控件，設(shè)置其step屬性能夠制定輸入值遞增或遞減的梯度，例如按如下方式表示型大小range控件的step屬性設(shè)置為5： 設(shè)置完成后，控件可接受的輸入值只能是初始值與5的倍數(shù)之和，也就是說只能輸入0、5、10.100，至于是

18、輸入框的形式還是滑動條的形式，則由瀏覽器來決定。 step屬性的默認(rèn)值取決于控件的類型，對于range控件，step默認(rèn)值為1，為配合step屬性，html5引入了stepUp和stepDown兩個函數(shù)對其進(jìn)行控制，這兩個函數(shù)的作用分別是根據(jù)step屬性的值來增加或減少控件的值。前端開發(fā) 視覺設(shè)計(7)required屬性 一旦為某輸入型控件設(shè)置了required屬性，那么此項為必填項，否則無法提交表單，以文本輸入框為例，要將其設(shè)置為必填項，按照如下方式添加required屬性即可： 注：required屬性是最簡單的一種表單驗證方式。前端開發(fā) 視覺設(shè)計(8)email輸入類型 email類型

19、的input元素是一種專門用來輸入email地址的文本框，提交時如果文本框中的內(nèi)容不是email地址格式的文字，則不允許提交，但并不檢查email地址是否存在，和所有的輸入類型一樣，用戶可能提交帶有空字段的表單，除非該字段加上了required屬性。前端開發(fā) 視覺設(shè)計(9)url輸入類型 url類型的input元素是一種專門用來輸入url地址的文本框，提交時如果該文本框的內(nèi)容不是url地址格式的文字，則不允許提交。前端開發(fā) 視覺設(shè)計(10)date類型 date輸入類型是比較常見的一種元素，我們經(jīng)?？吹骄W(wǎng)頁中要求我們輸入的各種各樣的日期，例如生日、購買日期、訂票日期等。date類型的input

20、元素以日歷的形式方便用戶輸入。前端開發(fā) 視覺設(shè)計(11)time類型 time類型的input元素是一種專門用來輸入時間的文本框，并且在提交時會對輸入時間的有效性進(jìn)行檢查。它的外觀取決于瀏覽器，可能是簡單的文本框，只在提交時檢查是否在其中輸入有效的時間，也可以以時鐘形式出現(xiàn)。前端開發(fā) 視覺設(shè)計(12)datetime輸入類型 datetime類型的input元素是一種專門用來輸入UTC日期和時間的文本框，并且在提交時會對輸入的日期和時間進(jìn)行有效性檢查。前端開發(fā) 視覺設(shè)計(13)datetime-local輸入類型 datetime-local類型的input元素是一種專門用來輸入本地日期和時間

21、的文本框，并且在提交時會對輸入的日期和時間進(jìn)行有效性檢查。前端開發(fā) 視覺設(shè)計(14)month輸入類型 month類型的input元素是一種專門用來輸入月份的文本框，并且在提交時會對輸入的月份進(jìn)行有效性檢查。前端開發(fā) (15)week輸入類型 week類型的input元素是一種專門用來輸入周號的文本框，并且在提交時會對輸入的周號進(jìn)行有效性檢查。有的瀏覽器會提供一種輔助輸入的日歷，可以在該日歷中選取日期，選取完畢文本框中自動顯示周號。前端開發(fā) 視覺設(shè)計(16)number輸入類型 number類型的input元素是一種專門用來輸入數(shù)字的文本框，并且在提交時會檢查其中的內(nèi)容是不是數(shù)字，它與min、

22、max、step屬性能很好地協(xié)作。前端開發(fā) 視覺設(shè)計(17)range輸入類型 range類型的input元素是一種只允許輸入一段范圍內(nèi)數(shù)值的文本框，它具有min屬性和max屬性，可以設(shè)定最小值和最大值（默認(rèn)為0和100），它還具有step屬性，可以指定每次拖動的布幅。前端開發(fā) 視覺設(shè)計(18)search輸入類型 search類型的input元素是一種專門用來輸入搜索關(guān)鍵詞的文本框。search類型和text類型僅僅在外觀上有區(qū)別，同時外觀可以通過css樣式表來改寫。(19)tel輸入類型 tel類型的input元素被設(shè)計為用來輸入電話號碼的專用文本框，它沒有特殊的校驗規(guī)則，它甚至不強調(diào)只輸

23、入數(shù)字，因為很多電話號碼常常帶有額外的字符，例如：12-89564752，但是在實際的開發(fā)過程中，可以通過pattern屬性來指定對輸入的電話號碼格式進(jìn)行驗證。前端開發(fā) 視覺設(shè)計(20)color輸入類型 color類型的input元素用來選取顏色，它提供一個顏色選擇器。前端開發(fā) 視覺設(shè)計Html5中除了上面介紹的與鏈接和表單相關(guān)的屬性之外，還增加了下面的屬性：reversedreversed屬性屬性：為元素增加屬性reversed，它指定列表倒序顯示。li元素的value屬性與ol元素的start屬性因為它不是被顯示在界面上的，所以不建議使用；charsetcharset屬性屬性：為元素增加了charset屬性，該屬性已經(jīng)被廣泛支持，而且為文檔的字符編碼的指定提供一種比較良好的方式；typetype屬性與屬性與labellabel屬性屬性：為增加兩個新的屬性type與label，label屬性為菜單定義一個可見的標(biāo)注，type屬性讓菜單可以以上下文菜單、工具條、列表等三種形式顯示；scopedscoped屬性屬性：為元素增加了scoped屬性，用來規(guī)定樣式的作用范圍，譬如只對頁面上某個樹起作用。3.3 其他屬性前端開發(fā) 視覺設(shè)計Html4中使用的屬性中使用的屬性使用該屬性的元素使用該屬性的元素Html5中的替代方案中的替代方案ch