BB电子游艺怎么进不去

書名： HTML5+CSS3網(wǎng)站設(shè)計(jì)基礎(chǔ)教程
作者名：傳智播客高教產(chǎn)品研發(fā)部編著
本章字?jǐn)?shù)： 2184字
更新時(shí)間： 2019-09-04 09:38:35

1.3 文本控制標(biāo)記

在一個(gè)網(wǎng)頁中文字往往占有較大的篇幅，為了讓文字能夠排版整齊、結(jié)構(gòu)清晰，HTML提供了一系列的文本控制標(biāo)記，如標(biāo)題標(biāo)記<h1>～<h6>、段落標(biāo)記<p>等。本節(jié)將對(duì)這些標(biāo)記進(jìn)行詳細(xì)講解。

1.3.1 標(biāo)題和段落標(biāo)記

一篇結(jié)構(gòu)清晰的文章通常都有標(biāo)題和段落，HTML網(wǎng)頁也不例外。為了使網(wǎng)頁中的文字有條理地顯示出來，HTML提供了相應(yīng)的標(biāo)記，對(duì)它們的具體介紹如下。

1．標(biāo)題標(biāo)記

為了使網(wǎng)頁更具有語義化，我們經(jīng)常會(huì)在頁面中用到標(biāo)題標(biāo)記，HTML提供了6個(gè)等級(jí)的標(biāo)題，即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，從<h1>到<h6>重要性遞減。其基本語法格式為：

    <hn align="對(duì)齊方式">標(biāo)題文本</hn>

該語法中n的取值為1到6, align屬性為可選屬性，用于指定標(biāo)題的對(duì)齊方式。下面通過一個(gè)案例說明標(biāo)題標(biāo)記的使用，如例1-7所示。

例1-7 example07.html

    1   <! doctype html>
    2   <html>
    3   <head>
    4   <meta charset="utf-8">
    5   <title>標(biāo)題標(biāo)記的使用</title>
    6   </head>
    7   <body>
    8   <h1>1級(jí)標(biāo)題</h1>
    9   <h2>2級(jí)標(biāo)題</h2>
    10  <h3>3級(jí)標(biāo)題</h3>
    11  <h4>4級(jí)標(biāo)題</h4>
    12  <h5>5級(jí)標(biāo)題</h5>
    13  <h6>6級(jí)標(biāo)題</h6>
    14  </body>
    15  </html>

在例1-7中，使用<h1>到<h6>標(biāo)記設(shè)置6種不同級(jí)別的標(biāo)題。

運(yùn)行例1-7，效果如圖1-11所示。

從圖1-11可以看出，默認(rèn)情況下標(biāo)題文字是加粗左對(duì)齊的，并且從<h1>到<h6>字號(hào)遞減。如果想讓標(biāo)題文字右對(duì)齊或居中對(duì)齊，就需要使用align屬性設(shè)置對(duì)齊方式，其取值如下。

● left：設(shè)置標(biāo)題文字左對(duì)齊（默認(rèn)值）。

● center：設(shè)置標(biāo)題文字居中對(duì)齊。

● right：設(shè)置標(biāo)題文字右對(duì)齊。

圖1-11 設(shè)置標(biāo)題標(biāo)記

注意：

（1）一個(gè)頁面中只能使用一個(gè)<h1>標(biāo)記，常常被用在網(wǎng)站的Logo部分。

（2）由于h元素?fù)碛写_切的語義，請(qǐng)慎重選擇恰當(dāng)?shù)臉?biāo)記來構(gòu)建文檔結(jié)構(gòu)。禁止僅僅使用h標(biāo)記設(shè)置文字加粗或更改文字的大小。

2．段落標(biāo)記

在網(wǎng)頁中要把文字有條理地顯示出來，離不開段落標(biāo)記，就如同我們平常寫文章一樣，整個(gè)網(wǎng)頁也可以分為若干個(gè)段落，而段落的標(biāo)記就是<p>。默認(rèn)情況下，文本在段落中會(huì)根據(jù)瀏覽器窗口的大小自動(dòng)換行。<p>是HTML文檔中最常見的標(biāo)記，其基本語法格式為：

    <p align="對(duì)齊方式">段落文本</p>

