1、YCF正版可修改PPT（中職）Web前端設計基礎 項目二-2電子課件網(wǎng)頁中的文本和排版項目二授課教師：姓名WEB前端設計基礎Contents1.項目描述2.知識準備3.項目實施4.項目拓展5.項目小結6.技能訓練二 知識準備添加文本；文本排版；文字列表；添加圖片。文字列表1.建立有序列表有序列表的各個列表項是有順序的。有序列表從開始，到結束，中間的列表項是標簽內(nèi)容。有序列表的列表項是有先后順序的，一般采用數(shù)字或字母作為順序，默認是采用數(shù)字順序，其結構如下： 有序列表項 有序列表項 有序列表項文字列表1.建立有序列表在默認情況下，有序列表使用數(shù)字作為列表項符號，除此之外還可以通過有序列表type

2、屬性來改變列表項符號，如表所示。type屬性值列表項的序號類型1數(shù)字1、2、3a小寫英文字母a、b、cA大寫英文字母A、B、Ci小寫羅馬數(shù)字i、ii、iiiI大寫羅馬數(shù)字I、II、IIItype屬性實現(xiàn)的效果可以用CSS的list-style-type實現(xiàn)，在后面的項目中會學習到。文本列表1.建立有序列表【例2-3】建立有序列表實例，代碼如下所示（示例文件2-3.html）有序列表olfloat:left;width:100px;HTMLCSSJavaScriptjQueryHTMLCSSJavaScriptjQueryHTMLCSSJavaScriptjQuery文本列表1.建立有序列表【例

3、2-3】建立有序列表實例，代碼如下所示（示例文件2-3.html）HTMLCSSJavaScriptjQueryHTMLCSSJavaScriptjQuery在chrome瀏覽器中預覽文字列表2.建立無序列表無序列表相對于有序列表而言，沒有前面的順序符號，只以符號作為分項標識。無序列表使用一對標簽，其中每一個列表項使用標簽，結構如下所示： 無序列表項 無序列表項 無序列表項在無序列表結構中，使用標簽作為一個無序列表的開始和結束，則表示一個列表項的開始。在一個無序列表中可以包含多個列表項，并且標簽的結束標簽可以省略。文字列表2.建立無序列表默認情況下，無序列表的項目符號是，還可以通過無序列表ty

4、pe屬性來改變無序列表的列表項符號，如表所示。type屬性值列表項的序號類型disc默認值，實心圓“”circle空心圓“”square實心正方形“”文本列表2.建立無序列表【例2-4】建立無序列表實例，代碼如下所示（示例文件2-4.html）無序列表ulfloat:left;width:100px;HTMLCSSJavaScriptjQueryHTMLCSSJavaScriptjQueryHTMLCSSJavaScriptjQuery文本列表2.建立無序列表【例2-4】建立無序列表實例，代碼如下所示（示例文件2-4.html）HTMLCSSJavaScriptjQuery在chrome瀏覽器

5、中預覽文字列表3.建立自定義列表在HTML中還可以自定義列表，自定義列表的標簽是。自定義列表由兩部分組成：定義條件和定義描述，其結構如下： 定義名詞 定義描述 在該結構中，標簽和標簽分別定義了定義列表的開始和結束，后面添加要解釋的名詞，而在后面則添加該名詞的具體解釋。文本列表3.建立自定義列表【例2-5】建立自定義列表實例，代碼如下所示（示例文件2-5.html）自定義列表/title文本排版換行標簽br段落標簽p標題標簽h1h6文字列表有序列表ol無序列表ul自定義列表dl 在chrome瀏覽器中預覽添加圖片圖片是網(wǎng)頁中不可缺少的元素，巧妙地在網(wǎng)頁中使用圖片，可以為網(wǎng)頁增色不少。網(wǎng)頁支持多種

6、圖片格式，包括GIF、JPEG、BMP、PNG、TIFF等格式的圖片文件，其中使用最多的是GIF和JPEG兩種格式，另外在網(wǎng)頁中還可以對插入的圖片設置寬度和高度，設置圖片的提示文字等。src和alt這兩個屬性是標簽必不可少的屬性，title屬性的值往往都是跟alt屬性的值相同。在HTML文檔中，插入圖像使用單標簽，圖像標簽的常用屬性如表所示。屬性說明src圖像的文件地址alt圖片顯示不出來時的提示文字title鼠標移到圖片上的提示文字width設置圖像的寬度height設置圖像的高度添加圖片1. img標簽src屬性src，即“source（源文件）”。img標簽的src屬性用于指定圖像源文件

7、所在的路徑，它是圖像必不可少的屬性。其結構如下：相對路徑使用的特殊符號有三種：./：代表目前所在的目錄（可以省略不寫）。./：代表上一層目錄。以/開頭：代表根目錄。img標簽是一個自閉合標簽，沒有結束標簽。src屬性用于設置圖像文件所在的路徑，這一路徑可以是相對路徑，也可以是絕對路徑，但在真正的網(wǎng)站開發(fā)中，對于圖片或者引用文件的路徑，都是使用相對路徑的。添加圖片2. img標簽alt屬性alt屬性用于設置圖片的描述信息，這些信息是給搜索引擎看的。在搜索引擎優(yōu)化SEO中，alt屬性也是一個非常重要的屬性。其結構如下：添加圖片3. img標簽title屬性title屬性用于設置鼠標移到圖片上的提示文字，這些提示文字是給用戶看的。其結構如下：添加圖片3. img標簽title屬性【例2-6】使用相對路徑插入圖像實例，文件結構及代碼如圖所示（示例文件2-6.html）在chrome瀏覽器中預覽作業(yè)一、選擇題1.制作網(wǎng)頁時，如果想在段落內(nèi)每個項目前面加上1、2、3等有順序的數(shù)字，可以使用_標簽。A B C D 2.制作網(wǎng)頁時