说明：本文档是由本人多年前剪切整理的，已不知主要来源是甚，如有冒犯，知会一声哈
一、HTML 基本样式
<html>
<head>
<title>页面标题</title>
</head>
<body>
页面内容
</body>
</html>
二、HTML 常用标签
2.1 HTML 常见的基本标签
<!-- .... -->：注释
<html>：HTML文档的根标签
<head>：HTML页面的头部标签
<title>：HTML页面标题，放置于<head></head>之间
<body>：HTML页面主体部分
<meta>：定义文件信息，对网页进行说明，便于搜索引擎查找，放置于<head></head>之间
设置关键字：<meta name = "keywords" content="zzq"/>
设置描述：<meta name = "description" content="小侨"/>
设置作者：<meta name = "author" content="小侨"/>
设置字符集：<meta http-equiv ="content-type" content="text/html;charset=utf-8"/>
设置页面定时跳转：<meta http-equiv = "refresh" content="时间秒数;url=网页地址"/>
<style>：用于引入CSS文件，一般放于<head></head>之间
<script>：用于引入JavaScript文件，一般放于<head></head>之间
<h1>到<h6>：定义标题一到标题六，和world一致
<p>：定义段落
<div>：定义文档中的结构，为HTML提供结构和背景
<span>：和<div>基本相似，区别是<span>定义的默认不换行
<br/>：单标签，插入一个换行
<hr/>：单标签，定义一条水平线
<center>：网页的内容默认是居左显示，而<center></center>之间的内容居中
<font>：用于设置字体颜色、大小、字体
<p>,<div>,<span>的区别：
<span>...</span> 标签不会导致换行
<div>...</div> 会换行
<p>...</p> 会产生一个段落，段落和段落之间默认有很大的间距
2.2 文本格式化标签
<b>：定义粗体文本
<i>：定义斜体文本
<em>：定义强调文本，效果和<i>差不多
<strong>：定义粗体文本，和<b>效果差不多
<sup>：定义上标文本，主要做数学上的次方表达式 X2 + Y2 = Z2
<sub>：定义下标文本，主要做化学上的分子式 O2 +2H2 = 2H2O
<bdo>：定义文本显示方向，属性dir值有ltr(左到右)和rtl(右到左)
<del>：定义删除体文本，即文本有中线
2.3 语义相关标签
<address>：表示一个地址，浏览器默认以斜体显示其包含文本
<pre>：该标签表示的文本可 "预格式化"，即该标签能保留文本中的空格、回车、制表符等字符【prestrain】
<blink>：可定义闪烁文本，但是有浏览器不兼容问题
2.4 超链接和锚点
<a>：可定义锚(anchor)，锚有两种用法
通过使用 href 属性，创建指向另外一个文档的链接（或超链接）
通过使用 name 或 id 属性，创建一个文档内部的书签（也就是说，可以创建指向文档片段的链接）
<a href =”#A1”>第一章</a>
<a href =”#A2”>第二章</a>
<a name =”A1”>第一章内容</a>
<a name =”A2”>第二章内容</a>
<a> 标签的两个重要属性
href：它指链接的目标，也就是超链接关联的另一个资源
target：指定使用框架集中的哪个框架来装载另一个资源
属性值有：
_slef：表示自身，默认
_blank：新窗口
_top：顶层框架
_parent：父框架
"name"：指定框架
<base>：标签为页面上的所有链接指定默认地址或默认目标
<base> 必须位于<head></head>标签之间
<a> 标签还可以发送邮件
<a href="mailto:收件人邮箱?cc=抄送邮箱&subject=主题&body=内容">联系我</a>
2.5 列表相关标签
Unorder list<ul>：定义无序列表，该元素只能包含 list item<li>子标签
type属性：可指定列表项目符号类型，属性值有
disc：表示实心圆点 ●
square：表示实现方块 ■
circle：表示空心圆圈 ○
Order list<ol>：定义有序列表，该元素只能包含<li>子标签
type属性：可指定列表项目序号类型，属性值有：
A：表示使用大写英文字母作为序号，如A、B、C 等
a：表示使用小写英文字母作为序号，如a、b、c 等
I：表示使用大写罗马数字作为序号，如I、II、III 等
i：表示使用小写罗马数字作为序号，如i、ii、iii 等
1：表示使用阿拉伯数字作为序号，如1、2、3 等
start属性：可表示列表的起始序号
<ol type="A" start=3>
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
</ol>
C.苹果
D.香蕉
E.柠檬
<li>：定义列表项目，该标签可以包含多种子元素
<dl>：用于定义列表，该标签只能有<dt>，<dd>两种子标签
<dt>：定义列表项的标题
<dd>：定义普通列表项
2.6 图像相关标签
<img>：用于向网页中嵌入一张图片，请注意，从技术上讲<img> 标签并不会在网页中插入图像，而是从网页上链接图像
<img>：标签有两个必需的属性：src 和 alt
src：该属性指定显示图片文件所在位置
alt：该属性指定一段文本，可用于当图片不能显示时显示的提示信息
height：指定图片高度，可是像素值或百分比
width：指定图片宽度，可是像素值或百分比
<map>：创建图像地图，指带有可点击区域的一幅图像
<area>：定义图像地图中的可点击区域
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
<area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
<area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>
<img>：做图片超链接
<a href="xxx.html">
<img border="0" src="xxx.gif" />
</a>
三、表格相关标签
<table>：用于定义表格
<table> 由0或1个<caption>子标签，0到1个<thead>子标签，0到1个<tfoot>子标签，多个<tbody>子标签，多个<tr>子标签组成
---------------------------------------------------
<table>常用的属性如下：
border：指定表格边框的宽度，默认是 0
cellpadding：指定单元格内容和单元格边框的间距，值可是像素或百分比
cellspacing：指定单元格之间的间距，值可是像素或百分比
width：指定表格的宽度，值可是像素或百分比
---------------------------------------------------
<caption>：用于定义表格的标题，必须放在<table></table>之间
---------------------------------------------------
<tr>：定义表格行,该标签只能有<td>或<th>子标签
<td>：定义单元格【列】,放在<tr>中，表示把一行分成N个单元格(N取决于N对<td>)
---------------------------------------------------
<td>常见属性如下：
colspan：指定该单元格跨多少列，属性值是数字
rowspan：指定该单元格横跨的行数
height：指定单元格的高度
width：指定单元格的宽度
---------------------------------------------------
<th>：定义表格页眉的单元格;用法和<td>标签一直,只是显示效果有差别
<tbody>：定义表格的主体，该标签只能包含<tr>子元素，使用<tbody>标签可以将一个表格分成几个独立的部分<tbody>可以讲表格里的一行或多行合并成一组，以后使用Ajax编程的时候常常需要动态修改表格的某几行，此时就得使用<tbody>标签
<thead>：定义表格头,用法和<tbody>一致，功能有点差别
<tfoot>：定义表格脚,用法和<tbody>一致，功能有点差别
---------------------------------------------------
<thead><tbody><tfoot>标签可以对表格的行进行分组，每对<tbody>就是一组。
除此之外，当创建某个表格时，希望拥有一个标题行，以及底部的一个统计行，当打印表格时，表格头和表格脚的数据也会包含在数据的页面上。
无论<thead><tbody><tfoot>三者的先后顺序如何，页面上总会是最上面显示表格头，中间是显示表格体，最下面显示表格脚数据，一般开发中建议从上到下的顺序是<thead>、<tfoot>、<tbody>，好处是即使网速慢没有加载出表格体的数据，但是表格头和表格脚的信息会先显示出来。
四、表单标签
4.1 form 标签
<form>：用于生成输入表单，该标签不可见
在 HTML5 之前，表单控件，如单行文本框、密码框、单选框等都必须放在<form></form>之间
常见属性如下：
action：必填属性，表示当点击 “提交” 按钮时，表单数据提交到哪个地址 <!-- # 表示当前页面 -->
method：指定表单提交时的请求类型，该属性值有get或post，分别用于GET或POST请求，默认是get方式，开发建议使用post方式
enctype：指定表单数据的编码方式，属性有3个值
application/x-www-form-urlencoded：默认，只处理表单控件里的value属性值
multipart/form-data：以二进制流的方式处理表单数据，文件上传时必须使用该属性值
text/plain：不对特殊字符编码，适合于表单的属性值为mailto”URL形式，也就是说该方式适用于表单邮件的发送
get 和 post 这两种最常用的提交方式的区别：
1、get 提交数据会显示在地址栏，对于敏感信息不安全，post 提交不显示在地址栏
2、地址栏中存放的数据是有限，所以 get 方式对提交的数据体积有限制，post 可以提交大体积数据
3、对提交数据的封装方式不同：
get： 将提交数据封装到了消息的前，请求行中
post：将提交的数据封装到消息头后，数据体中
注意：通常表单使用post提交，因为编码方便。
对于Tomcat服务器端，默认的解码方式是ISO8859-1，那么中文会出现乱码。
通过 post 提交，可以使用request.setCharacterEncoding(“GBK”)，来解决乱码问题，该方法只对数据体有效。
如果是 get 提交，request.setCharacterEncoding(“GBK”)该方法解决不了乱码问题，必须先进行ISO8859-1编码，然后再进行GBK的解码。
这种方式虽然对post提交的乱码也通用，但是麻烦，建议表单提交使用post。
4.2 input 标签
<input>：表单控件标签里功能最丰富的，用于接收用户输入的信息
其中的type属性指定输入标签的类型：
单行文本框 ：type = text，输入的文本信息直接显示在框中
密码输入框 ：type = password，输入的文本以圆点形式显示
单选框 ：type = radio，如：性别选择
复选框 ：type = checkbox，如：多个兴趣选择
隐藏域 ：type = hidden，在页面上不可见，但在提交的时候会一起提交数据，用于隐式向后台传输一个数据
提交按钮 ：type = submit，用于提交表单中的数据内容
重置按钮 ：type = reset，将表单中填写的内容均设置为初始值
无动作按钮 ：type = button，可使用javascript为其自定义事件
文件上传域 ：type = file，会生成一个文本框和一个浏览按钮
图像域 ：type = image，它可以替代submit按钮，即图像提交按钮
<input> 标签其他常见属性：
name ：指定input标签的名字，没有设置name属性的标签不能提交数据
value ：指定input标签的初始值
checked ：设置单选框，复选框的初始状态是否选中
disable ：设置input标签加载时禁用此标签
maxlength ：文本框输入最大字符数，属性值是数字
readonly ：指定文本框内值不允许直接修改
required="required"：将表单内容设置为必填
4.3 label 标签
<label>： 用于在表单标签中定义标签，可对表单控件进行提示说明
使用<label>的作用是：当用户点击<label>所包含的文本时，该标签关联的表单控件就会获得焦点
让标签和表单控件相关联的两种方式：
1、隐式使用for属性：指定<lable>标签的for属性值为所关联表单控件的id属性值
2、显示关联：将表单控件放在<lable></label>之间(IE支持不好，不推荐)
<form action="">
<!-- 隐式关联 -->
<label for="username">用户名:</label>
<input id="username" name="username" type="text"/><br/>
<!-- 显式关联 -->
<label>密 码:<input name="pwd" type="password"/><br/></label>
</form>
<label> 标签为 input 元素定义标注（标记）
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。
如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
4.4 select 标签
<seclet>和<option>一般同时使用：
<select name="country" >
<option value="">---请选择---</option>
<option value="zh" selected="selected">中国</option>
<option value="en">英国---</option>
</select>
multiple="multiple" 表示可以选中多个
size="2" 表示显示几个，（浏览器之间有差异）
4.5 textarea 标签
文本域标签
<textarea cols="50" rows="5">
要显示的内容
</textarea>
五、框架
我们在浏览网页的时候，常常会看到类似如下的页面布局，就是把整个网页分成了好些模块，在这里我们可以使用框架集和框架来完成该样式，其实框架集中每一个框架中显示的内容就是映射到的一个html页面。
<frameset>标签【框架设置】【用框架<frameset>b标签，就不需要用<body>】
属性 rows 表示要分成几行,一般用”,”隔开，其中“*”表示占据剩下所有的区域
属性 clos 表示要分成几列,一般用”,”隔开，其中“*”表示占据剩下所有的区域
<frame>标签
属性 scrolling="yes" 表示是否要显示滚动条，滚动条是竖着的
属性 noresize="noresize" 表示不能拖动和缩小
< html>
< head>
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
< title> Insert title here </title >
</ head>
< frameset rows ="10%,*,5%" > 【分成3行】
< frame src ="top.html" > 【第1行】
< frameset cols ="20%,*" > 【第2行】
< frame src ="left.html" > 【分成2列】
< frame src ="right.html" name= "main" > 【id，此处用于指定主视窗】
</ frameset>
< frame src ="bottom.html" > 【第3行】
</ frameset>
< html>
< head>
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
< title> Insert title here </title >
</ head>
< body>
功能区域:
< br />
< ul>
< li>< a href = "Java.html" target ="main" > Java</ a >【指定本页面在哪个id打开】
< li>< a href = "Android.html" target ="main" > Android</ a >
< li>< a href = "iOS.html" target ="main" > iOS</ a >
</ ul>
</ body>
</ html>
<noframes>标签
注意位置：
<noframes>
<body>
很抱歉，阁下使用的浏览器不支持框架功能，请转用新的浏览器。
</body>
</noframe>