标签：
<html>
<head>
<!-- 定义外部样式表-->
<link rel="stylesheet" type="text/css" href="mystyle.css">
<!-- 定义内部样式表-->
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
<body>
<!-- 定义内联样式：使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。-->
<p style="color: red; margin-left: 20px">This is a paragraph</p>
<h1>标题：h1-h6级,自动地在标题的前后添加空行</h1>
<p>定义段落</p>
<p>属性：align="center"居中排列标题 bgcolor="yellow" body背景颜色 border="1"表格边框</p>
<p>属性：class=“name”规定元素的类名 id=“name”规定元素唯一的id号 style=“style_definition”</p>
<p>属性推荐使用小写属性，属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
在某些个别的情况下，比如属性值本身就含有双引号，那么必须使用单引号</p>
<p>HTML 代码中的所有连续的空行（换行）也被显示为一个空格</p>
<br/><!-- <br/>是换行 -->
<hr/><!-- <hr/>创建水平线-->
<h2>文本格式化</h2>
<b>粗体</b>
<strong>加重语气</strong>
<big>定义大号字</big>
<small>定义小号字</small>
<em>定义着重文字</em>
<i>定义斜体字</i>
<sub>定义下标字</sub>
<sup>定义上标字</sup>
<h2>计算机输出标签</h2>
<code>定义计算机代码</code>
<kbd>定义键盘码</kbd>
<tt>定义打字机代码</tt>
<samp>定义计算机代码样本</samp>
<var>定义变量</var>
<pre>预定义格式，按照HTML中的格式输出到网页</pre>
<!-- 在网页中指向PRC会显示全拼，title 可用于展示表达的完整版-->
<abbr title="People‘s Republic of China">PRC</abbr>
<!-- 当把鼠标移至缩略词语上时，title 可用于展示表达的完整版本-->
<acronym title="World Wide Web">WWW</acronym>
<!-- 定义文字输出方向ltr从左到右 rtl从右到左-->
<bdo dir="rtl">Here is some Hebrew text</bdo>
<!-- 块引用：使用 blockquote 元素，浏览器会插入换行和外边距，而 q 元素会加双引号-->
<blockquote>这是长的引用。</blockquote>
<q>这是短的引用。</q>
<!-- del定义删除字，ins定义下划线-->
<del>二十</del> <ins>十二</ins>
<!-- 定义地址-->
<address>地址</address>
<!-- href 属性：创建指向另一个文档的链接；Target属性：定义被链接的文档在何处显示_blank开新标签页_top跳出框架-->
<a herf="URL" target="_blank">定义链接</a>
<!-- name属性规定锚（anchor）的名称，使用 name 属性创建 HTML 页面中的书签，当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了，使用 id 属性来替代 name 属性，命名锚同样有效-->
<!-- 在其他页面中创建指向该锚的链接-->
<a herf="URL#C4" target="_blank">定义链接</a>
<!-- 在同一个文档中创建指向该锚的链接-->
<a href="#C4">有用的提示</a>
<a name="C4">Chapter 4</a>
<!-- 创建邮件链接-->
<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
<a href="mailto:someone@microsoft.com?
cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件！</a>
<!-- 插入图片-->
<img src="名字" width=“宽度” height=“高度” />
<!-- 图片来自另一个文件夹-->
<img src="/i/ct_netscape.jpg" />
<!-- 图片来自网页-->
<img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" />
<!-- alt属性：为图像定义一串预备的可替换的文本，在浏览器无法载入图像时，替换文本告诉读者失去的信息。-->
<img src="boat.gif" alt="Big Boat">
<!-- 向 HTML 页面添加背景图片-->
<body background="/i/eg_background.jpg">
<!-- align属性：图片和文字的对其方式bottom底端对齐middle中部对齐top顶端对齐 left图像将浮动到文本的左侧right图像将浮动到文本的右侧-->
<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>
<!-- 图像可以作为链接使用-->
<a href="/example/html/lastpage.html"><img border="0" src="/i/eg_buttonnext.gif" /></a>
<!-- 在img中使用usemap属性usemap="#planetmap"使图片转换为图像映射，点击定义区域，查看其他图片-->
<!--map定义图像地图area定义图像地图中的可点击区域-->
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,180,14" href ="/example/html/venus.html" target ="_blank"
alt="Venus" /></map>
HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后
<!--table定义表格<tr>表示行<td>表示该行的单元格 数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等 。border边框属性默认不显示边框-->
<!--表头使用 <th> 标签进行定义，粗体居中显示-->
<!--带标题 (caption) 的表格-->
<!--cellpadding单元格边距：创建单元格内容与其边框之间的空白-->
<!--cellspacing单元格间距：增加单元格之间的距离-->
<!--bgcolor向表格添加背景颜色-->
<!--background向表格添加背景图片-->
<!--frame控制围绕表格的边框box四周边框都显示；above只显示上方边框；below只显示下方边框；hsides显示上下边框；vsides显示左右边框；-->
<table border="1" cellpadding=="10" cellspacing="10" bgcolor="red" background="/i/eg_bg_07.gif" frame="box">
<caption>我的标题</caption>
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
</tr>
</table>
<!--bgcolor向表格单元格添加背景颜色-->
<!--background向表格单元格添加背景图片-->
<td bgcolor="red">First</td>
<td background="/i/eg_bg_07.gif">Second</td>
<!--align排列单元格内容left向左对齐；right向右对齐；-->
<td align="left">衣服</td>
<th align="right">二月</th>
<!--如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框-->
<!--在空单元格中添加一个空格占位符，就可以将边框显示出来-->
<td></td>
<td> </td>
<!--单元格跨行或跨列，colspan跨行，rowspan跨列-->
<th colspan="2">电话</th>
<th rowspan="2">电话</th>
<!--定义列表-->
<!--定义无序列表--没有序号；type表示不同的项目符号-->
<ul type="disc">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
<!--定义有序列表--有序号；start表示起始序号，默认1；type表示不同的项目符号，可以type="A"从A开始-->
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
<!--嵌套列表-->
<ul type="disc">
<li>咖啡
<ul>
<li>咖啡</li>
<li>牛奶</li>
</ul>
</li>
<li>牛奶</li>
</ul>
<!--定义列表：以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始-->
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
<!--定义块元素<h1><p><ul><table><div> -->
<!--定义内联元素<b><td><a><img><span> -->
<!--<div><span>没有特别的含义，如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性；<div> 元素的另一个常见的用途是文档布局。<span>可用作文本的容器，当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。-->
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/xixifuxixi/p/4730698.html
