第一章：html
本章主干知识点：
1、最基本的html文件的格式是什么？
2、常用标签：font、列表（ul、ol、li）、img
3、表格标签：table、tr、td；表格的合并。
4、超链接、新窗口中打开的超链接、超链接锚点。
5、框架：frameset
6、表单：input（文本、radio、checkbox、隐藏字段、submit）；select下拉列表；textarea；label；
7、div和span的区别。
------------------------------------------------------------------------------------------------
理解什么是HTML
了解HTML的发展史
掌握HTML编程规范
掌握HTML常用标签
HTML基本介绍
HTML(Hyper Text Markup Language)
-超文本标记语言
-由浏览器解释执行
-编写的超文本文档称为网页
XHTML
-HTML升级到XML的过渡产品
-完全兼容HTML4.01
-并且具有XML的语法
HTML标签规范
HTML是通过标签来定义的语言，代码都是由标签组成。
HTML代码不区分大小写。
HTML代码由<HTML>开始</HTML>结束，里面有头部分<HEAD></HEAD>和体部分<BODY></BODY>两部分组成。
头部分是给HTML页面增加一些辅助或属性信息，它里面的内容会最先加载。
体部分是真正存放页面数据的地方。
多数标签都是开始标签和结束标签，其中个别标签只有单一功能，或者没有要修饰的内容，可以在开始标签内以 "/" 结束。
双标记标签：<html></Html>
单标记标签：<br/> 没有要
想要对被标签修饰内容进行更丰富的操作，就用到标签中的属性，通过对属性值的改变，增加了更多的效果选择。
格式：<标签名 属性名="属性值">数据内容</标签名>
HTML开发工具
可以使用专业的 HTML 编辑器来编辑 HTML：
•Adobe Dreamweaver
•Microsoft Expression Web
•CoffeeCup HTML Editor
不过对于初学者，我们推荐使用文本编辑器来学习 HTML，比如Editplus，Notepad++
------------------------------------------------------------------------------------------------------
HTML常用标签--字体
字体标签 <font>
例：<font color="red">HTML字体标签</font>,常见属性size color，还有其它属性，比如：face
标题标签 <H1></H1>...<H6></H6>
特殊字符
如果要在网页上显示一些特殊符号，比如< > & 等。因为这些符号在代码中会被浏览器识别并解释，所以用一些特殊的方式来表示。
| < | < | " | " | | 空格 |
| > | > | ® | ® | ™ | ™ |
| & | & | © | © |
-------------------------------------------------------------------------------------------
列表标签
无序列表
<ul> <!-- 符号标签（○●■）-->
<li>游戏</li> <li>部门</li>
</ul>
注：ul中 type 属性有三个值 [ circle|disc|square ]，用于规定列表的项目符号， 但不赞成使用。
有序列表
<ol> <!-- 数字标签（a A 1 i I）-->
<li>游戏</li>
<li>部门</li>
</ol>
注：ol中 type 属性同样不赞成使用。
如果想做出效果更好的列表，如：黑色圆点用图片表示，就用到CSS。
定义列表（definition list）
<dl>
<dt>游戏</dt>
<dd>穿越火线</dd>
<dd>英雄联盟</dd>
<dt>部门</dt>
<dd>研发部门</dd>
<dd>销售部门</dd>
</dl>
-----------------------------------------------------------------------------------------------
图像标签
图像标签 <img>
例：<img src="1.jpg"
border="3px"
title="鼠标移动上提示文字"
alt="图片说明文字"
width="500px"
height="200px"/>
src：图像URL地址；border用来设置图像的边框；alt:用来为图像定义一串预备的可替换的文本,不能超过1024字符。
--------------------------------------------------------------------------------------------------------
表格标签
表格标签 <table>
用于格式化数据。
例：<table border width cellpadding cellspacing>
<caption>标题</caption>
<thead>
<th>姓名</th> <!--对表格的第一行或者第一列进行 -->
<th>年龄</th> <!--格式化，就是粗体居中显示 -->
</thead>
<tbody>
<tr> <!--行标签 -->
<td>张三</td><td>20</td> <!--单元格标签 -->
</tr>
<tr><td>李四</td><td>25</td></tr>
</tbody>
</table>
<table>常用属性
caption：标题
border：框线粗细 0代表无
width：宽度 接收整数值、百分数
cellpadding：单元格内容与边框的距离
cellspacing：单元格与相邻单元格之间的距离
<td>常用属性
colspan：合并同行单元格
rowspan：合并同列单元格
<th>默认居中，加粗
每个表格可以有一个表头、一个表尾和一个或多个表体 （即正文）
•THEAD
•TBODY
•TFOOT
TBODY 可以控制表格分行下载，从而提高下载速度（网页的打开是先表格的的内容全部下载完毕后，才显示出来，分行下载可以先显示部分内容，这样会减少用户等待时间）。
----------------------------------------------------------------------------------------------------------
超链接标签
超链接标签 <a>
超链接(Hyperlink)可以看做是一个“热点”，它可以从当前Web页定义的位置跳转到其他位置，包括当前页的某个位置、Internet、本地硬盘或局域网上的其他文件，甚至跳转到声音、图片等多媒体文件。浏览Web页是超链接最普遍的一种应用，通过超链接还可以获得不同形态的服务，如文件传输、资料查询、电子函件、远程访问等等,通过超链接实现这些功能就会很方便。
用法一：超链接 <a href="">
<a href="http://www.163.com" target="_blank">网易</a>
href：要打开资源的路径，可以是URL，也可以是本地文件。
target：指定在哪个窗口或者帧中打开。有四个值：
•_blank：在一个新开的空白窗口中打开链接
•_parent：在父级窗口中打开
•_self：在自身页面中打开链接（默认）
•_top：在整个浏览器的最顶端(前端)开始打开链接
用法二：定位标记 <a name="">
链接到同一文档中的特定位置叫做定位标记（锚链接）。一般在本页面中使用，当网页内容过长，定位标记会比拖动滚动条方便快捷。
注：定位标记要和超链接结合使用才有效。
示例：
<a name= "标记" >标记位置</a>
<p>…….<!--很多空行以制造网页过长的效果 -->
<a href= "#标记">返回标记位置</a>
注释：使用定位标记时一定在href值的开始加入#标记名
用法三：定义标记点 回到顶端
-------------------------------------------------------------------------------------
HTML常用标签--框架
所谓框架便是网页画面分成几个框窗，框窗里可以集成很多Url(链接地址),方便用户浏览,查看.特别是早期的公司门户网站基本都是这种frame框架。
<html>
<frameset rows="20%,*">
<frame src="top.html">
<frameset cols="25%,75%">
<frame src="left.html">
<frame src="right.html">
</frameset>
</frameset>
</html>
所有框架标记 要放在一个总起的 html 档，这个档案只记录了该框架 如何划分，不会显示任何资料，所以不必放入 <BODY> 标记。
<frame>常用属性 src="top.html"：设定此框窗中要显示的网页档案名称，每个框窗一定要对应著一个网页档案。 name="top"：设定这个框窗的名称，这样才能指定框架来作连结，必须但任意命名。 scrolling="auto"：设定是否要显示卷轴，YES 表示要显示卷轴，NO 表示无论如何都不要显示，AUTO是视情况显示。 noresize：设定不让使用者可以改变这个框框的大小，亦没有设定此参数，使用者可以很随意地拉动框架，改变其大小。
<NOFRAMES> 当使用的浏览器太旧，不支援框架这个功能时，他看到的将会是一片空白。为了避免这种情况，可使用 <NOFRAMES> 这个标记，当使用者的浏览器看不到框架时，他就会看到 <NOFRAMES> 与 </NOFRAMES> 之间的提示内容，而不是一片空白。 <frameset rows="80,*"> <noframes> <body> 很抱歉，您使用的浏览器不支持框架功能，请转用新的浏览器。 </body> </noframes> <frame name="top" src="a.html"> <frame name="bottom" src="b.html"> </frameset>
<IFRAME> 它的作用是在一页网页中间插入一个框窗以显示另一个链接资源。它是一个围堵标记，但围着的字句只有在浏览器不支持 iframe 标记时才会显示。 <body> <iframe src="a.html"> 如果您看到该文字，说明您的浏览器不支持IFRAME标签。 </iframe> </body>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
表单 <form>
action:表单提交请求的地址
method:表单请求参数提交方式，默认get
get:
post:
表单标签是最常用的标签，主要用于采集和提交用户输入的信息，与服务器端进行交互。
<INPUT>标签：接受用户输入信息 <input type="text" value="" /> type标签指定输入标签的类型，共有10个值：
文本框text、
密码框 password、
单选框radio :单选按钮必须指定相同的name属性（和提供value值）
复选框checkbox :复选按钮必须指定相同的name属性（和提供value值）
隐藏字段hidden :该属性值可以让input标签在页面内隐藏，但它的name value同样随着表单提交 。
提交按钮submit、重置按钮reset ：
按钮button、文件上传file:
图像 image.
<SELECT>标签：
定义一个选择列表
<select name="city">
<option value="1">北京</option>
<option value="2">郑州</option>
</select>
注：<option>：定义下拉列表中的选项，属性 selected 没有属性值 加在其中一个子项上，该子项就变成默认被选中项。
<TEXTAREA>标签：
多行文本框
<textarea rows="3" rols="20"> </textarea>
cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。
<label>标签：
<label for="male">Male</label> <input type="radio" name="sex" id="male" />
<label for="female">Female</label> <input type="radio" name="sex" id="female" />
label 元素不会向用户呈现任何特殊效果。
不过，它为鼠标用户改进了可用性。
如果您在 label 元素内点击文本，就会触发此控件。for的属性值指向绑定表单元素的 id 值。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
块元素
大多数 HTML 元素被定义为块级元素或内联元素。
-块级元素 块级元素在浏览器显示时，通常会以新行来开始（和结束）。自动换行
例子：<h1>, <p>, <ul>, <table>
-内联元素 内联元素在显示时通常不会以新行开始。
例子：<b>, <td>, <a>, <img>,<input>
<DIV> <SPAN>
DIV
HTML DIV 是块级元素，它是可用于组合其他HTML元素的容器。 默认占满一行
DIV元素没有特定的含义。与CSS一起使用，可用于对大的内容快设置样式属性。
<div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。
使用 <table> 元素进行文档布局不是表格的正确用法。
<table> 元素的作用是显示表格化的数据。
SPAN
HTML <span> 元素是内联元素，可用作文本的容器。默认匹配文本长度
<span> 元素也没有特定的含义，当与 CSS 一同使用时，可用于为部分文本设置样式属性。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
HTML语法--头标签
title：指定浏览器标题栏显示的内容
base：标签为页面上的所有链接规定默认地址或默认目标
href属性：规定页面中所有相对链接的基准 URL（不常用）
target属性：指定打开超链接的方式
<base target="_blank" href="http://www.cnblogs.com/" />
meta：可提供有关页面的元信息
http-equiv属性：把 content 属性关联到 HTTP 头部
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta http-equiv="Refresh" content="3;url=http://www.baidu.com"/>
content属性：定义与 http-equiv 或 name 属性相关的元信息
name属性：把 content 属性关联到一个名称
link：
rel属性：目标文档与当前文档的关系
type属性：文档类型
href属性：文档地址
<link type="text/css" rel="stylesheet" href="site.css">