第04章HTML網(wǎng)頁(yè)主體與內(nèi)容標(biāo)記

1、HTML與CSS前臺(tái)頁(yè)面設(shè)計(jì)HTML網(wǎng)頁(yè)主體與內(nèi)容標(biāo)記 第4章HTML與CSS前臺(tái)頁(yè)面設(shè)計(jì)HTML與CSS前臺(tái)頁(yè)面設(shè)計(jì)第4章 HTML網(wǎng)頁(yè)主體與內(nèi)容標(biāo)記 HTML與CSS前臺(tái)頁(yè)面設(shè)計(jì)本章要點(diǎn) 標(biāo)題與段落標(biāo)記的使用 文本格式標(biāo)記的使用 與標(biāo)記的使用 HTML中特殊字符的使用 http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/www.xunchi- http:/ http:/ http:

2、/ http:/ http:/ http:/ http:/ http:/ http:/ / http:/ http:/ http:/ http:/ http:/ http:/ http:/www.gz- http:/www.gz- http:/ http:/ http:/ http:/ 4.1 標(biāo)題與段落標(biāo)記的使用 4.2 文本格式標(biāo)記的使用 4.3 內(nèi)容（多用途）標(biāo)記 4.4 特殊字符 4.5 綜合實(shí)例第4章 HTML網(wǎng)頁(yè)主體與內(nèi)容標(biāo)記 HTML與CSS前臺(tái)頁(yè)面設(shè)計(jì)4.1 標(biāo)題與段落標(biāo)記的使用 4.1.1 h1、h2、h3、h4、h5與h6一般文章都有標(biāo)

3、題、副標(biāo)題、章和節(jié)等結(jié)構(gòu)，HTML中也提供了相應(yīng)的標(biāo)題標(biāo)記,其中n為標(biāo)題的等級(jí)，HTML總共提供六個(gè)等級(jí)的標(biāo)題，n越小，標(biāo)題字號(hào)就越大。hn標(biāo)記一般格式為：標(biāo)題 （n=1,6）說(shuō)明：的屬性有color、align。分別標(biāo)識(shí)標(biāo)題的顏色和位置(左、右、中間)。 HTML與CSS前臺(tái)頁(yè)面設(shè)計(jì)4.1.2 p為了排列的整齊、清晰，文字段落之間，常用來(lái)做標(biāo)記。是HTML格式中特有的段落元素。在HTML格式里不需要在意文章每行的寬度，不必?fù)?dān)心文字是不是太長(zhǎng)了而被截掉，它會(huì)根據(jù)窗口的寬度自動(dòng)轉(zhuǎn)折到下一行。因此，在原始文件中的，指出在這兒告一段落，下面的文字另起一段。如果沒(méi)有遇到這個(gè)符號(hào)，它就會(huì)把所有的文字都擠

4、在一個(gè)段落里，不遇到窗口邊界是不會(huì)換行的。段落標(biāo)記里面可以加入文字,列表,表格等。文件段落的開(kāi)始由來(lái)標(biāo)記，段落的結(jié)束由來(lái)標(biāo)記，是可以省略的，因?yàn)橄乱粋€(gè)的開(kāi)始就意味著上一個(gè)的結(jié)束。標(biāo)記一般格式為：文本說(shuō)明：標(biāo)簽有一個(gè)常用屬性align，它用來(lái)指名字符顯示時(shí)的對(duì)齊方式，其值一般有l(wèi)eft（左）、center（中）、right（右）三種。 4.1 標(biāo)題與段落標(biāo)記的使用 HTML與CSS前臺(tái)頁(yè)面設(shè)計(jì)4.1.3 blockquote標(biāo)記可定義一個(gè)塊引用。與之間的所有文本都會(huì)從常規(guī)文本中分離出來(lái)，經(jīng)常會(huì)在左、右兩邊進(jìn)行縮進(jìn)，而且有時(shí)會(huì)使用斜體。也就是說(shuō)，塊引用擁有它們自己的空間。標(biāo)記一般格式為：文本4.1

