電子商務(wù)網(wǎng)頁(yè)制作-項(xiàng)目二

1、項(xiàng)目二 運(yùn)用HTML5制作招生宣傳單頁(yè)項(xiàng)目綜述 掌握一些HTML知識(shí),對(duì)加深掌握網(wǎng)頁(yè)制作,提高網(wǎng)頁(yè)制作水平是很有幫助的。本項(xiàng)目將通過(guò)使用HTML5來(lái)制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè),從而使學(xué)生掌握基礎(chǔ)的HTML語(yǔ)法規(guī)范和HTML5標(biāo)簽的學(xué)習(xí)。項(xiàng)目目標(biāo)能力目標(biāo)：學(xué)習(xí)完本項(xiàng)目后,能夠依據(jù)HTML5語(yǔ)法規(guī)范來(lái)編寫簡(jiǎn)單的網(wǎng)頁(yè)文件,包括:（1）編寫HTML頁(yè)面形成網(wǎng)頁(yè)。（2）修改HTML網(wǎng)頁(yè)代碼。（3）調(diào)試HTML網(wǎng)頁(yè)顯示效果。知識(shí)目標(biāo)：（1）HTML基本語(yǔ)法。（2）HTML常用標(biāo)簽及屬性的用法。（3）HTML編輯工具的使用。（4）HTML5的新特性（5）HTML5新標(biāo)簽和新屬性的用法Part 01任務(wù)一通過(guò)HTML

2、5制作學(xué)院招生的基礎(chǔ)文本單頁(yè)任務(wù)引導(dǎo) 本任務(wù)的目標(biāo)是通過(guò)制作一個(gè)簡(jiǎn)單的可用于移動(dòng)端的招生基礎(chǔ)文本單頁(yè)來(lái)掌握用HTML手工編寫一個(gè)簡(jiǎn)單頁(yè)面的方法，然后通過(guò)這個(gè)頁(yè)面來(lái)初步了解HTML5的基本結(jié)構(gòu)以及文本用法。任務(wù)實(shí)施1.創(chuàng)建頁(yè)面基本結(jié)構(gòu)2.輸入完整網(wǎng)頁(yè)結(jié)構(gòu)3.保存為網(wǎng)頁(yè)文件4.打開(kāi)網(wǎng)頁(yè)5.增加移動(dòng)端設(shè)備的基本結(jié)構(gòu)6.增加HTML5結(jié)構(gòu)化標(biāo)簽7.使用標(biāo)題、段落和分割水平線8.添加列表9.查看網(wǎng)頁(yè)源代碼知識(shí)分析1.HTML HTML(HyperText Markup Language),即超文本標(biāo)簽語(yǔ)言,它并不算一種真正的程序語(yǔ)言,而是一種描述文檔結(jié)構(gòu)的語(yǔ)言。HTML構(gòu)成了網(wǎng)頁(yè)文檔的主體。 HTML可

3、以用純文本編輯器(如Windows的記事本、寫字板等)來(lái)編輯也可以通過(guò)編輯器，將所需要表達(dá)的信息按某種規(guī)則寫成HTML文件,通過(guò)瀏覽器來(lái)識(shí)別,并將這些HTML翻譯成所見(jiàn)到的網(wǎng)頁(yè)。HTML文件一般以.htm或.html為擴(kuò)展名。 HTML當(dāng)前最新的規(guī)范版本是HTML5，它也代表了一系列Web相關(guān)技術(shù)的總稱。大部分瀏覽器已經(jīng)具備了對(duì)HTML5的支持。對(duì)于之前HTML4.01版本，HTML5保持了新功能與原有功能的平穩(wěn)過(guò)渡。知識(shí)分析2.HTML的語(yǔ)法 HTML是由標(biāo)簽、標(biāo)簽屬性和內(nèi)容注釋構(gòu)成的，一起用來(lái)描述網(wǎng)頁(yè)上的各種元素。 （1）標(biāo)簽：用于標(biāo)示描述功能的符號(hào)。通過(guò)相應(yīng)的英文名稱或者縮寫字母嵌套在“

