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

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

第4章HTML與CSS前臺頁面設(shè)計第4章HTML網(wǎng)頁主體與內(nèi)容標(biāo)記

HTML與CSS前臺頁面設(shè)計本章要點標(biāo)題與段落標(biāo)記的使用文本格式標(biāo)記的使用<div>與<span>標(biāo)記的使用HTML中特殊字符的使用

/////////////////////////////////////////////HTML與CSS前臺頁面設(shè)計目錄：4.1標(biāo)題與段落標(biāo)記的使用4.2文本格式標(biāo)記的使用4.3內(nèi)容（多用途）標(biāo)記4.4特殊字符4.5綜合實例第4章HTML網(wǎng)頁主體與內(nèi)容標(biāo)記

4.1標(biāo)題與段落標(biāo)記的使用

4.1.1h1、h2、h3、h4、h5與h6一般文章都有標(biāo)題、副標(biāo)題、章和節(jié)等結(jié)構(gòu)，HTML中也提供了相應(yīng)的標(biāo)題標(biāo)記<hn>,其中n為標(biāo)題的等級，HTML總共提供六個等級的標(biāo)題，n越小，標(biāo)題字號就越大。hn標(biāo)記一般格式為：<hncolor=屬性值align=屬性值>標(biāo)題</hn>（n=1,…6）說明：<hn>的屬性有color、align。分別標(biāo)識標(biāo)題的顏色和位置(左、右、中間)。

4.1.2p為了排列的整齊、清晰，文字段落之間，常用<p></p>來做標(biāo)記。<p>是HTML格式中特有的段落元素。在HTML格式里不需要在意文章每行的寬度，不必?fù)?dān)心文字是不是太長了而被截掉，它會根據(jù)窗口的寬度自動轉(zhuǎn)折到下一行。因此，在原始文件中的<p>，指出在這兒告一段落，下面的文字另起一段。如果沒有遇到<p>這個符號，它就會把所有的文字都擠在一個段落里，不遇到窗口邊界是不會換行的。段落標(biāo)記里面可以加入文字,列表,表格等。文件段落的開始由<p>來標(biāo)記，段落的結(jié)束由</p>來標(biāo)記，</p>是可以省略的，因為下一個<p>的開始就意味著上一個<p>的結(jié)束。標(biāo)記一般格式為：<palign=屬性值>文本</p>說明：<p>標(biāo)簽有一個常用屬性align，它用來指名字符顯示時的對齊方式，其值一般有l(wèi)eft（左）、center（中）、right（右）三種。4.1標(biāo)題與段落標(biāo)記的使用

4.1.3blockquote<blockquote>標(biāo)記可定義一個塊引用。<blockquote>與</blockquote>之間的所有文本都會從常規(guī)文本中分離出來，經(jīng)常會在左、右兩邊進行縮進，而且有時會使用斜體。也就是說，塊引用擁有它們自己的空間。標(biāo)記一般格式為：<blockquotecite=URL>文本</blockquote>4.1標(biāo)題與段落標(biāo)記的使用

4.1.4address<address>可定義一個地址（比如電子郵件地址）。使用它來定義地址、簽名或者文檔的作者身份。不論創(chuàng)建的文檔是簡短扼要還是冗長完整，都應(yīng)該確保每個文檔都附加了一個地址，這樣做不僅為讀者提供了反饋的渠道，還可以增加文檔的可信度。標(biāo)記一般格式為：<address>文本</address>4.1標(biāo)題與段落標(biāo)記的使用

4.1.5pre<pre>標(biāo)記可定義預(yù)格式化的文本。被包圍在<pre>標(biāo)記中的文本通常會保留空格和換行符，而文本也會呈現(xiàn)為等寬字體。<pre>標(biāo)記的一個常見應(yīng)用就是用來表示計算機的源代碼。標(biāo)記一般格式為：<pre>文本塊</pre>4.1標(biāo)題與段落標(biāo)記的使用

4.2文本格式標(biāo)記的使用

4.2.1em標(biāo)記<em>用來表示強調(diào)，其文本默認(rèn)樣式為斜體。<em>標(biāo)記一般格式為：<em>文本</em>4.2.2strong標(biāo)記<strong>把文本定義為語氣更強的強調(diào)的內(nèi)容。其文本默認(rèn)樣式為粗體。<strong>標(biāo)記一般格式為：<strong>文本</strong>4.2文本格式標(biāo)記的使用

