項(xiàng)目十 html5 新增結(jié)構(gòu)元素和屬性

10html5新增結(jié)構(gòu)元素和屬性602任務(wù)1制作訂單支付網(wǎng)頁地址區(qū)任務(wù)2制作訂單支付網(wǎng)頁603制作訂單支付網(wǎng)頁地址區(qū)任務(wù)1604●掌握html5新增結(jié)構(gòu)元素的用法。605為了使文檔的結(jié)構(gòu)更加清晰、明確，html5新增加了一些可以改善文檔結(jié)構(gòu)的元素，如header、footer、article、aside、section等。這些結(jié)構(gòu)元素能夠讓網(wǎng)頁設(shè)計(jì)者更加語義化地創(chuàng)建文檔。而在之前的html4中，設(shè)計(jì)者要實(shí)現(xiàn)這些語義化的功能，需要使用div標(biāo)簽的額外屬性，且由于設(shè)計(jì)者編碼習(xí)慣不同，很難做到統(tǒng)一。本任務(wù)主要使用section元素實(shí)現(xiàn)網(wǎng)頁語義化，并用nav標(biāo)簽設(shè)置導(dǎo)航欄來制作繽購樂食電子商務(wù)網(wǎng)站訂單支付網(wǎng)頁地址。網(wǎng)頁效果如圖所示。606607訂單支付網(wǎng)頁地址區(qū)效果圖608步驟一：在body標(biāo)簽中插入一個(gè)大的section模塊，里面包含兩個(gè)小section模塊，第二個(gè)section模塊包含一個(gè)ul無序列表。網(wǎng)頁的導(dǎo)航列表主要用ul無序列表來布局，為了更加語義化地表達(dá)網(wǎng)頁內(nèi)容，在ul外層包裹一組nav標(biāo)簽。在導(dǎo)航列表下方使用div標(biāo)簽和span標(biāo)簽的嵌套來完成“收貨地址”區(qū)域的布局。具體html代碼如圖所示。609支付網(wǎng)頁導(dǎo)航列表結(jié)構(gòu)布局610支付網(wǎng)頁導(dǎo)航列表結(jié)構(gòu)布局611支付網(wǎng)頁導(dǎo)航列表結(jié)構(gòu)布局612支付網(wǎng)頁導(dǎo)航列表結(jié)構(gòu)布局613支付網(wǎng)頁導(dǎo)航列表結(jié)構(gòu)布局614支付網(wǎng)頁導(dǎo)航列表結(jié)構(gòu)布局615支付網(wǎng)頁導(dǎo)航列表結(jié)構(gòu)布局616步驟二：設(shè)置相應(yīng)的CSS樣式代碼。這里要注意，“默認(rèn)地址”標(biāo)志設(shè)置了半透明的效果，這是使用“opacity:0.7”來實(shí)現(xiàn)的，此處的值只能取0～1之間，值越小，透明度越高。用CSS設(shè)置支付網(wǎng)頁導(dǎo)航列表樣式的代碼如圖所示。用CSS設(shè)置支付網(wǎng)頁導(dǎo)航列表樣式代碼617用CSS設(shè)置支付網(wǎng)頁導(dǎo)航列表樣式代碼618用CSS設(shè)置支付網(wǎng)頁導(dǎo)航列表樣式代碼619用CSS設(shè)置支付網(wǎng)頁導(dǎo)航列表樣式代碼620用CSS設(shè)置支付網(wǎng)頁導(dǎo)航列表樣式代碼621用CSS設(shè)置支付網(wǎng)頁導(dǎo)航列表樣式代碼622用CSS設(shè)置支付網(wǎng)頁導(dǎo)航列表樣式代碼623用CSS設(shè)置支付網(wǎng)頁導(dǎo)航列表樣式代碼624用CSS設(shè)置支付網(wǎng)頁導(dǎo)航列表樣式代碼625運(yùn)行代碼，效果如圖所示。制作完訂單支付網(wǎng)頁地址區(qū)導(dǎo)航列表的網(wǎng)頁效果626步驟三：制作物流選擇區(qū)和支付方式選擇區(qū)。物流品牌的圖片用到了雪碧圖技術(shù)，雪碧圖技術(shù)就是將很多圖標(biāo)都放在一張大圖上，然后通過控制background-position來顯示大圖中的某個(gè)小圖。具體html代碼如圖所示。物流選擇區(qū)和支付方式選擇區(qū)結(jié)構(gòu)布局627物流選擇區(qū)和支付方式選擇區(qū)結(jié)構(gòu)布局628物流選擇區(qū)和支付方式選擇區(qū)結(jié)構(gòu)布局629用CSS設(shè)置物流選擇區(qū)和支付方式選擇區(qū)樣式的代碼，如圖所示。用CSS設(shè)置物流選擇區(qū)和支付方式選擇區(qū)樣式的代碼630用CSS設(shè)置物流選擇區(qū)和支付方式選擇區(qū)樣式的代碼631用CSS設(shè)置物流選擇區(qū)和支付方式選擇區(qū)樣式的代碼632一、section元素section元素是區(qū)塊元素，用于對網(wǎng)頁中的內(nèi)容分塊，它往往是文章中的一段，通常由標(biāo)題和內(nèi)容組成。633section元素強(qiáng)調(diào)分段和分塊，而article元素則強(qiáng)調(diào)獨(dú)立性。沒有標(biāo)題的內(nèi)容不推薦使用section元素，可以使用html輪廓工具檢查網(wǎng)頁中是否存在沒有標(biāo)題的section元素。html5輪廓工具網(wǎng)址為“/outliner”。section元素演示代碼如圖所示。其中h1標(biāo)簽包含的是標(biāo)題部分，p標(biāo)簽包含的是內(nèi)容部分。section元素演示代碼634二、nav標(biāo)簽nav標(biāo)簽用來定義網(wǎng)頁導(dǎo)航列表的部分。nav標(biāo)簽的使用場合主要有傳統(tǒng)導(dǎo)航條、側(cè)邊欄導(dǎo)航、頁內(nèi)導(dǎo)航、翻頁操作。nav標(biāo)簽只起語義化的作用，沒有實(shí)際的顯示效果。需要注意的是，不要用menu標(biāo)簽代替nav標(biāo)簽，nav標(biāo)簽包含幫助用戶瀏覽網(wǎng)頁的鏈接，menu標(biāo)簽則包含一組菜單命令，幫助用戶執(zhí)行某些任務(wù)。nav標(biāo)簽演示代碼如圖所示。635nav標(biāo)簽演示代碼制作訂單支付網(wǎng)頁任務(wù)2

