網(wǎng)頁(yè)制作與實(shí)訓(xùn)ppt完整版PPT幻燈片教學(xué)教程最全電子講義教案(最新)

1、項(xiàng)目一HTML基礎(chǔ)本課教學(xué)內(nèi)容靜態(tài)網(wǎng)頁(yè)制作HTML的常見標(biāo)簽（文字布局、文字設(shè)計(jì)標(biāo)簽）表格標(biāo)簽鏈接圖片標(biāo)簽表單標(biāo)簽（文本框、密碼框、下拉列表）框架 網(wǎng)頁(yè)實(shí)景圖 給HTML語(yǔ)言打的廣告一種進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)的語(yǔ)言一種標(biāo)簽式的程序設(shè)計(jì)語(yǔ)言一種純文本式的語(yǔ)言一種簡(jiǎn)單易學(xué)的語(yǔ)言一種可以使用文本編輯器進(jìn)行編輯的語(yǔ)言編輯的文件名后綴是”.html”。 HTML特點(diǎn) 1.HTML有兩種類型的標(biāo)簽，一類是單標(biāo)簽，就是一種單標(biāo)簽，它只需要單獨(dú)一組符號(hào)就可以表示完整的功能。另一種是雙標(biāo)簽，形如內(nèi)容，成對(duì)出現(xiàn)。一般良好的習(xí)慣是全部用雙標(biāo)簽。 HTML特點(diǎn) 2.HTML語(yǔ)言對(duì)于大小寫不敏感，比如馬上將要學(xué)習(xí)的表示HTML文

2、檔的標(biāo)簽：，也可寫做，甚至可以寫為，但是一般推薦，自始至終使用同一種書寫方式。 HTML文件基本結(jié)構(gòu) 標(biāo)題 （瀏覽器標(biāo)題） 內(nèi)容主體（網(wǎng)頁(yè)具體內(nèi)容） （頭部信息：用于設(shè)置網(wǎng)頁(yè)相關(guān)屬性，比如網(wǎng)頁(yè)標(biāo)題、緩存等，可以省略） HTML文件基本結(jié)構(gòu)（續(xù)） 學(xué)會(huì) Hello World： 一個(gè)最簡(jiǎn)單的HTML代碼 Hello world （標(biāo)題可以為空） Hello World! 1.2 標(biāo)題標(biāo)簽HTML簡(jiǎn)介 HTML 簡(jiǎn)介 HTML 簡(jiǎn)介 HTML 簡(jiǎn)介 HTML 簡(jiǎn)介 HTML 簡(jiǎn)介 HTML 簡(jiǎn)介 一般形式為內(nèi)容，即到，為最大，為最小 運(yùn)行結(jié)果 1.2 換行標(biāo)簽歡迎學(xué)習(xí) HTML這會(huì)是一種很有趣的體

3、驗(yàn)另一個(gè)段落元素 運(yùn)行結(jié)果 1.3 段落標(biāo)簽歡迎使用 HTML這會(huì)是一種很有趣的體驗(yàn) 另一個(gè)段落元素 運(yùn)行結(jié)果 1.3 段落標(biāo)簽為段落標(biāo)簽，我是一段文字align屬性，段落的對(duì)齊方式，較為常用的有l(wèi)eft、center、right：例： 我是居左的文字 1.3 段落標(biāo)簽（續(xù)）學(xué)習(xí)HTML這會(huì)是一種很有趣的體驗(yàn) 運(yùn)行結(jié)果右對(duì)齊Left：左對(duì)齊Center：居中Right：右對(duì)齊 1.4 文字設(shè)計(jì)標(biāo)簽標(biāo)簽:face：用來(lái)設(shè)置字體類型，默認(rèn)為宋體。color：用于設(shè)置字體顏色size:用于設(shè)置字體大小例如： 網(wǎng)頁(yè)設(shè)計(jì)教程 例如： 網(wǎng)頁(yè)設(shè)計(jì)實(shí)驗(yàn)指導(dǎo)書 十六進(jìn)制的RGB顏色碼是用六位十六進(jìn)制數(shù)字表示的紅

4、、綠、藍(lán)三原色的組合顏色。1.4 文字設(shè)計(jì)標(biāo)簽（續(xù)）常見的設(shè)置文字風(fēng)格的標(biāo)簽有：內(nèi)容：將內(nèi)容設(shè)置為粗體。 內(nèi)容：將內(nèi)容設(shè)置下劃線。 內(nèi)容：將內(nèi)容設(shè)置為斜體。 內(nèi)容：將內(nèi)容設(shè)置為上標(biāo)。 內(nèi)容：將內(nèi)容設(shè)置為下標(biāo)。例：我是粗體 我是斜體1.5 超鏈接標(biāo)簽（1） href屬性用來(lái)指定鏈接的目標(biāo)地址，可使用URL。 在標(biāo)記之間可指定作為超鏈接的文本或圖像。 例如： 百度 點(diǎn)我有驚喜！ target屬性，指明鏈接網(wǎng)頁(yè)顯示的目標(biāo)窗口，可取_self、_blank、_parent或_top四個(gè)值中的任何一個(gè)，_self為默認(rèn)值。例如： 新浪網(wǎng) 將_blank換成_self、_parent或_top，試試！看看

5、有什么不同。1.5 超鏈接標(biāo)簽 ：定義表格，表格的所有內(nèi)容都寫在這個(gè)標(biāo)簽之內(nèi) ：定義標(biāo)題，標(biāo)題會(huì)自動(dòng)出現(xiàn)在整張表格的上方：定義行 ：定義表頭，包含在之間，表頭中的文字會(huì)自動(dòng)變成粗體 ：定義單元格(表格的具體數(shù)據(jù))，包含在之間1.6 表格標(biāo)簽1.6 表格標(biāo)簽表格屬性： align： left，right，center，表示表格在頁(yè)面的布局方式，、的該屬性表示該行和該單元格的布局方式。默認(rèn)布局方式為左對(duì)齊 bgcolor：設(shè)置背景顏色 border：設(shè)置邊框的寬度，屬性值為整數(shù)，為 0 時(shí)表格沒有邊框，默認(rèn)值為 0 width：寬度，默認(rèn)單位為像素，也可以使用百分制單位 height：高度，默認(rèn)單

6、位為像素；也可以使用百分制單位1.6 表格標(biāo)簽對(duì)于整張表格，標(biāo)簽常用的屬性有以下幾個(gè)： bordercolor：表格邊框的顏色，默認(rèn)為黑色 cellpadding：?jiǎn)卧駜?nèi)容與單元格邊界的距離 cellspacing：?jiǎn)卧竦倪吙蚺c表格邊框之間的寬度1.6 表格標(biāo)簽課后作業(yè)：P20 三、操作題（表格內(nèi)容可以換成自己喜歡的） *合并單元格合并單元格必須對(duì)標(biāo)簽中的 rowspan、colspan 進(jìn)行設(shè)置，默認(rèn)為 1（表示沒有合并） 我占兩行，表示該單元格及其下面的單元格合并成一個(gè) 動(dòng)手做一做例 表格標(biāo)記示例 （顏色設(shè)置可以不做，寬度適當(dāng)即可） 答案：表格標(biāo)記示例 球隊(duì) 基本資料 所屬國(guó)家 國(guó)際排