4、”里構(gòu)成,例如、等。標(biāo)簽一般分為起始標(biāo)簽和結(jié)束標(biāo)簽 。由起始標(biāo)簽和結(jié)束標(biāo)簽構(gòu)成的標(biāo)簽，被稱為雙標(biāo)簽。也有一些標(biāo)簽,只有起始標(biāo)簽，沒(méi)有結(jié)束標(biāo)簽,被稱為單標(biāo)簽。這類標(biāo)簽并不常見(jiàn),例如、等。知識(shí)分析2.HTML的語(yǔ)法 （2）屬性：用于進(jìn)一步描述該標(biāo)簽。屬性的位置在起始標(biāo)簽內(nèi)。一個(gè)標(biāo)簽可以有多個(gè)屬性項(xiàng),各屬性項(xiàng)次序不影響屬性產(chǎn)生的效果,各屬性之間須用空格分隔,空格數(shù)目也不影響屬性的效果。帶屬性的起始標(biāo)簽的一般可標(biāo)示為:。 在HTML文檔中,HTML標(biāo)簽和屬性的書寫不區(qū)分大小寫;HTML標(biāo)簽可以嵌套但不能交叉;HTML文檔可以在一行上書寫多個(gè)標(biāo)簽,也可以把一個(gè)標(biāo)簽包含的屬性分為多行書寫,但一個(gè)完整的單詞

5、不能分成兩行寫。 （3）內(nèi)容注釋：可對(duì)文檔標(biāo)簽起注釋的作用,可放在文檔中的任何位置,用標(biāo)簽。在標(biāo)簽內(nèi)的為注釋內(nèi)容, 在瀏覽器預(yù)覽時(shí)是不顯示的。知識(shí)分析 3.HTML5的新語(yǔ)法 HTML5的主要語(yǔ)法基本沿用之前的HTML語(yǔ)法，從而體現(xiàn)平穩(wěn)過(guò)渡，但整體更簡(jiǎn)單，更具人性化。主要體現(xiàn)在以下一些方面： （1）文檔聲明：用于告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔（標(biāo)準(zhǔn)模式）。HTML 5只有一種 聲明，表示其是HTML5標(biāo)準(zhǔn)： （2）字符集：如需正確地顯示 HTML 頁(yè)面，瀏覽器必須知道使用何種字符集。之前的版本中。HTML 5中簡(jiǎn)化為：知識(shí)分析 3.HTML5的新語(yǔ)法 （3）標(biāo)簽省略：有些結(jié)構(gòu)標(biāo)簽

6、可以完全省略，如：html、head、body、colgroup、tbody等。有些雙標(biāo)簽也可以省略結(jié)束符，li、dt、dd、p、option、colgroup、tbody、tr、td、th等。 （4）屬性值省略引號(hào)：當(dāng)屬性值不包括空字符串、“”、=、單引號(hào)、雙引號(hào)等字符時(shí)，屬性兩邊的引號(hào)可以省略。 （5）布爾值：html5中增加布爾值，有屬性為true，沒(méi)有屬性為false。對(duì)于布爾類型的屬性，比如：readonly、disabled，checked、selected當(dāng)它們不寫值的時(shí)候，就是默認(rèn)是true。也就是只要寫了這個(gè)屬性，屬性立馬生效。例如之前HTML版本中：，表示這個(gè)選框被選中。在