636●掌握html5表單新屬性的特征。637html表單一直都是web的核心技術(shù)之一，依靠它可以完成web上各種應(yīng)用的輸入界面，從而使客戶端和服務(wù)器進(jìn)行方便快捷的交互。html5表單新增了許多屬性，方便設(shè)計(jì)者應(yīng)對更加多樣的場景，而不用借助其他前端腳本語言。在繽購樂食電子商務(wù)網(wǎng)站訂單支付網(wǎng)頁上，需要通過html表單做出供用戶選擇的收貨地址、快遞公司、支付方式等，并通過html表單將信息傳輸?shù)椒?wù)器完成下單操作。本任務(wù)通過之前學(xué)習(xí)的html表單相關(guān)知識(shí)以及html5表單控件的新屬性來完成訂單支付網(wǎng)頁，網(wǎng)頁效果如圖所示。638639訂單支付網(wǎng)頁效果640步驟一：首先制作訂單表格標(biāo)題，圖所示為訂單表格標(biāo)題的html代碼。訂單表格標(biāo)題的html代碼641接著設(shè)置CSS代碼，如圖所示。訂單表格標(biāo)題CSS樣式代碼642訂單表格標(biāo)題CSS樣式代碼643步驟二：制作訂單商品信息列表部分。每一行的布局是由一個(gè)單獨(dú)的ul無序列表來完成的，每一行要顯示的圖文信息分別放在li列表項(xiàng)中，所有的li列表項(xiàng)都設(shè)置為左浮動(dòng)，并排列成一行。具體html代碼如圖所示。訂單商品信息列表布局644訂單商品信息列表布局645訂單商品信息列表布局646訂單商品信息列表布局647訂單商品信息列表布局648訂單商品信息列表布局649接著設(shè)置CSS代碼，寬度和高度的屬性值不僅可以使用具體的像素值，也可以設(shè)置百分比，當(dāng)需要按比例去分配高度和寬度的時(shí)候，建議使用百分比；當(dāng)寬度和高度為具體確定的值時(shí)，建議使用像素值。用CSS設(shè)置訂單商品信息列表樣式的代碼如圖所示。用CSS設(shè)置訂單商品信息列表樣式的代碼650用CSS設(shè)置訂單商品信息列表樣式的代碼651用CSS設(shè)置訂單商品信息列表樣式的代碼652運(yùn)行代碼，效果如圖所示。訂單商品信息列表效果653步驟三：制作買家留言和商品優(yōu)惠信息部分，買家留言部分用文本輸入框?qū)崿F(xiàn)，商品優(yōu)惠信息部分用select下拉列表控件實(shí)現(xiàn)。具體html代碼如圖所示。買家留言和商品優(yōu)惠信息部分結(jié)構(gòu)布局654買家留言和商品優(yōu)惠信息部分結(jié)構(gòu)布局655買家留言和商品優(yōu)惠信息部分結(jié)構(gòu)布局656用CSS設(shè)置買家留言和商品優(yōu)惠信息部分樣式的代碼，如圖所示。用CSS設(shè)置買家留言和商品優(yōu)惠信息部分樣式的代碼657用CSS設(shè)置買家留言和商品優(yōu)惠信息部分樣式的代碼658步驟四：制作支付信息及提交訂單部分。支付信息由大div盒子中嵌套小div盒子及span標(biāo)簽來實(shí)現(xiàn)，“提交訂單”按鈕使用超鏈接a標(biāo)簽來實(shí)現(xiàn)其樣式，此按鈕也可以使用“表單提交”按鈕來實(shí)現(xiàn)，讀者可自行嘗試。具體html代碼如圖所示。支付信息及提交訂單部分結(jié)構(gòu)布局659支付信息及提交訂單部分結(jié)構(gòu)布局660支付信息及提交訂單部分結(jié)構(gòu)布局661接著設(shè)置CSS代碼，這里需要注意outline屬性和border屬性的區(qū)別：border指網(wǎng)頁元素的邊框，outline指網(wǎng)頁元素邊框的邊緣，設(shè)置無邊框使用“border:none”，設(shè)置無輪廓使用“outline:0”。具體代碼如圖所示。用CSS設(shè)置支付信息及提交訂單部分的代碼662用CSS設(shè)置支付信息及提交訂單部分的代碼663用CSS設(shè)置支付信息及提交訂單部分的代碼664一、required/pattern屬性required屬性規(guī)定必須在提交之前填寫輸入域，即輸入域不能為空。required屬性適用于以下類型的input標(biāo)簽：text、search、url、telephone、email、password、datepickers、number、checkbox、radio和?le。格式如下。665pattern屬性規(guī)定用于驗(yàn)證input域的模式，pattern類型為正則驗(yàn)證，它可以完成各種復(fù)雜的驗(yàn)證。pattern屬性適用于以下類型的input標(biāo)簽：text、search、url、telephone、email和password。格式如下。66