7、名 皇家馬德里 西班牙 1 切爾西英格蘭2 AC米蘭意大利3 拜仁慕尼黑德國(guó)4 1.7 圖片標(biāo)簽圖像標(biāo)記： 網(wǎng)頁(yè)與圖片a.jpg在同一目錄下： 在網(wǎng)頁(yè)文檔所在目錄的子目錄(images)下： 在網(wǎng)頁(yè)文檔所在目錄的上層目錄下： 常用屬性：alt：當(dāng)瀏覽器不能顯示指定圖像時(shí)，顯示alt指定的替代文字。align：對(duì)齊方式。border：設(shè)定圖像的邊框，如果值為0就表示不顯示邊框。width：設(shè)定圖像寬度，單位為像素或百分比。height：設(shè)定高度高度，單位為像素或百分比。 1.7 圖片標(biāo)簽動(dòng)手做一做：在網(wǎng)頁(yè)中插入一張圖片，居中，邊框?yàn)?，高度50%，寬度80%。正下方寫上自己姓名，顏色，大小自定義

8、，楷體?？蛻舳擞脩衾帽韱卧剌斎胄畔ⅲ韱螌⑦@些信息發(fā)送到服務(wù)器端作進(jìn)一步的處理。（1）表單標(biāo)記：常用屬性包括action、method和target：action：指定服務(wù)器端處理信息的動(dòng)態(tài)網(wǎng)頁(yè)的存儲(chǔ)位置和名稱。method：指定客戶端信息發(fā)送到服務(wù)器端的方式，分為post和get兩種。target：指定服務(wù)器端返回結(jié)果顯示的目標(biāo)窗口。 1.8 表單標(biāo)簽 1.8 表單標(biāo)簽type 可以為以下的值： text：文本框，text 也為 type 的默認(rèn)屬性password：密碼框 radio：?jiǎn)芜x按鈕，可以將多個(gè)單選按鈕的 name 屬性設(shè)置相同，使其成為一組。checked屬性可設(shè)置默認(rèn)被選

9、 checkbox：復(fù)選框，checked 屬性可設(shè)置默認(rèn)被選（2）表單元素標(biāo)記 (顯示文字) （顯示文字）（多行文本框/文本域） 1.8 表單標(biāo)簽 1.8 表單標(biāo)簽 1.9 框架框架的寫法如下： 縱向3:7分割 框架窗口 注意：框架是定義多個(gè)網(wǎng)頁(yè)的集合，因此比單個(gè)網(wǎng)頁(yè)的作用域大。不要寫在里！例：綜合練習(xí)使用DW編寫，完成如下網(wǎng)頁(yè)：例子項(xiàng)目一 綜合練習(xí).docx項(xiàng)目一 結(jié)束完成項(xiàng)目一 綜合練習(xí)：項(xiàng)目一 綜合練習(xí).docxHTML5 +CSS3網(wǎng)頁(yè)制作項(xiàng)目二 HTML5 構(gòu)建網(wǎng)站為什么要學(xué)HTML5？HTML5發(fā)展前景如何？理由一：移動(dòng)開發(fā) 如今是移動(dòng)互聯(lián)網(wǎng)的黃金時(shí)代：憑借跨平臺(tái)跨終端的優(yōu)勢(shì)，你

10、可以從桌面到手機(jī)再到平板電腦進(jìn)行無(wú)縫切換，而無(wú)需重復(fù)下載安裝不同的應(yīng)用。移動(dòng)設(shè)備IOS系統(tǒng)、Android系統(tǒng)對(duì)HTML5的支持。當(dāng)手機(jī)瀏覽器完全支持HTML5那么開發(fā)移動(dòng)項(xiàng)目將會(huì)和設(shè)計(jì)更小的觸摸顯示一樣簡(jiǎn)單?，F(xiàn)代流行瀏覽器都支持HTML5（Chrome（谷歌），F(xiàn)irefox（火狐），IE9，Opera（歐朋），Safari（蘋果）理由二：跨瀏覽器支持 2015年1月28日，世界上最大的視頻網(wǎng)站YouTuBe正式宣布HTML5取代flash。Adobe宣布放棄移動(dòng)flash開發(fā)，你將會(huì)考慮使用HTML5來(lái)開發(fā)web應(yīng)用。理由三：內(nèi)置多媒體標(biāo)簽沒錯(cuò)，你可以使用HTML5的開發(fā)游戲。HTML5提

11、供了一個(gè)非常偉大的，移動(dòng)友好的方式去開發(fā)有趣互動(dòng)的游戲。如果你開發(fā)Flash游戲，你就會(huì)喜歡上HTML5的游戲開發(fā)。理由四：游戲開發(fā)騰訊-微信在HTML5上的布局騰訊，作為掌控著國(guó)內(nèi)最大的移動(dòng)入口平臺(tái)公司，正在通過(guò)微信公眾平臺(tái)開始構(gòu)建一個(gè)強(qiáng)大的輕應(yīng)用平臺(tái)。開發(fā)者不僅能夠在網(wǎng)頁(yè)上使用微信本身的拍照、選圖、語(yǔ)音、位置等基本能力，還可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力。這要?dú)w功于HTML5強(qiáng)大的交互性。理由五：廣闊的發(fā)展前景百度輕應(yīng)用：百度的輕應(yīng)用本質(zhì)就是html5。2014年，百度通過(guò)收購(gòu)了91手機(jī)助手、安卓市場(chǎng)以及自家推出的百度手機(jī)衛(wèi)士、百度搜索等，百度在移動(dòng)應(yīng)用分發(fā)上已經(jīng)確

12、立了老大的位置。從百度的戰(zhàn)略發(fā)展來(lái)看，百度更重視html5平臺(tái)的搭建。而且百度在很早之前就已經(jīng)推出了“輕應(yīng)用”這個(gè)概念，百度的這個(gè)輕應(yīng)用本質(zhì)就是html5，并向開發(fā)者和企業(yè)推出了各種技術(shù)開放接口。十個(gè)發(fā)展方向：手機(jī)頁(yè)游的3D化手機(jī)網(wǎng)游HTML5移動(dòng)營(yíng)銷動(dòng)漫、二次元輕應(yīng)用、Webapp、微站移動(dòng)視頻、在線直播引領(lǐng)視頻升級(jí)資源復(fù)用，HTML5重新洗牌IP（訪問量）市場(chǎng)影游互動(dòng)，HTML5推動(dòng)泛娛樂產(chǎn)業(yè)發(fā)展WebVR讓VR從貴族走向大眾化微信或推出HTML5應(yīng)用市場(chǎng)國(guó)外知名調(diào)研機(jī)構(gòu)VisionMobile2016年Q1調(diào)研報(bào)告顯示，Java、Object C，Swift（蘋果開發(fā)）都呈現(xiàn)下滑趨勢(shì) ，

