HTML学习网址：http://www.w3school.com.cn/html/html_quick.asp
HTML5学习网站：http://www.w3school.com.cn/html5/
一、 HTML 文件基本结构(Document Structures)
以下是HTML文件的基本框架:
<HTML>
<HEAD>
<title>, <link>,<style> , <meta>....
</HEAD>
<BODY>
HTML 文件的正文写在这里... ...
</BODY>
</HTML>
注意：（1）HTML标签经常是成对出现的。
（2）一份完整的HTML起始于<HTML>，终结于</HTML>，其含意是告诉文档解析程序：这是一份HTML文件。
（3）很多HTML的标签后面可以带属性，进一步说明该标签的含意，
比如：<body bgcolor=# text=# link=# alink=# vlink=#>
二、 <HEAD>标签
HTML头部信息(head)里包含关于所在网页的信息。头部信息(head)里的内容，主要是被浏览器所用，不会显示在网页的正文内容里。另外，搜索引擎也会查找你网页中的head信息。为了让搜索引擎能够收录你的网页，你也要填写适当的head信息。
<HEAD>
<title>, <link>, <style>, <meta>....
</HEAD>
1. <title>
标题(title)是最常用的head信息。它不显示在HTML网页正文里，显示在浏览器窗口的标题栏里,示例:
<title>我的主页标题(title说明)</title>
2.<style>
用样式(style)可以设值网页的内部样式表(internal style sheet)，它决定网页整体的前景色、背景色、字体颜色及大小等。示例代码如下：
<head>
<style>
body {background-color:white; color:black;}
h1 {font: 18pt arial bold;}
</style>
</head>
3.<meta>
在HTML里，meta标记(元标记)表示用来描述网页的有关信息。
meta 的属性有两种：name和http-equiv。
name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。这其中最重要的是description（站点在搜索引擎上的描述）和keywords（分类关键词）。
http-equiv用来在HTML文档中模拟HTTP协议的响应头报文。
示例代码：网页描述、关键词、作者。
<meta name="description" content="HTML中文教程之头部信息">
<meta name="keywords" content="HTML,tutorials,source codes">
<meta name="author" content="XXXX">
示例代码：设定搜索引擎的检索方式
<meta name="Robots" contect= "all|none|index|noindex|follow|nofollow">
示例代码：利用meta中的Refresh可以实现自动跳转页面的功能。
<meta http-equiv="Refresh" content="5;url=http://www.blabla.cn/html_tutorials/index.html">
示例代码：利用meta可以用于设定网页的到期时间。
<meta http-equiv="expires" content="Fri, 12 Jan 2001 18:18:18 GMT">
利用meta设置语言字符集(Charsets)的信息
<meta http-equiv="Content-Type" content="text/html;charset=****">
示例代码：网页等级评定，在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的；
<meta http-equiv="Pics-label" contect="">
结论:<meta>标签非常有用,上面只例举了一部分.
三.link 标签
当在文档中声明使用外接资源(比如CSS)时使用此标签.比如:
<link rel = "stylesheet" type = "text/css" href = "style.css" />
四、超链接(HyperLink)标签
基本语法 <a href="URL"> ... </a>
例如：<a href="samp/link.html">跳转到另一个页面</a>。
<a href="#name">跳转到本页面的另外一个地方(锚)... </a>
<a href=" samp/window.html L" target="Window_Name">开一个新窗口 </a>
五、标尺线标签<hr>：规定直线的式样
六、字体
1标题字体(Header)
<h#> ... </h#> #=1, 2, 3, 4, 5, 6
2、字体大小
<font size=#> ... </font>
<basefont size=#> #=1, 2, 3, 4, 5, 6, 7
3物理字体(Physical Style)
直接指定字体，物理风格的字体有<b>黑体，<i>斜体，<u>下划线，<tt>打字机体等
4逻辑字体(Logical Style)
逻辑风格指定文本的作用（而不是文本的显示风格）。 <em>强调 <srrony>特别强调 <code>源代码 <samp>例子 <kbd>键盘输入 <var>变量 <dfn>定义 <cite>引用 <small>较小 <big>较大 <sup>上标 <sup>下标
六、文字布局(TEXT STYLE)标记(TAGS)
分段 (可以看作是空行) <p>
换行 <br>
不换行<nobr>
文字的对齐<p align=#>...</p> #=left, center, right
文字的闪烁 <blink>...</blink>
文字的移动<marquee direction=# >。。。 </marquee>
文字的分区(Division)显示：<div > ... </div>
七、图像标记
HTML网页的图像都是外链的（超媒体）链入图象的基本语法：
<img src=#> #=图象的 URL
八、表单(FORM)标记(TAGS)
表单在HTML页面中起着重要作用，它是WEB服务器与客户端交互信息的主要手段。也与JSP,ASP等服务器端动态网页设计密切关联。
1 表单可以向服务器提交数据，表单的基本语法：
<form action="url" method=*>
... 提交的数据项写在这里
...
<input type=submit> <input type=reset>
</form>
上面的语法中,action="url",代表响应(处理)表单提交数据的网页。
*=GET, POST ，代表向服务器提交数据的方式。重要！
Get将表单中数据的按照variable=value的形式，添加到action所指向的URL后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；
比如：
<form action="test.asp" method=get>
<input type=hidden name=name value=zhang >
<input type=hidden name=age value=25;>
<input type=submit> <input type=reset>
</form>
点击“submit”，浏览器地址栏大概为（假如没加密）：
http://test.asp?name=zhang&age=25
Get是不安全的，因为在传输过程，数据被放在请求的URL中，用户可见。Get传输的数据量小，这主要是因为受URL长度限制；Get传输效率较好，是Form的默认方法，多数表单也都使用Get提交。
Post是将表单中的数据放在form的数据体中，按照变量和值相对应的方式，传递到action所指向的URL。Post的所有操作对用户来说都是不可见的。而且Post可以传输大量的数据。
对于Get和Post提交，设计规范的建议是：Get提交应该用于只查询不修改服务器数据的请求，而Post提交用于修改服务器数据的请求（比如论坛发贴），很多人自动这样做了，但不知道有这个规范。实际上表单还有另外2种提交方式：PUT和DELETE，设计规范的建议是用于数据增加和删除的请求，但这2种提交方式很少被用到。
2 下面讨轮表单中（<form>…</form>标签内），提供给用户的输入形式：
<input type=* name=**>
*=text, password, checkbox, radio, image, hidden, submit, reset
**=Symbolic Name
例子：
<form action=test.jsp method=POST>
您的姓名: <input type=text name=姓名><br>
您的主页的网址:<input type=text name=网址 value=http://><br>
密码: <input type=password name=密码><br>
<input type=submit value="发送">
<input type=reset value="重设">
<input type=hidden name=国籍 value=中国>
</form>
您的姓名:
您的主页的网址:
密码:
3表单隐藏域
注意：表单隐藏域的作用，隐藏域提交的数据不在用户界面上显示出来。隐藏域对ASP.NET编程较重要，用于页面自动保持状态。
<input type=hidden value=*>, 例如：
<form action=test.jsp method=POST>
<input type=hidden name=add value=hoge@hoge.jp>
……
</form>
4复选框(Checkbox) 和 单选框(RadioButton)
<input type=checkbox>
<input type=checkbox checked>
<input type=checkbox value=**>
以下是一个复选框的例子：
<form action=test.jsp method=POST>
<input type=checkbox name=水果1>
Banana<p>
<input type=checkbox name=水果2 checked>
Apple<p>
<input type=checkbox name=水果3 value=橘子>
Orange<p>
<input type=submit><input type=reset>
</form>
Banana
Apple
Orange
5 表单中的下拉列表框
<select name=*>
<option> ...
</select>
<option selected>
<option value=**>
<form action=test.jsp method=POST>
<select name=fruits>
<option>Banana
<option selected>Apple
<option value=My_Favorite>Orange
</select><p>
<input type=submit><input type=reset>
</form>
6 表单中的文本区域
语法为：<textarea name=* rows=** cols=**> ... <textarea>
<form action=test.jsp method=POST>
<textarea name=comment rows=5 cols=60>
文本区内容
</textarea>
<input type=submit><input type=reset>
</form>
九、表格(TABLE)标记
表格是网页中显示数据的重要方式，在JSP/ASP/ASP.NET等服务器端网页编程中，常需要把从数据库中提取的数据在HTML表格中展显出来，这种技术有时可以借助更方便的网格组件（grid）实现，但网页中的网格组件是基于HTML表格标签的，所以，了解HTML表格标签是很有必要的。
1表格的基本语法
<table> - 定义表格
<tr> - 定义表行
<th> - 定义表头
<td> - 定义表元(表格的具体数据)
</table>
2带边框的表格：
<table border>
<tr>
<th>Food</th>
<th>Drink</th>
<th>Sweet</th>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</table>
Food Drink Sweet
A B C
3 不带边框的表格：
<table>
<tr>
<th>Food</th>
<th>Drink</th>
<th>Sweet</th>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</table>
Food Drink Sweet
A B C
3跨多行、多列的表元(Table Span)
跨多列的表元 <th colspan=#>
<table border>
<tr>
<th colspan=3> Morning Menu</th>
<tr>
<th>Food</th>
<th>Drink</th>
<th>Sweet</th>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</table>
Morning Menu
Food Drink Sweet
A B C
跨多行的表元 <th rowspan=#>
<table border>
<tr>
<th rowspan=3> Morning Menu</th>
<th>Food</th>
<td>A</td>
</tr>
<tr>
<th>Drink</th>
<td>B</td>
</tr>
<tr>
<th>Sweet</th>
<td>C</td>
</tr>
</table>
Morning Menu Food A
Drink B
Sweet C
4 表格尺寸设置
<table border=#>
边框尺寸设置：
<table border=10>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
Food Drink Sweet
A B C
<table border width=# height=#>
表元间隙设置：
<table border cellspacing=10>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
Food Drink Sweet
A B C
表元内部空白设置：
<table border cellpadding=10>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
Food Drink Sweet
A B C
5 表格内文字的对齐/布局
<tr align=#> #=left, center, right
<th align=#> #=left, center, right
<td align=#> #=left, center, right
184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
