Html基础实例（1）
接触html有一段时间了，一直想对html做简单的总结。这里，列举html的基础实例，以便在后续的工作学习中查阅。虽然平时经常用到的不多，但还是想尽量总结完整，目的就是当成一本字典使用。
1、HTML基础标签
<p>这是段落</p>
浏览器中效果：
这是段落
------------------------------------------------------------------------------
<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>
浏览器中效果：
如果把链接的 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 1
This chapter explains ba bla bla
Chapter 2
This chapter explains ba bla bla
Chapter 3
This chapter explains ba bla bla
Chapter 4
This chapter explains ba bla bla
Chapter 5
This chapter explains ba bla bla
------------------------------------------------------------------------------------------------
//跳出框架
<p>被锁在框架中了吗？</p>
<a href="Default.aspx" target
="_top">点击这里</a>
浏览器中效果：
被锁在框架中了吗？
HTML实例有很多，本次只是总结了一部分，余下的部分下次再做总结。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