7、HTML5中則寫為：。知識(shí)分析 4.HTML的基本結(jié)構(gòu) HTML文檔以標(biāo)簽開(kāi)始,以結(jié)束,其中可分為頭部和主體兩部分。所有HTML文檔內(nèi)容則分別嵌套入頭部和主體部分的標(biāo)簽對(duì)之間。 知識(shí)分析 4.HTML的基本結(jié)構(gòu) 提供有關(guān)頁(yè)面的元信息(meta-information),也是一個(gè)單標(biāo)簽,在一個(gè)頁(yè)面的頭部中可以有多個(gè)標(biāo)簽。meta標(biāo)簽的作用有搜索引擎優(yōu)化，定義頁(yè)面使用的語(yǔ)言，自動(dòng)刷新并指向新的頁(yè)面，實(shí)現(xiàn)網(wǎng)頁(yè)轉(zhuǎn)換時(shí)的動(dòng)態(tài)效果，控制頁(yè)面緩沖，網(wǎng)頁(yè)定級(jí)評(píng)價(jià)，控制網(wǎng)頁(yè)顯示的窗口等。常見(jiàn)功能如下: （1）name屬性：常用于描述網(wǎng)頁(yè)，比如網(wǎng)頁(yè)的關(guān)鍵詞、敘述等。和content中的內(nèi)容對(duì)應(yīng)，便于搜索引擎抓取。

8、 （2）http-equiv屬性：相當(dāng)于http的文件頭作用，可以向?yàn)g覽器傳回一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁(yè)內(nèi)容，也和content中的內(nèi)容對(duì)應(yīng)，content中的內(nèi)容其實(shí)就是各個(gè)參數(shù)的變量值。知識(shí)分析 5.移動(dòng)設(shè)備的HTML基本結(jié)構(gòu) 現(xiàn)階段借助移動(dòng)設(shè)備來(lái)訪問(wèn)頁(yè)面已經(jīng)成為主流，頁(yè)面設(shè)計(jì)不得不考慮對(duì)于移動(dòng)設(shè)備的訪問(wèn)支持。最主要的問(wèn)題就是分辨率尺寸，移動(dòng)設(shè)備無(wú)法將普通網(wǎng)頁(yè)全屏顯示在移動(dòng)設(shè)備上，雖然通過(guò)屏幕放大縮小也可訪問(wèn)傳統(tǒng)的網(wǎng)頁(yè)，也這樣用戶體驗(yàn)不佳，而且也會(huì)存在實(shí)際使用問(wèn)題?？稍谥刑砑觱iewport元數(shù)據(jù)標(biāo)簽。 知識(shí)分析 6.HTML塊級(jí)元素與內(nèi)聯(lián)元素 大多數(shù) HTML 元素被定

9、義為塊級(jí)元素或內(nèi)聯(lián)元素。塊級(jí)元素：顯示在一塊內(nèi)，會(huì)自動(dòng)換行，元素會(huì)從上到下垂直排列，各自占一行，如p、h1、div等標(biāo)簽元素。內(nèi)聯(lián)元素：元素在一行內(nèi)水平排列，高度由元素的內(nèi)容決定，height屬性不起作用，如span、a等標(biāo)簽元素。一般來(lái)說(shuō)，常通過(guò) 和 將 HTML元素組合起來(lái)。知識(shí)分析 7.HTML5新增的結(jié)構(gòu)標(biāo)簽 隨著網(wǎng)頁(yè)標(biāo)準(zhǔn)化的推行，很多網(wǎng)頁(yè)在布局時(shí)都是采用了Div+CSS的布局方式。在頁(yè)面中只有Div來(lái)定義時(shí)，可以說(shuō)整個(gè)HTML文檔結(jié)構(gòu)定義不清晰，語(yǔ)義化是不明確的。在HTML5中，為了使文檔的結(jié)構(gòu)更加清晰明確，專門添加了頁(yè)眉、頁(yè)腳、導(dǎo)航、文章內(nèi)容等跟結(jié)構(gòu)相關(guān)的結(jié)構(gòu)元素標(biāo)簽。知識(shí)分析 8

