HTML 文本格式化 · W3School HTML & CSS 教程

# HTML 文本格式化 **HTML 可定义很多供格式化输出的元素，比如粗体和斜体字。** **下面有很多例子，您可以亲自试试：** ## HTML 文本格式化实例 [文本格式化](/tiy/t.asp?f=html_textformatting) ``` <html> <body> This text is bold This text is strong <big>This text is big</big> This text is emphasized This text is italic This text is small This text contains subscript This text contains superscript </body> </html> ``` [预格式文本](/tiy/t.asp?f=html_preformattedtext) ``` <html> <body> <pre> 这是预格式文本。它保留了空格和换行。 </pre> pre 标签很适合显示计算机代码： <pre> for i = 1 to 10 print i next i </pre> </body> </html> ``` [“计算机输出”标签](/tiy/t.asp?f=html_computeroutput) ``` <html> <body> <code>Computer code</code> <kbd>Keyboard input</kbd> <tt>Teletype text</tt> <samp>Sample text</samp> <var>Computer variable</var> 注释：这些标签常用于显示计算机/编程代码。 </body> </html> ``` [地址](/tiy/t.asp?f=html_address) ``` <!DOCTYPE html> <html> <body> <address> Written by <a href="mailto:webmaster@example.com">Donald Duck</a>. Visit us at: Example.com Box 564, Disneyland USA </address> </body> </html> ``` [缩写和首字母缩写](/tiy/t.asp?f=html_abbracronym) ``` <html> <body> <abbr title="etcetera">etc.</abbr> <acronym title="World Wide Web">WWW</acronym> 在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。 仅对于 IE 5 中的 acronym 元素有效。 对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。 </body> </html> ``` [文字方向](/tiy/t.asp?f=html_bdo) ``` <html> <body> <abbr title="etcetera">etc.</abbr> <acronym title="World Wide Web">WWW</acronym> 在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。 仅对于 IE 5 中的 acronym 元素有效。 对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。 </body> </html> ``` [块引用](/tiy/t.asp?f=html_quotations) ``` <html> <body> 这是长的引用： <blockquote> 这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。 </blockquote> 这是短的引用： <q> 这是短的引用。 </q> 使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。 </body> </html> ``` [删除字效果和插入字效果](/tiy/t.asp?f=html_delins) ``` <html> <body> 一打有 <del>二十</del> <ins>十二</ins> 件。 大多数浏览器会改写为删除文本和下划线文本。 一些老式的浏览器会把删除文本和下划线文本显示为普通文本。 </body> </html> ``` ## 如何查看 HTML 源码您是否有过这样的经历，当你看到一个很棒的站点，你会很想知道开发人员是如何将它实现的？你有没有看过一些网页，并且想知道它是如何做出来的呢？要揭示一个网站的技术秘密，其实很简单。单击浏览器的“查看”菜单，选择“查看源文件”即可。随后你会看到一个弹出的窗口，窗口内就是实际的 HTML 代码。 ## 文本格式化标签 | 标签 | 描述 | | --- | --- | | [``](/tags/tag_font_style.asp) | 定义粗体文本。 | | [`<big>`](/tags/tag_font_style.asp) | 定义大号字。 | | [``](/tags/tag_phrase_elements.asp) | 定义着重文字。 | | [``](/tags/tag_font_style.asp) | 定义斜体字。 | | [``](/tags/tag_font_style.asp) | 定义小号字。 | | [``](/tags/tag_phrase_elements.asp) | 定义加重语气。 | | [``](/tags/tag_sup.asp) | 定义下标字。 | | [``](/tags/tag_sup.asp) | 定义上标字。 | | [`<ins>`](/tags/tag_ins.asp) | 定义插入字。 | | [`<del>`](/tags/tag_del.asp) | 定义删除字。 | | [`<s>`](/tags/tag_strike.asp) | _不赞成使用。_使用 `<del>` 代替。 | | [`<strike>`](/tags/tag_strike.asp) | _不赞成使用。_使用 `<del>` 代替。 | | [``](/tags/tag_u.asp) | _不赞成使用。_使用样式（style）代替。 | ## “计算机输出”标签 | 标签 | 描述 | | --- | --- | | [`<code>`](/tags/tag_phrase_elements.asp) | 定义计算机代码。 | | [`<kbd>`](/tags/tag_phrase_elements.asp) | 定义键盘码。 | | [`<samp>`](/tags/tag_phrase_elements.asp) | 定义计算机代码样本。 | | [`<tt>`](/tags/tag_font_style.asp) | 定义打字机代码。 | | [`<var>`](/tags/tag_phrase_elements.asp) | 定义变量。 | | [`<pre>`](/tags/tag_pre.asp) | 定义预格式文本。 | | `<listing>` | _不赞成使用。_使用 `<pre>` 代替。 | | `<plaintext>` | _不赞成使用。_使用 `<pre>` 代替。 | | `<xmp>` | _不赞成使用。_使用 `<pre>` 代替。 | ## 引用、引用和术语定义 | 标签 | 描述 | | --- | --- | | [`<abbr>`](/tags/tag_abbr.asp) | 定义缩写。 | | [`<acronym>`](/tags/tag_acronym.asp) | 定义首字母缩写。 | | [`<address>`](/tags/tag_address.asp) | 定义地址。 | | [`<bdo>`](/tags/tag_bdo.asp) | 定义文字方向。 | | [`<blockquote>`](/tags/tag_blockquote.asp) | 定义长的引用。 | | [`<q>`](/tags/tag_q.asp) | 定义短的引用语。 | | [`<cite>`](/tags/tag_phrase_elements.asp) | 定义引用、引证。 | | [`<dfn>`](/tags/tag_phrase_elements.asp) | 定义一个定义项目。 | ## 延伸阅读： [改变文本的外观和含义](/html/html_style.asp "HTML 教程延伸阅读：改变文本的外观和含义")