4.2.3cite標(biāo)記<cite>定義引用。可使用該標(biāo)記對參考文獻的引用進行定義，比如書籍或雜志的標(biāo)題。<cite>標(biāo)記一般格式為：<citecite=屬性值>文本</cite>4.2文本格式標(biāo)記的使用

4.2.4i與b <i>與<b>標(biāo)記均是字體樣式元素。<i>顯示斜體文本效果，<b>呈現(xiàn)粗體文本效果。<i>與<b>標(biāo)記一般格式為：<i>文本</i><b>文本</b>4.2文本格式標(biāo)記的使用

4.2.5big與small<big>與<small>標(biāo)記也是字體樣式元素。<big>呈現(xiàn)大號字體效果，<small>呈現(xiàn)小號字體效果。<big>與<small>標(biāo)記一般格式為：<big>文本</big><small>文本</small>4.2文本格式標(biāo)記的使用

4.2.6tt<tt>標(biāo)記呈現(xiàn)類似打字機或者等寬的文本效果。標(biāo)記一般格式為：<tt>文本</tt>4.2文本格式標(biāo)記的使用

4.2.7sup與sub<sup>與<sub>標(biāo)記均是用于數(shù)學(xué)公式、科學(xué)符號和化學(xué)公式中的標(biāo)記。<sup>標(biāo)記可定義上標(biāo)文本，<sub>標(biāo)記可定義下標(biāo)文本。標(biāo)記一般格式為：^文本

_文本說明：<sup>與<sub>標(biāo)記中的文本內(nèi)容將會以當(dāng)前文本流中字符高度的一半來顯示，但是與當(dāng)前文本流中文字的字體和字號都是一樣的。<sup>標(biāo)記中的文本出現(xiàn)在當(dāng)前文本流的上方，而<sub>標(biāo)記中的文本出現(xiàn)在當(dāng)前文本流的下方。4.2文本格式標(biāo)記的使用

4.2.8q<q>標(biāo)記可定義一個短塊的引用。標(biāo)記一般格式為：<q>文本</q>說明：<q>與<blockquote>的區(qū)別，<q>標(biāo)記在本質(zhì)上與<blockquote>是一樣的。不同之處在于它們的顯示和應(yīng)用。<q>標(biāo)記用于簡短的行內(nèi)引用。如果需要從周圍內(nèi)容分離出來比較長的部分（通常顯示為縮進的塊），請使用<blockquote>標(biāo)記。4.2文本格式標(biāo)記的使用

4.2.9dfn<dfn>標(biāo)記定義一個項目。可標(biāo)記那些對特殊術(shù)語或短語的定義?，F(xiàn)在流行的瀏覽器通常用斜體來顯示<dfn>中的文本。<dfn>標(biāo)記一般格式為：<dfn>文本</dfn>4.2文本格式標(biāo)記的使用

/////////////////////////////////////////////4.2.10abbr與acronym<abbr>標(biāo)記表示一個縮寫形式，用于表示web頁面上的簡稱。<abbr>標(biāo)記最初是在HTML4.0中引入的，表示它所包含的文本是一個更長的單詞或短語的簡寫形式。瀏覽器可能會根據(jù)這個信息改變對這些文本的顯示方式，或者用其他文本代替。<abbr>標(biāo)記一般格式為：<abbrtitle=“文本”>文本簡稱</abbr>4.2文本格式標(biāo)記的使用

4.2.11del與ins<del>標(biāo)記定義文檔中已被刪除的文本。<del>標(biāo)記一般格式為：<del>文本</del><ins>標(biāo)記定義已經(jīng)被插入文檔中的文本。<ins>標(biāo)記一般格式為：<ins>文本</ins>說明：<del>與<ins>標(biāo)簽配合使用，來描述文檔中的更新和修正。4.2文本格式標(biāo)記的使用

4.2.12bdo<bdo>標(biāo)記可重新定義文字顯示方向。<bdo>標(biāo)記一般格式為：<bdodir=屬性值>文本</bdo>4.2文本格式標(biāo)記的使用