10、.標(biāo)題標(biāo)簽 HTML提供了六個(gè)級(jí)別的標(biāo)題,n值越小,標(biāo)題字號(hào)就越大。定義最大的標(biāo)題,定義最小的標(biāo)題。在這些標(biāo)簽中嵌套的文字元素顯示黑體字體且自動(dòng)插入一個(gè)空行。9.段落標(biāo)簽 當(dāng)需要換段落另起一段時(shí)可以使用段落標(biāo)簽,段落的結(jié)束由來(lái)標(biāo)簽,一般可以將省略,因?yàn)橄乱粋€(gè)的開(kāi)始就意味著上一個(gè)的結(jié)束。10.換行標(biāo)簽 換行標(biāo)簽是一個(gè)單標(biāo)簽,與段落標(biāo)簽的顯示效果都是另起一行,換段則新起的一行與原行之間有一空行,另外由于不屬于同一段落,對(duì)齊方式可以不同。知識(shí)分析 11.水平線標(biāo)簽 在屏幕上顯示一條水平線段,可從視覺(jué)上將頁(yè)面分割成不同部分。12.無(wú)序列表標(biāo)簽 無(wú)序列表ul標(biāo)簽用來(lái)將“標(biāo)簽內(nèi)容”以列表的方式顯示，列表項(xiàng)

11、目無(wú)先后順序之分，也就是沒(méi)有編號(hào)。列表內(nèi)的數(shù)據(jù)項(xiàng)以li標(biāo)簽來(lái)列舉，ul標(biāo)簽中的li標(biāo)簽項(xiàng)目數(shù)據(jù)默認(rèn)會(huì)加上一個(gè)圓點(diǎn)符號(hào)。無(wú)序列表是一個(gè)項(xiàng)目的列表，此列項(xiàng)使用實(shí)心圓進(jìn)行標(biāo)記。其語(yǔ)法形式如下： 無(wú)序列表項(xiàng)1 無(wú)序列表項(xiàng)2 知識(shí)分析 13.HTML的特殊符號(hào) HTML中經(jīng)常會(huì)用到一些特殊符號(hào)，例如箭頭，雪花，心形等等，這些符號(hào)就不用CSS樣式或者圖片來(lái)寫了，直接用html特殊符號(hào)可以實(shí)現(xiàn)。另外還有一些例如空格、等在HTML中具有特殊作用的標(biāo)號(hào)若要能夠在網(wǎng)頁(yè)中正確顯示也需要使用特殊符號(hào)。拓展練習(xí) 1.XML XML(Extensible Markup Language)即可擴(kuò)展標(biāo)簽語(yǔ)言, XML和HTM

12、L是兩種不同用途的標(biāo)簽語(yǔ)言。HTML的重點(diǎn)是數(shù)據(jù)顯示,XML的重點(diǎn)是組織和描述信息。XML包含了一系列相關(guān)技術(shù)。2.XHTML 可擴(kuò)展超文本標(biāo)簽語(yǔ)言(Extensible HyperText Markup Language,XHTML),表現(xiàn)方式與超文本標(biāo)簽語(yǔ)言(HTML)類似,不過(guò)語(yǔ)法上更加嚴(yán)格。從繼承關(guān)系上講,XHTML基于可擴(kuò)展標(biāo)簽語(yǔ)言(XML)。XHTML 1.0是W3C的推薦標(biāo)準(zhǔn)。拓展練習(xí) 3.HTML5的革新（1）語(yǔ)義網(wǎng)（Semantics）（2）離線&存儲(chǔ)（Offline & Storage）（3）設(shè)備訪問(wèn)（Device Access）（4）通信（Connectivity）（5）