該語法中align屬性為<p>標(biāo)記的可選屬性，和標(biāo)題標(biāo)記<h1>～<h6>一樣，同樣可以使用align屬性設(shè)置段落文本的對(duì)齊方式。

下面通過一個(gè)案例來演示段落標(biāo)記<p>的用法和其對(duì)齊方式，如例1-8所示。

例1-8 example08.html

    1   <! doctype html>
    2   <html>
    3   <head>
    4   <meta charset="utf-8">
    5   <title>段落標(biāo)記的用法和對(duì)齊方式</title>
    6   </head>
    7   <body>
    8   <p>“IT問答精靈”為計(jì)算機(jī)愛好者提供Java、.NET、PHP、C/C++、網(wǎng)頁設(shè)計(jì)、平面
  設(shè)計(jì)、UI設(shè)計(jì)、iOS、Android方面的技術(shù)問題互助問答，由傳智播客專業(yè)IT講師在線答疑，致
  力做最專業(yè)的IT學(xué)習(xí)互助平臺(tái)。</p>
    9   <p align="left">Java學(xué)院</p>
    10  <p align="center">網(wǎng)頁平面設(shè)計(jì)學(xué)院</p>
    11  <p align="right">PHP學(xué)院</p>
    12  </body>
    13  </html>

在例1-8中第一個(gè)<p>標(biāo)記為段落標(biāo)記的默認(rèn)對(duì)齊方式，第二、三、四個(gè)<p>標(biāo)記分別使用align="left"、align="center"和align="right"設(shè)置了段落左對(duì)齊、居中對(duì)齊和右對(duì)齊。

運(yùn)行例1-8，效果如圖1-12所示。

圖1-12 段落效果

從圖1-12容易看出，通過使用<p>標(biāo)記，每個(gè)段落都會(huì)獨(dú)占一行，并且段落之間拉開了一定的間隔距離。

3．水平線標(biāo)記<hr />

在網(wǎng)頁中常常看到一些水平線將段落與段落之間隔開，使得文檔結(jié)構(gòu)清晰，層次分明。這些水平線可以通過插入圖片實(shí)現(xiàn)，也可以簡(jiǎn)單地通過標(biāo)記來完成，<hr />就是創(chuàng)建橫跨網(wǎng)頁水平線的標(biāo)記。其基本語法格式為：

    <hr屬性="屬性值" />

<hr />是單標(biāo)記，在網(wǎng)頁中輸入一個(gè)<hr />，就添加了一條默認(rèn)樣式的水平線，<hr />標(biāo)記幾個(gè)常用的屬性如表1-3所示。

表1-3 <hr />標(biāo)記的常用屬性

下面通過使用水平線分割段落文本來演示<hr />標(biāo)記的用法和屬性，如例1-9所示。

例1-9 example09.html

    1   <! doctype html>
    2   <html>
    3   <head>
    4   <meta charset="utf-8">
    5   <title>水平線標(biāo)記的用法和屬性</title>
    6   </head>
    7   <body>
    8   <p>傳智播客專業(yè)于Java、.NET、PHP、C/C++、網(wǎng)頁設(shè)計(jì)、平面設(shè)計(jì)、UI設(shè)計(jì)。從菜
  鳥到職場(chǎng)達(dá)人的轉(zhuǎn)變就在這里，你還等什么？</p>
    9   <hr/>
    10  <p align="left">Java學(xué)院</p>
    11  <hr color="red"align="left"size="5"width="600"/>
    12  <p align="center">網(wǎng)頁平面設(shè)計(jì)學(xué)院</p>
    13  <hr color="#0066FF"align="right"size="2"width="50%"/>
    14  <p align="right">PHP學(xué)院</p>
    15  </body>
    16  </html>

在例1-9中，第一個(gè)<hr />標(biāo)記為水平線的默認(rèn)樣式，第二、三個(gè)<hr />標(biāo)記分別設(shè)置了不同的顏色、對(duì)齊方式、粗細(xì)和寬度值。

運(yùn)行例1-9，效果如圖1-13所示。

圖1-13 水平線的樣式

注意：

在實(shí)際工作中，不贊成使用<hr />的所有外觀屬性，可通過CSS樣式進(jìn)行設(shè)置。