13、只有HTML5持續(xù)上漲，目前HTML5已經(jīng)取代原生APP開發(fā)，成為第一大移動(dòng)開發(fā)技術(shù)。理由六：好就業(yè)，好賺錢想想. .假如某一天. .小鮮肉玩的網(wǎng)游都是你開發(fā)的 . .“極限挑戰(zhàn)”的播放器是你開發(fā)的 . .蘋果手機(jī)的某個(gè)應(yīng)用是你開發(fā)的 . .微信中的某個(gè)應(yīng)用是你開發(fā)的. .是時(shí)候拼一把了！加油，你們都可以的！HTML5 +CSS3網(wǎng)頁(yè)制作項(xiàng)目二 HTML5 構(gòu)建網(wǎng)站一、HTML5 新增結(jié)構(gòu)元素HTML5新增了一些結(jié)構(gòu)元素，能夠更加清晰的劃分html文檔的區(qū)域和內(nèi)容，提高h(yuǎn)tml文檔的可讀性。一、HTML5 新增結(jié)構(gòu)元素1. 定義文檔中的區(qū)段（section）。比如章節(jié)、頁(yè)眉、頁(yè)腳或文檔中的其他

14、部分。 標(biāo)題 這是一段內(nèi)容.例子：想想如果這樣的區(qū)塊有很多，需要很多個(gè)標(biāo)簽和標(biāo)簽來(lái)定義，代碼看起來(lái)真的很亂！怎樣讓每一個(gè)專題內(nèi)容與其他內(nèi)容區(qū)分開來(lái)呢？代碼：看看是怎樣解決的一、HTML5 新增結(jié)構(gòu)元素2. 定義導(dǎo)航鏈接的部分，包括一組導(dǎo)航鏈接：HomePreviousNext例子：HTML |CSS |JavaScript |jQuery一、HTML5 新增結(jié)構(gòu)元素3. 定義網(wǎng)頁(yè)側(cè)邊欄這是一小段文字 側(cè)邊欄文章標(biāo)題 側(cè)邊欄文章內(nèi)容. .一、HTML5 新增結(jié)構(gòu)元素4. 定義文檔的頁(yè)眉（介紹信息）頁(yè)眉標(biāo)題頁(yè)眉段落其他非頁(yè)眉內(nèi)容一、HTML5 新增結(jié)構(gòu)元素5. 定義文檔的頁(yè)腳，頁(yè)腳通常包含文檔的作

15、者、版權(quán)信息、使用條款鏈接、聯(lián)系信息等等?？稍谝粋€(gè)文檔中使用多個(gè) 元素。版權(quán)所有: 百度請(qǐng)聯(lián)系郵箱: baidu.一、HTML5 新增結(jié)構(gòu)元素6. 多用于圖片與圖片描述的組合 黃浦江上的的盧浦大橋 黃浦江上的的盧浦大橋 拍攝者：W3School 項(xiàng)目組，拍攝時(shí)間：2010 年 10 月 一、HTML5 新增結(jié)構(gòu)元素7. 通常用來(lái)定義文件網(wǎng)頁(yè)內(nèi)容，網(wǎng)站或其他應(yīng)用的一個(gè)獨(dú)立外部?jī)?nèi)容區(qū)塊,這個(gè)內(nèi)容通常是來(lái)自某個(gè)Blog的文章論壇的討論內(nèi)容，或是某個(gè)新聞網(wǎng)站發(fā)布的消息等.article與section的區(qū)別:我們來(lái)舉個(gè)例子，報(bào)紙有很多版，第一版就是一個(gè)section但是第一版中又會(huì)有多個(gè)文章artic

16、le.而每個(gè)文章中又包含多個(gè)section。二、HTML5文本語(yǔ)義元素1. 定義公歷的時(shí)間（24 小時(shí)制）或日期，時(shí)間和時(shí)區(qū)偏移是可選的。該元素能夠以機(jī)器可讀的方式對(duì)日期和時(shí)間進(jìn)行編碼，這樣，舉例說(shuō)，用戶代理能夠把生日提醒或排定的事件添加到用戶日程表中，搜索引擎也能夠生成更智能的搜索結(jié)果。*目前所有主流瀏覽器都不支持 標(biāo)簽。二、HTML5文本語(yǔ)義元素2. 告訴瀏覽器把其中的文本表示為強(qiáng)調(diào)的內(nèi)容。對(duì)于所有瀏覽器來(lái)說(shuō)，這意味著要把這段文字用斜體來(lái)顯示。如果你只想使用斜體字來(lái)顯示文本的話，請(qǐng)使用 標(biāo)簽。通常對(duì)重要的術(shù)語(yǔ)使用 標(biāo)簽。二、HTML5文本語(yǔ)義元素3. 定義帶有記號(hào)的文本。高亮顯示。我是中國(guó)

17、人，我愛祖國(guó).二、HTML5文本語(yǔ)義元素4. 定義加刪除線文本。是 標(biāo)簽的縮寫版本。建議使用 替代！刪除文本二、HTML5文本語(yǔ)義元素5. 和 標(biāo)簽一樣，用于強(qiáng)調(diào)文本，但它強(qiáng)調(diào)的程度更強(qiáng)一些。顯示為加粗的字體。如果說(shuō)用 標(biāo)簽修飾的文本好像是在大聲呼喊，那么用 標(biāo)簽修飾的文本就無(wú)異于尖叫了。二、HTML5文本語(yǔ)義元素6. 呈現(xiàn)小號(hào)字體效果。和它所對(duì)應(yīng)的 標(biāo)簽一樣，用于放大。如果被包圍的字體已經(jīng)是字體模型所支持的最小字號(hào)，那么 標(biāo)簽將不起任何作用。與 標(biāo)簽類似， 標(biāo)簽也可以嵌套，從而連續(xù)地把文字縮小。每個(gè) 標(biāo)簽都把文本的字體變小一號(hào)，直到達(dá)到下限的一號(hào)字。AAAA是不是有點(diǎn)像孫大圣的魔法HTML5

18、的新增元素就學(xué)到這里吧！試試做個(gè)炫酷的博客網(wǎng)站吧 HTML5 +CSS3網(wǎng)頁(yè)制作項(xiàng)目三 HTML5 表單先搞清楚三個(gè)概念URL格式：scheme：/host：port/path， 例 ：http：/domain/HXWZ scheme：指出WWW客戶程序用來(lái)操作的工具?！癶ttp：/”表示W(wǎng)WW服務(wù)器“ftp：/”表示FTP服務(wù)器host：服務(wù)器地址，指出WWW頁(yè)所在的服務(wù)器域名。port：端口有時(shí)（并非總是這樣）path：路徑（指明服務(wù)器上某資源的位置（其格式與DOS系統(tǒng)中的格式一樣，通常有目錄/子目錄/文件名這樣結(jié)構(gòu)組成）。先搞清楚三個(gè)概念絕對(duì)路徑絕對(duì)路徑是指文件在硬盤上真正存在的路徑。例

