閱讀(15.8k) 書簽贊(6) 我要糾錯

HTML 格式化

2018-11-24 10:52 更新

HTML格式化

abbr元素

abbr 元素表示縮寫。

當(dāng)使用此元素時，您可以使用 title 屬性來提供縮寫代表的擴展文本。

以下代碼顯示了正在使用的 abbr 元素。

<!DOCTYPE HTML>
<html>
<body>
  The <abbr title="Cascading Style Sheets">CSS</abbr>
  is a style sheet language used for describing the
  look and formatting of a document written in a markup language.
</body>
</html>

address元素

address 元素標(biāo)記文檔或文章元素的聯(lián)系信息。

當(dāng)address元素是article元素的后代時，假定提供該文章的聯(lián)系信息。

當(dāng)address元素是body元素的子代，并且在body和address元素之間沒有article元素時，假設(shè)地址為整個文檔提供聯(lián)系信息。

您不應(yīng)使用此元素標(biāo)記客戶或用戶的地址。

以下代碼顯示了正在使用的地址元素。

...
<body>
<header>
<h1>Things  I like</h1>
<h2>by www.o2fo.com</h2>
<address>
Questions and  comments? <a href="mailto:info@example.com">Email me</a>
</address>
</header>
<article>
<header>
<hgroup>

b元素

b 元素標(biāo)記指示任何額外強調(diào)或重要性的文本跨度。

b 元素的樣式約定是 b {font-weight:bolder;} 。

下面的代碼顯示了正在使用的b元素。

<!DOCTYPE HTML>
<html>
<body>
  I like <b>HTML</b> and <b>CSS</b>.
</body>
</html>

bdi元素

bdi 元素標(biāo)記為了文本方向性而與其他內(nèi)容隔離的文本。

在顯示沒有可用方向性信息的內(nèi)容時，使用此元素。瀏覽器自動確定方向性。

下面的代碼處理沒有 bdi 元素的文本。

<!DOCTYPE HTML>
<html>
<body>
  <p>
    <bdi>abcd</bdi>
  </p>
</body>
</html>

bdo元素

bdo 元素指定一個明確的文本方向其內(nèi)容，覆蓋通常應(yīng)用的自動方向性。

我們必須使用 bdo 元素和 dir 屬性，其具有 rtl (用于從右到左布局)的允許值 ltr (對于從左到右的布局)。

以下代碼使用 bdo 元素。

<!DOCTYPE HTML>
<html>
<body>
  <p>
    This is left-to-right:
    <bdo dir="ltr">This is a test</bdo>
  </p>
  <p>
    This is right-to-left:
    <bdo dir="rtl">This is a test</bdo>
  </p>
</body>
</html>

br元素

您可以使用兩個元素來處理內(nèi)容中的換行符: br 和 wbr 元素。

br 元素引入換行符。樣式約定是將后續(xù)內(nèi)容移動到新行上。

br 元素只能在換行符是內(nèi)容的一部分時使用。

br 元素不應(yīng)用于創(chuàng)建段落或其他內(nèi)容分組。

以下代碼使用 br 元素。

<!DOCTYPE HTML>
<html>
<body>
  I like
  <br /> HTML,
  <br /> CSS,
  <br> Javascript.
</body>
</html>

cite元素

cite 元素表示引用作品的標(biāo)題，這樣的書，文章或電影。它的樣式約定是 cite {font-style:italic; } 。

以下代碼顯示了使用 cite 元素。

<!DOCTYPE HTML>
<html>
<body>
  My favorite is <cite>CSS</cite> by http://en.wikipedia.org.
</body>
</html>

code元素

code 元素標(biāo)記了一段計算機代碼。它的默認樣式是{font-family:monospace;}

下面的代碼顯示了如何使用 code 元素。

<!DOCTYPE HTML>
<html>
<body>
  This is a <code>test</code>.
</body>
</html>

del元素

您可以使用 del 元素標(biāo)記刪除的文本。

