直接上代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥(niǎo)教程(runoob.com)</title>
</head>
<body>
<b>加粗文本</b><br><br>
<i>斜體文本</i><br><br>
<code>電腦自動(dòng)輸出</code><br><br>
這是 <sub> 下標(biāo)</sub> 和 <sup> 上標(biāo)</sup>
</body>
</html>
HTML 格式化標(biāo)簽
HTML 使用標(biāo)簽
<b>
與<i>
對(duì)輸出的文本進(jìn)行格式, 如:粗體 or 斜體.
這些HTML標(biāo)簽被稱為格式化標(biāo)簽(請(qǐng)查看底部完整標(biāo)簽參考手冊(cè))赋朦。
通常標(biāo)簽
<strong>
替換加粗標(biāo)簽<b>
來(lái)使用,<em>
替換<i>
標(biāo)簽使用。
然而倡勇,這些標(biāo)簽的含義是不同的:
-
<b>
與<i>
定義粗體或斜體文本翁锡。 -
<strong>
或者<em>
意味著你要呈現(xiàn)的文本是重要的酷鸦,所以要突出顯示。現(xiàn)今所有主要瀏覽器都能渲染各種效果的字體于样。不過(guò)挪圾,未來(lái)瀏覽器可能會(huì)支持更好的渲染效果。
實(shí)例
此例演示如何在一個(gè) HTML 文件中對(duì)文本進(jìn)行格式化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥(niǎo)教程(runoob.com)</title>
</head>
<body>
<b>這個(gè)文本是加粗的</b>
<br />
<strong>這個(gè)文本是加粗的</strong>
<br />
<big>這個(gè)文本字體放大</big>
<br />
<em>這個(gè)文本是斜體的</em>
<br />
<i>這個(gè)文本是斜體的</i>
<br />
<small>這個(gè)文本是縮小的</small>
<br />
這個(gè)文本包含
<sub>下標(biāo)</sub>
<br />
這個(gè)文本包含
<sup>上標(biāo)</sup>
</body>
</html>
此例演示如何使用 pre 標(biāo)簽對(duì)空行和空格進(jìn)行控制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥(niǎo)教程(runoob.com)</title>
</head>
<body>
<pre>
此例演示如何使用 pre 標(biāo)簽
對(duì)空行和 空格
進(jìn)行控制
</pre>
</body>
</html>
此例演示不同的"計(jì)算機(jī)輸出"標(biāo)簽的顯示效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥(niǎo)教程(runoob.com)</title>
</head>
<body>
<code>計(jì)算機(jī)輸出</code>
<br />
<kbd>鍵盤(pán)輸入</kbd>
<br />
<tt>打字機(jī)文本</tt>
<br />
<samp>計(jì)算機(jī)代碼樣本</samp>
<br />
<var>計(jì)算機(jī)變量</var>
<br />
<p>
<b>注釋:</b>這些標(biāo)簽常用于顯示計(jì)算機(jī)/編程代碼降淮。
</p>
</body>
</html>
此例演示如何在 HTML 文件中寫(xiě)地址
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥(niǎo)教程(runoob.com)</title>
</head>
<body>
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</body>
</html>
此例演示如何實(shí)現(xiàn)縮寫(xiě)或首字母縮寫(xiě)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥(niǎo)教程(runoob.com)</title>
</head>
<body>
<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>
<p>在某些瀏覽器中超埋,當(dāng)您把鼠標(biāo)移至縮略詞語(yǔ)上時(shí),title 可用于展示表達(dá)的完整版本佳鳖。</p>
<p>僅對(duì)于 IE 5 中的 acronym 元素有效纳本。</p>
<p>對(duì)于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>
</body>
</html>
此例演示如何改變文字的方向
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥(niǎo)教程(runoob.com)</title>
</head>
<body>
<p>該段落文字從左到右顯示腋颠。</p>
<p><bdo dir="rtl">該段落文字從右到左顯示。</bdo></p>
</body>
</html>
此例演示如何實(shí)現(xiàn)長(zhǎng)短不一的引用語(yǔ)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥(niǎo)教程(runoob.com)</title>
</head>
<body>
<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>
</body>
</html>
此例演示如何標(biāo)記刪除文本和插入文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥(niǎo)教程(runoob.com)</title>
</head>
<body>
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
</body>
</html>