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

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;”空格符號。

主站蜘蛛池模板: 武陟县| 甘谷县| 秦安县| 朝阳市| 赣榆县| 新安县| 文登市| 瓦房店市| 桃园县| 蒲江县| 衡南县| 驻马店市| 凤凰县| 新津县| 永仁县| 永兴县| 梅河口市| 连云港市| 平谷区| 靖江市| 边坝县| 安庆市| 广河县| 湖州市| 合山市| 青州市| 江达县| 富锦市| 长沙县| 花莲市| 无锡市| 丹寨县| 彩票| 喀喇沁旗| 三明市| 吴堡县| 阿坝| 凌源市| 东乌珠穆沁旗| 万荣县| 金湖县|