****************************第一章****************************
HTML基本结构介绍
<!DOCTYPE html> ----约束HTML文档结构，检验是否符合相关web标准，同时告诉浏览器，使用哪种规范来解释这个文档中的代码。
<html> －－－HTML部分
<head lang="en"> －－－头部部分
<meta charset="UTF-8"> －－－描述网页的摘要信息，包括文档类型、字符编码信息
<title></title> －－－描述网页的标题
</head>
<body>
－－－主体部分 我们自己写的一些标签
</body>
</html> 在html中标签都是成对出现的
要符合w3c标准，(World Wide Web Consortium),万维网联盟。
标题标签
从<h1> ~ <h6> 代表标题标签，字体从大到小，自带换行
段落标签
<p></p> 代表段落标签，自带换行
换行标签
<br/> 换行标签
水平标签
<hr/> 水平标签，就是一条分割线
字体样式标签
<strong>字体加粗</strong> 带有语义化的标签，它有强调、加强语气的作用。
<em>斜体</em>
注释和特殊符号
<!-- 注释内容 --> 不想给别人看的，只想自己看
空格
大于号 >
小于号 <
引号 "
版权符号 ©
高 height
宽 width
图像标签
常见的图像格式
1.JPG格式 JPG格式采用的有损压缩，会造成图像画面失真，不过压缩体积较小，而且比较清晰，所以比较适合在网页中应用。
2.GIF格式 GIF格式图像在网页中使用最广泛、最普遍的一种图像格式，GIF格式支持透明色，使得GIF格式在网页的背景和一些多层特效的显示上用的非常多；还支持动画，
3.BMP格式 BMP格式图像在Windows操作系统中使用得比较多，它不支持文件压缩，也不适用于web网页。
4.PNG格式 PNG格式是20世纪90年代中期开发的图像文件存储格式，它兼有GIF格式和JPG格式的优势，同时具备GIF格式不具备的特性。流式网络图形格式。PNG是一种新兴的文本图像格式。
<img src="图片地址" alt="图像的替代文字" title="鼠标悬停提示的文字" width="宽度" height="高度">
超链接标签
<a href="连接地址的路经" target="目标窗口位置">连接文本或图像</a>
页面间链接接
锚链接
<a name="标记名">目标位置</a> 设置乙位置 例：标记名 顶部
<a href="#标记名">当前位置</a> 设置甲位置连接路径 回到顶部
行内元素和块元素
块元特性：无论内容多少，该元素独占一行 比如：<h1>~<h6>、p
行内元素特性：内容撑开宽度，左右都是行内元素的可以排一行 比如： a、img、strong、em标签
****************************第二章****************************
列表
1.无序列表
<ul> (1)没有顺序，每个<li>标签独占一行(块元素)
<li>第一项</li> (2)默认<li>标签项前面有个实心小圆点
<li>第二项</li> (3)一般用于无序类型的列表，
</ul>
2.有序列表
<ol> (1)有序列表，
<li>第一项</li> (2)默认<li>标签项前面有顺序标记
<li>第二项</li> (3)一般用于排序有序列表
</ol>
3.定义列表 例如：<dl>
<dl>
<dt>标题一</dt> (1)没有顺序， <dt>水果</dt>
<dd>第一项</dd> (2)默认没有标记 <dd>苹果</dd>
<dd>第二项</dd> <dd>香蕉</dd>
<dt>标题二</dt> <dd>压力</dd>
<dd>第一项</dd> <dl>
<dd>第二项</dd>
</dl>
表格
<table border="1"> border 设置表格边框宽度
<tr>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
</tr>
</table>
colspan="横向跨的单元格数"
rowspan="纵向跨的单元格数"
video 视频元素
第一种：
<video src="" controls />
第二种：
<video controls>
<source src="" type="video/webm" />
<source src="" type="video/mp4" />
</video>
有俩种取值：
contreols : 提供播放，暂停和音量控件，还可以设置宽度和高度
autoplay : 不需要与用户进行任何交互，就可以让视屏加载完成自动播放
audio 音频元素
【同上】
语义化结构元素
header 头部
section 主题部分
footer 底部
article 独立的文章内容
aside 相关类辅助内容
nav 导航类辅助内容
内联框架<iframe>的用法
<iframe src="引用页面" nmae="框架表示名" />
可以结合“a"标签的target属性使用
<a href="fisrt.html" target="mainFrame" >显示</a>
<iframe name="mainFrame" src="fisrt.html" />
****************************第三章****************************
表单标签及表单属性
<form method="post/get" action="提交的地址" >
<p>姓名：<input name="name" type="text" /> </p>
<p>密码：<input name="password" type="password" /> </p>
<p>
<input type="submit" name="Button" value="提交"/>
<input type="reset" name="Reset" value="重填"/>
<p>
</form>
单选按钮
<input name="gen" type="radio" value="男" checked/>男 checked 默认选择
<input name="gen" type="radio" value="女" />女
复选框
<input type="checkbox" name="interest" value="sports" checked/>运动
<input type="checkbox" name="interest" value="talk" />聊天
<input type="checkbox" name="interest" value="play" />玩游戏
列表框
<select name="指定列表名称" size="行数" >
<option valus="可选项的值" selected="selected"></option> selected 默认选中的值
<option valus="可选项的值" ></option>
</select>
多行文本域
<textarea name="textarea" cols="显示的列数" rows="显示的行数" >
文本内容
</textarea>
文件上传
<form action="#" method="post" enctype="multipart/form-data" >
<p><input type="file" name="files" /><br/>
<input type="submit" name="upload" value="上传" />
</form>
表单验证
placeholder 属性用于为input类型的文本框提交一种提示，这种提示可以描述文本框期待用户输入何种内容，在输入为空是显示。
required 属性用于规定文本框内容不能为空，否则不允许用户提交表单。
pattern 属性用于验证 input 类型文本框中用户输入的内容是否与自定义的正则表达式相匹配。
****************************第四章****************************
第四章 初识CSS3
行内样式
<h1 style="color:red;">style属性的应用</h1>
内部样式
把css代码写在<head>的<style>标签中，语html在同一个内容位于同一个HTML文件中
<style type="text/css"></style>
外部样式
<link href="style.css" rel="stylesheet" type="text/css" /> 链接外部样式表 先将外部css加载到网页中
<style>
@import url("css/commom.css") 导入外部样式表 后加载外部css到网页中
</style>
央视优先级
行内样式 > 内部样式 > 外部样式 遵循 “就近原则”
CSS3的选择器
1.标签选择器
一个Html页面是由很多的标签组成，如<h1>~<h6>、<p> 、<img>等，css 标签选择器就是用来声明这些标签的。每一种标签都可以作为相应的标签选择器的名称。
2.类选择器
<标签名 class="类名称">标签内容</标签名> .类名称
3.id选择器
<标签名 id="类名称">标签内容</标签名> #类名称
三种基本选择器的优先级
id选择器 > class选择器 > 标签选择器
CSS3的高级选择器
line-height 行间距
text-indent 每个段落缩进
层次选择器
E F 后代选择器
E>F 子选择器
E+F 相邻兄弟选择器
E~F 通用兄弟选择器
结构伪类选择器语法
E:first-child 锁定父元素的第一个子元素
E:last-child 锁定父元素的最后一个子元素
E F:nth-child(n) 适合用于隔行变色，关键字位even，odd
E:first-of-type 选择父元素内具有指定类型的第一个E元素
E:last-of-type 选择父元素内具有指定类型的最后一个E元素
E F:nth-of-child(n) 指定父元素内具有指定类型的第n各子元素
属性选择器的语法
E[attr] 选择匹配具有属性attr的E元素
E[attr=val] 选择匹配具有属性attr的E元素,并且属性值位val(其中val区分大小写)
E[attr=^val] 以val开头的任意字符串
E[attr$=val] 以val结尾的任意字符串
E[attr*=val] val与attr属性值任意位置相匹配
****************************第五章****************************
CSS3美化网页元素
字体样式
常用的字体属性、含义及用法
font-family 设置字体类型 font-family："隶属" 可以同时声明多种，中间用“,”分离 浏览器会优先读取英文字体
font-size 设置字体大小 font-size：12px;
font-style 设置字体风格 font-style：italic; 有三个值： normal italic oblique
font-weight 设置字体风格 font-weight：bold; normal=400 默认值，定义标准的字体； bold=700 粗体字体； bolder 更粗的字体； lighter 更细的字体； 从100到900
font 在一个声明中设置所有字体属性 font:italic bold 36px "宋体"；
排版网页文本
常用的文本属性、含义及用法
color 设置文本颜色
text-align 设置元素水平对齐方式
text-indent 设置首行文本的缩进
line-height 设置文本的行高‘
text-decoration 设置文本的装饰 上(overline)、下(underline)、删除线(line-through) 无下划线(none)
垂直对齐方式
vertical-align:middle 图片文本垂直居中
文本阴影
text-shadow:color x轴位移（x-offset) y轴位移（y-offset）模糊半径（blur-radius）
(1)color : 阴影颜色
(2)x-offset ：指定阴影水平移量，正在右边，反之，在左边
(3)y-offset : 垂直移量，正在底部，反之在上边
(4)blur-radius : 模糊半径，值越大阴影模糊的范围越大
设置超链接和列表样式
超链接伪类
a:like 单击访问前的超链接样式
a:visited 单及访问后的超链接样式
a:hover 鼠标悬浮其上的超链接样式
a:active 单击未释放的超链接样式
列表样式
list-style-type
none 无标记符号
dise 实心圆，默认类型
circle 空心圆
square 实心正方形
decimal 数字
背景
background-color 背景颜色
background-image 导入图片地址
background-repeat 该属性控制平铺的方式
(1) repeat : 沿水平和垂直两个方向平铺
(2) no-repeat : 不平铺，即背景图像只显示一次
(3) repeat-x : 只沿水平方向平铺
(4) repeat-y : 只沿垂直方向平铺
background-position 设置背景图像出现的位置
0px 0px (默认，表示从左上角出现背景图像，无偏移)
30px 40px (正向偏移，图像向下和向右移动)
-50px -60px (反方向偏移，图像向左和向右移动)
30% 50% (垂直方向居中，图像向上和向左移动)
还可以使用关键词表示背景的位置，水平方向的关键词有left、center、right,垂直方向的关键词有top、center、bottom
可以简写，如：
background :#C00 url("img/bg_flower.gif") 205px 10px no-repeat;
background-size 背景尺寸
auto 没有任何变化 图片保持原尺寸
120px 60px 设置固定尺寸
200px 80% 还可以使用0% ~ 100%
cover 背景图片放大填充整个标签
contain 背景图片保持本身的宽高比例
css3渐变
IE浏览器是Trident内核，加前缀 -ms-
Firefox浏览器是Mozila内核，加前缀 -moz-
Chrome浏览器是Webkit内核，加前缀 -webkit-
Opera浏览器是Blink内核，加前缀 -o-
Safari浏览器是Webkit内核,加前缀 -webkit-
background:linear-gradient(position,color,color,...)
to bottom:从底部到顶部
to left: 从左边到右边
to right:从左边到右边
to top left : 从右下方到左上方
to top right ：从下方到又上方
to bottom left : 从右上方到左下方
to bottom right ：从早上方到右下边
****************************第六章****************************
第六章 盒子模型
margin (外边距) padding(内边距)
border-color 边框颜色
border-width 边框的粗细程度
border-style 边框的样式 solid(实线) dotted(点线) dashed(虚线) double(双线)
内盒的总尺寸 = border + padding + 内容宽/高
外盒的总尺寸 = border+ padding + margin + 内容宽/高
box-sizing:border-box 实现最终效果和通过盒子模型尺寸计算公式设置完成的效果是一样的。
content-box : 默认值，盒子的高度或宽度 = border+padding+(margin)+width/height。
border-box:盒子的宽度或高度等于元素内容的宽度或高度。 内容的宽度或高度 = 盒子宽度度或高度-border-padding
inherit:此值使元素继承父元素的盒子模型模式。
border-radius 制作图形效果 可以使用 20px 或 20%
box-shadow 盒子阴影 加inset 是设置内部阴影
margin : 0px auto; 让盒子居中显示
****************************第七章****************************
第七章 浮动
display属性的常用值
block 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline 行内元素的默认值，元素会被显示为行内元素，该元素前后没有换行符
inline-block 行内块元素，元素既具有行内元素的特性，也具有块元素的特性
none 设置元素不会被显示 看不见了
float属性
left 元素向左浮动
right 元素向右浮动
none 默认值，元素不浮动，并会显示在其文本中出现的位置
clear属性
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左、右两侧不允许浮动元素
none 默认值，允许浮动元素出现在两侧
解决父级边框塌陷的方法
1.浮动元素后面添加空div
2.设置父元素的高度
3.父级添加 overflow
visible 默认值，内容不会被修剪，会呈现在盒子之外
hidden 内容会被修剪，并且其余内容是不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto 如果内容别修剪，则浏览器会显示滚动条以便查看其余的内容
****************************第八章****************************
position 属性
static : 默认值，没有定位，元素按照标准文档流进行布局
relative : 相对定位，
使用相对定位的盒子位置以标准文档流的排版方式为基础，然后使盒子相对与它在原本的标准位置偏移指定位置。
相对定位的盒子仍在标准文档流中，其后盒子仍以标准文档流方式对待它。
总结：设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置，但仍在标准文档流中，
它对父级盒子和相邻的盒子都没有任何的影响。原来的位置会被保留下来。
absolute ：绝对定位，
盒子的位置以包含它的盒子为基础进行偏移。绝对定位的盒子从标准文档流中脱离。
这意味着它们对其后的其他盒子的定位没有影响，对于其他盒子来说就好像这个盒子不存在一样。
可以结合相对定位一起使用。
fixed : 固定定位，
它和绝对定位类似，只是以浏览器窗口为标准进行定位，也就是当拖动浏览器窗口的滚动条时，依然保持对象位置不变。
z-index : 用于调整元素定位时重叠层的上下位置。取值为0和1.
opacity:X X值为0~1，值越小越透明
filter:alpha(opacity=X) X值为0~100，值越小越透明
****************************第九章****************************
CSS3变形
transform:
translate(x,y)：平移函数，基于坐标重新定位元素的位置
scale(x,y) 或 scale(x) 缩放函数，可以使任意元素对象尺寸发生变化
rotate(adeg) 旋转 为正数正时针旋转 为负数时逆时针旋转
skew(xdeg,ydeg) 或 skewX(xdeg) 、skewY(ydeg) 按指定元素水平倾斜角度
CSS3过滤
transition
transition-property ：指定过滤或动态模拟的CSS属性
transition-duration ：指定完成过滤所需要的时间
transition-timing-function : 指定过渡函数
ease : 元素样式从初始状态过渡到终止状态时速度由快到慢，逐渐变慢(默认值)
linear : 元素样式从初始状态过渡到终止状态时恒速(均速运动)
ease-in : 元素样式从初始状态过渡到终止状态时速度越来越快(渐显效果)
ease-out : 元素样式从初始状态过渡到终止状态时速度越来越慢(渐显效果)
ease-in-out : 元素样式从初始状态过渡到终止状态时速度先加速再减速(渐显渐隐效果)
transition-delay : 指定过渡开始出现的延迟时间