HTML 简介
1.Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。览器不会显示 HTML 标签，而是使用标签来解释页面的内容。
2.<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
#<html> 与 </html> 之间的文本描述网页
#<body> 与 </body> 之间的文本是可见的页面内容
#<h1> 与 </h1> 之间的文本被显示为标题
#<p> 与 </p> 之间的文本被显示为段落
HTML 链接
1.HTML 链接是通过 <a> 标签进行定义的。
<a href="http://www.w3school.com.cn">This is a link</a>
HTML 图像
HTML 图像是通过 <img> 标签进行定义的。
HTML 元素语法
HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性
空的 HTML 元素
没有内容的 HTML 内容被称为空元素。空元素是在开始标签中关闭的。
<br /> 就是没有关闭标签的空元素（<br /> 标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素必须被关闭。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。
HTML 居中
<h1 align="center"> 拥有关于对齐方式的附加信息。
<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。
HTML 水平线
<hr /> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
始终为属性值加引号
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：
name='Bill "HelloWorld" Gates'
使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它！
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签：<p>This is<br />a para<br />graph with line breaks</p>
<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。
预格式文本
此例演示如何使用 pre 标签对空行和空格进行控制。
<pre>
这是 这是
预格式文本。 >>>>>>>>>>> 预格式文本。
它保留了 空格 它保留了 空格
和换行。 和换行。
pre 标签很适合显示计算机代码
地址
此例演示如何在 HTML 文件中写地址。
<p>唐老鸭的地址：</p>
<address>
Donald Duck<br />
BOX 555<br />
Disneyland<br />
USA<br />
</address>
<br />
<p>W3School 的地址：</p>
<address>
<a href="mailto:service@w3school.com.cn">用户服务信箱</a><br />
上海赢科投资有限公司<br />
金桥开发区 789 号<br />
</address>
结果：
唐老鸭的地址：
Donald Duck
BOX 555
Disneyland
USA
用户服务信箱
上海赢科投资有限公司
金桥开发区 789 号
缩写和首字母缩写
<abbr title="United Nations">UN</abbr>
<acronym title="World Wide Web">WWW</acronym>
文字方向
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
Here is some Hebrew text
块引用
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>
使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
HTML 样式实例 - 背景颜色
background-color 属性为元素定义了背景颜色：
<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>
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸：
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
text-align 属性规定了元素中文本的水平对齐方式：
<h1 style="text-align:center">This is a heading</h1>
将图像作为链接
<a href="../example/html/lastpage.html" tppabs="http://www.w3school.com.cn/example/html/lastpage.html">
<img border="0" src="../i/eg_buttonnext.gif" tppabs="http://www.w3school.com.cn/i/eg_buttonnext.gif" />
</a>
表格的表头
表格的表头使用 <th> 标签进行定义。
<table border="1">
<tr>
<th>Heading</th> >>>>>>>>注意
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
表格中的空单元格
table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td> </td>
</tr>
</table>
无序列表:
<h4>一个无序列表：</h4>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
有序列表 :
<h4>一个有序列表：</h4>
<ol>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
定义列表
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。
表单使用表单标签（<form>）定义。
输入
多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。
文本域
当用户要在表单中键入字母、数字等内容时，就会用到文本域。
<form>
First name:
<input type="text" name="firstname" />
<br />
Last name:
<input type="text" name="lastname" />
</form>
单选按钮
<form>
<input type="radio" name="sex" value="male" /> Male name和value什么意思？
<br />
<input type="radio" name="sex" value="female" /> Female
</form>
复选框
<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"> name,action,method是什么意思？
Username:
<input type="text" name="user" />
<input type="submit" value="Submit" /> value是什么意思？
</form>
实例：
简单的下拉列表
本例演示如何在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。
<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>
文本域
本例演示如何创建文本域（多行文本输入控件）。用户可在文本域中写入文本。可写入字符的字数不受限制。
<p>
This example cannot be edited
because our editor uses a textarea
for input,
and your browser does not allow
a textarea inside a textarea.
</p>
<textarea rows="10" cols="30">
The cat was playing in the garden.
创建按钮
<form>
<input type="button" value="Hello world!">
</form>
创建框：
<fieldset>
<legend>健康信息：</legend>
<form>
<label>身高：<input type="text" /></label>
<label>体重：<input type="text" /></label>
</form>
</fieldset>
带有输入框和确认按钮的表单
<form action="http://www.w3school.com.cn/example/html/form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>
带有复选框的表单
<form name="input" action="http://www.w3school.com.cn/html/html_form_action.asp" method="get">
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" checked="checked" />
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane" />
<br /><br />
<input type="submit" value="Submit" />
</form>
带有单选按钮的表单
<form name="input" action="http://www.w3school.com.cn/html/html_form_action.asp" method="get">
Male:
<input type="radio" name="Sex" value="Male" checked="checked">
<br>
Female:
<input type="radio" name="Sex" value="Female">
<br>
<input type ="submit" value ="Submit">
</form>
<h4>垂直的表头：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>电话</th>
<td>555 77 854</td>
</tr>
<tr>
<th>电话</th>
<td>555 77 855</td>
</tr>
</table>
图解：姓名 Bill Gates
电话 555 77 854
电话 555 77 855
带有标题的表格
本例演示一个带标题 (caption) 的表格
<table border="6">
<caption>我的标题</caption>
<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<h4>横跨两行的单元格：</h4>
<tr>
<th rowspan="2">电话</th>
<td>555 77 854</td>
</tr>