19、如“bg.jpg”這個(gè)圖片是存放在硬盤的“E:book網(wǎng)頁(yè)布局代碼第2章”目錄下，那么 “bg.jpg”這個(gè)圖片的絕對(duì)路徑就是“E:book網(wǎng)頁(yè)布代碼第2章bg.jpg。使用絕對(duì)路徑指定網(wǎng)頁(yè)的背景圖片： 先搞清楚三個(gè)概念絕對(duì)路徑使用絕對(duì)路徑的缺點(diǎn)：事實(shí)上，在網(wǎng)頁(yè)編程時(shí)，很少會(huì)使用絕對(duì)路徑。如果使用“E:book網(wǎng)頁(yè)布代碼第2章bg.jpg”來(lái)指定背景圖片的位置，在自己的計(jì)算機(jī)上 瀏覽可能會(huì)一切正常，但是上傳到Web服務(wù)器上瀏覽就很有可能不會(huì)顯示圖片了。因?yàn)樯蟼鞯絎eb服務(wù)器上時(shí)，可能整個(gè)網(wǎng)站并沒有放在Web服務(wù)器的E盤， 有可能是D盤或H盤。即使放在Web服務(wù)器的E盤里，Web服務(wù)器的E盤里也

20、不一定會(huì)存在“E:book網(wǎng)頁(yè)布局代碼第2章”這個(gè)目錄，因此在瀏 覽網(wǎng)頁(yè)時(shí)是不會(huì)顯示圖片的。先搞清楚三個(gè)概念相對(duì)路徑為了避免這種情況，通常在網(wǎng)頁(yè)里指定文件時(shí)，都會(huì)選擇使用相對(duì)路徑。所謂相對(duì)路徑，就是相對(duì)于自己，目標(biāo)文件所在的位置。例如上面的例子，“s1.html” 文件里引用了“bg.jpg”圖片，由于“bg.jpg”圖片相對(duì)于“s1.html”來(lái)說(shuō)，是在同一個(gè)目錄的，那么要在“s1.html”文件里使用以下代 碼后，只要這兩個(gè)文件的相對(duì)位置沒有變(也就是說(shuō)還是在同一個(gè)目錄內(nèi))，那么無(wú)論上傳到Web服務(wù)器的哪個(gè)位置，在瀏覽器里都能正確地顯示圖片。 先搞清楚三個(gè)概念相對(duì)路徑再舉個(gè)例子，假設(shè)“s1

21、.html”文件所在目錄為“E:book網(wǎng)頁(yè)布局代碼第2章”，而“bg.jpg”圖片所在目錄為“E:book網(wǎng)頁(yè) 布局代碼第2章img”，那么“bg.jpg”圖片相對(duì)于“s1.html”文件來(lái)說(shuō)，是在其所在目錄的“img”子目錄里，則引用圖片的語(yǔ)句應(yīng)該為： 注意：相對(duì)路徑使用“/”，而絕對(duì)路徑可以使用“”或“/”字符作為目錄的分隔字符。由于“img”是“第2章”的子目錄，因此在“img”前不用再加上“/”。先搞清楚三個(gè)概念相對(duì)路徑在相對(duì)路徑里常使用“./”來(lái)表示上一級(jí)目錄。如果有多個(gè)上一級(jí)目錄，可以使用多個(gè)“./”，假設(shè) “s1.htm”文件所在目錄為“E:book網(wǎng)頁(yè)布局代碼第2章”，而“b

22、g.jpg”圖片所在目錄為“E:book網(wǎng)頁(yè)布局代碼”，那 么“bg.jpg”圖片相對(duì)于“s1.htm”文件來(lái)說(shuō)，是在其所在目錄的上級(jí)目錄里，則引用圖片的語(yǔ)句應(yīng)該為： 再搞清楚一個(gè)過(guò)程表單數(shù)據(jù)處理過(guò)程HTML5表單先來(lái)回顧下表單創(chuàng)建： 。表單元素。HTML5表單action屬性: 說(shuō)明了提交時(shí)瀏覽器應(yīng)該把從用戶收集的數(shù)據(jù)發(fā)送到什么地方.method: 規(guī)定如何發(fā)送表單數(shù)據(jù)，包括GET和POST兩種方法：GET方法：將表單數(shù)據(jù)以名稱/值對(duì)的形式附加到 URL 中（通過(guò)URL地址可以看到提交的數(shù)據(jù)，不安全！）POST方法：將表單數(shù)據(jù)附加到 HTTP 請(qǐng)求的 body 內(nèi)（數(shù)據(jù)不顯示在 URL 中）

23、，沒有長(zhǎng)度限制。安全！HTML5表單HTML5表單新增加了元素：定義一個(gè)可供選擇的選項(xiàng)列表（類似）,與聯(lián)合使用。 網(wǎng)絡(luò)班 動(dòng)漫班 后面詳細(xì)講解！HTML5 表單元素input還記得定義不同類型的輸入框嗎？text: 默認(rèn)20 個(gè)字符。定義單行輸入字段，用戶可在其中輸入文本。password: 定義密碼字段。字段中的字符會(huì)被遮蔽。search: 定義用于搜索的文本字段。number和range: 只限數(shù)字輸入，生成具有輸入范圍和步長(zhǎng)的文本框。date系列（date/month/time）: 定義日期字段（帶有 calendar 控件）。color: 定義顏色選擇器。checkbox/radio:

24、 定義復(fù)選框、單選框。email/tel/url: 定義電子郵件格式、電話格式、網(wǎng)址格式。file: 定義文件選擇器。模擬在移動(dòng)端創(chuàng)建表單：谷歌瀏覽器預(yù)覽，打開“開發(fā)者工具”，點(diǎn)擊“手機(jī)切換按鈕” ，選擇設(shè)備。在和之間設(shè)置縮放參數(shù)：其他重要屬性text類型定義用戶可輸入文本的單行輸入框:value：文本框初始值（黑色，必須人工刪除）。placeholder: 輸入提示（灰色，光標(biāo)移動(dòng)到文本框即消失）maxlength：設(shè)置文本框最大字符長(zhǎng)度。required：必填項(xiàng)，否則無(wú)法通過(guò)驗(yàn)證。readonly:文本框?yàn)橹蛔x狀態(tài)，disable-禁用狀態(tài)（on/off）。list：指定為文本框提供建議值

25、的數(shù)據(jù)列表（的id）。size:文本框?qū)挾?。（注意與maxlength的區(qū)別）autofocus: 打開頁(yè)面時(shí)元素自動(dòng)獲得焦點(diǎn)。autocomplete：適用于form和input自動(dòng)完成（需要瀏覽器開啟該功能）。注意：默認(rèn)form的該屬性是ON，里面的元素默認(rèn)也是on，改成off看看？定義只限輸入數(shù)字的文本框，可以設(shè)定輸入范圍和步長(zhǎng)。required：必填項(xiàng)，否則無(wú)法通過(guò)驗(yàn)證。readonly:文本框?yàn)橹蛔x狀態(tài)，disable-禁用狀態(tài)（on/off）。list：指定為文本框提供建議值的數(shù)據(jù)列表（的id）。value：文本框初始值（黑色，必須人工刪除）。min: 可輸入的最小值max: 可輸

26、入的最大值 請(qǐng)看實(shí)例（注意設(shè)置縮放參數(shù)?。﹕tep: 制定上下調(diào)節(jié)的步長(zhǎng) 系列type的值：date - 選取日、月、年month - 選取月、年week - 選取周和年time - 選取時(shí)間（小時(shí)和分鐘）datetime - 選取時(shí)間、日、月、年（UTC 時(shí)間）datetime-local - 選取時(shí)間、日、月、年（本地時(shí)間）其他屬性跟number一致 查看實(shí)例 定義顏色選擇器 。 來(lái)吧，試一試 ！ E-mail: *定義單選、復(fù)選框 。 checked屬性：設(shè)置是否選中的狀態(tài)。 value屬性：設(shè)置選中時(shí)提交的數(shù)據(jù)。 注意單選框name屬性的設(shè)置。 查看實(shí)例 定義輸入郵件格式、電話格式、u