4．換行標(biāo)記<br />

在HTML中，一個(gè)段落中的文字會(huì)從左到右依次排列，直到瀏覽器窗口的右端，然后自動(dòng)換行。如果希望某段文本強(qiáng)制換行顯示，就需要使用換行標(biāo)記<br />，這時(shí)如果還像在Word中直接敲回車鍵換行就不起作用了，如例1-10所示。

例1-10 example10.html

    1   <! doctype html>
    2   <html>
    3   <head>
    4   <meta charset="utf-8">
    5   <title>使用br標(biāo)記換行</title>
    6   </head>
    7   <body>
    8   <p>使用HTML制作網(wǎng)頁時(shí)通過br標(biāo)記<br/>可以實(shí)現(xiàn)換行效果</p>
    9   <p>如果像在Word中一樣
    10  敲回車換行就不起作用了</p>
    11  </body>
    12  </html>

在例1-10中，分別使用換行標(biāo)記<br />和回車鍵兩種方式進(jìn)行換行。

運(yùn)行例1-10，效果如圖1-14所示。

圖1-14 換行標(biāo)記的使用

從圖1-14容易看出，使用回車鍵換行的段落在瀏覽器實(shí)際顯示效果中并沒有換行，只是多出了一個(gè)字符的空白，而使用換行標(biāo)記<br />的段落卻實(shí)現(xiàn)了強(qiáng)制換行的效果。

注意：

<br />標(biāo)記雖然可以實(shí)現(xiàn)換行的效果，但并不能取代結(jié)構(gòu)標(biāo)記<h>、<p>等。

1.3.2 文本格式化標(biāo)記

在網(wǎng)頁中，有時(shí)需要為文字設(shè)置粗體、斜體或下劃線效果，為此HTML準(zhǔn)備了專門的文本格式化標(biāo)記，使文字以特殊的方式顯示，常用的文本格式化標(biāo)記如表1-4所示。

表1-4 常用文本格式化標(biāo)記

下面通過一個(gè)案例來演示其中某些標(biāo)記的效果，如例1-11所示。

例1-11 example11.html

    1   <! doctype html>
    2   <html>
    3   <head>
    4   <meta charset="utf-8">
    5   <title>文本格式化標(biāo)記的使用</title>
    6   </head>
    7   <body>
    8   <p>我是正常顯示的文本</p>
    9   <p><b>我是使用b標(biāo)記定義的加粗文本</b></p>
    10  <p><strong>我是使用strong標(biāo)記定義的強(qiáng)調(diào)文本</strong></p>
    11  <p><i>我是使用i標(biāo)記定義的傾斜文本</i></p>
    12  <p><em>我是使用em標(biāo)記定義的強(qiáng)調(diào)文本</em></p>
    13  <p><del>我是使用del標(biāo)記定義的刪除線文本</del></p>
    14  <p><ins>我是使用del標(biāo)記定義的下劃線文本</ins></p>
    15  </body>
    16  </html>

在例1-11中，為段落文本分別應(yīng)用不同的文本格式化標(biāo)記，從而使文字產(chǎn)生特殊的顯示效果。

運(yùn)行例1-11，效果如圖1-15所示。

圖1-15 使用文本格式化標(biāo)記

注意：

以上文本格式化標(biāo)記均可使用<span>標(biāo)記配合CSS樣式替代，關(guān)于<span>標(biāo)記將在第6章具體講解。

1.3.3 特殊字符標(biāo)記

瀏覽網(wǎng)頁時(shí)常常會(huì)看到一些包含特殊字符的文本，如數(shù)學(xué)公式、版權(quán)信息等。那么如何在網(wǎng)頁上顯示這些包含特殊字符的文本呢？其實(shí)HTML早想到了這一點(diǎn)，并為這些特殊字符準(zhǔn)備了專門的替代代碼，如表1-5所示。

表1-5 常用特殊字符的表示

官术网_书友最值得收藏!

HTML5+CSS3網(wǎng)站設(shè)計(jì)基礎(chǔ)教程

1.3 文本控制標(biāo)記

1.3.1 標(biāo)題和段落標(biāo)記

1.3.2 文本格式化標(biāo)記

1.3.3 特殊字符標(biāo)記