4.2.13code、kbd、samp與var<code>、<kbd>、<samp>與<var>標(biāo)記常用于顯示計算機/編程代碼。這幾個標(biāo)記不只是讓用戶更容易理解和瀏覽的文檔，而且將來某些自動系統(tǒng)還可以利用這些恰當(dāng)?shù)臉?biāo)簽，從的文檔中提取信息以及文檔中提到的有用參數(shù)。提供給瀏覽器的語義信息越多，瀏覽器就可以越好地把這些信息展示給用戶。4.2文本格式標(biāo)記的使用

4.2.14hr <hr>標(biāo)記在HTML頁面中創(chuàng)建一條水平線?？梢栽谝曈X上將文檔分隔成各個部分。<hr>標(biāo)記一般格式為：<hr屬性=”屬性值”>4.2文本格式標(biāo)記的使用

4.2.15marquee滾動字幕的使用使得整個網(wǎng)頁更有動感，顯得很有生氣。用HTML的<marquee>滾動字幕標(biāo)簽所需的代碼最少，能夠以較少的下載時間換來較好的效果。<marquee>標(biāo)記一般格式為：<marquee屬性=”屬性值”>滾動字幕</marquee>4.2文本格式標(biāo)記的使用

4.3內(nèi)容（多用途）標(biāo)記4.3.1divdiv是division的簡寫，division意為分割、區(qū)域。<div>標(biāo)記在HTML中表示一個塊，<div>標(biāo)記可以把文檔分割為獨立的、不同的部分，因而該標(biāo)記被稱為區(qū)隔標(biāo)記?？梢詫⑺米鱓eb頁面的組織工具，設(shè)定頁面文字、圖形、圖像、表格等的擺放位置?？梢酝ㄟ^CSS樣式(style)為其賦予不同的表現(xiàn)。div標(biāo)記一般格式為：<div屬性=”屬性值”>文檔</div>4.3.2span<span>標(biāo)記在HTML中表示一個組合文檔中的行內(nèi)元素，<span>標(biāo)記可以把一行文檔中的某部分分割為獨立的區(qū)域，從而實現(xiàn)某種特定效果，因而該標(biāo)記被稱為行內(nèi)區(qū)隔標(biāo)記。<span>標(biāo)記一般格式為：<span屬性=”屬性值”>文檔</span>4.3內(nèi)容（多用途）標(biāo)記4.4特殊字符特殊字符是指在HTML中具有特別含義的字符，比如小于號<就表示HTML標(biāo)記的開始，這個小于號是不會顯示在最終看到的網(wǎng)頁里面。那如果希望在網(wǎng)頁中顯示一個小于號，該怎么辦呢？這時就需要使用一些特殊的代碼組合來替代。在HTML中特殊字符是不能直接使用的。要使用特殊字符，應(yīng)使用它們的轉(zhuǎn)義序列。在超文本標(biāo)記語言里，一個特殊字符有兩種表達方式，即字符轉(zhuǎn)義序列或數(shù)字轉(zhuǎn)義序列。所謂字符轉(zhuǎn)義序列，實際上就是用有意義的名稱來表示特殊字符，通常由前綴“&”，加上字符對應(yīng)的名稱，再加上后綴“;”而組成。其表達方式如下：&name；其中name是一個用于表示字符的名稱，它是區(qū)分大小寫的。例如：<font&lgt;顯示為<font>，若直接寫為“<font>“則被認(rèn)為是一個標(biāo)注。4.4特殊字符所謂數(shù)字轉(zhuǎn)義序列，就是用數(shù)字來表示文檔中的特殊字符，通常由前綴“&#”，加上數(shù)值，再加上后綴“;”而組成。其表達方式如下：&#D；其中D是一個十進制數(shù)值4.4特殊字符4.5綜合實例

本節(jié)將結(jié)合本章所學(xué)的內(nèi)容來制作一個簡單的關(guān)于HTML文本格式標(biāo)記的網(wǎng)頁。網(wǎng)頁內(nèi)容如圖所示：小結(jié)文本是HTML網(wǎng)頁中的重要內(nèi)容之一，編寫HTML文檔時，可以將文本放置在標(biāo)記之間來設(shè)置文本的格式。設(shè)置文檔中文本的格式內(nèi)容包括分段與換行、設(shè)置段落對齊方式、設(shè)置字體、字號和文本顏色以及設(shè)置字符樣式等。本