27、rl格式的文本框點(diǎn)擊提交按鈕自動(dòng)驗(yàn)證格式是否正確，并提示輸入信息 查看實(shí)例 定義文件選擇器：屬性： accept=”image/gif,image/jpeg,image/png”只能輸入格式為gif,jpeg,png的圖片。 查看實(shí)例 定義提交、重置按鈕，提交到action所指定的程序處理。 我是按鈕定義一個(gè)按鈕：在 button 元素內(nèi)部，您可以放置內(nèi)容，比如文本或圖像。這是該元素與使用 input 元素創(chuàng)建的按鈕之間的不同之處。如果在 HTML5 表單中使用 button 元素，會(huì)自動(dòng)提交表單內(nèi)容。若是寫在表單外面則不會(huì)提交！請(qǐng)?jiān)?HTML 表單中使用 input 元素來(lái)創(chuàng)建按鈕。 項(xiàng)目三

28、綜合練習(xí)填寫信息練習(xí)說(shuō)明：在移動(dòng)設(shè)備預(yù)覽，請(qǐng)?jiān)陂g添加：為了顯示整齊，請(qǐng)?jiān)诒韱沃袆?chuàng)建表格，將項(xiàng)目名稱和表單元素分別放在表格中。（8行兩列，第一行合并，第8行合并）表單提交到success.html中：點(diǎn)擊提交按鈕后success.html在一個(gè)空白網(wǎng)頁(yè)中打開：練習(xí)說(shuō)明：賬號(hào)、密碼、郵箱為必填項(xiàng)：設(shè)置的required屬性為生日、省份、郵箱設(shè)置輸入提示信息：設(shè)置的placeholder=請(qǐng)選擇XXX是時(shí)候拼一把了！加油，你們都可以的！HTML5 +CSS3網(wǎng)頁(yè)制作項(xiàng)目四 HTML5 多媒體設(shè)計(jì)網(wǎng)頁(yè)多媒體演變：HTML5以前：必須安裝flash插件才可以播放多媒體音、視頻，但是. .用戶手動(dòng)安裝fl

29、ash插件累存在明顯安全問題險(xiǎn)系統(tǒng)資源消耗大（死機(jī)、耗電）卡HTML5之后：一個(gè)、一個(gè)就搞定了！網(wǎng)頁(yè)多媒體演變：音視頻深度解析容器、編/解碼器瀏覽器支持情況Internet Explorer 8 不支持 。在 IE 9 中，將對(duì) audio 元素的支持。音頻格式：視頻格式：插入音頻 你的瀏覽器不支持?。ó?dāng)瀏覽器不支持時(shí)才顯示）音頻如何兼容多種瀏覽器？audio 元素允許多個(gè) source 元素。source 元素可以鏈接不同的音頻文件。瀏覽器將使用第一個(gè)可識(shí)別的格式 你的瀏覽器不支持?。g覽器不支持才顯示） 插入視頻 你的瀏覽器不支持?。ó?dāng)瀏覽器不支持時(shí)才顯示）視頻如何兼容多種瀏覽器？avid

30、eo 元素允許多個(gè) source 元素。source 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個(gè)可識(shí)別的格式： 你的瀏覽器不支持！（瀏覽器不支持才顯示） 綜合實(shí)訓(xùn)我的娛樂空間實(shí)訓(xùn)指導(dǎo)：為網(wǎng)頁(yè)添加背景圖片：bg.jpg利用HTML5結(jié)構(gòu)元素對(duì)網(wǎng)頁(yè)結(jié)構(gòu)進(jìn)行布局（包括一個(gè)大標(biāo)題、三個(gè)：音頻區(qū)域、視頻區(qū)域、下載區(qū)域）音頻視頻不支持顯示提示信息：您的瀏覽器不支持該音頻格式！音頻視頻要求兼容多種格式：音頻：.ogg和.mp3; 視頻：.ogv 和 .mp4綜合實(shí)訓(xùn)我的娛樂空間大標(biāo)題音頻區(qū)域：.視頻區(qū)域：.下載區(qū)域：.是時(shí)候拼一把了！加油，你們都可以的！HTML5 +CSS3網(wǎng)頁(yè)制作項(xiàng)目五 使用canv

31、as元素繪圖任務(wù)一 canvas基礎(chǔ)什么是 Canvas？HTML5 的 canvas 元素使用 JavaScript 在網(wǎng)頁(yè)上繪制圖像。畫布是一個(gè)矩形區(qū)域，您可以控制其每一像素。canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。任務(wù)一 canvas基礎(chǔ)先來(lái)看一個(gè)小例子如何在畫布中創(chuàng)建一個(gè)矩形任務(wù)一 canvas基礎(chǔ)1.創(chuàng)建Canvas：在和里創(chuàng)建，并設(shè)置畫布的 id、寬度和高度：畫布默認(rèn)沒有邊框，所以看不到效果，給它加個(gè)邊框試試。任務(wù)一 canvas基礎(chǔ)2. 利用CSS樣式給畫布Canvas加邊框：canvas畫布canvas border:solid 2px black;

32、 （實(shí)線邊框，2像素，黑色）預(yù)覽一下，看看效果吧！任務(wù)一 canvas基礎(chǔ)畫布的坐標(biāo)系：畫布左上角為坐標(biāo)原點(diǎn)（0,0）向右x增大，向下y增大（0,0）（300,200）任務(wù)一 canvas基礎(chǔ)3. 利用JS腳本代碼在Canvas中繪制一個(gè)實(shí)心的矩形：function drawSqure() var canvas=document.getElementById(myCanvas);var context=canvas.getContext(2d);context.fillStyle=rgb(14,120,209);context.fillRect(30,30,150,150); 寫在里寫在里，并

33、添加onload屬性，在頁(yè)面加載時(shí)執(zhí)行該函數(shù)！任務(wù)一 canvas基礎(chǔ)認(rèn)識(shí)JS函數(shù)：1. JS函數(shù)在哪里寫？在這里寫js函數(shù)! ! ! 2. JS函數(shù)怎么定義？(函數(shù)定義語(yǔ)法)function 函數(shù)名（）.函數(shù)實(shí)現(xiàn)過(guò)程（每句話結(jié)束加分號(hào)！）.注意：function是定義函數(shù)的關(guān)鍵字，必須要有，函數(shù)名可以自定義，一般用有意義的英文單詞。任務(wù)一 canvas基礎(chǔ)認(rèn)識(shí)JS變量：在JS中使用var來(lái)定義任何變量，變量名盡量簡(jiǎn)單易懂： 語(yǔ)法：var 變量名= 變量值；（變量名對(duì)大小寫敏感） var test；/定義一個(gè)類型未知的變量test；var test=2；/定義一個(gè)變量test，初始值為數(shù)值類型

