导语:
所有标签亲手测试,请放心享用
HTML 标题
标题（Heading）是通过 <h1> - <h6> 等标签进行定义的,是块级元素
<h1> 定义最大的标题,<h6> 定义最小的标题。
例:
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>确保将 HTML heading 标签只用于标题。不要仅仅为了产生粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
HTML 水平线 horizontal
<hr /> 标签在 HTML 页面中创建水平线,可用于分隔内容。
例
<p>This is a paragraph</p> //paragraph段落
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>HTML 段落
通过 <p> 标签定义,是块级元素,浏览器会自动地在段落的前后添加空行。
用空段落标记 <p></p> 去插入一个空行是个坏习惯。
用 <br /> 标签代替它！但是不要用 <br /> 标签去创建列表
例:
<p>This is a paragraph</p>
<p>This is another paragraph</p>
HTML 换行break
如果想在不产生一个新段落的情况下进行换行，使用 <br /> 标签：
<p>This is<br />a para<br />graph with line breaks</p>
<br /> 元素是一个空的 HTML 元素,没有结束标签。
HTML 超链接
<a href="http://www.fklinux.com/" target="_blank">疯狂linux</a>
<a>
anchor 锚,设置超文本链接,超链接可以文字/图像，可点击这些内容来跳转到新的文档或者当前文档中的某个部分。
href 属性
hypertext reference,指定链接的目标。.
target 属性
定义被链接的文档在何处显示。"_blank"值是在新窗口打开文档创建mail链接
<a href="mailto:yanqiang@1000phone.com?Subject=Hello%20again" target="_top">Send Mail</a>
图像标签<img>
<img border="0" src="图片地址" alt="Big Boat" width="50" height="50" title="你看不见我=_=">
<img>
是空标签，它只包含属性，没有闭合标签。
border属性
指定图像边缘宽度
src 源属性
指定图片地址,可以是本地图片(使用相对路径),也可以是网络上其他服务器上的图片.
alt 属性
alternate text（替换文字；备用文本；替代文字）,用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。
height和width属性
调整图片大小
title属性
title是对图片的说明和额外补充，如果需要在鼠标经过图片时出现文字提示应该用属性title。title属性的优先级高于alt text。向 HTML 页面添加背景图片:
在<body>中使用background属性
<body background="图片地址">在文字中排列图像:
<p>图像 <img src="图片地址" align="bottom"> 在文本中</p>
<p>图像 <img src ="图片地址" align="middle"> 在文本中</p>
<p>图像 <img src ="图片地址" align="top"> 在文本中</p>
<p><img src ="图片地址" align ="left"> 文本</p>
<p><img src ="图片地址" align ="right"> 文本</p>
align属性设置图片的对齐方式.
align 属性设置为 "left"。图像将浮动到文本的左侧。
align 属性设置为 "right"。图像将浮动到文本的右侧
align：美[əˈlaɪn] 排列、对齐、对准制作图像链接:
创建图片链接只需要把链接文本内容替换成图像标签<img>
如果想用动画图片,只需要把图片换成gif格式的.
<!DOCTYPE HTML>
<html>
<body>
<p>
<a href="http://fklinux.blog.51cto.com">
<img border="0" src="images/hello.png" width="128" height="128" />
</a>
</p>
</body>
</html>
注意我这里的图片用的是相对路径,wing测试使用绝对路径不成功!创建图像映射
创建带有可供点击区域(热点)的图像地图。其中的每个区域都是一个超级链接。
<html>
<body>
<p>请点击图像上的星球，把它们放大。</p>
<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />
<map name="planetmap" id="planetmap">
<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />
<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />
<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />
</map>
<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。"<map>" 定义图像地图。
"<area>" 定义图像地图中的可点击区域。</p>
</body>
</html>把图像转换为图像映射
把一幅普通的图像设置为图像映射。(整幅图都是一个热点,wing的理解,这个和普通的图片链接貌似没什么区别)
<!DOCTYPE html>
<html>
<body>
<p>请把鼠标移动到图像上，看一下状态栏的坐标如何变化。</p>
<a href="/example/html/html_ismap.html">
<img src="/i/eg_planets.jpg" ismap />
</a>
</body>
</html>html样式
style 属性
提供了一种改变所有 HTML 元素的样式的通用方法。
样式是 HTML4引入，是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。不赞成使用的标签和属性
在 HTML 4 中，有若干的标签和属性是被废弃的。被废弃（Deprecated）的意思是在未来版本的 HTML 和 XHTML 中将不支持这些标签和属性。
这里传达的信息很明确：请避免使用这些被废弃的标签和属性！应该避免使用下面这些标签和属性：
标签 描述
<center> 定义居中的内容。
<font> 和 <basefont> 定义 HTML 字体。
<s> 和 <strike> 定义删除线文本
<u> 定义下划线文本
属性 描述
align 定义文本的对齐方式
bgcolor 定义背景颜色
color 定义文本颜色
对于以上这些标签和属性：请使用样式代替！background-color 属性为元素定义了背景颜色：
<html>
<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>
</html>font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸：
<html>
<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>text-align 属性规定了元素中文本的水平对齐方式：
<html>
<body>
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
</body>
</html>html文本格式化
HTML 可定义很多供格式化输出的元素，比如粗体和斜体字。
文本格式化标签
标签 描述
<b> 定义粗体文本。Bold 粗体（文本）
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。Italic 斜体（文本）
<small> 定义小号字。
<strong> 定义加重语气。
<sub> 定义下标字。
<sup> 定义上标字。
<ins> 定义插入字。
<del> 定义删除字。
<s> 不赞成使用。使用 <del> 代替。
<strike> 不赞成使用。使用 <del> 代替。
<u> 不赞成使用。使用样式（style）代替。“计算机输出”标签
标签 描述
<code> 定义计算机代码。
<kbd> 定义键盘码。
<samp> 定义计算机代码样本。
<tt> 定义打字机代码。
<var> 定义变量。
<pre> 定义预格式文本。
<listing> 不赞成使用。使用 <pre> 代替。
<plaintext> 不赞成使用。使用 <pre> 代替。
<xmp> 不赞成使用。使用 <pre> 代替。引用、引用和术语定义
标签 描述
<abbr> 定义缩写。
<acronym> 定义首字母缩写。
<address> 定义地址。
<bdo> 定义文字方向。
<blockquote> 定义长的引用。
<q> 定义短的引用语。
<cite> 定义引用、引证。
<dfn> 定义一个定义项目。例子:
对文本进行格式化
<b>This text is bold</b>
<strong>This text is strong</strong>
<big>This text is big</big>
<em>This text is emphasized</em>
<i>This text is italic</i>
<small>This text is small</small>
This text contains
<sub>subscript</sub>
This text contains
<sup>superscript</sup>
预格式文本
使用 pre 标签对空行和空格进行控制,很适合显示计算机代码,它保留了空格和换行.
<pre>
for i = 1 to 10
print i
next i
</pre>
“计算机输出”标签
不同的“计算机输出”标签的显示效果。这些标签常用于显示计算机/编程代码。
<code>Computer code</code>
<kbd>Keyboard input</kbd>
<tt>Teletype text</tt>
<samp>Sample text</samp>
<var>Computer variable</var>
地址
在 HTML 文件中写地址。
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
实现缩写或首字母缩写
<abbr title="etcetera">etc.</abbr>
<acronym title="World Wide Web">WWW</acronym>
<p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>
<p>仅对于 IE 5 中的 acronym 元素有效。</p>
<p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>
改变文字的方向
<p>This paragraph will go left-to-right.</p>
<p><bdo dir="rtl">This paragraph will go right-to-left.</bdo></p>
块引用
实现长短不一的引用语。
<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>
标记删除文本和插入文本。
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
本文转自 CrazyWing 51CTO博客，原文链接:http://blog.51cto.com/fklinux/2053156
