學習筆記 第四章 設計網頁文本，學習筆記第四章

學習筆記 第四章 設計網頁文本，學習筆記第四章

學習重點：

1、熟悉HTML4定義的格式化文字標籤；

2、掌握HTML5新增的文字標籤；

3、正確選用標籤設計網頁文本資訊。

 

4.1 使用文字標籤4.1.1 標題文本

<h1>~<h6>用於定義標題。

<h1>定義最大的標題，表示最重要的資訊；<h6>定義最小的標題，表示最次要的資訊。

<h1>只用一次，<h2>作副標題時只用一次。

4.1.2 段落文本

<p>標籤用於定義段落文本，文本前後會建立一定距離的空白。

4.1.3 引用文本

<q>標籤定義短的引用，引用內容周圍會添加引號；<blockquote>標籤定義區塊引述，包含的文本會從常規文本中分離出來，左、右側縮排顯示。

一段文本不可以直接放在<blockquote>中，應該包含在一個塊元素中。

<q>、<blockquote>均包含一個cite屬性，定義引用的出處。<cite>標籤還有一個功能：從文檔中自動摘錄參考書目。

4.1.4 強調文本

<em>用於強調文本，包含的文字顯示為斜體；<strong>強調程度更強，包含的文字以粗體顯示。

4.1.5 格式文本

<b>定義粗體文本，與<strong>的預設效果類似。

<i>定義斜體文本，與<em>的預設效果類似。

<big>定義大號字型，可以嵌套使用，直至上限7號文本。

<small>定義小號字型。

<sup>定義上標文字。

<sub>定義下標文字。

4.1.6 輸出文本

<code> 表示代碼字型，即顯示原始碼。

<pre> 表示預定義格式的原始碼，保留原始碼中的空格。

<tt> 印表機字型。

<kbd> 鍵盤字型。

<dfn> 定義的術語。

<var> 變數字型。

<samp> 代碼範例。

4.1.7 縮寫文本

<abbr> 定義簡稱或縮寫。

<acronym> 定義首字母縮寫。（HTML5不支援）

4.1.8 插入和刪除文本

<ins> 定義插入到文檔中的文本。

<del> 定義文檔中已經被刪除的文本。

4.1.9 文本方向

<bdo> 可以改變文字資料流的方向，包含屬性：dir，取值有ltr（從左至右）和rtl（從右至左）。

例：<bdo dir="rtl">床前明月光，疑似地上霜。<bdo>

4.2 HTML5新增文字標籤4.2.1 標記文本

<mark>定義帶有記號的文本，表示頁面中需要反白或高亮顯示的資訊。

4.2.2 進度資訊

<progress>標識任務的進度。可以是不確定的，表示進度進行中；也可以用0到某個數字（如100）之間的數字來表示進度完成情況。

progress元素包含兩個屬性：max，value，表示當前完成情況。

例：<p>百分百進度：<progress id="progress" max="100"><span>0</span>%</progress></p>

4.2.3 刻度資訊

<meter>定義已知範圍或分數值內的標量、進度。如磁碟用量、查詢結果的相關性等。

meter元素包含7個屬性：

• value 在元素中特別標識出來的實際值，預設為0。
• min 設定規定範圍時，允許使用的最小值，預設為0。
• max 設定規定範圍時，允許使用的最大值，預設為1。
• low 設定範圍的最大值，如果low小於min，則把min的值視為low的值。
• high 設定範圍的上限值，如果大於max，則把max的值視為high的值。
• optimum 設定最佳值。
• form 設定meter元素所屬的一個或多個表單。

例：<meter value="3" min="0" max="10">十分之三</meter>

4.2.4 時間資訊

<time>定義西曆的時間（24小時制）或日期，時間和時區位移可選。

樣本1：<time datetime="2017-11-17T20:00+9:00">我的生日晚上8點的美國時間</time>

<time>元素有兩個屬性：

datetime 定義日期和時間；

pubdate 定義time元素中的日期和時間時文檔的發布日期。

4.2.5 聯絡文本

<address>定義文檔或文章的作者、擁有者的聯絡資訊。包含的文本通常為斜體。

4.2.6 隔離文本

<bdi>允許設定一段文本，使其脫離父元素的文本方向設定。

4.2.7 換行斷點

<wbr>定義在文本中的何處添加分行符號。

樣本：<p>本站舊地址為：https:<wbr>//<wbr>www.old_site.com/，新地址為：https:<wbr>//<wbr>www.new_site.com/。<p>

4.2.8 文本注釋

<ruby>定義中文注音或字元。<ruby>需要與<rt>或<rp>一同使用。

• <rt>定義字元的解釋或發音；
• <rp>定義當瀏覽器不支援ruby元素的顯示內容。

樣本：<ruby>

           少<rt>shao</rt>壯<rt>zhuang</rt>不<rt>bu</rt>努<rt>nu</rt>力<rt>li</rt>

           </ruby>