del 元素有兩個局部屬性: cite，datetime 。

cite 屬性指定文檔的URL這解釋了為什么文本被刪除，并且 datetime 屬性指定進行修改的時間。

您可以在下面的代碼中看到正在使用的 del 元素。

<!DOCTYPE HTML>
<html>
<body>
  <p><ins>I like <del>HTML</del>.</ins></p>
</body>
</html>

dfn元素

dfn 元素定義一個術(shù)語。它解釋了詞或短語的意義。

如果 dfn 元素有一個 title 屬性，那么 title 屬性的值必須是要定義的項。

您可以看到在下面的代碼中使用的 dfn 元素的示例。

<!DOCTYPE HTML>
<html>
<body>
  <p>
  The <dfn title="Cascading Style Sheets">CSS</dfn>
  is a style sheet language used for describing the
  look and formatting of a document written in a markup language.
  </p>
</body>
</html>

如果 dfn 元素包含 abbr 元素，那么縮寫是要定義的術(shù)語。

如果沒有 title 屬性，并且元素的內(nèi)容是文本，那么文本表示正在定義的術(shù)語。

沒有與此元素相關(guān)聯(lián)的樣式約定。

em元素

em 元素表示具有強調(diào)應(yīng)力的文本跨度。

此元素的樣式約定是使用斜體。

以下代碼顯示了正在使用的 em 元素。

<!DOCTYPE HTML>
<html>
<body>
  <em>I</em> like <b>HTML</b> and <b>CSS</b>.
</body>
</html>

i元素

i 元素表示文本具有與周圍內(nèi)容不同的性質(zhì)，例如，來自其他語言的詞語，技術(shù)或科學(xué)術(shù)語。

i 元素的樣式約定是 i {font-style:italic;} 。

i 元素的樣式約定是與 em 元素相同。

以下代碼顯示了正在使用的 i 元素。

<!DOCTYPE HTML>
<html>
<body>
  <em>I</em> like <b>HTML</b> and <b>CSS</b>. 
  My favorite is <i>Javascript</i>.
</body>
</html>

ins元素

您可以使用 ins 元素標(biāo)記添加的文本。

ins 元素表示插入的內(nèi)容，與局部屬性: cite，datetime 。

cite 屬性指定文檔的URL這解釋了為什么文本被添加，并且 datetime 屬性指定進行修改的時間。

您可以在以下代碼中看到正在使用的 ins 元素。

<!DOCTYPE HTML>
<html>
<body>
  <p>
    <ins>I like <mark>HTML</mark>.</ins>
  </p>
</body>
</html>

kbd元素

kbd 元素表示用戶輸入。

kbd 有以下樣式 {font-family:monospace; } 。

下面的代碼顯示了如何使用kbd元素。

<!DOCTYPE HTML>
<html>
<body>
  This is an <kbd>input</kbd>.
</body>
</html>

mark元素

mark元素是HTML5和表示突出顯示的文本。

以下代碼演示了mark元素。

<!DOCTYPE HTML>
<html>
<body>
  <p>
    I like <mark>CSS</mark>.
  </p>
</body>
</html>

ruby rt rp元素

Ruby字符是放置在字符上方或右側(cè)的符號在諸如中文或日語的標(biāo)志語言中幫助讀者正確地發(fā)音字符。

ruby 元素表示一段文本包含一個ruby。您使用 ruby 元素元素 rt 和 rp 。

rt 元素標(biāo)記ruby符號，而 rp 元素表示注釋周圍的圓括號由不支持ruby注釋的瀏覽器顯示。

rt 元素標(biāo)記ruby符號，而 rp 元素表示注釋周圍的圓括號由不支持ruby注釋的瀏覽器顯示。...

<!DOCTYPE HTML>
<html>
<body>
  <p>I like
  <ruby>
    CSS
    <rp>(</rp>
    <rt>Cascading Style Sheets</rt>
    <rp>)</rp>
  </ruby>

  </p>
