（中職）Web前端設(shè)計基礎(chǔ) 項目二-1電子課件

1、YCF正版可修改PPT（中職）Web前端設(shè)計基礎(chǔ) 項目二-1電子課件網(wǎng)頁中的文本和排版項目二授課教師：姓名WEB前端設(shè)計基礎(chǔ)Contents1.項目描述2.知識準(zhǔn)備3.項目實(shí)施4.項目拓展5.項目小結(jié)6.技能訓(xùn)練一 項目描述本項目學(xué)習(xí)要點(diǎn)網(wǎng)頁中各種文本的添加；文字的排版標(biāo)簽；網(wǎng)頁中的圖片。二 知識準(zhǔn)備添加文本；文本排版；文字列表；添加圖片。添加文本1.添加普通文本普通文本就是指漢字或者使用鍵盤可以直接輸入的字符。在網(wǎng)頁中添加普通文本可以有兩種方法：一是在需要地位置直接輸入漢字或字符；二是如果有現(xiàn)成的文本，可以使用復(fù)制、粘貼的方法，把需要的文本從其他窗口中復(fù)制過來，回到Sublime窗口在需要文

2、本內(nèi)容的位置進(jìn)行粘貼即可。添加文本2.添加特殊字符文本在網(wǎng)頁中輸入特殊字符，需要在HTML代碼中輸入該特殊字符相對應(yīng)的代碼。這些特殊字符相對應(yīng)的代碼都是以“&”開頭，以“;”（注意是英文分號）結(jié)束的。如不斷行的空格用“”來表示。特殊符號名稱HTML代碼特殊符號名稱HTML代碼雙引號（英文）分節(jié)符左單引號版權(quán)符右單引號注冊商標(biāo)乘號商標(biāo)除號歐元小于號大于號日元&與符號&度長破折號|豎線|添加文本2.添加特殊字符文本在編輯化學(xué)公式或物理公式時，使用特殊字符的頻度非常高，如果每次輸入時都去查詢或者記憶這些特殊符號的代碼，工作量是相當(dāng)大的，在此提供一些輸入技巧。對于部分鍵盤上沒有的字符，可以借助中文輸入

3、法的軟鍵盤。如單擊搜狗拼音輸入法的“軟鍵盤”按鈕，彈出如圖所示輸入方式選項。單擊“特殊符號”，,選擇需要輸入的符號類型，選擇相應(yīng)的特殊符號。添加文本3.文本格式化標(biāo)簽在HTML文檔中，重要文本通常以粗體顯示，可以使用兩個標(biāo)簽或。標(biāo)簽和標(biāo)簽加粗的效果是一樣的。但是在實(shí)際開發(fā)中，想要對文本加粗，盡量用標(biāo)簽，不要用標(biāo)簽，這是由于標(biāo)簽比標(biāo)簽更具有語義性。在HTML文檔中，使用或標(biāo)簽實(shí)現(xiàn)文本的傾斜顯示。（1）粗體標(biāo)簽、（2）斜體標(biāo)簽、標(biāo)簽添加文本3.文本格式化標(biāo)簽在HTML文檔中，用標(biāo)簽實(shí)現(xiàn)上標(biāo)文本，用標(biāo)簽實(shí)現(xiàn)下標(biāo)文本。和都是雙標(biāo)簽，放在開始標(biāo)簽和結(jié)束標(biāo)簽之間的文本會分別以上標(biāo)和下標(biāo)的形式出現(xiàn)。在HTM

4、L文檔中，用標(biāo)簽來呈現(xiàn)那些不再準(zhǔn)確或不再相關(guān)的內(nèi)容，用標(biāo)簽實(shí)現(xiàn)文本的下劃線效果。（3）上標(biāo)標(biāo)簽和下標(biāo)標(biāo)簽（4）刪除線標(biāo)簽和下劃線標(biāo)簽HTML 5基本標(biāo)簽3.文本格式化標(biāo)簽【例2-1】文本格式化標(biāo)簽實(shí)例，代碼如下所示（示例文件2-1.html）文本格式化標(biāo)簽標(biāo)簽實(shí)例粗體標(biāo)簽使用<b>標(biāo)簽的粗體文本使用<strong>標(biāo)簽的粗體文本斜體標(biāo)簽使用<i>標(biāo)簽的斜體文本HTML 5基本標(biāo)簽3.文本格式化標(biāo)簽【例2-1】文本格式化標(biāo)簽實(shí)例，代碼如下所示（示例文件2-1.html）使用<em>標(biāo)簽的斜體文本上標(biāo)、下標(biāo)標(biāo)簽使用<sup>標(biāo)簽的上標(biāo)文本使用<sub&g

5、t標(biāo)簽的下標(biāo)文本刪除線標(biāo)簽使用<s>標(biāo)簽的刪除線標(biāo)簽下劃線標(biāo)簽使用<u>標(biāo)簽的下劃線標(biāo)簽HTML 5基本標(biāo)簽3.文本格式化標(biāo)簽【例2-1】文本格式化標(biāo)簽實(shí)例，代碼如下所示（示例文件2-1.html）在chrome瀏覽器中預(yù)覽文本排版1.換行標(biāo)簽換行標(biāo)簽是一個單標(biāo)簽，它沒有結(jié)束標(biāo)簽，是英文單詞break的縮寫，作用是將文字在一個段內(nèi)強(qiáng)制換行。一個標(biāo)簽代表一個換行，連續(xù)的多個標(biāo)簽可以實(shí)現(xiàn)多次換行。使用換行標(biāo)簽時，在需要換行的位置添加標(biāo)簽即可。文本排版2.段落標(biāo)簽在HTML文檔中，使用標(biāo)簽來標(biāo)記一段文字。段落標(biāo)簽是雙標(biāo)簽，即，在開始標(biāo)簽和結(jié)束標(biāo)簽之間的內(nèi)容形成一個段落。如果省略結(jié)束標(biāo)

6、簽，從標(biāo)簽開始，直到遇見下一個段落標(biāo)簽之前的文本，都在一個段落內(nèi)。段落標(biāo)簽會自動換行，并且段落與段落之間有一定的空隙。文本排版3.標(biāo)題標(biāo)簽在HTML文檔中，文本的結(jié)構(gòu)除了以行和段出現(xiàn)之外，往往還包含有各種級別的標(biāo)題。各種級別的標(biāo)題由元素來定義，標(biāo)簽中的字母h是英文header的簡稱。作為標(biāo)題，它們的重要性是有區(qū)別的，其中標(biāo)題的重要性最高，標(biāo)題最低。一般一個頁面只能有一個，而可以有多個。文本排版3.標(biāo)題標(biāo)簽【例2-2】標(biāo)題標(biāo)簽實(shí)例，代碼如右（示例文件2-2.html）標(biāo)題標(biāo)簽實(shí)例山不在高，有仙則名水不在深，有龍則靈斯是陋室，惟吾德馨苔痕上階綠，草色入簾青談笑有鴻儒，往來無白丁可以調(diào)素琴，閱金經(jīng)在chrome瀏覽器中預(yù)覽作業(yè)一、選擇題1.下列_是換行標(biāo)簽。A B C D 2.HTML文件的源代碼中含有“123”，其作用是_。A 將123以斜體顯示 B 在123前劃一條水平線 C 將123與其前后內(nèi)容分成不同段 D