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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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