5、 標(biāo)題與段落標(biāo)記的使用 HTML與CSS前臺(tái)頁(yè)面設(shè)計(jì)4.1.4 address可定義一個(gè)地址（比如電子郵件地址）。使用它來(lái)定義地址、簽名或者文檔的作者身份。不論創(chuàng)建的文檔是簡(jiǎn)短扼要還是冗長(zhǎng)完整，都應(yīng)該確保每個(gè)文檔都附加了一個(gè)地址，這樣做不僅為讀者提供了反饋的渠道，還可以增加文檔的可信度。標(biāo)記一般格式為：文本 4.1 標(biāo)題與段落標(biāo)記的使用 HTML與CSS前臺(tái)頁(yè)面設(shè)計(jì)4.1.5 pre標(biāo)記可定義預(yù)格式化的文本。被包圍在標(biāo)記中的文本通常會(huì)保留空格和換行符，而文本也會(huì)呈現(xiàn)為等寬字體。標(biāo)記的一個(gè)常見(jiàn)應(yīng)用就是用來(lái)表示計(jì)算機(jī)的源代碼。標(biāo)記一般格式為：文本塊4.1 標(biāo)題與段落標(biāo)記的使用 HTML與CSS前臺(tái)

6、頁(yè)面設(shè)計(jì)4.2 文本格式標(biāo)記的使用 4.2.1 em標(biāo)記用來(lái)表示強(qiáng)調(diào)，其文本默認(rèn)樣式為斜體。標(biāo)記一般格式為：文本HTML與CSS前臺(tái)頁(yè)面設(shè)計(jì)4.2.2 strong標(biāo)記把文本定義為語(yǔ)氣更強(qiáng)的強(qiáng)調(diào)的內(nèi)容。其文本默認(rèn)樣式為粗體。標(biāo)記一般格式為：文本 4.2 文本格式標(biāo)記的使用 HTML與CSS前臺(tái)頁(yè)面設(shè)計(jì)4.2.3 cite標(biāo)記定義引用?？墒褂迷摌?biāo)記對(duì)參考文獻(xiàn)的引用進(jìn)行定義，比如書(shū)籍或雜志的標(biāo)題。標(biāo)記一般格式為：文本 4.2 文本格式標(biāo)記的使用 HTML與CSS前臺(tái)頁(yè)面設(shè)計(jì)4.2.4 i與b與標(biāo)記均是字體樣式元素。顯示斜體文本效果，呈現(xiàn)粗體文本效果。與標(biāo)記一般格式為：文本文本 4.2 文本格式標(biāo)記

7、的使用 HTML與CSS前臺(tái)頁(yè)面設(shè)計(jì)4.2.5 big與small與標(biāo)記也是字體樣式元素。呈現(xiàn)大號(hào)字體效果，呈現(xiàn)小號(hào)字體效果。與標(biāo)記一般格式為：文本文本4.2 文本格式標(biāo)記的使用 HTML與CSS前臺(tái)頁(yè)面設(shè)計(jì)4.2.6 tt標(biāo)記呈現(xiàn)類(lèi)似打字機(jī)或者等寬的文本效果。標(biāo)記一般格式為：文本4.2 文本格式標(biāo)記的使用 HTML與CSS前臺(tái)頁(yè)面設(shè)計(jì)4.2.7 sup與sub與標(biāo)記均是用于數(shù)學(xué)公式、科學(xué)符號(hào)和化學(xué)公式中的標(biāo)記。標(biāo)記可定義上標(biāo)文本，標(biāo)記可定義下標(biāo)文本。標(biāo)記一般格式為：文本 文本說(shuō)明：與標(biāo)記中的文本內(nèi)容將會(huì)以當(dāng)前文本流中字符高度的一半來(lái)顯示，但是與當(dāng)前文本流中文字的字體和字號(hào)都是一樣的。標(biāo)記中的

8、文本出現(xiàn)在當(dāng)前文本流的上方，而標(biāo)記中的文本出現(xiàn)在當(dāng)前文本流的下方。4.2 文本格式標(biāo)記的使用 HTML與CSS前臺(tái)頁(yè)面設(shè)計(jì)4.2.8 q標(biāo)記可定義一個(gè)短塊的引用。標(biāo)記一般格式為：文本說(shuō)明：與的區(qū)別，標(biāo)記在本質(zhì)上與是一樣的。不同之處在于它們的顯示和應(yīng)用。標(biāo)記用于簡(jiǎn)短的行內(nèi)引用。如果需要從周?chē)鷥?nèi)容分離出來(lái)比較長(zhǎng)的部分（通常顯示為縮進(jìn)的塊），請(qǐng)使用標(biāo)記。 4.2 文本格式標(biāo)記的使用 HTML與CSS前臺(tái)頁(yè)面設(shè)計(jì)4.2.9 dfn標(biāo)記定義一個(gè)項(xiàng)目?？蓸?biāo)記那些對(duì)特殊術(shù)語(yǔ)或短語(yǔ)的定義。現(xiàn)在流行的瀏覽器通常用斜體來(lái)顯示中的文本。標(biāo)記一般格式為：文本 4.2 文本格式標(biāo)記的使用 http:/ http:/ h

