相关知识了解：
WWW：(world wide web)：万维网，是基于Internet的信息服务系统，官方定义为"WWW is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents",简而言之，WWW是一个以Internet为基础的计算机网络，它允许用户在一台计算机上通过Internet访问另一台计算机上的信息。从技术上讲，万维网是Internet上那些支持WWW协议和超文本传送协议的客户机与服务器的集合，通过它可以访问世界各地的超文本文件，包括文字， 图形，声音，动画，资料库以及各种内容。
Internet:是由计算机连接起来的物理网络，它们依靠标准和固定的规则进行通信。
W3C:(world wide web consortium)：万维网联盟，创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南，如广为业界采用的超文本标记语言（标准通用标记语言下的一个应用）、可扩展标记语言（标准通用标记语言下的一个子集）
ip地址：HTTP TCP/IP IP地址是指互联网协议地址（英语：Internet Protocol Address，又译为网际协议地址），是IP Address的缩写。IP地址是IP协议提供的一种 统一的地址格式，它为互联网上的每一个网络和每一台主机分配一个逻辑地址。例如：192.168.189.1
域名：IP地址是Internet主机的作为路由寻址用的数字型标识，人不容易记忆。因而产生了域名（domain name）这一种字符型标识。
商务应用类： 电子商务 （天猫，京东）、 人才招聘 （赶集网，智联招聘）、 网络教育 （极客学院）、第三方支付 （支付宝）
其他类： 由于"互联网+"概念的提出，互联网将渗入到医疗，教育，农业等传统行业
了解HTML：
分析简单的HTML结构
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
</body>
</html>
HTML1.0~2.0 1989~1991 概念不明确
HTML3 1995 浏览器战争年代，Netscape和Microsoft都在试图争霸世界
HTML4 1998 浏览器大战结束，万维网协会(W3C)解救我们，他们的计划是创建一个唯一的HTML标准。计划的关键是将HTML的结构和表现分解为两种语言， 一种语言用于实现结构（HTML）一种语言用于表现（CSS）.
HTML4.01 1999 这段日子过得很惬意，HTML4.01在1999年闪亮登场，称为接下来十年中HTML"必备"版本
XHTML1.0 2001 正当我们感觉安逸的时候一个新兴事物引起所有人注意，即XML。它让HTML开始心烦意乱，最终两者结合，XHTML1.0诞生。XHTML承诺，由于它的 严格，再加上它提供的一些新方法，只要遵循这个标准，WEB的所有争端将就此平息。但是，大多数人都很讨厌XHTML，Web开发人员对HTML的灵活 性更感兴趣，而不是XHTML的严格性。
HTML5 由于没有得到大家的祝福，这场婚姻的结局并不好，很快被HTML的新版本取代，即HTML5.它支持HTML4.01标准的大部分特性，还提供一些新特性。基于一些新特性， 如支持类似博客的元素，新的视频和图形功能，以及一大堆用来构建web应用的功能，HTML5注定成为大家公认的标准。
① 可以使用.html与.htm作为html文件的后缀名（扩展名）
② 可以使用任意文本编辑器创建HTML
2）注释
标签：
① 标签用来标记内容。
② 标签使用"<",">"包围。
③标签分为成对标签和单标签
元素：一个元素通常是由一个开始标签，内容，其他元素以及一个结束标签组成的
属性：与元素相关的特性称为属性，属性由键值对组成。
<元素名 属性名="值1" 属性名="值2"></元素名>
大多数元素都可以使用的属性。
id 唯一标识
class 标识一类元素
style 样式
title 描述信息
规范：元素名和属性名都不区分大小写。
4）文档结构
文档类型声明: 版本和文档类型声明，版本和文档类型声明是对应的，文档类型使用DTD来指定
1）严格的文档类型
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
2）宽松的文档类型(过渡的文档类型)
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
3）frameset框架文档类型
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
4）html5文档类型
<!DOCTYPE html>
html：标识HTML文档
head : 标识HTML文档的头部，可以包含该文档的标题，文档使用的脚本，样式定义，元数据等信息
body：标识HTML文档的体部，body中的内容可以显示到浏览器中。
例如：
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>标题</title>
</head>
<body>
</body>
</html>
5）meta元素
定义文档元数据
1，定义元数据关键字
<meta name="Author" content="briup">
<meta name="Copyright" content="版权信息">
<meta name="Description" content="描述信息">
<meta name="keywords" lang="zh-cn" content="精品图书">
<meta name="keywords" lang="en-us" content="good book">
2，报头规范
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
将会创建如下的消息头
Content-Type:text/html;charset=utf-8
<meta http-equiv="Content-Languaga" content="zh-CN">
将会创建如下的消息头
Content-Language:zh-CN
<meta http-equiv="Refresh" content="n;url=http://yourlink">
定时让网页在指定的时间n内跳转到页面http://yourlink
<meta http-equiv="Pragma" content="no-cache">
设置网页禁用浏览器缓存
Pragma: no-cache可以应用到http 1.0 和http 1.1
将会创建如下的消息头：Pragma:no-cache
<meta http-equiv="Cache-Control" content="no-cache">
设置网页禁用浏览器缓存
Cache-Control: no-cache只能应用于http 1.1.
颜色由红(R)、绿(G)、蓝(B)组成，每个颜色的最低值为0(十六进制为00)，最高值为255(十六进制为FF)。十六进制值的写法为#号后跟三个或六个十六进制字符。
3位十六进制 6位16进制 rgb 颜色
#000 #000000 rgb(0,0,0) 黑色 black
#F00 #FF0000 rgb(255,0,0) 红色 red
#FFF #FFFFFF rgb(255,255,255) 白色 white
2）大小 （ px 像素）
HTML 页面结构 没穿衣服（素颜）
CSS 页面表现 化妆
JS 页面动作 跳舞
<div></div>
特点：独占一行
h1~h6 标题
特点: ①有字体大小的设置
②文本有加粗强调设置
③上下文之间有较大间距
p 段落
特点：
①独占一行
②上下文之间具有距离
ul li (无序列表)
特点：
①配合使用
② ul li都独占一行空间
③ ul 上下文之间有很大空间
④ li与列表的样式显示(默认点状)，并且由文本缩进
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
ol li (有序列表)
<ol>
<li>列表1</li>
<li>列表2</li>
</ol>
dl dt dd（自定义列表）
特点：
①dl dt dd独占一行空间
②dl上下文之间有很大欧诺关键
③dd有文本缩进
<dl>
<dt>列表标题</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
<dd>列表内容</dd>
</dl>
2)行内（内联inline）标签
span
特点：①最干净的内联标签（没有任何修饰）
②不独占一行
a 超链接
特点:
①不独占一行
②点击可以发生跳转（或进行对应操作），语法颜色为绿色
③文本具有颜色，具有下划线，指向后光标为手型，有状态的色彩提示
文本修饰标签
<u>下划线修饰</u>
<i>斜体修饰</i>
<b>加粗</b>
<em>强调</em>
<strong>加粗</strong>
<s>删除线</s>
<sup>上标</sup>
<sub>下标</sub>
img
src="图片地址"
绝对路径
http://www.baidu.com/car.jpg
http://www.briup.com/demo/one.html
<img src="http://www.baidu.com/car.jpg">
相对路径 one.html ../a.jpg
绝对路径： 每个网页都有一个唯一的地址，称为URI 统一资源定位符，也称为该网页的绝对路径。如 http://ip:port/目录/文件名
相对路径： 相对于当前文档所在的路径 。如① ../imgs/a.jpg ②./imgs/a.jpg ③imgs/a.jpg
本地连接： file:///d:/html/index.html 。 超链接中不允许写本地连接
服务器路径： http://localhost:8888/test/index.html
1）a 超链接
连接状态： ①未访问 ②悬停 ③点击未松开 ④点击后
<a href="">内容显示</a>
属性：
href 定义连接的目标URI
绝对路径：http://www.baidu.com
相对路径：b.html
邮件地址：mailto:[email protected]
锚点 ：#mao
空连接 ：javascript:void(0);
target 定义连接的目标窗口
_blank
_parent
_self
_top
自定义目标名
title 定义连接的提示信息
type 连接到任何类型的文件以供下载
<a href="../docs/myWord.doc" type="application/msword">报名表</a>
锚点：
锚点可以让用户在文档中设置标记，这些标记通常放在文档的特定主题处或顶部，然后创建到这些锚点的连接，指向网页中的特点位置。
例如：
<h2 id="section1">1,什么是万维网</h2>
<p>万维网，是基于Internet的信息服务系统，官方定义为"WWW is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents",简而言之，WWW是一个以Internet为基础的计算机网络，它允许用户在一台计算机上通过 Internet访问另一台计算机上的信...</p>
<a href="#section1">查看第一部分内容</a>
2）link 文档关系连接
只能出现在head标签中，定义了当前文档和另一个资源之间的联系。通常用于链接到外部样式表<link rel="stylesheet" href="style.css" type="text/css">
属性：
href： 定义关系链接地址
rel: 定义当前文档与所连接文档之间的关系。
type: 文档类型
3）base 基准链接地址
设置页面中所有文档相对路径相对的基准URI。如果设定了基准链接地址，当前页面中的所有相对路径都基于该路径
<base href="http://localhost:8888/test/">
4）图片
1，图片类型
适合在网站上进行快速查看的图片格式
GIF （graphics interchange format,图形交换格式）可以将背景设置为透明的，图片最多使用256中颜色，最适合显示色调不连续或具有大面积单一 颜色的图片，如导航条，按钮，图标等。由于GIF图片中存储的颜色信息较少，因此占用空间极小，使用起来更方便。
JPEG（joint photographic experts group,联合图像专家组）最适合摄影或连续色调图像的彩色照片，jpeg文件可以包含数百万中颜色，保证图片不失真。JPEG图片无法拥有透明的背景
PNG（portable network graphics,可移植网络图形）PNG可以包含256种以上的颜色，并可以具有透明的背景。PNG文件可保留所有原始层，矢量，灰度， 颜色和效果信息，并且在任何时候所有元素都是可以编辑的。
2，链入图片文字
<img src="" alt="">
属性：
src : 图片的源地址
title : 对图片的文字说明，当用户把鼠标放在图片上稍作停留，alt属性的值就会以浮动的形式显示出来。
width : 图片的宽度
height : 图片的高度
alt : 当图片文件找不到的时候显示的文本信息
border ：图片的边框
align ：图片和文字的对齐
当align值为left时，图片靠在最左方，周围的文字显示在右侧上方
当align值为right时，图片靠在最右方，周围的文字显示在左侧上方
当align值为top时，图片靠在最上方，周围的文字显示在上方
当align值为bottom时，图片靠在最上方，周围的文字显示在下方
hspace ：图片的水平间距
vspace ：图片的垂直间距
为图片添加链接
<a href=""><img src="" alt=""></a>
2，表格
1）table 定义表格
属性：
border: 设置表格边框线条宽度
align: 表格在页面中对齐
width: 设置表格宽度
bgcolor:表格背景色
cellspacing: 单元格之间的间距
cellpadding: 单元格边沿与其内容之间的距离
frame: 表格中边框线的显示
void 不显示边框
above 上边框
below 下边框
hsides 上下边框
vsides 左右边框
lhs 左边框
rhs 右边框
box 四个边框
border 四个边框
rules: 表格中分割线的显示
none 无分割线显示
groups 仅在列分组间和行分组间显示分割线
rows 仅在行间显示分割线
cols 仅在列间显示分割线
th 定义单元格
td 定义内容单元格
属性：
colspan 跨列(合并列)
rowspan 跨行(合并行)
align 单元格内容水平对齐
left,center,right, justify 两端对齐
valign 单元格内容垂直对齐
top,middle,bottom, baseline 基准
对齐的继承
1）内容自身的设置具有最高优先级
2）th,td元素的对齐设置
3）tr,thead,tfoot,tbody元素的对齐设置
4）table元素的对齐设置具有全局性
thead 表格头
tbody 表格主体
tfoot 表格尾
3，框架文档
一个框架文档由四部分组成，文档声明，html元素，head元素，frameset元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
1）frameset 框架集
rows：用来定义将框架水平分隔为子框架的数量和这些子框架的宽度
cols：用来定义将框架垂直分隔为子框架的数量和这些子框架的高度。
<frameset rows="10%,90%">
<frame src="">
<frameset cols="15%,85%">
<frame src="">
<frame src="">
</frameset>
属性
src: 设置框架的初始内容
frameborder:框架窗口边框线
marginwidth: 在框架的边缘和边框的内容之间可以出现的空白（左右边）
marginheight: 在框架的边缘和边框的内容之间可以出现的空白（上下边）
srolling: 框架视图的滚动条设置
auto 必要时提供，默认值
yes 始终提供滚动条
no 不提供滚动条
noresize: 改变框架窗口大小
name: 框架名称，作为该框架的标识
注意之前说的超链接<a>的target属性
target: 框架目标
_blank -- 在新窗口中打开链接
_parent -- 在父窗体中打开链接
_self -- 在当前窗体打开链接,此为默认值
_top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)
一个对应frame名称 -- 在对应框架页中打开
注意 一般_parent和_top在iframe的嵌套中才会起作用
3）iframe 内联框架
iframe允许用户在一个文本中插入一个框架，iframe元素可以使用frame元素的所有属性，实现功能也相同。
<body>
<iframe src="" frameborder="0"></iframe>
</body>
1.body元素中不能出现frameSet元素
2.frame不能脱离frameSet单独使用
3.iframe基本上放在页面的任何地方都行
一般frame和frameSet都是配合使用的,而iframe则是会单独使用
4，表单
主要用于收集来自用户的信息，并将收集的信息发送给服务器端处理程序处理。表单是客户端和服务器端传递数据的桥梁，是用于实现与服务器互动的最主要方式。
1）form表单控件的容器
<form action="">
</form>
属性
action 设定处理表单数据URI的地址
method 设定数据传送到服务器的方式
get 将输入的数据追加到action地址后面
post将输入的数据保存到HTTP协议的报文中
name 设定表单的名称
enctype 设定表单数据的内容类型
application/x-www-form-urlencoded 在发送前编码所有字符（默认）
编码方式：
1）控件的名称和值都被转义，空白字符使用【+】替换，保留的字符一般都是用来实现特定的目的，例如（: / ? ; @ = & 等）。非数字和字母
的字符使用%HH（这里HH表示两个十六进制数字，代表该字符的ASCII码）进行转换，
2）控件的"名称/值"对按照它们在文档数据流中出现的顺序列出来。"名称""值"使用"="分割，两个"名称/值"之间使用&隔开。
multipart/form-data 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
数据分成多个部分，每个部分代表一个结构良好的控件，作为文档数据流的一部分，每一个部分都按照它们在文档数据流中出现的顺序依次发送到
服务器端，并且，每一部分的边界不会出现在数据中。每一部分有一个content-desposition标题头，它的值的格式是：
Content-Disposition:form-data;name="myControl"
text/plain 空格转换为 "+" 加号，但不对特殊字符编码。
accept-charset 设置服务器端可以处理的字符编码
2）input 基本表单控件
<input type="text">
属性：type 控件类型
text 单行文本框
textarea 多行文本框
password 密码框
checkbox 复选框
radio 单选按钮
submit 提交按钮
reset 重置按钮
file 文件
hidden 隐藏域
image 图像按钮
button 普通按钮
name：控件名称，这个名称将与控件的当前值形参"名称/值"对 一同随表单提交
value：用于设定初始化，可选。
checked ：单选框，复选框默认选中属性
size：当前控件的初始宽度，这个宽度以像素为单位。除非控件类型是text,password，这时宽度是整数值，表示字符的数目
maxlength:指定可以输入的字符的最大值。适用于控件类型为text,password。
3）button 按钮控件
<button></button>
属性
name 控件名称
value 控件初始值
type 控件类型
button 普通按钮
submit 提交按钮
reset 重置按钮
图片按钮:<button><img src="" alt=""></button>
4）select 下拉列表
<select name="" id="">
<option value=""></option>
<option value=""></option>
</select>
属性
name: 控件名称
size: 列表框中行的显示数量
multiple: 是否允许多选
如果select元素不包含属性size和属性multiple时，表单类型显示为菜单
如果使用了属性size和属性multiple中的任意一个，则表单类型显示为列表框,如果有multiple的话,就表示可以多选（按住ctrl可以多选）
selected: 默认选中
option 下拉列表选项
属性：
value: 定义控件的初始值。提交表单时，初始值会被提交给服务器。
optgroup 分组选项
<select name="" id="">
<optgroup label="大洋">
<option value="">太平洋</option>
<option value="">大西洋</option>
<option value="">印度洋</option>
</optgroup>
<optgroup label="大海">
<option value="">东海</option>
<option value="">南海</option>
<option value="">渤海</option>
</optgroup>
</select>
4）textarea 多行文本框
属性
name: 控件名称
rows: 定义文本框行数
cols: 定义文本框列数
warp: 是否自动换行。
off 不自动换行
hard自动硬回车换行，换行元素一同被传送到服务器中
soft自动软回车换行，换行元素不会传到服务器中
5）label 为表单控件定义标签
一些表单控件内建有标签，当内建有标签时，一般使用value属性的值作为标签，而另外一些表单控件没有标签，则直接使用文本作为标签来说明控件的意义。
每个label元素都要和表单控件关联到一起
<table>
<tr>
<td><label for="username">用户名：</label></td>
<td><input type="text" id="username" name="username"></td>
</tr>
<tr>
<td><label for="passwold">密码：</label></td>
<td><input type="password" id="password" name="password"></td>
</tr>
</table>
6）fieldset 为表单添加结构
一般与legend元素配合使用，fieldset元素可以包含其他的表单控件，在这些表单控件周围画一个方框，而legend元素可以显示一个标签说明被包含的这些
表单控件。
7）其他控件特性
disabled 禁用
支持该属性的控件：button,input,optgroup,option,select,textarea
1）禁止的元素不接受节点
2）禁止的控件的值不与表单一起被提交
readonly 只读
支持该属性的控件：input,textarea
1）可以接受焦点，但是不能被用户修改
2）只读元素的值可以与表单一起被提交。
1 WWW、Internet、W3C、ip、域名
WWW：(world wide web)：万维网，是基于Internet的信息服务系统，官方定义为"WWW is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents",简而言之，WWW是一个以Internet为基础的计算机网络，它允许用户在一台计算机上通过Internet访问另一台计算机上的信息。从技术上讲，万维网是Internet上那些支持WWW协议和超文本传送协议的客户机与服务器的集合，通过它可以访问世界各地的超文本文件，包括文字， 图形，声音，动画，资料库以及各种内容。
Internet:是由计算机连接起来的物理网络，它们依靠标准和固定的规则进行通信。
W3C:(world wide web consortium)：万维网联盟，创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南，如广为业界采用的超文本标记语言（标准通用标记语言下的一个应用）、可扩展标记语言（标准通用标记语言下的一个子集）
ip地址：HTTP TCP/IP IP地址是指互联网协议地址（英语：Internet Protocol Address，又译为网际协议地址），是IP Address的缩写。IP地址是IP协议提供的一种 统一的地址格式，它为互联网上的每一个网络和每一台主机分配一个逻辑地址。例如：192.168.189.1
域名：IP地址是Internet主机的作为路由寻址用的数字型标识，人不容易记忆。因而产生了域名（domain name）这一种字符型标识。
com:商业组织公司 edu:教研机构 gov:政府部门 net:网络服务商
org:非盈利组织 cn:中国 jp:日本 uk:英国
2 网站(B/S架构项目)
是构成web的基础，指在万维网上根据一定的规则，使用html,css,java等语言制作的用于展示特定内容的相关网页的集合。
3 网页
是网站中的一个页面，是构成网站的基础，网页是纯文本文件，但是具有一定的格式，也就是HTML语言定义的格式，由于HTML被翻译为超文本标记语言，因此网页也被称为超文本文件，用于展示文本，图片，影音等内容。
4 互联网产业分类
行业服务类： 新闻资讯（网易）、 信息搜索（百度，Google）、 邮箱 （163）、 购票类 （12306）商务应用类： 电子商务 （天猫，京东）、 人才招聘 （赶集网，智联招聘）、 网络教育 （极客学院）、第三方支付 （支付宝）
其他类： 由于"互联网+"概念的提出，互联网将渗入到医疗，教育，农业等传统行业
了解HTML：
1 html概念
超文本标记语言，是一种解释执行的文本类标记语言，是Internet上用于编写网页的主要语言。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 html也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示 其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记不会指出其错误， 且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。分析简单的HTML结构
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
</body>
</html>
2 html发展历程
版本 年份HTML1.0~2.0 1989~1991 概念不明确
HTML3 1995 浏览器战争年代，Netscape和Microsoft都在试图争霸世界
HTML4 1998 浏览器大战结束，万维网协会(W3C)解救我们，他们的计划是创建一个唯一的HTML标准。计划的关键是将HTML的结构和表现分解为两种语言， 一种语言用于实现结构（HTML）一种语言用于表现（CSS）.
HTML4.01 1999 这段日子过得很惬意，HTML4.01在1999年闪亮登场，称为接下来十年中HTML"必备"版本
XHTML1.0 2001 正当我们感觉安逸的时候一个新兴事物引起所有人注意，即XML。它让HTML开始心烦意乱，最终两者结合，XHTML1.0诞生。XHTML承诺，由于它的 严格，再加上它提供的一些新方法，只要遵循这个标准，WEB的所有争端将就此平息。但是，大多数人都很讨厌XHTML，Web开发人员对HTML的灵活 性更感兴趣，而不是XHTML的严格性。
HTML5 由于没有得到大家的祝福，这场婚姻的结局并不好，很快被HTML的新版本取代，即HTML5.它支持HTML4.01标准的大部分特性，还提供一些新特性。基于一些新特性， 如支持类似博客的元素，新的视频和图形功能，以及一大堆用来构建web应用的功能，HTML5注定成为大家公认的标准。
3 基本语法
1）特性① 可以使用.html与.htm作为html文件的后缀名（扩展名）
② 可以使用任意文本编辑器创建HTML
2）注释
<!-- 注释内容 -->
标签：
① 标签用来标记内容。
② 标签使用"<",">"包围。
③标签分为成对标签和单标签
元素：一个元素通常是由一个开始标签，内容，其他元素以及一个结束标签组成的
属性：与元素相关的特性称为属性，属性由键值对组成。
<元素名 属性名="值1" 属性名="值2"></元素名>
大多数元素都可以使用的属性。
id 唯一标识
class 标识一类元素
style 样式
title 描述信息
规范：元素名和属性名都不区分大小写。
4）文档结构
文档类型声明: 版本和文档类型声明，版本和文档类型声明是对应的，文档类型使用DTD来指定
1）严格的文档类型
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
2）宽松的文档类型(过渡的文档类型)
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
3）frameset框架文档类型
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
4）html5文档类型
<!DOCTYPE html>
html：标识HTML文档
head : 标识HTML文档的头部，可以包含该文档的标题，文档使用的脚本，样式定义，元数据等信息
body：标识HTML文档的体部，body中的内容可以显示到浏览器中。
例如：
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>标题</title>
</head>
<body>
</body>
</html>
5）meta元素
定义文档元数据
1，定义元数据关键字
<meta name="Author" content="briup">
<meta name="Copyright" content="版权信息">
<meta name="Description" content="描述信息">
<meta name="keywords" lang="zh-cn" content="精品图书">
<meta name="keywords" lang="en-us" content="good book">
2，报头规范
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
将会创建如下的消息头
Content-Type:text/html;charset=utf-8
<meta http-equiv="Content-Languaga" content="zh-CN">
将会创建如下的消息头
Content-Language:zh-CN
<meta http-equiv="Refresh" content="n;url=http://yourlink">
定时让网页在指定的时间n内跳转到页面http://yourlink
<meta http-equiv="Pragma" content="no-cache">
设置网页禁用浏览器缓存
Pragma: no-cache可以应用到http 1.0 和http 1.1
将会创建如下的消息头：Pragma:no-cache
<meta http-equiv="Cache-Control" content="no-cache">
设置网页禁用浏览器缓存
Cache-Control: no-cache只能应用于http 1.1.
4 颜色与大小
1）颜色颜色由红(R)、绿(G)、蓝(B)组成，每个颜色的最低值为0(十六进制为00)，最高值为255(十六进制为FF)。十六进制值的写法为#号后跟三个或六个十六进制字符。
3位十六进制 6位16进制 rgb 颜色
#000 #000000 rgb(0,0,0) 黑色 black
#F00 #FF0000 rgb(255,0,0) 红色 red
#FFF #FFFFFF rgb(255,255,255) 白色 white
2）大小 （ px 像素）
HTML 页面结构 没穿衣服（素颜）
CSS 页面表现 化妆
JS 页面动作 跳舞
5. 标签介绍
1)块级(block)标签<div></div>
特点：独占一行
h1~h6 标题
特点: ①有字体大小的设置
②文本有加粗强调设置
③上下文之间有较大间距
p 段落
特点：
①独占一行
②上下文之间具有距离
ul li (无序列表)
特点：
①配合使用
② ul li都独占一行空间
③ ul 上下文之间有很大空间
④ li与列表的样式显示(默认点状)，并且由文本缩进
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
ol li (有序列表)
<ol>
<li>列表1</li>
<li>列表2</li>
</ol>
dl dt dd（自定义列表）
特点：
①dl dt dd独占一行空间
②dl上下文之间有很大欧诺关键
③dd有文本缩进
<dl>
<dt>列表标题</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
<dd>列表内容</dd>
</dl>
2)行内（内联inline）标签
span
特点：①最干净的内联标签（没有任何修饰）
②不独占一行
a 超链接
特点:
①不独占一行
②点击可以发生跳转（或进行对应操作），语法颜色为绿色
③文本具有颜色，具有下划线，指向后光标为手型，有状态的色彩提示
文本修饰标签
<u>下划线修饰</u>
<i>斜体修饰</i>
<b>加粗</b>
<em>强调</em>
<strong>加粗</strong>
<s>删除线</s>
<sup>上标</sup>
<sub>下标</sub>
img
src="图片地址"
绝对路径
http://www.baidu.com/car.jpg
http://www.briup.com/demo/one.html
<img src="http://www.baidu.com/car.jpg">
相对路径 one.html ../a.jpg
6 其他常用的html标签
1 超链接
从一个web资源到另外一个web资源的连接绝对路径： 每个网页都有一个唯一的地址，称为URI 统一资源定位符，也称为该网页的绝对路径。如 http://ip:port/目录/文件名
相对路径： 相对于当前文档所在的路径 。如① ../imgs/a.jpg ②./imgs/a.jpg ③imgs/a.jpg
本地连接： file:///d:/html/index.html 。 超链接中不允许写本地连接
服务器路径： http://localhost:8888/test/index.html
1）a 超链接
连接状态： ①未访问 ②悬停 ③点击未松开 ④点击后
<a href="">内容显示</a>
属性：
href 定义连接的目标URI
绝对路径：http://www.baidu.com
相对路径：b.html
邮件地址：mailto:[email protected]
锚点 ：#mao
空连接 ：javascript:void(0);
target 定义连接的目标窗口
_blank
_parent
_self
_top
自定义目标名
title 定义连接的提示信息
type 连接到任何类型的文件以供下载
<a href="../docs/myWord.doc" type="application/msword">报名表</a>
锚点：
锚点可以让用户在文档中设置标记，这些标记通常放在文档的特定主题处或顶部，然后创建到这些锚点的连接，指向网页中的特点位置。
例如：
<h2 id="section1">1,什么是万维网</h2>
<p>万维网，是基于Internet的信息服务系统，官方定义为"WWW is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents",简而言之，WWW是一个以Internet为基础的计算机网络，它允许用户在一台计算机上通过 Internet访问另一台计算机上的信...</p>
<a href="#section1">查看第一部分内容</a>
2）link 文档关系连接
只能出现在head标签中，定义了当前文档和另一个资源之间的联系。通常用于链接到外部样式表<link rel="stylesheet" href="style.css" type="text/css">
属性：
href： 定义关系链接地址
rel: 定义当前文档与所连接文档之间的关系。
type: 文档类型
3）base 基准链接地址
设置页面中所有文档相对路径相对的基准URI。如果设定了基准链接地址，当前页面中的所有相对路径都基于该路径
<base href="http://localhost:8888/test/">
4）图片
1，图片类型
适合在网站上进行快速查看的图片格式
GIF （graphics interchange format,图形交换格式）可以将背景设置为透明的，图片最多使用256中颜色，最适合显示色调不连续或具有大面积单一 颜色的图片，如导航条，按钮，图标等。由于GIF图片中存储的颜色信息较少，因此占用空间极小，使用起来更方便。
JPEG（joint photographic experts group,联合图像专家组）最适合摄影或连续色调图像的彩色照片，jpeg文件可以包含数百万中颜色，保证图片不失真。JPEG图片无法拥有透明的背景
PNG（portable network graphics,可移植网络图形）PNG可以包含256种以上的颜色，并可以具有透明的背景。PNG文件可保留所有原始层，矢量，灰度， 颜色和效果信息，并且在任何时候所有元素都是可以编辑的。
2，链入图片文字
<img src="" alt="">
属性：
src : 图片的源地址
title : 对图片的文字说明，当用户把鼠标放在图片上稍作停留，alt属性的值就会以浮动的形式显示出来。
width : 图片的宽度
height : 图片的高度
alt : 当图片文件找不到的时候显示的文本信息
border ：图片的边框
align ：图片和文字的对齐
当align值为left时，图片靠在最左方，周围的文字显示在右侧上方
当align值为right时，图片靠在最右方，周围的文字显示在左侧上方
当align值为top时，图片靠在最上方，周围的文字显示在上方
当align值为bottom时，图片靠在最上方，周围的文字显示在下方
hspace ：图片的水平间距
vspace ：图片的垂直间距
为图片添加链接
<a href=""><img src="" alt=""></a>
2，表格
1）table 定义表格
属性：
border: 设置表格边框线条宽度
align: 表格在页面中对齐
width: 设置表格宽度
bgcolor:表格背景色
cellspacing: 单元格之间的间距
cellpadding: 单元格边沿与其内容之间的距离
frame: 表格中边框线的显示
void 不显示边框
above 上边框
below 下边框
hsides 上下边框
vsides 左右边框
lhs 左边框
rhs 右边框
box 四个边框
border 四个边框
rules: 表格中分割线的显示
none 无分割线显示
groups 仅在列分组间和行分组间显示分割线
rows 仅在行间显示分割线
cols 仅在列间显示分割线
all 在所有行列间显示分割线
2）tr 定义表格行
th 定义单元格
td 定义内容单元格
属性：
colspan 跨列(合并列)
rowspan 跨行(合并行)
align 单元格内容水平对齐
left,center,right, justify 两端对齐
valign 单元格内容垂直对齐
top,middle,bottom, baseline 基准
对齐的继承
1）内容自身的设置具有最高优先级
2）th,td元素的对齐设置
3）tr,thead,tfoot,tbody元素的对齐设置
4）table元素的对齐设置具有全局性
5）默认的设置
4）caption 表格的标题
thead 表格头
tbody 表格主体
tfoot 表格尾
3，框架文档
一个框架文档由四部分组成，文档声明，html元素，head元素，frameset元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
1）frameset 框架集
rows：用来定义将框架水平分隔为子框架的数量和这些子框架的宽度
cols：用来定义将框架垂直分隔为子框架的数量和这些子框架的高度。
<frameset rows="10%,90%">
<frame src="">
<frameset cols="15%,85%">
<frame src="">
<frame src="">
</frameset>
</frameset>
属性
src: 设置框架的初始内容
frameborder:框架窗口边框线
marginwidth: 在框架的边缘和边框的内容之间可以出现的空白（左右边）
marginheight: 在框架的边缘和边框的内容之间可以出现的空白（上下边）
srolling: 框架视图的滚动条设置
auto 必要时提供，默认值
yes 始终提供滚动条
no 不提供滚动条
noresize: 改变框架窗口大小
name: 框架名称，作为该框架的标识
注意之前说的超链接<a>的target属性
target: 框架目标
_blank -- 在新窗口中打开链接
_parent -- 在父窗体中打开链接
_self -- 在当前窗体打开链接,此为默认值
_top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)
一个对应frame名称 -- 在对应框架页中打开
注意 一般_parent和_top在iframe的嵌套中才会起作用
3）iframe 内联框架
iframe允许用户在一个文本中插入一个框架，iframe元素可以使用frame元素的所有属性，实现功能也相同。
<body>
<iframe src="" frameborder="0"></iframe>
</body>
1.body元素中不能出现frameSet元素
2.frame不能脱离frameSet单独使用
3.iframe基本上放在页面的任何地方都行
一般frame和frameSet都是配合使用的,而iframe则是会单独使用
4，表单
主要用于收集来自用户的信息，并将收集的信息发送给服务器端处理程序处理。表单是客户端和服务器端传递数据的桥梁，是用于实现与服务器互动的最主要方式。
1）form表单控件的容器
<form action="">
</form>
属性
action 设定处理表单数据URI的地址
method 设定数据传送到服务器的方式
get 将输入的数据追加到action地址后面
post将输入的数据保存到HTTP协议的报文中
name 设定表单的名称
enctype 设定表单数据的内容类型
application/x-www-form-urlencoded 在发送前编码所有字符（默认）
编码方式：
1）控件的名称和值都被转义，空白字符使用【+】替换，保留的字符一般都是用来实现特定的目的，例如（: / ? ; @ = & 等）。非数字和字母
的字符使用%HH（这里HH表示两个十六进制数字，代表该字符的ASCII码）进行转换，
2）控件的"名称/值"对按照它们在文档数据流中出现的顺序列出来。"名称""值"使用"="分割，两个"名称/值"之间使用&隔开。
multipart/form-data 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
数据分成多个部分，每个部分代表一个结构良好的控件，作为文档数据流的一部分，每一个部分都按照它们在文档数据流中出现的顺序依次发送到
服务器端，并且，每一部分的边界不会出现在数据中。每一部分有一个content-desposition标题头，它的值的格式是：
Content-Disposition:form-data;name="myControl"
text/plain 空格转换为 "+" 加号，但不对特殊字符编码。
accept-charset 设置服务器端可以处理的字符编码
2）input 基本表单控件
<input type="text">
属性：type 控件类型
text 单行文本框
textarea 多行文本框
password 密码框
checkbox 复选框
radio 单选按钮
submit 提交按钮
reset 重置按钮
file 文件
hidden 隐藏域
image 图像按钮
button 普通按钮
name：控件名称，这个名称将与控件的当前值形参"名称/值"对 一同随表单提交
value：用于设定初始化，可选。
checked ：单选框，复选框默认选中属性
size：当前控件的初始宽度，这个宽度以像素为单位。除非控件类型是text,password，这时宽度是整数值，表示字符的数目
maxlength:指定可以输入的字符的最大值。适用于控件类型为text,password。
3）button 按钮控件
<button></button>
属性
name 控件名称
value 控件初始值
type 控件类型
button 普通按钮
submit 提交按钮
reset 重置按钮
图片按钮:<button><img src="" alt=""></button>
4）select 下拉列表
<select name="" id="">
<option value=""></option>
<option value=""></option>
</select>
属性
name: 控件名称
size: 列表框中行的显示数量
multiple: 是否允许多选
如果select元素不包含属性size和属性multiple时，表单类型显示为菜单
如果使用了属性size和属性multiple中的任意一个，则表单类型显示为列表框,如果有multiple的话,就表示可以多选（按住ctrl可以多选）
selected: 默认选中
option 下拉列表选项
属性：
value: 定义控件的初始值。提交表单时，初始值会被提交给服务器。
optgroup 分组选项
<select name="" id="">
<optgroup label="大洋">
<option value="">太平洋</option>
<option value="">大西洋</option>
<option value="">印度洋</option>
</optgroup>
<optgroup label="大海">
<option value="">东海</option>
<option value="">南海</option>
<option value="">渤海</option>
</optgroup>
</select>
4）textarea 多行文本框
属性
name: 控件名称
rows: 定义文本框行数
cols: 定义文本框列数
warp: 是否自动换行。
off 不自动换行
hard自动硬回车换行，换行元素一同被传送到服务器中
soft自动软回车换行，换行元素不会传到服务器中
5）label 为表单控件定义标签
一些表单控件内建有标签，当内建有标签时，一般使用value属性的值作为标签，而另外一些表单控件没有标签，则直接使用文本作为标签来说明控件的意义。
每个label元素都要和表单控件关联到一起
<table>
<tr>
<td><label for="username">用户名：</label></td>
<td><input type="text" id="username" name="username"></td>
</tr>
<tr>
<td><label for="passwold">密码：</label></td>
<td><input type="password" id="password" name="password"></td>
</tr>
</table>
6）fieldset 为表单添加结构
一般与legend元素配合使用，fieldset元素可以包含其他的表单控件，在这些表单控件周围画一个方框，而legend元素可以显示一个标签说明被包含的这些
表单控件。
7）其他控件特性
disabled 禁用
支持该属性的控件：button,input,optgroup,option,select,textarea
1）禁止的元素不接受节点
2）禁止的控件的值不与表单一起被提交
readonly 只读
支持该属性的控件：input,textarea
1）可以接受焦点，但是不能被用户修改
2）只读元素的值可以与表单一起被提交。