13、呈現(xiàn)（CSS3）（6）性能和集成（Performance & Integration）（7）繪畫圖形和特效（3D, Graphics & Effects）（8）多媒體（Multimedia）拓展練習(xí) 4.文本格式化標(biāo)簽 HTML可以定義一些文本修飾效果, 供格式化輸出，比如粗體和斜體字。5.定義預(yù)格式文本標(biāo)簽 可定義預(yù)格式化的文本,被包圍在標(biāo)簽中的文本通常會(huì)保留空格和換行符,而文本也會(huì)呈現(xiàn)為等寬字體。標(biāo)簽常用來(lái)表示計(jì)算機(jī)的源代碼。6.有序列表標(biāo)簽 有序列表也是一列項(xiàng)目的列表,列表項(xiàng)目使用有序的標(biāo)簽進(jìn)行標(biāo)簽。有序列表始于ol標(biāo)簽。每個(gè)列表項(xiàng)同樣始于li標(biāo)簽。定制有序列表表中的序號(hào)通過(guò)屬性type

14、的屬性值A(chǔ),a,I,i,1等來(lái)決定。有序列表標(biāo)簽的起始值,可以通過(guò)設(shè)置ol的屬性start的屬性值來(lái)完成,屬性值為數(shù)值。拓展練習(xí) 7.嵌套列表 當(dāng)一個(gè)列表內(nèi)容里還有細(xì)分的列表，就需要我們嵌套一個(gè)列表進(jìn)去。一樣的在li標(biāo)簽里放ul標(biāo)簽或ol標(biāo)簽進(jìn)行層次嵌套。8.自定義列表標(biāo)簽 自定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。自定義列表以 dl標(biāo)簽開(kāi)始。每個(gè)自定義列表項(xiàng)以 dt 開(kāi)始。每個(gè)自定義列表項(xiàng)的定義以 dd 開(kāi)始。習(xí)題1.利用HTML創(chuàng)建一個(gè)簡(jiǎn)單的頁(yè)面用于介紹個(gè)人的寢室或者班級(jí)。2.采用列表元素來(lái)制作一個(gè)熱門排行榜。Part 02任務(wù)二HTML5制作學(xué)院招生的圖文單頁(yè)任務(wù)引導(dǎo) 本任務(wù)通

15、過(guò)編寫HTML文檔來(lái)繼續(xù)制作學(xué)院招生的簡(jiǎn)單頁(yè)面,通過(guò)添加圖片，制作表格來(lái)優(yōu)化頁(yè)面效果，同時(shí)進(jìn)一步熟悉常用的HTML標(biāo)簽以及使用HTML編寫網(wǎng)頁(yè)。任務(wù)實(shí)施1. 創(chuàng)建網(wǎng)站文件夾2.打開(kāi)文本工具3.分析網(wǎng)站頂部4.分析頁(yè)面主體5.分析網(wǎng)站底部6.保存更新網(wǎng)頁(yè),完成任務(wù)二。知識(shí)分析 1.網(wǎng)頁(yè)常用圖像格式 網(wǎng)頁(yè)中使用的圖像格式需要能夠被每一個(gè)操作平臺(tái)所接受，現(xiàn)階段最為常用的圖像格式是Gif、JPEG和PNG。2.圖像標(biāo)簽語(yǔ)法 圖像標(biāo)簽img作用為在頁(yè)面上插入并顯示圖像,它也是一個(gè)單標(biāo)簽，在HTML文件中沒(méi)有終止標(biāo)簽，常在起始標(biāo)簽右括號(hào)前加上一個(gè)右斜線“/”作結(jié)束。與其配合的是使用源屬性src。屬性src

16、用于設(shè)置圖像源,屬性值就是圖像源的URL地址。其基本語(yǔ)法是: 在該語(yǔ)法中，src的參數(shù)用來(lái)設(shè)置圖像文件所在的路徑，這一路徑可以是絕對(duì)路徑，也可以是相對(duì)路徑。知識(shí)分析 3.設(shè)置圖像屬性 （1）圖像的幅面大?。╳idth屬性和height屬性） （2）圖像的備用說(shuō)明（alt屬性） （3） 圖片的說(shuō)明（title元素）知識(shí)分析4.表格標(biāo)簽 表格的作用是組織信息，也可以作為頁(yè)面布局的方式。HTML表格就像是電子表格，由行和列構(gòu)成，每個(gè)表格單元格處于行和列的交匯處。 單元格內(nèi)的文字 單元格內(nèi)的文字 （1）表格中的空單元格（2）單元格邊框（3）顏色和背景屬性（4）表格間距和填充屬性（5）表格對(duì)齊屬性知識(shí)分

