HTML BASIC
HTML Introduction
HTML Getting Started
HTML Elements
HTML Attributes
HTML Headings
HTML Paragraphs
HTML Links
HTML Text Formatting
HTML Styles
HTML Images
HTML Tables
HTML Lists
HTML Forms
HTML Iframes
HTML ADVANCED
HTML Doctypes
HTML Layout
HTML Head
HTML Meta
HTML Scripts
HTML Entities
HTML URL
HTML URL Encode
HTML Validation
HTML5 FEATURES
HTML5 New Input Types
HTML5 Canvas
HTML5 SVG
HTML5 Audio
HTML5 Video
HTML5 Web Storage
HTML5 Application Cache
HTML5 Web Workers
HTML5 SSE
HTML5 Geolocation
HTML5 Drag & Drop
HTML Text Formatting - Html5 基础教程 - IT书包
网站首页
HTML Text Formatting
### 使用HTML格式化文本 HTML提供了多个标签,你可以使用这些标签让网页上的某些文本以不同于普通文本的方式显示。例如,你可以使用`<b>`标签使文本加粗,使用`<i>`标签使文本倾斜,使用`<mark>`标签突出显示文本,使用`<code>`标签显示一段计算机代码,使用`<ins>`和`<del>`标签标记编辑插入和删除的内容,等等。 以下示例展示了最常用的格式化标签的实际应用。现在,让我们来尝试一下,以了解这些标签的基本工作原理: ```html <p>This is <b>bold text</b>.</p> <p>This is <strong>strongly important text</strong>.</p> <p>This is <i>italic text</i>.</p> <p>This is <em>emphasized text</em>.</p> <p>This is <mark>highlighted text</mark>.</p> <p>This is <code>computer code</code>.</p> <p>This is <small>smaller text</small>.</p> <p>This is <sub>subscript</sub> and <sup>superscript</sup> text.</p> <p>This is <del>deleted text</del>.</p> <p>This is <ins>inserted text</ins>.</p> ``` 默认情况下,`<strong>`标签在浏览器中通常呈现为`<b>`,而`<em>`标签则呈现为`<i>`。然而,这两个标签的含义有所不同。 ### Difference between <strong> and <b> tag Both `<strong>` and `<b>` tags render the enclosed text in a bold typeface by default, but the `<strong>` tag indicates that its contents have strong importance, whereas the `<b>` tag is simply used to draw the reader's attention without conveying any special importance. ```html <p><strong>WARNING!</strong> Please proceed with caution.</p> <p>The concert will be held at <b>Hyde Park</b> in London.</p> ``` ### Difference between <em> and <i> tags Similarly, both `<em>` and `<i>` tags render the enclosed text in italic type by default, but the `<em>` tag indicates that its contents have stressed emphasis compared to surrounding text, whereas the `<i>` tag is used for marking up text that is set off from the normal text for readability reasons, such as a technical term, an idiomatic phrase from another language, a thought, etc. ```html <p>Cats are <em>cute</em> animals.</p> <p>The <i>Royal Cruise</i> sailed last night.</p> ``` > Note: Use the `<em>` and `<strong>` tags when the content of your page requires that certain words or phrases should have strong emphasis or importance. Also, in HTML5 the `<b>` and `<i>` tags have been redefined, earlier they don't have semantic meaning. ### Formatting Quotations You can easily format the quotation blocks from other sources with the HTML `<blockquote>` tag. Blockquotes are generally displayed with indented left and right margins, along with a little extra space added above and below. Let's try an example to see how it works: ```html <blockquote> <p>Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning.</p> <cite>— Albert Einstein</cite> </blockquote> ``` > Tip: The cite tag is used to describe a reference to a creative work. It must include the title of that work or the name of the author (people or organization) or an URL reference. For short inline quotations, you can use the HTML `<q>` tag. Most browsers display inline quotes by surrounding the text in quotation marks. Here's an example: ```html <p>According to the World Health Organization (WHO): <q>Health is a state of complete physical, mental, and social well-being.</q></p> ``` ### Showing Abbreviations An abbreviation is a shortened form of a word, phrase, or name. You can use the `<abbr>` tag to denote an abbreviation. The title attribute is used inside this tag to provide the full expansion of the abbreviation, which is displayed by the browsers as a tooltip when the mouse cursor is hovered over the element. Let's try out an example: ```html <p>The <abbr title="World Wide Web Consortium">W3C</abbr> is the main international standards organization for the <abbr title="World Wide Web">WWW or W3</abbr>. It was was founded by Tim Berners-Lee.</p> ``` ### Marking Contact Addresses Web pages often include street or postal addresses. HTML provides a special tag `<address>` to represent contact information (physical and/or digital) for a person, people or organization. This tag should ideally used to display contact information related to the document itself, such as article's author. Most browsers display an address block in italic. Here's an example: ```html <address> Mozilla Foundation<br> 331 E. Evelyn Avenue<br> Mountain View, CA 94041, USA </address> ``` Please check out the HTML reference section for a complete list of HTML formatting tags.
上一篇:
HTML Links
下一篇:
HTML Styles