34、：2；var test=”javascript”; /定義一個(gè)變量test，初始值為字符串類型：javascript；（字符串必須加上英文雙引號(hào)!）var canvas=document.getElementById(myCanvas);/ 定義一個(gè)變量canvas，賦值為getElementById方法的返回值。任務(wù)一 canvas基礎(chǔ)認(rèn)識(shí)JS變量：在js中變量可以理解為一個(gè)代號(hào)，只是用于保存數(shù)據(jù)。變量分類： 1. 自定義變量：用var來(lái)定義，變量名自定（如前面所講） 2. js內(nèi)置對(duì)象，已存在可直接使用，如：document （對(duì)象是一種特殊的變量，其包含若干屬性和方法可根據(jù)需要進(jìn)行調(diào)用）

35、變量采用“先定義，后使用”的原則。變量怎么使用？1. 使用點(diǎn)號(hào)“.”調(diào)用其方法來(lái)實(shí)現(xiàn)一定的功能： document.getElementById(myCanvas); /方法有（）2. 使用點(diǎn)號(hào)“.”設(shè)置其屬性的值： context.fillStyle=rgb(14,120,209)；/屬性沒（）任務(wù)一 canvas基礎(chǔ)JS變量賦值和方法調(diào)用：來(lái)看兩個(gè)例子：var canvas=document.getElementById(myCanvas);這句話這樣理解：內(nèi)置對(duì)象document調(diào)用其方法getElementById(),返回值賦給變量canvas。getElementById(myCa

36、nvas)的作用是根據(jù)元素的id獲取該元素對(duì)象。括號(hào)里的內(nèi)容為方法的參數(shù)，即根據(jù)傳入的參數(shù)也就是id決定獲取哪個(gè)元素的對(duì)象。var context=canvas.getContext(2d); /canvas變量調(diào)用getContext(2d)方法返回二維畫筆，定義變量context用于保存畫筆。context.fillStyle=rgb(14,120,209); /調(diào)用畫筆context的屬性fillStyle，并將其設(shè)置為藍(lán)色。任務(wù)一 canvas基礎(chǔ)繪制實(shí)心矩形的步驟：function drawSqure() /定義js函數(shù)，函數(shù)名為drawSqure/步驟一：獲取畫布（拿紙）var c

37、anvas=document.getElementById(myCanvas);/步驟二：設(shè)置畫布為二維環(huán)境（拿筆）var context=canvas.getContext(2d);/步驟三：設(shè)置填充繪畫的顏色（設(shè)置筆的顏色）context.fillStyle=rgb(14,120,209);/步驟四：繪制“被填充”的矩形（開始畫）context.fillRect(30,30,150,150); /起始坐標(biāo)：X,Y，長(zhǎng)，寬任務(wù)一 canvas基礎(chǔ)繪制矩形的其他相關(guān)方法：(以下方法均由“筆”調(diào)用) 試一試吧！方法名的第一個(gè)單詞首字母小寫，其余單詞首字母大寫：fillStyle=“rgb(*,*

38、,*)”; /設(shè)置填充顏色fillRect（x,y,l,w）; /利用設(shè)置的填充顏色畫實(shí)心矩形strokeStyle=“rgb(*,*,*)”; /設(shè)置輪廓顏色strokeRect（x,y,l,w）; /利用設(shè)置的輪廓顏色畫空心矩形*為0255，不同組合代表不同顏色，常用：紅（255,0,0），綠（0,255,0），藍(lán)（0,0,255），黑（0,0,0），黃（255,255,0）x,y,l,w：分別代表矩形左上角（起點(diǎn)）坐標(biāo)(x,y)，l:長(zhǎng)，w：寬任務(wù)一 canvas基礎(chǔ)小練習(xí)：思考：如何做出以上效果呢？注意最里面的是實(shí)心，每個(gè)矩形顏色不一樣！ 試一試吧！任務(wù)二 繪制直線利用JS函數(shù)在畫布中

39、繪制一條直線：function drawLine() /定義js函數(shù)，函數(shù)名為drawLinevar canvas=document.getElementById(myCanvas); /拿紙var pen=canvas.getContext(2d); /拿筆pen.lineWidth=20; /設(shè)置線寬pen.strokeStyle=rgb(200,40,40); /設(shè)置畫筆顏色pen.beginPath(); /開始新路徑(重置內(nèi)存，每次畫前調(diào)用)pen.moveTo(10,50); /定義直線的起點(diǎn)坐標(biāo)pen.lineTo(400,50); /定義直線的終點(diǎn)坐標(biāo)pen.stroke();

40、 /沿著坐標(biāo)點(diǎn)開始繪制任務(wù)二 繪制直線常用方法/屬性介紹：beginPath() : （方法）每次畫一條新直線前必須調(diào)用（重置內(nèi)存）moveTo(x,y) : （方法）找到直線起點(diǎn)坐標(biāo)lineTo(x,y) : （方法）找到直線終點(diǎn)坐標(biāo)stroke() : (方法) 繪制已定義的路徑closePath() : (方法) 關(guān)閉繪制路徑lineWidth: (屬性)線寬，默認(rèn)為1lineCap: (屬性)線帽-butt(默認(rèn)，無(wú)線帽),round,squarestrokeStyle: (屬性)繪制路徑顏色、漸變、模式任務(wù)二 繪制直線試試?yán)L制兩條不同顏色的交叉直線：1. 請(qǐng)思考：beginPath(

41、)方法使用和不使用有何區(qū)別？2. 嘗試為兩條直線加上不同的線帽。任務(wù)二 繪制直線繪制相互鏈接的直線，如三角形：只定義第一條直線的起點(diǎn)，剩下的直線只定義終點(diǎn)即可：.context.moveTo(50,100);context.lineTo(100,50);context.lineTo(100,200);context.lineTo(50,100);context.stroke();/若是調(diào)用fill(),則是填充這個(gè)封閉圖形（效果為右邊圖形）任務(wù)二 繪制直線小組合作練習(xí)：任選一種你喜歡的圖形使用JS函數(shù)畫出： 1. 默認(rèn)線帽 2. 線帽為圓形 3. 展開想象，發(fā)揮你的創(chuàng)造力. .說(shuō)明：(1)小組

42、合作完成：設(shè)計(jì)開發(fā)測(cè)試提交(2)流程提示：設(shè)計(jì)圖形，選定顏色、線寬、線帽，標(biāo)明坐標(biāo)，開始編程(3) 開發(fā)流程：創(chuàng)建畫布，CSS-畫布加邊框，JS函數(shù)-畫圖形任務(wù)三 繪制弧線/圓利用JS函數(shù)在畫布中繪制一個(gè)圓：function drawCircle() /定義js函數(shù)，函數(shù)名為drawCirclevar canvas=document.getElementById(myCanvas); /拿紙var pen=canvas.getContext(2d); /拿筆pen.strokeStyle=rgb(200,40,40); /設(shè)置畫筆顏色pen.arc(150,150,100,0,2*Math.P

43、I); /設(shè)置圓心/半徑/開始/結(jié)束 pen.stroke(); /沿著坐標(biāo)點(diǎn)開始繪制任務(wù)三 繪制弧線/圓常用方法介紹：arc(x,y,r,start,end,counterclockwise):x圓心橫坐標(biāo)y圓心縱坐標(biāo)r半徑start開始角度（畫圓從0開始）end結(jié)束角度（畫圓2結(jié)束：2*Math.PI）counterclockwise可選，規(guī)定逆時(shí)針還是順時(shí)針繪圖。False = 順時(shí)針，true = 逆時(shí)針。（默認(rèn)順時(shí)針）任務(wù)三 繪制弧線/圓試試?yán)L制兩個(gè)同心圓或繪制一個(gè)半圓：注意：beginPath()的使用！任務(wù)三 繪制弧線/圓小組合作練習(xí)：設(shè)計(jì)一款新春對(duì)聯(lián)或者： 1. 五彩棒棒糖 2

