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

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

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

4、、綠、藍(lán)三原色的組合顏色。1.4 文字設(shè)計標(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屬性用來指定鏈接的目標(biāo)地址，可使用URL。 在標(biāo)記之間可指定作為超鏈接的文本或圖像。 例如： 百度 點(diǎn)我有驚喜！ target屬性，指明鏈接網(wǎng)頁顯示的目標(biāo)窗口，可取_self、_blank、_parent或_top四個值中的任何一個，_self為默認(rèn)值。例如： 新浪網(wǎng) 將_blank換成_self、_parent或_top，試試！看看

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

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

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

8、，楷體。客戶端用戶利用表單元素輸入信息，表單將這些信息發(fā)送到服務(wù)器端作進(jìn)一步的處理。（1）表單標(biāo)記：常用屬性包括action、method和target：action：指定服務(wù)器端處理信息的動態(tài)網(wǎng)頁的存儲位置和名稱。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：單選按鈕，可以將多個單選按鈕的 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分割 框架窗口 注意：框架是定義多個網(wǎng)頁的集合，因此比單個網(wǎng)頁的作用域大。不要寫在里！例：綜合練習(xí)使用DW編寫，完成如下網(wǎng)頁：例子項(xiàng)目一 綜合練習(xí).docx項(xiàng)目一 結(jié)束完成項(xiàng)目一 綜合練習(xí)：項(xiàng)目一 綜合練習(xí).docxHTML5 +CSS3網(wǎng)頁制作項(xiàng)目二 HTML5 構(gòu)建網(wǎng)站為什么要學(xué)HTML5？HTML5發(fā)展前景如何？理由一：移動開發(fā) 如今是移動互聯(lián)網(wǎng)的黃金時代：憑借跨平臺跨終端的優(yōu)勢，你

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

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

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

13、只有HTML5持續(xù)上漲，目前HTML5已經(jīng)取代原生APP開發(fā)，成為第一大移動開發(fā)技術(shù)。理由六：好就業(yè)，好賺錢想想. .假如某一天. .小鮮肉玩的網(wǎng)游都是你開發(fā)的 . .“極限挑戰(zhàn)”的播放器是你開發(fā)的 . .蘋果手機(jī)的某個應(yīng)用是你開發(fā)的 . .微信中的某個應(yīng)用是你開發(fā)的. .是時候拼一把了！加油，你們都可以的！HTML5 +CSS3網(wǎng)頁制作項(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é)、頁眉、頁腳或文檔中的其他

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

31、as元素繪圖任務(wù)一 canvas基礎(chǔ)什么是 Canvas？HTML5 的 canvas 元素使用 JavaScript 在網(wǎng)頁上繪制圖像。畫布是一個矩形區(qū)域，您可以控制其每一像素。canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。任務(wù)一 canvas基礎(chǔ)先來看一個小例子如何在畫布中創(chuàng)建一個矩形任務(wù)一 canvas基礎(chǔ)1.創(chuàng)建Canvas：在和里創(chuàng)建，并設(shè)置畫布的 id、寬度和高度：畫布默認(rèn)沒有邊框，所以看不到效果，給它加個邊框試試。任務(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中繪制一個實(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屬性，在頁面加載時執(zhí)行該函數(shù)！任務(wù)一 canvas基礎(chǔ)認(rèn)識JS函數(shù)：1. JS函數(shù)在哪里寫？在這里寫js函數(shù)! ! ! 2. JS函數(shù)怎么定義？(函數(shù)定義語法)function 函數(shù)名（）.函數(shù)實(shí)現(xiàn)過程（每句話結(jié)束加分號?。?注意：function是定義函數(shù)的關(guān)鍵字，必須要有，函數(shù)名可以自定義，一般用有意義的英文單詞。任務(wù)一 canvas基礎(chǔ)認(rèn)識JS變量：在JS中使用var來定義任何變量，變量名盡量簡單易懂： 語法：var 變量名= 變量值；（變量名對大小寫敏感） var test；/定義一個類型未知的變量test；var test=2；/定義一個變量test，初始值為數(shù)值類型

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

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

36、nvas)的作用是根據(jù)元素的id獲取該元素對象。括號里的內(nèi)容為方法的參數(shù)，即根據(jù)傳入的參數(shù)也就是id決定獲取哪個元素的對象。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，長，寬任務(wù)一 canvas基礎(chǔ)繪制矩形的其他相關(guān)方法：(以下方法均由“筆”調(diào)用) 試一試吧！方法名的第一個單詞首字母小寫，其余單詞首字母大寫：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:長，w：寬任務(wù)一 canvas基礎(chǔ)小練習(xí)：思考：如何做出以上效果呢？注意最里面的是實(shí)心，每個矩形顏色不一樣！ 試一試吧！任務(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)，無線帽),round,squarestrokeStyle: (屬性)繪制路徑顏色、漸變、模式任務(wù)二 繪制直線試試?yán)L制兩條不同顏色的交叉直線：1. 請思考：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(),則是填充這個封閉圖形（效果為右邊圖形）任務(wù)二 繪制直線小組合作練習(xí)：任選一種你喜歡的圖形使用JS函數(shù)畫出： 1. 默認(rèn)線帽 2. 線帽為圓形 3. 展開想象，發(fā)揮你的創(chuàng)造力. .說明：(1)小組

42、合作完成：設(shè)計開發(fā)測試提交(2)流程提示：設(shè)計圖形，選定顏色、線寬、線帽，標(biāo)明坐標(biāo)，開始編程(3) 開發(fā)流程：創(chuàng)建畫布，CSS-畫布加邊框，JS函數(shù)-畫圖形任務(wù)三 繪制弧線/圓利用JS函數(shù)在畫布中繪制一個圓：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ī)定逆時針還是順時針繪圖。False = 順時針，true = 逆時針。（默認(rèn)順時針）任務(wù)三 繪制弧線/圓試試?yán)L制兩個同心圓或繪制一個半圓：注意：beginPath()的使用！任務(wù)三 繪制弧線/圓小組合作練習(xí)：設(shè)計一款新春對聯(lián)或者： 1. 五彩棒棒糖 2

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

45、i10:為循環(huán)條件，只有當(dāng)i10的時候才執(zhí)行大括號里的代碼i+: 即i+1，每次執(zhí)行完循環(huán)則i+1, 然后看是否滿足循環(huán)條件i10,滿足則執(zhí)行，否則結(jié)束。 思考一下，這個循環(huán)要執(zhí)行幾遍？ 任務(wù)三 繪制弧線/圓實(shí)現(xiàn)過程很簡單，在外層加個for循環(huán)即可，那么畫20遍，30遍呢？應(yīng)該怎么改？ for(var i=1;i=10;i+)context.beginPath();/每次要開始一個新的路徑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();/每個畫完要關(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è)置文本對齊方式context.strokeStyle = blue; /設(shè)置輪廓顏色conte

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

48、試不同樣式的文字：注意：變化字體請查看谷歌字體庫?。ㄔ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è)計一款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)和截取的寬和長x2,y2,w2,h2：開始繪制的起點(diǎn)(左上角)坐標(biāo)和繪制的寬和長任務(wù)五 處理圖像試一試把第步換成如下兩種繪制方法：1. 在(10,10)處繪制原圖像，繪制大小為240X160:pen.drawImage(img,10,10,240,160); /用于繪制縮小或放大圖2.從原圖像的(90,130)處，截取90X80的部分圖像，在畫

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

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

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

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

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

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

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