html 教程

Appearance

HTML 文本格式化 ​

HTML中存在一些格式化文本的标签，它们可以被直接使用，而不用您再去写格式进行调整。

实例 ​

html
<b>加粗文本</b><br><br>

<i>斜体文本</i><br><br>

<code>电脑自动输出</code><br><br>

这是 <sub> 下标</sub> 和 <sup> 上标</sup>

HTML 格式化标签 ​

HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式，如：粗体 或 斜体

这些HTML标签被称为格式化标签（请查看底部完整标签参考手册）。

常用标签 <strong> 替换加粗标签 <b> 来使用， <em> 替换 <i> 标签使用。 然而，这些标签的含义是不同的： <b> 与 <i> 确定义粗体或斜体文本。 < strong> 或者 <em> 意思着你要现在的文本是重要的，所以要突显出来。 现在所有主要浏览器都能够冲洗各种效果的字体。不过，未来浏览器具可能会支持更好的冲洗效果。

本站实例 ​


此示例如何在一个HTML文件中对文本进行格式化进行说明:

html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ngrok中文教程(ngrok.cn)</title>
	</head>
	<body>
		<b>这个文本是加粗的</b>
		<br />
		<strong>这个文本是加粗的</strong>
		<br />
		<big>这个文本字体放大</big>
		<br />
		<em>这个文本是斜体的</em>
		<br />
		<i>这个文本是斜体的</i>
		<br />
		<small>这个文本是缩小的</small>
		<br />
		这个文本包含
		<sub>下标</sub>
		<br />
		这个文本包含
		<sup>上标</sup>
	</body>
</html>

此示例演示如何使用 pre 标签对空行和空行控制:

html
<!DOCTYPE html>
<html>
	<head> 
		<meta charset="utf-8"> 
		<title>W3Cschool(w3cschool.cn)</title> 
	</head>
	<body>
		<pre>
		此例演示如何使用 pre 标签
		对空行和    空格
		进行控制
		</pre>
	</body>
</html>

此示例显示不同的"计算机输出"标记的显示效果:

html
<!DOCTYPE html> 
<html>
	<head> 
		<meta charset="utf-8"> 
		<title>ngrok教程(ngrok.cn)</title> 
	</head>
	<body>
		<code>计算机输出</code>
		<br />
		<kbd>键盘输入</kbd>
		<br />
		<tt>打字机文本</tt>
		<br />
		<samp>计算机代码样本</samp>
		<br />
		<var>计算机变量</var>
		<br />
		<p>
		<b>注释：</b>这些标签常用于显示计算机/编程代码。
		</p>
	</body>
</html>

此示例如何在 HTML 文件中写入地址:

html
<!DOCTYPE html>
<html>
	<head> 
		<meta charset="utf-8"> 
		<title>ngrok教程(ngrok.cn)</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>

此示例演示如何实际缩写或首字母缩写:

html
<!DOCTYPE html> 
<html>
	<head> 
		<meta charset="utf-8"> 
		<title>ngrok教程(ngrok.cn)</title> 
	</head>
	<body>
		<abbr title="etcetera">etc.</abbr>
		<br />
		<acronym title="World Wide Web">WWW</acronym>
		<p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>
		<p>仅对于 IE 5 中的 acronym 元素有效。</p>
		<p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>

	</body>
</html>

这个例子说明如何改变文字的方向:

html

这个例子说明如何实际长短不一的引用语言。

html
<!DOCTYPE html>
<html>
	<head> 
		<meta charset="utf-8"> 
		<title>ngrok教程(ngrok.cn)</title> 
	</head> 
	<body>

		<p>该段落文字从左到右显示。</p>
		<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>  

	</body>
</html>

此示例演示如何标记删除文本和插入文本:

html
<!DOCTYPE html>
<html>
	<head> 
		<meta charset="utf-8"> 
		<title>ngrok教程(ngrok.cn)</title> 
	</head>
	<body>
		<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
	</body>
</html>

HTML 格式化标签 ​

标签描述
<b>定义粗体文本
<em>定义着重文字
<i>定义斜体字
<small>定义小号字
<strong>定义加重语气
<sub>定义下标字
<sup>定义上标字
<ins>定义插入字
<del>定义删除字

HTML "计算机输出" 标签 ​

标签描述
<code>定义计算机代码
<kbd>定义键盘码
<samp>定义计算机代码样本
<var>定义变化量
<pre>定义预测式文本

HTML 引文, 引用, 及标签指定义 ​

标签描述
<abbr>定义缩小写
<address>定义地址
<bdo>定义文字方向
<blockquote>定义长的引用
<q>定义短的引用语
<cite>定义引用、引证
<dfn>定义一个定义项目。