44、. 花樣風(fēng)車 3. 發(fā)揮你想象.（糖葫蘆、小汽車、笑臉） 說(shuō)明：(1)小組合作完成：設(shè)計(jì)開發(fā)測(cè)試提交(2)流程提示：設(shè)計(jì)圖形，選定顏色、線寬、線帽，標(biāo)明坐標(biāo)，開始編程(3) 開發(fā)流程：創(chuàng)建畫布，CSS-畫布加邊框，JS函數(shù)-畫圖形任務(wù)三 繪制弧線/圓拓展應(yīng)用：使用for循環(huán)實(shí)現(xiàn)同時(shí)畫多個(gè)形狀 如果想要在畫布上畫20個(gè)圓，要把畫圓的代碼寫20遍！有沒有辦法只寫一遍，其他自動(dòng)畫呢？既然是程序當(dāng)然有辦法實(shí)現(xiàn)自動(dòng).下面是一道模擬光束,由10個(gè)大小不同的圓組成： 任務(wù)三 繪制弧線/圓什么是for循環(huán)： for ( var i=0; i10; i+) 循環(huán)體（這里面的步驟將被循環(huán)執(zhí)行） i=0:為初始條件

45、i10:為循環(huán)條件，只有當(dāng)i10的時(shí)候才執(zhí)行大括號(hào)里的代碼i+: 即i+1，每次執(zhí)行完循環(huán)則i+1, 然后看是否滿足循環(huán)條件i10,滿足則執(zhí)行，否則結(jié)束。 思考一下，這個(gè)循環(huán)要執(zhí)行幾遍？ 任務(wù)三 繪制弧線/圓實(shí)現(xiàn)過(guò)程很簡(jiǎn)單，在外層加個(gè)for循環(huán)即可，那么畫20遍，30遍呢？應(yīng)該怎么改？ for(var i=1;i=10;i+)context.beginPath();/每次要開始一個(gè)新的路徑context.fillStyle=rgba(255,0,0,0.25);/0.25為透明度 context.arc(i*25,i*25,i*10,0,2*Math.PI);/設(shè)置圓的位置和半徑可變conte

46、xt.fill();/填充context.closePath();/每個(gè)畫完要關(guān)閉路徑任務(wù)四 書寫文本利用JS函數(shù)在畫布中書寫文字：function drawFont() /定義js函數(shù)，函數(shù)名為drawFontvar canvas=document.getElementById(myCanvas); /拿紙var pen=canvas.getContext(2d); /拿筆context.font = bold 72px 宋體; /設(shè)置字體外觀context.textAlign = left; /設(shè)置文本對(duì)齊方式context.strokeStyle = blue; /設(shè)置輪廓顏色conte

47、xt.strokeText(青島, 100, 100); /在(100,100)處繪制文字任務(wù)四 書寫文本常用方法/屬性介紹：font設(shè)置字體外觀，如 “bold 72px 宋體”“italic 72px 宋體”textAlign設(shè)置文字對(duì)齊方式，如“l(fā)eft”、“center”、“right”fillStyle設(shè)置填充顏色strokeStyle設(shè)置輪廓顏色textBaseline設(shè)置或返回在繪制文本時(shí)使用的當(dāng)前文本基線fillText(T,x,y)寫填充文字（實(shí)心）,T為要寫的文本，如“青島”strokeText(T,x,y)寫填充文字（實(shí)心）,T為要寫的文本，如“青島”.任務(wù)四 書寫文本試

48、試不同樣式的文字：注意：變化字體請(qǐng)查看谷歌字體庫(kù)?。ㄔO(shè)置-外觀-自定義字體）任務(wù)四 書寫文本文字位置基線 textBaseline，textBaseline的值包括： /在位置 y=100 繪制藍(lán)色線條ctx.strokeStyle=blue;ctx.moveTo(5,100);ctx.lineTo(395,100);ctx.stroke(); / 以 y=100 為基線，頂部切合基線放置文字ctx.textBaseline=top;ctx.fillText (abc, 5, 100);任務(wù)四 書寫文本小組合作練習(xí)：設(shè)計(jì)一款logo： 1. 2. 發(fā)揮你想象. 任務(wù)五 處理圖像利用JS函數(shù)在畫

49、布中繪制圖像（按原比例和大小繪圖）function drawImage() /定義js函數(shù)，函數(shù)名為drawImagevar canvas=document.getElementById(myCanvas); /拿紙var pen=canvas.getContext(2d); /拿筆var img =document.getElementById(myImg) ;/獲取原圖pen.drawImage(img,10,10);/定義圖像左上角位置，畫圖像 任務(wù)五 處理圖像常用方法介紹：drawImage(img,x,y)：在x,y處按原比例和大小繪制圖像drawImage(img,x,y,widt

50、h,height)：在x,y處繪制圖像，并規(guī)定圖像的寬度和高度；drawImage(img,x1,y1,w1,h1,x2,y2,w2,h2)：截取圖像，并在畫布上繪制被截取的部分，參數(shù)解釋：x1,y1,w1,h1(可選參數(shù))：截取圖像的起點(diǎn)(左上角)坐標(biāo)和截取的寬和長(zhǎng)x2,y2,w2,h2：開始繪制的起點(diǎn)(左上角)坐標(biāo)和繪制的寬和長(zhǎng)任務(wù)五 處理圖像試一試把第步換成如下兩種繪制方法：1. 在(10,10)處繪制原圖像，繪制大小為240X160:pen.drawImage(img,10,10,240,160); /用于繪制縮小或放大圖2.從原圖像的(90,130)處，截取90X80的部分圖像，在畫

51、布的(20,20)處繪制截取部分，大小為原來(lái)的一半：pen.drawImage(img,90,130,90,80,20,20,90/2,80/2);/繪細(xì)節(jié)圖任務(wù)五 處理圖像練一練：在網(wǎng)頁(yè)中插入一張圖片，并在右側(cè)展示其縮小圖及細(xì)節(jié)圖，如下圖所示：綜合實(shí)訓(xùn)利用圖形或圖像繪制完成圣誕賀卡的制作：是時(shí)候拼一把了！加油，你們都可以的！HTML5 +CSS3網(wǎng)頁(yè)制作項(xiàng)目六 CSS3樣式基礎(chǔ)任務(wù)一 認(rèn)識(shí)CSS3樣式表CSS（層疊樣式表 Cascading Style Sheet）產(chǎn)生原因：若不考慮網(wǎng)頁(yè)元素的行為，網(wǎng)頁(yè)元素實(shí)質(zhì)上由兩部分構(gòu)成：數(shù)據(jù)內(nèi)容和顯示格式。內(nèi)容可以更新，格式可以改版。若想修改所設(shè)計(jì)的格

