HTML內聯元素

小火柴的藍色理想發表於2015-12-30
HTML

前面的話

　　用於標記段落裡的文字和其他內容組的元素種類很多，本文將這些文字級元素進行簡單分類，便於整理和記憶

 

通用容器

　　<span>元素是短語內容的通用行內容器，並沒有任何特殊語義。可以使用它來編組元素以達到某種樣式意圖(通過使用類或者Id屬性)，或者這些元素有著共同的屬性，比如lang。應該在沒有其他合適的語義元素時才使用它。<span>與<div>元素很相似，但<div>是一個塊元素而<span>則是行內元素

<p>Some <span>text</span></p>

 

強調重要

　　雖然瀏覽器通常用斜體和粗體來顯示em和strong，但這些元素不應用作加粗和斜體。這兩個元素分別用來提升包含內容的強調程度和重要性

<em> 　　 　  表示強調，<em>元素是可以巢狀的，巢狀層次越深，則其包含的內容被認定為越需要著重閱讀

<strong> 　　 表示重要

<p>I am <em>very</em> worried!</p>
<strong>warning</strong>

 

文字間隔

　　i和b元素歷來是用來展示粗體和斜體字型的，但在HTML5中，它們有了新的語義

<i>

　　[1]表示不同情緒或聲音的文字，如內心對白

<p>Simon smirked,"Yes,I'm happy to take the garbage out." <i>Ugh,I <em>really</em> don't want to !</i> he thought as he picked up the garbage bag.</p>

　　[2]表示外來語、分類學名和技術術語等

<i lang="fr">Oh la la!</i>

 

<b>

　　[1]用於分隔文字

<p>After bringing <b>water</b> to a boil, add <b>potatoes</b> and <b>carrots</b></p>

　　[2]用於文章或故事的引言

<p><b class="lede">Meteorologists predict more sunshine and scorching temperatures for the upcoming week, prompting area farmers to install irrigation systems.</b></p>

 

不精確文字

<s> 　　 在HTML5中重新定義為有錯的、過時的、不被建議使用的文字，常用於表示價格變動等

<p>價格<s>￥1298</s>￥998！</p>
<p><s>37度</s> <strong>41度</strong></p>

 

高亮顯示

<mark>　　 表示高亮或用於引用而標記的文字

<p><mark>We're all hoping it rains soon</mark>, some farmers have installed irrigation systems, at <em>considerable</em> expense</p>

 

次要評論

<small> 　　 表示旁註，可用於免責宣告、使用條款和版權資訊等需要小字型的場景

<small>圖片僅供參考，請以實物為準</small>
<small>Chris Elhorn | The city Press</small>

 

術語處理

<dfn> 　　用來定義術語

<p>The term <dfn>organic food</dfn> refers to food produced without synthetic chemicals</p>

 

<abbr>　　 縮寫詞，可以配合<dfn>定義術語

<p>The <dfn><abbr title="Garage Door Operner">GDO</abbr></dfn> id a device allows off-world teams to open the iris.</p>

 

引用

<cite>　　 表示作品標題的引用，可以是書影音畫等

<p>我最喜歡的電影是<cite>千與千尋</cite></p>

 

<q>　　 表示短引用，常用於引用別人說的話，用引號可以表達等價語義

<p>The judge said <q>You can drink water form the fish tank</q> but advised against it.</p>

 

換行

<br> 　　換行

　　[注意]<br>標籤是文字級語義元素，可以設定行高和字型大小，但設定寬高無效

<p>
    <b>The City Press</b><br />
    123 General Street <br />
    Springfield, OH 45501
</p>

　

<wbr>　　 需要時指定單詞可以換行的位置

<i>Irrigation<wbr /> Direct</i>

 

上標下標

　　這兩個標籤在數學等式、科學符號和化學公式中非常有用

<sup>　　 表示上標

<p>
    a<sup>2</sup>
    +
    b<sup>2</sup>
    =
    c<sup>2</sup>
</p>

 

<sub>　　 表示下標

<p>
    H<sub>2</sub>
    SO<sub>4</sub>
</p>

 

文字刪改

　　如果要表示文件的增刪改記錄，則應該使用ins和del標籤

<ins>　　 文件中插入的內容

<del> 　　文件中刪除的內容

　　[注意]<ins>和<del>可以巢狀任何元素

　　<屬性>

　　[1]datetime:用於標明編輯的日期和可選的時間

　　[2]cite:用於指定說明編輯的文件網址

<p>一打有 <del datetime="2015-12-30T00:00Z" cite="edit.html">二十</del> <ins>十二</ins> 件。</p>

 

特定時間

<time> 　　表示日期或時間

　　<屬性>

　　[1]datatime表示確切的時間，遵循格式YYYY-MM-DDThh:mm:ssTZD，表示年-月-天-分割符T-時-分-秒-時區

　　[2]pubdate表示<time>元素中的日期或時間是文件的釋出日期

<p>我們在每天早上 <time>9:00</time> 開始營業。</p>
<p>我在<time datetime="2008-02-14">情人節</time>有個約會。</p>
<small>Posted <time datetime="2015-12-30T00:00:00UTC+08:00"></time></small>

 

注音標識

　　ruby標籤定義注音標識，多用於CJK文字，CJK是指中日韓統一表意文字(Chinese、Japanese、Korean)

<ruby> 　   　表示ruby標記

<rt> 　　　 　表示ruby標記文字

<rp> 　　　　表示ruby標記括號

<ruby>
 漢 <rt> ㄏㄢˋ </rt>
</ruby>
<ruby>
    漢
    <rp>(</rp>
    <rt>hàn</rt>
    <rp>)</rp>
    語
    <rp>(</rp>
    <rt>yǔ</rt>
    <rp>)</rp>    
</ruby>

 

文字方向

<bdi>　　 忽略周圍文字方向的文字
<bdo>　　 覆蓋兩種方向的設定，允許顯式設定方向，並覆蓋所有其他當前方向

<p>When rendered by a browser, <bdo dir="rtl">these words</bdo> will appear as 'sdroweseht'</p>

 

程式碼

<code> 　　　 表示計算機程式碼
<kbd> 　　　  定義鍵盤碼
<samp> 　　   定義計算機例子程式碼
<tt> 　　　　  定義打字機程式碼
<var>　　　　 定義變數

<p>
    <code>Computer code</code>
    <br />
    <kbd>Keyboard input</kbd>
    <br />
    <tt>Teletype text</tt>
    <br />
    <samp>Sample text</samp>
    <br />
    <var>Computer variable</var>
    <br />
</p>

 

例子演示

　　 <演示框>點選下列相應標籤名可進行演示

相關文章