17、析5.跨多行、多列的單元格 在實(shí)際表格運(yùn)用過(guò)程中,大多表格都需要進(jìn)行單元格的行列合并,即所說(shuō)的跨行或跨列?？缍嗔械膯卧?用屬性colspan設(shè)置?？缍嘈械膯卧?用屬性rowspan設(shè)置。欄目結(jié)構(gòu)1標(biāo)題2標(biāo)題3標(biāo)題ABC欄目結(jié)構(gòu)1標(biāo)題A2標(biāo)題B3標(biāo)題C拓展練習(xí)1.表格練習(xí) 2.表格表頭、主體和頁(yè)腳標(biāo)簽（1）表格表頭thead標(biāo)簽用來(lái)顯示表格的表頭，為table的子元素，該標(biāo)簽內(nèi)容中可包含tr標(biāo)簽以及子標(biāo)簽。（2）表格頁(yè)腳tfoot標(biāo)簽用來(lái)顯示表格的頁(yè)腳，為table的子元素，該標(biāo)簽內(nèi)容中可包含tr標(biāo)簽以及子標(biāo)簽。、。（3）表格主體Tbody標(biāo)簽用來(lái)指定表格主體（表格的數(shù)據(jù)），為table的子

18、元素，該標(biāo)簽內(nèi)容中可包含tr標(biāo)簽以及子標(biāo)簽。拓展練習(xí)3.嵌套表格的作用 在網(wǎng)頁(yè)中使用表格布局時(shí),經(jīng)常需要運(yùn)用嵌套表格。因?yàn)榍短妆砀窨梢允鬼?yè)面布局更為合理,方便頁(yè)面布局,填充網(wǎng)頁(yè)元素。利用表格中單元格的跨行跨列合并拆分并不能滿足很多常見(jiàn)的頁(yè)面布局需求。4.HTML5視頻 HTML5 提供了在Web上展示視頻的標(biāo)準(zhǔn)。HTML5 規(guī)定了一種通過(guò) video 標(biāo)簽來(lái)包含視頻的標(biāo)準(zhǔn)方法。其語(yǔ)法可如： 你的瀏覽器不支持該視頻元素。拓展練習(xí)5.HTML5音頻 HTML5 提供了在Web上播放音頻的標(biāo)準(zhǔn)。之前大多數(shù)頁(yè)面音頻是通過(guò)插件（比如 Flash）來(lái)顯示的。然而，并非所有瀏覽器都擁有同樣的插件。而HTML

19、5 規(guī)定了一種通過(guò) audio標(biāo)簽來(lái)包含音頻的標(biāo)準(zhǔn)方法。其語(yǔ)法可如： 你的瀏覽器不支持該音頻元素.習(xí)題1.通過(guò)HTML創(chuàng)建一個(gè)簡(jiǎn)易的圖文混排班級(jí)介紹網(wǎng)頁(yè)。2.給頁(yè)面加入視頻、背景音樂(lè)等多媒體元素。Part 03任務(wù)三HTML5制作學(xué)院招生的詳細(xì)咨詢頁(yè)任務(wù)引導(dǎo) 本任務(wù)通過(guò)編寫HTML文檔來(lái)繼續(xù)制作學(xué)院招生的詳細(xì)咨詢頁(yè),通過(guò)添加對(duì)前一任務(wù)添加超級(jí)鏈接跳轉(zhuǎn)到具體咨詢頁(yè)面，通過(guò)表單控件來(lái)實(shí)現(xiàn)交互頁(yè)，同時(shí)進(jìn)一步熟悉常用的HTML標(biāo)簽以及掌握HTML5的表單新標(biāo)簽。任務(wù)實(shí)施1. 創(chuàng)建咨詢頁(yè)面2. 添加超級(jí)鏈接3.編寫咨詢頁(yè)面結(jié)構(gòu)4.添加表單標(biāo)簽5.添加放置表單控件的表格6.在單元格中設(shè)置文案和表單控件7.

