HTML基础
HTML指的是超文本标记语言 (Hyper Text Markup Language)， HTML不是一种编程语言，而是一种标记语言 (markup language) ，HTML使用标记标签来描述网页。
HTML 文档是由 HTML 元素定义的。HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
注释：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。空元素在开始标签中进行关闭（以开始标签的结束而结束），大多数 HTML 元素可拥有属性。
HTML 实例 <html> <body> <p>This is my first paragraph.</p> </body> </html>
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。HTML 标签对大小写不敏感：<P> 等同于 <p>。推荐使用小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。
<p> 元素定义了 HTML 文档中的一个段落。<body> 元素定义了 HTML 文档的主体。<html> 元素定义了整个 HTML 文档。
HTML 属性
属性为 HTML 元素提供附加信息，属性总是以名称/值对的形式出现，比如：name="value"。属性总是在 HTML 元素的开始标签中规定。
属性实例： <a href="http://www.cnblogs.com">This is a link</a>链接的地址在 href 属性中指定 <h1 align="center"> 拥有关于对齐方式的附加信息。 <body bgcolor="yellow"> 拥有关于背景颜色的附加信息。 <table border="1"> 拥有关于表格边框的附加信息
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，
HTML 标准属性：http://www.w3school.com.cn/tags/html_ref_standardattributes.asp
HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。HTML 链接是通过 <a> 标签进行定义的。HTML 图像是通过 <img> 标签进行定义的。HTML 水平线：<hr /> 标签在 HTML 页面中创建水平线。
元素标签
HTML 注释：可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
<!-- This is a comment -->
段落是通过 <p> 标签定义的。HTML 折行，如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签：
<p>This is<br />a para<br />graph with line breaks</p>
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
显示预排<pre>标签，文字标签<font>，加粗<b>，斜体<i>，下划线<u>，下标<sup>，上标<sub>，<strong> 标签和<em> 标签一样，用于强调文本，但它强调的程度更强一些。<big> 标签和其相应的 </big> 标签之间的文字，其字体比周围的文字要大一号。<small>要小一号。
“计算机输出”标签 ：
<code>Computer code</code> <kbd>Keyboard input</kbd> <tt>Teletype text</tt> <samp>Sample text</samp> <var>Computer variable</var>
缩写和首字母缩写：
<abbr title="etcetera">etc.</abbr> <acronym title="World Wide Web">WWW</acronym>
如果浏览器支持 bi-directional override (bdo)，会从右向左输出：
<bdo dir="rtl"> Here is some Hebrew text </bdo>
显示：Here is some Hebrew text
块引用：
<blockquote> 这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。 </blockquote> <q> 这是短的引用。 </q>
使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
删除字效果和插入字效果：
<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p> <p>大多数浏览器会改写为删除文本和下划线文本。</p>
HTML 样式
使用添加到 <head> 部分的样式信息对 HTML 进行格式化：
<html> <head> <style type="text/css"> h1 {color: red} p {color: blue} </style> </head> <body> <h1>header 1</h1> <p>A paragraph.</p> </body> </html>
没有下划线的链接：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> </head> <body> <a href="/example/html/lastpage.html" style="text-decoration:none"> 这是一个链接！ </a> </body> </html>
链接到一个外部样式表：
<html> <head> <link rel="stylesheet" type="text/css" href="/csstest.css" > </head> <body> <h1>我通过外部样式表进行格式化。</h1> <p>我也一样！</p> </body> </html>
有三种方式来插入样式表：外部样式表、内部样式表、内联样式。
HTML 链接
将图像作为链接：
<html> <body> <p> 您也可以使用图像来作链接： <a href="/example/html/lastpage.html"> <img border="0" src="/eg_buttonnext.gif" /> </a> </p> </body> </html>
有两种使用 <a> 标签的方式：
通过使用 href 属性 - 创建指向另一个文档的链接；通过使用 name 属性 - 创建文档内的书签；使用 Target 属性，你可以定义被链接的文档在何处显示。
提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效。假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。
邮件链接：
<a href="mailto:test@126.com">发送邮件</a> 另一个负载的 mailto 链接： <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>
HTML 图像
<img src = "路径" alt = "文字说明" width = "宽" height = "高" border = "边框" align = "对齐方式"/>
背景图片：<body background="/i/eg_background.jpg">
创建图像映射，每个区域都是一个超级链接：
<img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> <!-- map --> <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>
把一幅普通的图像设置为图像映射：
<img src="/i/eg_planets.jpg" ismap /> 请把鼠标移动到图像上，看一下状态栏的坐标如何变化。
HTML 表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border = "" height = "" width = "" align = "" cellpading = "" frame = "" > <caption>我的标题</caption> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> </table>
cellpading表示单元格内容与其边框之间的空白；cellspacing表示单元格之间的距离；使用 "frame" 属性来控制围绕表格的边框；表格的表头使用 <th> 标签进行定义。属性：colspan 跨列；rowspan 跨行。
HTML 列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
<ul type = ""> <li>Coffee</li> <li>Milk</li> </ul>
有序列表也是一列项目，列表项目使用数字进行标记。
<ol> <li>Coffee</li> <li>Milk</li> </ol>
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>
HTML <div> 和 <span>
可以通过 <div> 和 <span> 将 HTML 元素组合起来。大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）。例子：<h1>，<p>，<ul>，<table>；内联元素在显示时通常不会以新行开始。例子：<b>，<td>，<a>，<img>。
HTML <div> 元素
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。<div> 元素的另一个常见的用途是文档布局。
HTML <span> 元素
HTML <span> 元素是内联元素，可用作文本的容器。<span> 元素也没有特定的含义。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
HTML 布局
使用 <div> 元素的网页布局:
<html> <head> <meta http-equiv="content-type" content="text/html" charset="gb2312"/> <style type="text/css"> div#container{width:500px} div#header {background-color:#99bbbb;} div#menu {background-color:#ffff99;height:200px;width:150px;float:left;} div#content {background-color:#EEEEEE;height:200px;width:350px;float:left;} div#footer {background-color:#99bbbb;clear:both;text-align:center;} h1 {margin-bottom:0;} h2 {margin-bottom:0;font-size:18px;} ul {margin:0;} li {list-style:none;} </style> </head> <body> <div id="container"> <div id="header"> <h1>Main Title of Web Page</h1> </div> <div id="menu"> <h2>Menu</h2> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </div> <div id="content">Content goes here</div> <div id="footer">Copyright W3School.com.cn</div> </div> </body> </html>
HTML 表单和输入
<form> 用户： <input type="text" name="user"> <br /> 密码： <input type="password" name="password"> </form>
表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。输入:多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
文本域（Text Fields）当用户要在表单中键入字母、数字等内容时，就会用到文本域。<input type="text" name="name" />
单选按钮（Radio Buttons）当用户从若干给定的的选择中选取其一时，就会用到单选框。<input type="radio" name="sex" value="male" />
复选框（Checkboxes）当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。<input type="checkbox" name="bike" />
表单的动作属性（Action）和确认按钮：
<!-- text.htm --> <html> <body> <form action ="post.php" method ="post"> Name: <input type="text" name="username" /> <input type ="submit" value="ok" /> </form> </body> </html>
<!-- post.php --> <html> <body> You are <?php echo $_POST["username"]?>. </body> </html>
简单的下拉列表:
<form> <select name="cars"> <option value="volvo" selected="selected">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form>
创建按钮:
<form> <input type="button" value="Hello world!"> </form>
在数据周围绘制一个带标题的框:
<form> <fieldset> <legend>健康信息</legend> 身高：<input type="text" /> 体重：<input type="text" /> </fieldset> </form>
HTML的特殊符号
  空格; < <; & & ; > > ; &quat ";
HTML 框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
使用框架的坏处：开发人员必须同时跟踪更多的HTML文档;很难打印整张页面。
<frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset>
为不支持框架的浏览器添加 <noframes> 标签。重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。
<frameset cols="25%,50%,25%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> <noframes> <body>您的浏览器无法处理框架！</body> </noframes> </frameset>
HTML 内联框架：
<iframe src="/eg_landscape.jpg" width="200" height="200" frameborder="0"></iframe>
使用 iframe 作为链接的目标：
<iframe src="pic/blue02.jpg" name="iframe_a"></iframe> <p><a href="http://www.cnblogs.com/houkai/" target="iframe_a">侯凯</a></p>
