HTML_01_TEXT

1. TEXT

<strong>bold</strong> <!-- by defauly, the content showed in bold -->
<b>bold</b>

<i>italics</i>
<em>italics</em>

<del>del</del>
<s>del</s>

<ins>ins</ins>
<u>underscore</u>

<q>quote</q>

<abbr title="abbreviation">abbr</abbr>

<cite>Jane Eyre</cite> <!-- by defauly, the content showed in italics -->

<p>
    <dfn>Black hole</dfn> can be small.<!-- Some broswers show the content in italics, Safari and Chrome do not change its apperance -->
</p>

<address>
    <p>
        address@gmail.com
    </p>
    <p>
		12D, 31 King George St
    </p>
</address>

bold
bold

italics
italics

del
del

ins
underscore

quote

abbr

Jane Eyre

Black hole can be small.

address@gmail.com

12D, 31 King George St

2. <p>

<p>first
    paragraph</p>

<p>second paragraph</p>

first paragraph

second paragraph

3. <div>

布局大盒子标签

<div></div>

4. <span>

行级小盒子标签

<span></span>

5. superscript and subscript

superscript^sup666

subscript_sub777

<p>
    superscript<sup>sup666</sup>
</p>
<p>
    subscript<sub>sub777</sub>
</p>

6. white space空格

aaa aaa

<p>
    aaa   aaa <!-- When the browser comes across many spaces, it only displays one space. -->
</p>

7. horizontal rule

<p>
    paragraph 1
</p>
<hr />
<p>
    paragraph 2
</p>

paragraph 1

---

paragraph 2

8. Ordered List

<ol>
    <li>tomato</li>
    <li>potato</li>
    <li>cucumber</li>
    <li>eggs</li>
</ol>

1. tomato
2. potato
3. cucumber
4. eggs

9. Unordered List

<ul>
    <li>tomato</li>
    <li>potato</li>
    <li>cucumber</li>
    <li>eggs</li>
</ul>

• tomato
• potato
• cucumber
• eggs

10. Definition

<dl>
    <dt>the term being defined</dt>
	<dd>Specific definition.</dd>
    <dt>apple</dt>
	<dd>A kind of fruit.</dd>
    <dt>knife</dt>
	<dd>Something can cut down things.</dd>
</dl>

the term being defined

Specific definition.

apple

A kind of fruit.

knife

Something can cut down things.

11. Nested Lists

<ul>
    <li>Shop 1</li>
    <li>Shop 2
    	<ul>
            <li>profit</li>
            <li>labor cost</li>
        </ul>
    </li>
     <li>Shop 3</li>
</ul>

• Shop 1
• Shop 2
  • profit
  • labor cost
• Shop 3

12. Links

<a href="https://www.imdb.com">IMDB</a>

IMDB