20、添加背景圖片8.保存更新網(wǎng)頁(yè),完成任務(wù)三知識(shí)分析1.超鏈接 超鏈接（hyperlink），或者簡(jiǎn)稱為鏈接（link）。超鏈接就是從一個(gè)網(wǎng)頁(yè)跳轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè)的途徑，是網(wǎng)站中使用比較頻繁的HTML元素。超鏈接的標(biāo)簽是a，a標(biāo)簽作用為可定義錨(anchor)。主要通過(guò)設(shè)置href屬性,創(chuàng)建指向另外一個(gè)文檔的超鏈接?；菊Z(yǔ)法如下:2.設(shè)置超鏈接的窗口打開(kāi)方式 默認(rèn)情況下，超鏈接打開(kāi)新頁(yè)面的方式是在原頁(yè)面打開(kāi)，也就是原頁(yè)面會(huì)被替代?？梢酝ㄟ^(guò)設(shè)置a標(biāo)簽的target屬性來(lái)制訂超鏈接打開(kāi)目標(biāo)頁(yè)面的方式。其語(yǔ)法形式如下：鏈接內(nèi)容 知識(shí)分析3.表單標(biāo)簽 HTML 表單用于搜集不同類型的用戶輸入。表單標(biāo)簽form

21、定義 HTML 表單。在HTML中，標(biāo)簽用來(lái)創(chuàng)建一個(gè)表單，即定義表單的開(kāi)始位置和結(jié)束位置。在標(biāo)記中，可以設(shè)置表單的基本屬性，包括表單的名稱、處理程序、傳送方法等。4.使用input標(biāo)簽創(chuàng)建表單控件 input元素可以定義大多數(shù)類型的表單控件，控件的類型取決于type的屬性值，不同的值對(duì)應(yīng)不同的表單控件，默認(rèn)值為text文本字段。知識(shí)分析4.使用input標(biāo)簽創(chuàng)建表單控件（1）文本字段（2）單選按鈕（3）復(fù)選框（4）普通按鈕知識(shí)分析4.使用input標(biāo)簽創(chuàng)建表單控件（5）提交按鈕（6）重置按鈕（7）數(shù)字字段（8）電話字段知識(shí)分析4.使用input標(biāo)簽創(chuàng)建表單控件（9）郵箱字段 （10）日期字段 5.使用select標(biāo)簽創(chuàng)建表單控件 輸入類型的控件一般以input標(biāo)簽開(kāi)始，說(shuō)明該控件需要用戶的輸入，而菜單類則以select標(biāo)簽開(kāi)始，表示用戶需要選擇?？砂词欠裰С侄噙x分為下拉菜單和列表項(xiàng)。知識(shí)分析5.使用select標(biāo)簽創(chuàng)建表單控件 （1）下拉菜單 選項(xiàng)顯示內(nèi)容 選項(xiàng)顯示內(nèi)容 （2）列表項(xiàng) 選項(xiàng)顯示內(nèi)容 選項(xiàng)顯示內(nèi)容 知識(shí)分析6.創(chuàng)建文本域 除了以上的兩大類表單控件外，還有一種特殊定義的文本樣式，稱為文字域或文本域，它與文字字段的區(qū)別在于可以添加多行的文字，從而輸入更多的文本內(nèi)容。其語(yǔ)法形式如下：7.背景設(shè)