HTML 文本標簽


一、標題標簽

   單詞縮寫: head 頭部. 標題

  為了使網頁更具有語義化,我們經常會在頁面中用到標題標簽,HTML提供了6個等級的標題,即<h1>~<h6>,代表六個級別的標題,<h1>代表最大的標題,<h6>代表最小的標題。

  標題標簽語義:  作為標題使用,並且依據重要性遞減。

  注意: h1 標簽因為重要,盡量少用

<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>

  h系列有一個 align屬性,該屬性是標題的對齊方式,默認為 left(左對齊),還有center(居中對齊)和 right(右對齊)。

二、段落標簽

  單詞縮寫: paragraph 段落

  在網頁中要把文字有條理地顯示出來,離不開段落標簽,類似於平常寫文章一樣,整個網頁也可以分為若干個段落。

  Tipsp是一個文本級的標簽,p里面只能放文字、圖片、表單元素。

  段落標簽是HTML文檔中最常見的標簽,默認情況下,文本在一個段落中會根據瀏覽器窗口的大小自動換行。

<p>這是一個段落。。。</p>

三、水平線標簽(單標簽)

  單詞縮寫: horizontal 橫線。

  在網頁中常常看到一些水平線將段落與段落之間隔開,使得文檔結構清晰,層次分明。這些水平線可以通過插入圖片實現,也可以簡單地通過標簽來完成,<hr />就是創建橫跨網頁水平線的標簽。

<hr /> 水平線

四、換行標簽(單標簽)

  單詞縮寫: break 打斷 ,換行

  在HTML中,一個段落中的文字會從左到右依次排列,直到瀏覽器窗口的右端,然后自動換行。如果希望某段文本強制換行顯示,就需要使用換行標簽

<br />

五、引用標簽

  <q> 標簽定義短的引用,瀏覽器經常在引用的內容周圍添加引號;

  <blockquote> 定義塊引用,其包含的文本都會從常規文本中分離出來,左、右兩側會縮進顯示,有時顯示為斜體。

<q>細節決定成敗</q>
<blockquote>
     <p>生命在於折騰啊!</p>
 </blockquote>

  Tips:一段文本不可以直接放在 blockquote 元素中,應包含在一個塊元素中,如 p 元素。

六、文本格式化標簽

  在網頁中,有時需要為文字設置粗體、斜體或下划線效果,這時就需要用到HTML中的文本格式化標簽,使文字以特殊的方式顯示。

  

標簽 顯示效果
<b></b>和<strong></strong> 文字以粗體方式顯示(XHTML推薦使用 strong)
<i></i>和<em></em> 文字以斜體方式顯示(XHTML推薦使用em)
<s></s>和<del></del> 文字以加刪除線方式顯示(XHTML推薦使用del)
<u></u>和<ins></ins> 文字以加下划線方式顯示(XHTML不贊成使用u)
<small></small> 定義小號字體,標簽包含的文本比周圍小一號,下限1號文本
<big></big> 定義大號字體,標簽包含的文字比周圍大一號,上限7號文本
<sub></sub> 定義下標文本,以當前文本流中字符高度一半顯示,但是與文本流中字符字體字號一致
<sup></sup> 定義上標文本,以當前文本流中字符高度一半顯示,但是與文本流中字符字體字號一致

  Tips: b i s u 只有使用 沒有 強調的意思 strong em del ins 語義更強烈

  Tips: <sub>、<sup>標簽,在數學公式、科學符號和化學公式中非常有用。

七、輸出文本

  HTML元素提供了如下輸出信息的標簽:

  

標簽 說明
<code> 表示代碼字體,顯示源代碼
<pre> 表示預定義格式的源代碼,保留源代碼顯示中的空格大小
<tt> 表示打印機字體
<kbd> 表示鍵盤字體
<dfn> 表示定義的術語
<var> 表示變量字體
<samp> 表示代碼范例

八、縮寫文本

  <abbr> 標簽可以定義簡稱或縮寫,通過對縮寫進行標記,能夠為瀏覽器、搜索引擎提供有用的信息。

  <acronym>標簽是定義首字母縮寫。

<abbr titile="Hyper Markup Language">HTML</abbr>
<acronym titile="Hyper Markup Language">HTML</acronym>

  Tips:可以使用 title 屬性,設置在鼠標移動到上顯示完整文本。

九、文本方向

  使用<bdo> 標簽可以改變文本流的方向,包含一個屬性:dir,取值包活 ltr(從左到右) 和 rtl(從右到左)。

<bdo dir="rtl">床前明月光</bdo>

  

  更多的標簽請到這里學習:http://www.w3school.com.cn/tags/index.asp


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM