Html元素和屬性(2)

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

2、現(xiàn)象，在Html5中不將這些視為錯(cuò)誤，而是“允許這些現(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）可省略整

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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