</body>
</html>

當(dāng)文檔顯示在支持ruby注釋的瀏覽器中時，將忽略 rp 元素及其內(nèi)容， rt 元素的內(nèi)容顯示為注釋。

s元素

您可以使用 s 元素來標(biāo)記文本不再正確或準(zhǔn)確。

樣式約定是使用通過它繪制的線來顯示文本: s {text-decoration:line-through;} 。

以下代碼顯示了正在使用的 s 元素。

<!DOCTYPE HTML>
<html>
<body>
  HTML is now <s>HTML4</s> HTML5.
</body>
</html>

samp元素

samp 元素表示來自程序或計算機系統(tǒng)的輸出。它有以下默認樣式: {font-family:monospace; } 。

以下代碼顯示如何使用 samp 元素。

<!DOCTYPE HTML>
<html>
<body>
  This is a <samp>sample</samp>.
</body>
</html>

small元素

small元素標(biāo)記精細打印和經(jīng)常用于免責(zé)聲明和澄清。

以下代碼顯示了正在使用的 small 元素。

<!DOCTYPE HTML>
<html>
<body>
  HTML5 is <small>good</small>.
</body>
</html>

strong元素

strong 元素標(biāo)記重要的文本。

strong 元素相同樣式約定作為 b 元素。

以下代碼顯示了正在使用的 strong 元素。

<!DOCTYPE HTML>
<html>
<body>
  <strong>Warning:</strong> HTML5 is good.
</body>
</html>

sub和sup元素

您可以使用 sub 和 sup 元素分別表示下標(biāo)和上標(biāo)。

在某些語言中需要上標(biāo)上標(biāo)和下標(biāo)都用在簡單的數(shù)學(xué)表達式中。

以下代碼顯示了正在使用的 sub 和 sup 元素。

<!DOCTYPE HTML>
<html>
<body>
  The point x<sub>10</sub> is the 10<sup>th</sup> point.
</body>
</html>

time元素

您可以使用 time 元素來表示時間或日期。 time 元素有兩個局部屬性: datetime，pubdate 。

如果存在布爾 pubdate 屬性，那么時間元素假定為的發(fā)布日期整個HTML文檔或最近的article元素。

datetime 屬性指定日期或時間以RFC3339指定的格式，您可以在http://tools.ietf.org/html/rfc3339找到。

以下代碼顯示了正在使用的時間元素。

<!DOCTYPE HTML>
<html>
<body>
  I bought a book at
  <time datetime="15:00">3 o"clock</time>
  on
  <time datetime="2012-12-7">December 7th</time>
  .
</body>
</html>

u元素

u 元素通過添加下劃線標(biāo)記文本。它的樣式約定: u {text-decoration:underline;} 。

u 的樣式約定元素與 a 元素的類似。

以下代碼顯示了正在使用的 u 元素。

<!DOCTYPE HTML>
<html>
<body>
  <u>HTML5</u> is good.
</body>
</html>

var元素

var 元素標(biāo)記編程上下文中的變量。 var 的默認樣式是 {font-style:italic; } 。

下面的代碼顯示了如何使用 var元素。

<!DOCTYPE HTML>
<html>
<body>
  This is a <var>variable</var>.
</body>
</html>

wbr元素

wbr稱為安全斷路。

wbr 元素是HTML5的新特性表示瀏覽器可以合理地插入換行符包裝大于當(dāng)前瀏覽器窗口的內(nèi)容。

它是由瀏覽器決定是否或不是實際使用換行符。 wbr 元素是合適的地方打破內(nèi)容的指南。

以下代碼顯示了使用 wbr 元素。

<!DOCTYPE HTML>
<html>
<body>
  This is a test: Super
  <wbr>
  loooooooooooooooooooooooooong
  <wbr>
  word.
</body>
</html>

以上內(nèi)容是否對您有幫助：

← HTML 超鏈接

HTML 列表 →

寫筆記

我要補充