52、式，靠逐條修改標(biāo)記屬性，工作量很大。有了CSS，對(duì)應(yīng)用同一格式顯示的內(nèi)容，只需要一次修改，便能使網(wǎng)頁(yè)中所有應(yīng)用此格式的網(wǎng)頁(yè)元素的格式自動(dòng)修改。任務(wù)一 認(rèn)識(shí)CSS3樣式表什么是CSS（層疊樣式表 Cascading Style Sheet）：CSS不是一種編程語(yǔ)言。是“W3C” 于1996年5月制定的第一個(gè)排版樣式標(biāo)準(zhǔn)。是對(duì)HTML的一種補(bǔ)充，使HTML的功能更強(qiáng)大。目前為CSS 3.0版本。CSS可以將網(wǎng)頁(yè)格式的控制獨(dú)立出來(lái)，形成樣式表文件（.CSS文件），可供多次利用，節(jié)省代碼。學(xué)完HTML5后，我們發(fā)現(xiàn)如果純粹用它來(lái)寫網(wǎng)頁(yè)，其效果非常難看。若想讓網(wǎng)頁(yè)看起來(lái)非常美觀，只能依賴CSS來(lái)解決了。

53、任務(wù)一 認(rèn)識(shí)CSS3樣式表CSS語(yǔ)法：選擇器 聲明1;聲明2;，其中:選擇器通常是一個(gè)HMTL元素（標(biāo)記），聲明則由兩部分構(gòu)成屬性和值，每個(gè)聲明以分號(hào)結(jié)尾。為了使CSS的可讀性好，可以將每個(gè)聲明寫一行，如：h1 color:red; font-size:200%;任務(wù)一 認(rèn)識(shí)CSS3樣式表CSS可分為內(nèi)部樣式表、外部樣式表和行內(nèi)樣式。內(nèi)部樣式表:就是將樣式屬性一一列舉在內(nèi)，并將style 標(biāo)記對(duì)放在head或body標(biāo)記對(duì)中。它只能用于定義它所在的HTML文檔中。#A2font-family:宋體;color:blue;font-size:16pt;font-style:oblique;任務(wù)一

54、 認(rèn)識(shí)CSS3樣式表CSS可分為內(nèi)部樣式表、外部樣式表和行內(nèi)樣式。外部樣式表:不再需要標(biāo)記；將樣式保存在.CSS文件中，再由特定的語(yǔ)句調(diào)用到HTML文檔中，可供多個(gè)HTML文檔調(diào)用。在中加入下面語(yǔ)句：（連接式）任務(wù)一 認(rèn)識(shí)CSS3樣式表CSS可分為內(nèi)部樣式表、外部樣式表和行內(nèi)樣式。行內(nèi)樣式: 樣式放在HTML的元素內(nèi)部。為段落加上樣式：段落字體大小，顏色 我是一段文字.任務(wù)一 認(rèn)識(shí)CSS3樣式表CSS的兩個(gè)特性：繼承性與層疊性。繼承性: 允許定義的樣式不僅用于某個(gè)特定的HTML元素，而且應(yīng)用于其子元素。演示：下列樣式不僅用于，還作用于: p color: red;文字1文字2任務(wù)一 認(rèn)識(shí)CSS

55、3樣式表CSS的兩個(gè)特性：繼承性與層疊性。層疊性: 能夠?qū)ν辉鼗蛲痪W(wǎng)頁(yè)應(yīng)用多個(gè)樣式表，對(duì)于同一元素的同一屬性會(huì)出現(xiàn)后者效果覆蓋前者的樣式層疊現(xiàn)象。演示：的最終效果顯示為藍(lán)色，后者覆蓋了前者的設(shè)置:h1 color: red; h1 color: blue; 還可以用一個(gè)CSS樣式表設(shè)置顏色，另一個(gè)樣式表設(shè)置字體，最后設(shè)計(jì)出層疊效果。樣式重要度排序：作者開發(fā)樣式用戶設(shè)置樣式瀏覽器默認(rèn)樣式任務(wù)一 認(rèn)識(shí)CSS3樣式表CSS3介紹： CSS3是CSS2的升級(jí)版，增加了很多強(qiáng)大的新功能：以前需要圖片和腳本代碼才能實(shí)現(xiàn)的效果，在CSS3中只需要幾行代碼，例如：圓角、圖片邊框、文字陰影、盒陰影、過(guò)渡、

56、動(dòng)畫等。任務(wù)一 認(rèn)識(shí)CSS3樣式表CSS中的常用的單位：相對(duì)長(zhǎng)度單位em：相對(duì)字體高度，默認(rèn)1em=16pxpx：默認(rèn)為12px%(百分比，相對(duì)元素的百分比值）絕對(duì)長(zhǎng)度單位in(英寸，1英寸=2.54厘米）cmmmpt(點(diǎn)或磅，1pt=1/72英寸）pc(帕，1pc=12點(diǎn)） 任務(wù)二 認(rèn)識(shí)CSS選擇器還記得什么是選擇器嗎？“選擇器”指明了中的“樣式”的作用對(duì)象，也就是“樣式”作用于網(wǎng)頁(yè)中的哪些元素：CSS中最常用的幾個(gè)選擇器選擇器：元素選擇器后代選擇器類選擇器id選擇器偽類任務(wù)二 認(rèn)識(shí)CSS選擇器元素選擇器: 選擇器通常是某個(gè) HTML 標(biāo)簽名，比如 p、h1、em、a，甚至可以是 html

57、本身。樣式表：html color:black;h1 color:blue;h2 color:red;網(wǎng)頁(yè)元素：這是 heading 1這是 heading 2這是一段普通的段落CSS選擇器：元素選擇器/后代選擇器/類選擇器/id選擇器/偽類：任務(wù)二 認(rèn)識(shí)CSS選擇器練習(xí)1：（1）在網(wǎng)頁(yè)中創(chuàng)建一個(gè)h1標(biāo)題，一個(gè)段落，利用元素選擇器將標(biāo)題設(shè)置為紅色，段落為藍(lán)色。（2）在網(wǎng)頁(yè)中創(chuàng)建兩個(gè)段落，利用元素選擇器分組方式設(shè)置它們的字體為華文行楷、大小為16px、首行縮進(jìn)2em、對(duì)齊方式為左對(duì)齊,行高為1.6em。屬性名稱說(shuō)明：（可以通過(guò)css手冊(cè)進(jìn)行查詢）名稱屬性名稱屬性顏色color首行縮進(jìn)text-indent字體font-family對(duì)齊方式text-align字體大小font-size行高line-height任務(wù)二 認(rèn)識(shí)CSS選擇器CSS選擇器：元素選擇器/后代選擇器/類選擇器/id選擇器/偽類：后代選擇器: 又稱包含選擇器，可以選擇作為某元素后代的元素。（不僅包括兒子，還包括孫子。即兩個(gè)元素之間的層次間隔可以是無(wú)限的!）如果只希望對(duì) 中的 應(yīng)用樣式，可以這樣寫: h1 em color:red;上