标题
标题使用 <h1> 至 <h6> 标签进行定义。<h1> 定义最大的标题。<h6> 定义最小的标题。
段落
段落使用 <p> 标签进行定义。
您也许已经注意到了，在没有结束标签 </p> 的情况下，<p> 标签依然可以正常工作。不过不要这样做！下一个版本的 HTML 将不允许忽略任何的结束标签。
不要忘记关闭标签
您可能注意到了，在编写段落时可以不带有 </p> 标签
换行符
当你打算结束一行，而又不想开始一个新段落时，<br> 标签就派上用场了。无论你将它置于何处，<br> 标签都会产生一个强制的换行。
把这个标签写为 <br /> 是经得起未来考验的做法，XHTML 和 XML 都接受在打开的标签内部来关闭标签的做法。
HTML 会自动地在某些元素前后添加一个额外的空行，比如段落、标题元素前后。
使用水平线 (<hr> 标签) 来分隔文章中的小节是一个办法（但并不是唯一的办法）。
HTML 注释
注释标签用于在 HTML 源码中插入注释。注释会被浏览器忽略。您可以使用注释对您的代码进行解释，这么做在以后的日子里会对您的代码编辑产生帮助。
<!-- This is a comment -->
HTML 标签的属性
HTML 标签拥有属性。属性为 HTML 元素提供附加信息。
属性总是以名称/值对的形式出现，比如：name="value"
属性总是在 HTML 元素的开始标签中规定。
使用小写属性
属性和属性值对大小写不敏感。不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值，而 XHTML 要求使用小写属性/属性值。
始终为属性值加引号
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
基于内容的样式
<abbr>
<acronym>
<cite>
<code>
<dfn>
<em>
<kbd>
<samp>
<strong>
<var>
物理样式
<b>
<big>
<i>
<s>
<small>
<strike>
<sub>
<sup>
<tt>
文本格式化标签
-标签 描述
<b> 定义粗体文本。
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<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> 定义一个定义项目。
字符实体
一些字符在 HTML 中拥有特殊的含义，比如小于号 (<) 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须在 HTML 源码中插入字符实体。
字符实体有三部分：一个和号 (&)，一个实体名称，或者 # 和一个实体编号，以及一个分号 (;)。
空格
空格是 HTML 中最普通的字符实体。
通常情况下，HTML 会裁掉文档中的空格。假如你在文档中连续输入 10 个空格，那么 HTML 会去掉其中的9个。如果使用 ，就可以在文档中增加空格。
锚标签和 Href 属性
HTML 使用 <a> （锚）标签来创建连接另一个文档的链接。
锚可以指向网络上的任何资源：一张 HTML 页面，一幅图像，一个声音或视频文件等等。
创建锚的语法：
<a href="url">Text to be displayed</a><a> 用来创建锚。href 属性用于定位需要链接的文档，锚的开始标签和结束标签之间的文字被作为超级链接来显示。
Target 属性
使用 Target 属性，你可以定义被链接的文档在何处显示。(如：target="_blank")
锚标签和 Name 属性
Name 属性用于创建被命名的锚（named anchors）。当使用命名锚（named anchors）时，我们可以创建直接跳至页面中某个节的链接，这样使用者就无需不停的滚动页面来寻找他们需要的信息。
以下是命名锚的语法：
<a name="label">Text to be displayed</a>name 属性用于创建命名锚。锚的名称可以是任何你喜欢的名字。
下面这行定义了命名锚：
<a name="tips">Useful Tips Section</a>你会注意到，命名锚会以特殊的方式来显示。
将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个节，就像这样：
<a href="http://www.w3school.com.cn/html_links.asp#tips">
Jump to the Useful Tips Section
</a>
邮件链接的创建：
<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>(中间的%20用来替代空格)
有用的提示：
总是将正斜杠添加到子文件夹。假如你这样书写链接的话：href="http://www.w3school.com.cn/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.w3school.com.cn/html/"
假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。
框架：
框架结构标签（<frameset>）
框架结构标签（<frameset>）定义如何将窗口分割为框架
每个 frameset 定义了一系列行或列
rows/columns 的值规定了每行或每列占据屏幕的面积
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
有用的提示：
假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。
为不支持框架的浏览器添加 <noframes> 标签。
重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。（在下面的第一个实例中，可以查看它是如何实现的。）
<frameset cols="25%,75%">
<frame noresize="noresize" src="frame_a.htm">
<frame noresize="noresize" src="frame_b.htm">
</frameset>
导航框架：
<html>
<frameset cols="120,*">
<frame src="/example/html/html_contents.html">
<frame src="/example/html/frame_c.html" name="showframe">
</frameset>
</html>
内联框架：
<iframe src="/i/eg_landscape.jpg"></iframe>
表格：
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格和边框属性 border="1" 位于table tag中
表格的表头
表格的表头使用 <th> 标签进行定义。位于tr tag中
表格中的空单元格
在大多数浏览器中，没有内容的表格单元显示得不太好。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。(<td> </td>)
不带边框的表格
表头的灵活运用
带标题的表头<caption></caption>
<table border="6">
<caption>我的标题</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
跨行跨列的表格属性:colspan及rowspan 位于<td>标签中
表格小方格边距:cellpadding="10" 位于table tag中
表格间隔:cellspacing="10"位于table tag中
表格颜色及背景图:bgcolor和background 位于table tag中
表格单元颜色及背景图:bgcolor和background 位于td或th tag中
表单的分布及排列状况：align 使用 "align" 属性排列单元格内容,以便创建一个美观的表格。 值可取："right"\"left"\"center"
table的frame属性:"box"\"above"\"below"\"hsides"\"vsides"
HTML 列表
------------------------------------------------------------
有序表和无序表：
有序表：[无序列表的元素类型：A、a、I、i；用type属性定义]
<ol>
<li>Coffee</li>
<li>Milk<li>
</ol>
无序表：[无序列表的元素类型：disc、circle、square；用type属性定义]
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
定义列表
自定义列表以 <dl> 标签开始。
每个自定义列表项以 <dt> 开始。
每个自定义列表项的定义以 <dd> 开始。
定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
列表嵌套
<dl>
<dt>
<\dt>
<dd>
<\dd>
</dl>
-------------------------------------------------------------------------
HTML 表单和输入
表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。
表单使用表单标签（<form>）定义。
输入
多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
表单类型：
文本域（Text Fields）
<input type="text" name="firstname">（类型1:text)文本域
单选按钮（Radio Buttons）
当用户从若干给定的的选择中选取其一时，就会用到单选框。
<form>
<input type="radio" name="sex" value="male"> Male
<input type="radio" name="sex" value="female"> Female
</form>
复选框（Checkboxes）
当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。
<form>
<input type="checkbox" name="bike">
I have a bike
<br>
<input type="checkbox" name="car">
I have a car
</form>
表单的动作属性（Action）和确认按钮
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
<form name="input" action="html_form_action.asp" method="get">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>
按钮类型（button）：
<form>
<input type="button" value="Hello world!">
</form>
下拉列表的创建
<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
其中selected属性用于标记默认选项
文本域:
<textarea rows="10" cols="30">
The cat was playing in the garden.
</textarea>
带标题的框的form
<fieldset>
<legend>健康信息：</legend>
<form>
<label>身高：<input type="text" /></label>
<label>体重：<input type="text" /></label>
</form>
</fieldset>
从表单发送电子邮件：
<form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain">
<h3>这个表单会把电子邮件发送到 W3School。</h3>
姓名：<br>
<input type="text" name="name" value="yourname" size="20">
<br>
电邮：<br>
<input type="text" name="mail" value="yourmail" size="20">
<br>
内容：<br>
<input type="text" name="comment" value="yourcomment" size="40">
<br><br>
<input type="submit" value="发送">
<input type="reset" value="重置">
</form>
定义一个选项组:
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
图像：
图像标签（<img>）和源属性（Src）
<img src="url" />
替换文本属性（Alt）
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
<img src="boat.gif" alt="Big Boat">
背景图片：<body background="/i/eg_background.jpg">
排列图片
<p>图像<img src="/i/eg_cute.gif" align="bottom"> 在文本中</p> 其中align可选值有："bottom"\"middle"\"top"
带浮动的图片:
<p><img src ="/i/eg_cute.gif" align ="left">
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
</p>
调整图像大小:
<p><img src="/i/eg_mouse.jpg"
width="40" height="40"></p>
将图片显示替代文本：
<img src="/i/eg_goleft.gif" alt="向左转" />
图片连接：
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" /></a>
MAP的用法：
<img src="mapimg.gif" usemap="#Face">
<map name="Face">
<!Text BOTTON>
<area shape="rect"
href="page.html"
coords="140,20,280,60">
<!Triangle BOTTON>
<area shape="poly"
href="image.html"
coords="100,100,180,80,200,140">
<!FACE>
<area shape="circle"
href="new.html"
coords="80,100,60">
</map>
背景：
<body bgcolor="#000000">
<body bgcolor="#000000">
<body bgcolor="black">
<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">
<body> 标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML 标准（HTML4 和 XHTML）中已被废弃。W3C 在他们的推荐标准中已删除这些属性。应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。
用表格部局：
<table border="0" width="100%" cellpadding="10">
<tr>
<td width="50%" valign="top">
This is some text. This is some text. This is some text. This is some text. This is some text.
</td>
<td width="50%" valign="top">
Another text. Another text. Another text. Another text. Another text. Another text. Another text.
</td>
</tr>
</table>
字体标签font
使用类似下面的HTML代码，你可以定义浏览器输出的尺寸和类型：
在 HTML 中，字体标签是不被支持的。一般都认为，在今后版本的 HTML 中，这个标签会被清除出去。
即使很多人都在用它，我们都应该尽量避免它，而使用样式取而代之。
<p>
<font size="2" face="Verdana">
This is a paragraph.
</font>
</p>
<p>
<font size="3" face="Times">
This is another paragraph.
</font>
</p>
验证 HTML文件
HTML 文档是根据文档类型声明进行验证的。如果希望 HTML 文件被正确地验证，就要将恰当的 DTD 添加到文件的第一行。
HTML 4.01 Strict DTD 包含没有被反对使用或者不出现在框架中的元素和属性：
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional DTD
包含 strict DTD 中所有的内容，外加被反对使用的元素和属性：
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset DTD 包含 transitional DTD 中所有的内容，外加对框架的支持：
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
HTML 样式
通过使用 HTML4.0，所有的格式化代码均可移出 HTML 文档，然后移入一个独立的样式表。
如何使用样式
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：
外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
注意：text/css
头元素
头元素包含关于文档的概要信息，也称为元信息（meta-information）。Meta 意为“关于某方面的信息”。
可以这么说，元数据（meta-data）是关于数据的信息，而元信息是关于信息的信息。
头元素内的信息
头元素内的元素不会被浏览器显示出来。
根据 HTML 标准，仅有几个标签在 HTML 的头部分是合法的。它们是：<base>, <link>, <meta>, <title>, <style> 和 <script>。
<!DOCTYPE> 定义文档类型。此标签须位于 html 标签之前。
针对搜索引擎的关键字
某些万维网搜索引擎使用 meta 标签的 name 和 content 属性来索引页面。
这个 Meta 元素定义了对页面的描述:
<meta name="description"
content="Free Web tutorials on HTML, CSS, XML, and XHTML" />
这个 Meta 元素定义了页面的关键字:
<meta name="keywords"
content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">
然而，由于非常多的网管们使用 meta 标签制造垃圾信息，比方说在页面重复关键词以达到提高排名的目的，一些搜索引擎已经彻底放弃了使用它们。
HTML 脚本
向 HTML 添加脚本（Script），使其动态性和交互性更强。
如何应付老式的浏览器
如果浏览器压根没法识别 <script> 标签，那么 <script> 标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生，你应该将脚本隐藏在注释标签当中。那些老的浏览器（无法识别 <script> 标签的浏览器）将忽略这些注释，所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们，即使代码被嵌套在注释标签内。
-----------------------------------------------------------------------------------------------------------------------
头部标签设置
在<head>标签中设置标题:<title></title>
在<head>标签中设置关键字:<meta name="keywords" content="局域网教程">
在<head>标签中设置页面描述信息:<meta name="description" content="这里是页面的说明文字">
在<head>标签中设置作者信息:<meta name="author" content="咖啡豆">
在<head>标签中设置网页的语言:<meta http-equiv="content-type" content="text/html" charset="GB2312"> [euc-jp]
在<head>标签中设置网页的自动跳转:<meta http-equiv="refresh" content="5" url="www.itaok.com">
<meta>元信息标记:一般用来定义页面关键字\页面说明\刷新等等.在HTML中,meta不需要设置结束标记,在一对尖括号内就是一个meta内容,在一个HTML页面中可以多个meta元素
<meta>元素常用的属性有两个,一个就是name,设置网页关键字和描述信息等,而http-equiv是用来定义你网页的语言的,当访客浏览你的网页时,浏览器会自动识别并设置网页中的语言.
body标签:
使用bgcolor属性来定义整个网页背景色:属性值是16进制的颜色值
background属性设置背影图
text设置文字颜色
link设置未访问的超链接色,vlink设置已访问过的超链接色,alink设置正在访问的超链接色
设置页面和浏览器的边距:topmargin\leftmargin,像素为单位
路径: ..\ 上级目录,..\..\ 上级的上级目录, 文件名 同级目录
文字篇
-----------------------------------------
h1-h6,align = left\center\right
文本样式标签 font, face属性设置字体如"黑体"\"宋体",size属性大小值(1-7绝对大小)/(-4-+4)相对于三号字体放大或缩小),字体颜色color属性
<b></b>粗体
<i></i>斜体
<sup></sup>上标
<sub></sub>下标
<big></big>渐放大
<small></small>渐缩小
<u></u>下划线标记
<p></p>段落 有属性align
<br/>换行
<nobr></nobr>不自动换行
<hr/>水平线标签常用属性:
width 宽(可以为像素,可以为窗口比例)
size 高(只能为像素)
color 色
align 对齐
noshade 无阴影 (无值)
特殊符号:
空格:
......还有....