Html 常用文字格式登入

Html 常用文字格式

HTML定義了一些文字格式的標籤,例如利用這些標籤,可以將字體變成粗體或斜體。

以下是一些常用的文字格式標籤

    <b>#    定義粗體文字。     <big>#    定義大字。     <em>#    定義重文字。     <i>#    定義斜體字。
#          說明
###
    <small>#    定義小號字。
    <strong>#    定義加重語氣。
    <sub>#    定義下標字。
    <sup>#    定義上標。
    <ins>#    定義插入字。
    <del>定義刪除字。


「電腦輸出」標籤

    <code>##    <code>#   定義電腦程式碼。
     標籤     說明
    <code>
    <code>


    <kbd>

#   訂鍵盤碼。     <samp>#   訂電腦程式碼樣本。    訂打字機程式碼。
#    <tt>
######    <var>#######   定義變數。 ############    <pre>#######   訂預格式文字。 ############

在下面的章節會特別介紹電腦程式碼元素



實例

下面的實例用了上面的一些標籤,你可以比較一下HTML的顯示結果看一下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<body>
<p><b>粗体用b表示。</b></p>
<p><i>斜体用i表示。</i></p>
<p><del>芙蓉姐姐</del>这个词当中划线表示删除。</p>
<p><ins>想唱就唱</ins>这个词下划线插入。</p>
<p>X<sub>2</sub>其中的2是下标</p>
<p>X<sup>2</sup>其中的2是上标</p>
<p><blockquote>好好学习,天天向上。这句话缩进表示引用</blockquote></p>
<pre>
这是
预设(preformatted)文本.
在pre这个标签里的文本      保留
空格和
分行。
</pre>
<code>call getOrders</code>
<p>用code显示计算机代码,code里显示的字符是等宽字符。</p>
</body>
</html>

程式碼運行結果:

1.png



     標籤     說明    <abbr>   定義縮寫。 #   定義縮寫。
引用、引用和術語定義
#    <abbr>
    <acronym>
######    <address>#######   定義位址。 ############    <bdo>#######   定義文字方向。 ############
    <blockquote>#   定義長的引用。
    <q>#   定義短的引用語。
    <cite>#   定義引用、引用。
    <dfn>#   定義定義項目。

實例

HTML <q> 用於短的引用

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>php.cn</title>
 </head>
 <body>
 
 <p>浏览器通常会在 q 元素周围包围引号。</p>
 
 <p>人类的目标是 <q>构建人与自然和谐相处的世界。</q></p>
 
 </body>
 </html>


程式運行結果:

7.png


實例

用於長引用的HTML < blockquote>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<body>
<p>浏览器通常会对 blockquote 元素进行缩进处理。</p>
<blockquote cite=" ">
    五十年来,WWF 一直致力于保护自然界的未来。
 WWF 工作于 100 个国家,并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>
</body>
</html>

程式運行結果:

4.png


實例


##HTML <abbr> 元素定義縮寫或縮寫。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<body>
<p><abbr title="The People's Republic of China">PRC</abbr> 成立于 1949 年。</p>
<p>对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。</p>
</body>
</html>

程式運行結果:

PRC成立於 1949 年。

9.png對縮寫進行標記能夠為瀏覽器、翻譯系統以及搜尋引擎提供有用的資訊。




實例

#HTML <bdo> 元素定義雙向重寫(bi-directional override) 。 如果您的瀏覽器支援bdo,則文字將從右向左進行書寫(rtl):

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>php.cn</title>
 </head>
 <body>
 
 <p>
     如果您的浏览器支持 bdo,则文本将从右向左进行书写 (rtl):
 </p>
 
 <bdo dir="rtl">
     This line will be written from right to left
 </bdo>
 
 </body>
 </html>

程式運行結果:


這些標籤用法都一樣,感興趣的可以試試



#######如何看HTML的原始碼################在瀏覽器看到的HTML網頁,就是瀏覽器解釋HTML原始碼後產生的結果。 ######要查看這個HTML的原始碼,有兩種方法。一是點選滑鼠右鍵,點選View Source(檢視來源檔案)指令;二是選擇瀏覽器選單View(檢視)中的Source(來源檔案)指令。 ######利用View Source得到網頁的原始碼,你可以由此借鏡別人寫得好的地方。不過在你對HTML知識尚少的情況下,看別人複雜的HTML原始碼,只會讓你頭暈。建議你還是再等等,先掌握一些基礎再說。 #####################下一節
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <p><b>粗体用b表示。</b></p> <p><i>斜体用i表示。</i></p> <p><del>芙蓉姐姐</del>这个词当中划线表示删除。</p> <p><ins>想唱就唱</ins>这个词下划线插入。</p> <p>X<sub>2</sub>其中的2是下标</p> <p>X<sup>2</sup>其中的2是上标</p> <p><blockquote>好好学习,天天向上。这句话缩进表示引用</blockquote></p> <pre> 这是 预设(preformatted)文本. 在pre这个标签里的文本 保留 空格和 分行。 </pre> <code>call getOrders</code> <p>用code显示计算机代码,code里显示的字符是等宽字符。</p> </body> </html>
章節課件