接触html有一段时间了，对html做简单的总结。

1、HTML基础标签

浏览器中效果：

这是段落

------------------------------------------------------------------------------

<p>
这个段落
在源代码中
包含许多行
但是浏览器
忽略了它们。
</p>
<p>
这个段落在源代码中包含许多行但是浏览器忽略了它们。
</p>
浏览器中效果：

这个段落在源代码中包含许多行但是浏览器忽略了它们。

-----------------------------------------------------------------------------------

<h1>春晓</h1>
<p>
　　春眠不觉晓，
　　　　处处闻啼鸟。
　　　　　　夜来风雨声，
　　　　　　　　花落知多少。
</p>
<p>
注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。
</p>

浏览器中效果：

春晓

春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。

注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。

-----------------------------------------------------------------------------------------------

//拆行：

<p>
to break<br />lines<br />today is<br />fine day.
</p>

浏览器中效果：

to break
lines
today is
fine day.

-------------------------------------------------------------------------------------------------

//标题：

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。</p>

浏览器中效果：

This is heading 1

This is heading 2

请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。

----------------------------------------------------------------------------------------------------------

//标题居中（可以居中、居右、居左）：

<h2 align="center"> this is h2 heading</h2>

浏览器中效果：

this is h2 heading

----------------------------------------------------------------------------------------------------------------------------

//定义水平线

<p> hr 标签定义水平线:</p>
<hr />
<p> 这是段落</p>
<hr />

浏览器中效果：

hr 标签定义水平线:

这是段落

-----------------------------------------------------------------------------------------

//背景颜色：

<body bgcolor="yellow">
<h2>请看: 改变了颜色的背景。</h2>
</body>

浏览器中效果：

不好显示，说明：背景颜色变成黄色。

2、HTML文本格式化

//文本格式化

<b>This text is bold</b>
<br />
<strong>this is strong</strong>
<br />
<big>this text is big</big>
<br />
<em>this text is emphasized</em>
<br />
<i>this text is italic</i>
<br />
<small>this text is small</small>
<br />
this text contains <sub>subscript</sub> this text contains <sup>superscript</sup>

浏览器中效果：

This text is bold
this is strong
this text is big
this text is emphasized
this text is italic
this text is small
this text contains _subscript this text contains ^superscript

----------------------------------------------------------------------------------------

//预格式文本

<pre>
这是
预格式文本。
它保留了空格

和换行。
</pre>
<p>
pre 标签很适合显示计算机代码：</p>
<pre>
for i = 1 to 10
print i
next i
</pre>

浏览器中效果：

这是
        预格式文本。
        它保留了      空格

        和   换行。

pre 标签很适合显示计算机代码：

for i = 1 to 10
     print i
next i------------------------------------------------------------------------------------------//计算机输出标签：签很适合显示计算

<code>Computer code</code>
<br />
<kbd>keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>
Sample Text
</samp>
<br />
<var>
Computer variable</var>
<p>
<b>注释：</b>这些标签常用于显示计算机/编程代码。
</p>

浏览器中效果：

Computer code
keyboard input
Teletype text
Sample Text
Computer variable

注释：这些标签常用于显示计算机/编程代码。

-------------------------------------------------------------------------------------------

//缩写和首字母缩写

<abbr title="etccetera">
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>

浏览器中效果：

etc.
www

在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。

仅对于 IE 5 中的 acronym 元素有效。

对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。

------------------------------------------------------------------------------------------

//文字方向：

<p>
如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；
</p>
<bdo>today is fine day</bdo>
<br />
<bdo dir="rtl">today is fine day</bdo>

浏览器中效果：

如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；

today is fine day
today is fine day

-------------------------------------------------------------------------------------------

//块引用

长引用：
<blockquote>
差点等等等等等等等等等等等等等等等等，等等等等等等等等等等等等等等等等等等饿饿饿饿饿饿饿饿饿饿饿
</blockquote>
<br />
短引用： <q>这是短引用 </q>
<p>
使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
</p>

浏览器中效果：

长引用：

差点等等等等等等等等等等等等等等等等，等等等等等等等等等等等等等等等等等等饿饿饿饿饿饿饿饿饿饿饿

短引用：这是短引用

使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。

--------------------------------------------------------------------------------------------------------------

//删除子效果和插入字效果

<p>
今天好<del>明天</del> 后天 <ins>昨天</ins>前天</p>
<p>
大多数浏览器会改写为删除文本和下划线文本。</p>
<p>
一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>

浏览器中效果：

今天好明天后天昨天前天

大多数浏览器会改写为删除文本和下划线文本。

一些老式的浏览器会把删除文本和下划线文本显示为普通文本。

3、HTML链接

//创建超级链接

<p>
<a href="./About.aspx">文本</a>执行另一个页面的链接。
</p>
<p>
<a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>

浏览器中效果：

文本执行另一个页面的链接。

本文本是一个指向万维网上的页面的链接。

---------------------------------------------------------------------------------------------------

//将图像作为链接

<p>
使用图像来链接： <a href="http://www.w3school.com.cn/html/html_scripts.asp">
<img border="0" src="/image/11.jpg" width="100" height="100" />
</a>
</p>

浏览器中效果：

使用图像来链接：

---------------------------------------------------------------------------------------------------------

//在新的浏览器窗口打开链接

<a href="http://www.w3school.com.cn/" target="_blank">Visit w3shcool</a>
<p>
如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。</p>

浏览器中效果：

Visit w3shcool

如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。

----------------------------------------------------------------------------------------------------

//链接到同一个页面的不同位置

<p>
<a href="#C4">查看 Chapter 4。</a>
</p>
<h2>
Chapter 1</h2>
<p>
This chapter explains ba bla bla</p>
<h2>
Chapter 2</h2>
<p>
This chapter explains ba bla bla</p>
<h2>
Chapter 3</h2>
<p>
This chapter explains ba bla bla</p>
<h2>
<a name="C4">Chapter 4</a></h2>
<p>
This chapter explains ba bla bla</p>
<h2>
Chapter 5</h2>

浏览器中效果：

查看 Chapter 4。