9、ttp:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/www.xunchi- http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ / http:/ http:/ http:/ http:/ http:/ http:/ http:/www.gz- http:/www.gz- http:/ http:/ htt

10、p:/ http:/ abbr與acronym標(biāo)記表示一個(gè)縮寫(xiě)形式，用于表示web頁(yè)面上的簡(jiǎn)稱(chēng)。標(biāo)記最初是在 HTML4.0中引入的，表示它所包含的文本是一個(gè)更長(zhǎng)的單詞或短語(yǔ)的簡(jiǎn)寫(xiě)形式。瀏覽器可能會(huì)根據(jù)這個(gè)信息改變對(duì)這些文本的顯示方式，或者用其他文本代替。標(biāo)記一般格式為：文本簡(jiǎn)稱(chēng) 4.2 文本格式標(biāo)記的使用 HTML與CSS前臺(tái)頁(yè)面設(shè)計(jì)4.2.11 del與ins標(biāo)記定義文檔中已被刪除的文本。標(biāo)記一般格式為：文本標(biāo)記定義已經(jīng)被插入文檔中的文本。標(biāo)記一般格式為：文本說(shuō)明：與標(biāo)簽配合使用，來(lái)描述文檔中的更新和修正。4.2 文本格式標(biāo)記的使用 HTML與CSS前臺(tái)頁(yè)面設(shè)計(jì)4.2.12 bdo標(biāo)記可重

11、新定義文字顯示方向。標(biāo)記一般格式為：文本4.2 文本格式標(biāo)記的使用 HTML與CSS前臺(tái)頁(yè)面設(shè)計(jì)4.2.13 code、kbd、samp與var、與標(biāo)記常用于顯示計(jì)算機(jī)/編程代碼。這幾個(gè)標(biāo)記不只是讓用戶(hù)更容易理解和瀏覽的文檔，而且將來(lái)某些自動(dòng)系統(tǒng)還可以利用這些恰當(dāng)?shù)臉?biāo)簽，從的文檔中提取信息以及文檔中提到的有用參數(shù)。提供給瀏覽器的語(yǔ)義信息越多，瀏覽器就可以越好地把這些信息展示給用戶(hù)。4.2 文本格式標(biāo)記的使用 HTML與CSS前臺(tái)頁(yè)面設(shè)計(jì)4.2.14 hr標(biāo)記在HTML頁(yè)面中創(chuàng)建一條水平線(xiàn)。可以在視覺(jué)上將文檔分隔成各個(gè)部分。標(biāo)記一般格式為：4.2 文本格式標(biāo)記的使用 HTML與CSS前臺(tái)頁(yè)面設(shè)計(jì)

12、4.2.15 marquee滾動(dòng)字幕的使用使得整個(gè)網(wǎng)頁(yè)更有動(dòng)感，顯得很有生氣。用HTML的滾動(dòng)字幕標(biāo)簽所需的代碼最少，能夠以較少的下載時(shí)間換來(lái)較好的效果。標(biāo)記一般格式為：滾動(dòng)字幕4.2 文本格式標(biāo)記的使用 HTML與CSS前臺(tái)頁(yè)面設(shè)計(jì)4.3 內(nèi)容（多用途）標(biāo)記4.3.1 divdiv是division的簡(jiǎn)寫(xiě)，division意為分割、區(qū)域。標(biāo)記在HTML中表示一個(gè)塊，標(biāo)記可以把文檔分割為獨(dú)立的、不同的部分，因而該標(biāo)記被稱(chēng)為區(qū)隔標(biāo)記?？梢詫⑺米鱓eb頁(yè)面的組織工具，設(shè)定頁(yè)面文字、圖形、圖像、表格等的擺放位置?？梢酝ㄟ^(guò)CSS樣式(style)為其賦予不同的表現(xiàn)。div標(biāo)記一般格式為：文檔HTML

