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

2.1 基本塊級標簽

基本塊級標簽包括標題標簽、段落標簽和水平線標簽。

2.1.1 標題標簽<h#>…</h#>

在頁面中,標題是一段文字內容的核心,所以總是用加強的效果來表示。網頁中的信息可以分為主要點、次要點,可以通過設置不同大小的標題,增加文章的條理性。標題文字標簽的格式為:

“#”用來指定標題文字的大小,#取1~6之間的值,取1時文字最大,取6時文字最小。

屬性align用來設置標題在頁面中的對齊方式,包括:left(左對齊)、center(居中)或right(右對齊),默認為left。

【演練2-1】列出HTML中的各級標題,本例文件2-1.html在瀏覽器中顯示的效果如圖2-1所示。代碼如下:

圖2-1 各級標題

2.1.2 段落標簽<p>…</p>

段落標簽放在段落的頭部和尾部,用于定義一個段落。<p>…</p>標簽不但能使后面的文字換到下一行,還可以使兩段之間多加一空行,相當于<br/><br/>標簽。段落標簽的格式為:

其中,屬性align用來設置段落文字在網頁上的對齊方式:left(左對齊)、center(居中)和right(右對齊),默認為left。格式中的“|”表示“或者”,即多項選其一。

【演練2-2】列出包含<p>標簽的多種屬性,本例文件2-2.html在瀏覽器中顯示的效果如圖2-2所示。

圖2-2 <p>標簽示例

代碼如下:

【說明】在HTML中,所有<p>標簽的呈現屬性可以使用,但不推薦使用,要想更靈活地控制并美化外觀,需要通過CSS去實現。

2.1.3 水平線標簽<hr/>

在頁面中插入一條水平標尺線(horizontal rules),可以將不同功能的文字分隔開,看起來整齊、明了。當瀏覽器解釋到HTML文檔中的<hr />標簽時,會在此處換行,并加入一條水平線段。線段的樣式由標簽的參數決定。水平線標簽的格式為:

其中,屬性size設定線條粗細,以像素為單位,默認值為2。

屬性width設定線段長度,可以是絕對值(以像素為單位)或相對值(相對于當前窗口的百分比)。所謂絕對值,是指線段的長度是固定的,不隨窗口尺寸的改變而改變。所謂相對值,是指線段的長度相對于窗口的寬度而定,窗口的寬度改變時,線段的長度也隨之增減,默認值為100%,即始終填滿當前窗口。

屬性color設定線條色彩,默認為黑色。色彩可以用相應的英文名稱或以“#”引導的一個十六進制代碼來表示,見表2-1。

表2-1 色彩代碼表

(續)

【演練2-3】<hr/>標簽的基本用法,本例文件2-3.html在瀏覽器中顯示的效果如圖2-3所示。

圖2-3 <hr/>標簽示例

代碼如下:

【說明】<hr/>標簽強制執行一個簡單的換行,將導致段落的對齊方式重新回到默認值設置(左對齊)。

在HTML中,所有<hr>標簽的呈現屬性可以使用,但不推薦使用,要想更靈活地控制并美化外觀,需要通過CSS去實現。

【演練2-4】使用兩種方法控制水平線的外觀,本例文件2-4.html在瀏覽器中顯示的效果如圖2-4所示。

圖2-4 對比效果

代碼如下:

【說明】代碼中的style="height:2px;border-width:0;color:blue;background-color:blue"表示水平線為高度2px無邊框無陰影的藍色實線,恰好與<hr/>標簽設置的顯示效果一致。

2.1.4 案例——制作夢想櫥柜常見問題解答頁面

【演練2-5】使用基本塊級標簽制作夢想櫥柜常見問題解答頁面,本例文件2-5.html在瀏覽器中顯示的效果如圖2-5所示。

圖2-5 頁面顯示效果

代碼如下:

【說明】在本例中,段落的開頭為了實現首行縮進的效果,在段落標簽<p>后面連續加上4個“&nbsp;”空格符號。

主站蜘蛛池模板: 二连浩特市| 祁连县| 西宁市| 通城县| 探索| 顺义区| 革吉县| 台山市| 静安区| 本溪| 西安市| 南召县| 徐水县| 巴塘县| 孙吴县| 瑞丽市| 彰武县| 寻乌县| 康乐县| 慈溪市| 炎陵县| 昌都县| 东辽县| 永福县| 迭部县| 偏关县| 岗巴县| 呼和浩特市| 儋州市| 太白县| 顺平县| 杭锦后旗| 苏州市| 广德县| 寻乌县| 阜阳市| 新余市| 衡阳市| 开原市| 报价| 祁连县|