13、與CSS前臺(tái)頁(yè)面設(shè)計(jì)4.3.2 span標(biāo)記在HTML中表示一個(gè)組合文檔中的行內(nèi)元素，標(biāo)記可以把一行文檔中的某部分分割為獨(dú)立的區(qū)域，從而實(shí)現(xiàn)某種特定效果，因而該標(biāo)記被稱(chēng)為行內(nèi)區(qū)隔標(biāo)記。標(biāo)記一般格式為：文檔4.3 內(nèi)容（多用途）標(biāo)記HTML與CSS前臺(tái)頁(yè)面設(shè)計(jì)4.4 特殊字符特殊字符是指在HTML中具有特別含義的字符，比如小于號(hào)就表示HTML標(biāo)記的開(kāi)始，這個(gè)小于號(hào)是不會(huì)顯示在最終看到的網(wǎng)頁(yè)里面。那如果希望在網(wǎng)頁(yè)中顯示一個(gè)小于號(hào)，該怎么辦呢？這時(shí)就需要使用一些特殊的代碼組合來(lái)替代。在HTML中特殊字符是不能直接使用的。要使用特殊字符，應(yīng)使用它們的轉(zhuǎn)義序列。在超文本標(biāo)記語(yǔ)言里，一個(gè)特殊字符有兩種表達(dá)

14、方式，即字符轉(zhuǎn)義序列或數(shù)字轉(zhuǎn)義序列。HTML與CSS前臺(tái)頁(yè)面設(shè)計(jì)所謂字符轉(zhuǎn)義序列，實(shí)際上就是用有意義的名稱(chēng)來(lái)表示特殊字符，通常由前綴“&”，加上字符對(duì)應(yīng)的名稱(chēng)，再加上后綴“;”而組成。其表達(dá)方式如下：&name；其中name是一個(gè)用于表示字符的名稱(chēng)，它是區(qū)分大小寫(xiě)的。例如：& lt; font &lgt;顯示為，若直接寫(xiě)為“則被認(rèn)為是一個(gè)標(biāo)注。4.4 特殊字符HTML與CSS前臺(tái)頁(yè)面設(shè)計(jì)所謂數(shù)字轉(zhuǎn)義序列，就是用數(shù)字來(lái)表示文檔中的特殊字符，通常由前綴“”而組成。其表達(dá)方式如下： &#D；其中D是一個(gè)十進(jìn)制數(shù)值4.4 特殊字符HTML與CSS前臺(tái)頁(yè)面設(shè)計(jì)4.5 綜合實(shí)例 本節(jié)將結(jié)合本章所學(xué)的內(nèi)容來(lái)

15、制作一個(gè)簡(jiǎn)單的關(guān)于HTML文本格式標(biāo)記的網(wǎng)頁(yè)。網(wǎng)頁(yè)內(nèi)容如圖所示：HTML與CSS前臺(tái)頁(yè)面設(shè)計(jì)小結(jié) 文本是HTML網(wǎng)頁(yè)中的重要內(nèi)容之一，編寫(xiě)HTML文檔時(shí)，可以將文本放置在標(biāo)記之間來(lái)設(shè)置文本的格式。設(shè)置文檔中文本的格式內(nèi)容包括分段與換行、設(shè)置段落對(duì)齊方式、設(shè)置字體、字號(hào)和文本顏色以及設(shè)置字符樣式等。本章學(xué)習(xí)了HTML語(yǔ)言的標(biāo)題與段落標(biāo)記、文本格式中的常用標(biāo)記以及與標(biāo)記，HTML語(yǔ)言中特殊字符的組成結(jié)構(gòu)和使用的方法。使用這些標(biāo)記，告訴Web瀏覽器如何對(duì)文本進(jìn)行格式化和顯示，如何對(duì)網(wǎng)頁(yè)元素進(jìn)行分割和標(biāo)記，以形成文本的布局、文字的格式及美觀簡(jiǎn)潔的版面。 HTML與CSS前臺(tái)頁(yè)面設(shè)計(jì)HTML網(wǎng)頁(yè)主體與內(nèi)容標(biāo)記 第4章本章結(jié)束http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/