整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
、web标准
web标准是网页制作的标准，它不是一个标准，而是由一系列标准组成。
web标准包含了三个方面：结构（html）,表现(css),行为(javascript或js)
注：a）W3C—万维网联盟，制定了结构和表现的标准
b) ECMA—欧洲电脑厂商联合会，制定了行为标准
二、html相关概念
1.html—超文本标记语言
2.xhtml—可扩展的超文本标记语言
3.html5—html的第五次重大修改
注：html和xhtml的区别
xhtml相对于html4.0并没有增加新的标签，只是语法要求更加严格，例如标签名称小写，标签必须闭合
三、DW常用快捷键
1.新建文件 ctrl+n
2.保存文件 ctrl+s
3.预览网页 F12
4.打开文件 ctrl+o
5.打开首选参数面板 ctrl+u
6.撤销 ctrl+z
7.恢复 ctrl+y
8.查找和替换 ctrl+f
9.显示或隐藏文件面板 F8
四、html基本结构
1.文档声明
作用：告知浏览器网页使用哪种html或xhtml规范
h5的文档声明： <!doctype html> 或 <!DOCTYPE HTML> 或 <!DOCTYPE html>
2.网页根标签（根元素）：<html>…</html>
所有网页的内容及标签都要放置在html标签之间
3.html中的内容分为两大部分：head部分和body部分
a)head部分：主要用来设置字符编码，网页标题，关键词，描述，引入一些外部css文件，js文件等
b)body部分：所有要在网页中呈现的内容和放置内容的标签都要放在body部分
注：常用字符编码格式为utf-8,还有gbk,gb2312
五、html基本语法
1.常规标记
语法： <标记 属性=”属性值” 属性=”属性值”></标记>
eg: <h3 class=”tit” id=”box”>前端开发</h3>
注：a）标记名称要小写
b) 属性和属性值用等号连接，属性值要加双引号
c)属性和标记之间要加空格，多个属性之间用空格隔开
d) 所有标点符号都必须是英文状态下的
2.空标记
语法： <标记 属性=”属性值” 属性=”属性值”/>
eg: <img src=”1.jpg” title=”图片”/>
六、html常用标记
1.网页内容标题
语法： <hx>标题内容</hx> (x为1-6)
eg: <h3>前端开发</h3>
注：h1-h6都有加粗效果，字体逐渐减小
2.段落文本
语法： <p>段落文本内容</p>
3.换行
语法：<br/>
4.空格（html转义字符）
5.加粗文本
语法： <strong>加粗文本内容</strong>
<b>加粗文本内容</b>
6.倾斜文本
语法：<em>倾斜文本内容</em>
<i>倾斜文本内容</i>
7.水平分隔线
语法： <hr/>
8.上标和下标
语法：上标： <sup>上标</sup>
下标： <sub>下标</sub>
※9.无序列表
语法： <ul>
<li>aaa</li>
…
</ul>
10.有序列表
语法：<ol type=”a|A|I|i” start=”2″>
<li>aaa</li>
…
</ol>
扩展：type用来设置序号的类型
start用来设置索引值
11.自定义列表
语法： <dl>
<dt>名词</dt>
<dd>解释</dd>
…
</dl>
—————————————————
相对路径的三种写法：
a）当当前文件和目标文件在同一目录下，写法如下：目标文件名+扩展名
b）当当前文件和目标文件所在文件夹在同一目录下，写法如下：目标文件所在文件夹名/目标文件名+扩展名
c）当当前文件所在文件夹和目标文件所在文件夹在同一目录下，写法如下：
../目标文件所在文件夹名/目标文件名+扩展名
注: ../代表返回到上一级目录
—————————————————
※12.图片
语法： <img src=”图片路径” title=”提示信息” alt=”替换信息” width=”数值” height=”数值”/>
eg: <img src=”img/1.jpg” title=”前端开发” alt=”加载失败” width=”100″ height=”100″/>
注：alt和title的区别
alt是当图片由于某些原因无法正常加载时显示的替换信息
title是当鼠标悬停在图片上时显示的提示信息
※13.超链接
语法： <a href=”链接地址” target=”_blank” title=”***”>链接文本或图片</a>
eg: <a href=”http://www.baidu.com” target=”_blank”>百度一下</a>
<a href=”http://www.1000phone.com” target=”_blank”><img src=”1.jpg” title=”前端开发”/></a>
<a href=”#”>新闻</a> 空链接
注：target=”_blank” 链接地址在新窗口打开
扩展：href和src的区别：
a）href表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a
b）src是source的缩写，src指向的内容会嵌入到文档中当前标签所在的位置。常用的有img，script
14.表格
作用：显示数据
语法：<table border=”1″ cellspacing=”0″ cellpadding=”0″>
<tr align=”center” height=”30″>
<th width=”100″>姓名</th>
…
</tr>
<tr align=”center” height=”30″>
<td width=”100″>姓名</td>
…
</tr>
…
</table>
注：表格相关html标签
1）table 用来定义一个表格
2）tr 定义表格的行
3）td 定义表格的列
4）th 定义表格的表头(自动加粗居中)
5）caption 定义表格的标题
6）thead 定义表格的页眉
7）tbody 定义表格的主体
8）tfoot 定义表格的页脚
注：表格相关html属性
a) border 设置表格的边框
b) cellspacing 设置单元格之间的间距
c) cellpadding 设置内容和单元格之间的空隙
d) width 定义单元格的宽度和表格的宽度
e) height 定义单元格的高度或表格的高度
f) align 设置单元格内容的水平对齐方式 align=”left|center|right”
g) colspan 合并列（加在td上）
h) rowspan 合并行（加在td上）
表单
一、表单
作用：用来搜集用户信息
语法： <form method=”get|post” action=”服务器端文件”>…</form>
注：所有的表单控件都要放置在form标签之间
1.文本框
语法： <input type=”text” value=”***”/>
2.密码框
语法：<input type=”password”/>
3.提交按钮
语法： <input type=”submit” value=”登录”/>
注：通过设置value属性改变按钮的默认文字内容
提交按钮和要提交的表单内容必须放在一个form标签中，才能提交
4.重置按钮
语法：<input type=”reset”/>
注：重置按钮必须放在form中才具备重置功能
5.单选按钮
语法：<input type=”radio” name=”a” checked=”checked”/>
注：a)一组中的单选按钮添加一致的name属性值，才能达到多选其一的效果
b)设置checked=”checked”,在页面加载完成后添加默认选中项
c)当属性和属性值相同时，可以省略属性值
6.复选按钮
语法： <input type=”checkbox” checked/>
注：checked属性的设置同单选按钮
7.下拉列表
语法：<select>
<option>a</option>
<option selected>b</option>
…
</select>
注：设置selected属性改变默认选中项
8.文本域
语法：<textarea cols=”字符宽度” rows=”行数”></textarea>
扩展： 禁止用户随意拖拽改变文本域的大小，设置如下：
textarea{resize:none;}
9.普通按钮
语法： <input type=”button” value=”***”/>
注：普通按钮不具备提交功能，一般结合js的onclick事件使用
普通按钮上的默认文字内容为空，需要通过value属性进行设置
注：disabled=”disabled” 设置表单控件为禁用状态
◆ get和post的区别
1）get主要用来获取数据，post主要用来向服务器发送数据
2）get发送数据时，信息会显示在url地址栏中，post直接通过服务器发送，用户看不到这个过程
3) get可以传送的数据量较小，一般不能大于2kb，post可以传送的数据量较大，理论上没有限制
4) get安全性较低，post安全性较高
二、div
作用：无语义标签，主要用来布局和划分板块
语法： <div>…</div>
三、span
语法： <span>…</span>
作用：
a)标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。
b)span标签提供了一种将文本的一部分或者文档的一部分独立出来的方式
四、iframe框架
语法：<iframe src=”1.html表单.html” width=”800″ frameborder=”0″ scrolling=”auto”></iframe>
注：scrolling=”no” 隐藏或去掉iframe的滚动条
作用：创建包含另外一个文档的内联框架
五、html注释
语法： <!–注释内容–>
css基础
一、css概念及特点
css—层叠样式表
特点：实现了结构与表现相分离
作用：定义html元素如何在网页中显示
二、css基础语法
css由选择器和声明两大部分组成，声明又是由属性和属性值组成。即：
选择器{属性:属性值;}
eg: h1{color:red;}
注：a）声明要放在花括号中,每条声明结束要加分号
b) 属性和属性值用冒号连接
c) 建议一条声明占一行
三、样式表的创建
1.内联样式（行间样式，行内样式）
语法：<标记 style=”属性:属性值;”></标记>
eg: <h1 style=”color:red;”>前端开发</h1>
2.内部样式（嵌入式样式）
语法：<style type=”text/css”>
选择器{属性:属性值;}
</style>
eg: <style type=”text/css”>
h1{color:red;}
</style>
注：style标签一般放在head部分
3.外部样式表
a）使用link标签引入
首先创建一个后缀名为.css的文件
然后通过link标签引入，语法如下：
<link rel=”stylesheet” type=”text/css” href=”css文件路径”/>
注：rel是用来建立外部文件和本文件之间的关系
link标签一般放在head部分
b)使用@import引入css文件
语法： @import “css文件路径”;
★ link和@import引入外部样式的区别 ★
1）link属于html标签，除了可以引入css文件以外，还可以引入其他文件，@import属于css范畴，只能引入css文件（老祖宗的区别）
2）link引入的css文件和页面同时加载，@import引入的css文件在页面加载完成后载入（加载顺序不同）
3）link引入css文件无兼容性问题，所有浏览器都支持，@import低版本浏览器不支持（浏览器支持不同）
4）link是html标签，支持js改变dom，@import不支持（是否支持js改变dom）
四、样式表的优先级
样式表的优先级
采取就近原则，即离被设置的元素越近，优先级越高
当css属性值中出现!important的时候，它的优先级最高即：
!important>内联>内部>外部
五、css注释
语法： /*注释内容*/
六、css选择器
1.id选择器
语法：<标记 id=”id名”></标记>
#id名{属性:属性值;}
eg: <h1 id=”edu”>前端开发</h1>
#edu{color:red;}
注：a）id选择器优先级最高，id名是唯一的，不能出现同名的id
b) id名命名要语义化，常见命名方法：
I.驼峰命名法 id=”mainLoginContent”
II.下划线连接命名法 id=”main_login_con”
2.类选择器(class选择器)
语法：<标记 class=”类名”></标记>
.类名{属性:属性值;}
eg: <h1 class=”tit”>前端开发</h1>
.tit{color:red;}
注：可以给具有相同样式的元素添加相同的class名
注：类名词列表用法：
<h3 class=”tit focus”>新闻资讯</h3>
当一个元素即具有与其他元素相同的样式，又有某一个样式不同时，需要用到类名词列表的方式
3.后代选择器（包含选择器）
语法： 选择符1 选择符2{属性:属性值;}
eg: .box a{color:red;}
注：选择符1和选择符2必须满足是包含与被包含的关系，才能使用后代选择器
css核心属性
一、字体类属性
1.字体类型
语法： font-family:字体1,字体2,字体3;
eg: body{font-family:”Microsoft YaHei”,Arial;}
或 body{font-family:”微软雅黑”,Arial;}
注：a）font-family设置多个字体时，用逗号分隔
b）中文字体要加双引号，英文字体由多个单词组成也要加双引号
c）浏览器会优先识别字体1,如果找不到识别字体2，如果所列出的字体都无法识别，显示浏览器默认字体
d）特殊字体一律用图片
2.字体大小
语法：font-size:数值+单位;
eg: p{font-size:12px;}
注：a)字体大小一般设置偶数不设置奇数
b)浏览器默认字体大小为16px
c)字体大小单位有px,em,rem,pt等
注： font-size:16px; 等价于 font-size:medium;
3.字体加粗
语法：font-weight:normal(常规字体)|bold(加粗字体)|bolder(加粗字体)|100-900;
eg: h3{font-weight:normal;}
注：100-500为常规字体，600-900为加粗字体
4.字体倾斜
语法：font-style:normal(常规字体)|italic(倾斜)|oblique(倾斜);
5.字体是否大小写
语法：font-variant:normal(常规字体)|small-caps(小型大写字母字体);
注：主要针对英文起作用
6.font复合写法
语法：font:style weight size family;
eg： font:12px/1.5 “微软雅黑”;
上述代码是指字体大小为12px，行高为字体大小的1.5倍，字体类型为微软雅黑
注：在font的复合写法中，size和family不可互换位置，也不可以和其他简写属性互换位置
7.字体颜色
语法：color:颜色值;
注：颜色值的三种写法：
a）十六进制写法
color:#000; 黑色 color:#fff; 白色
b) rgb写法
color:rgb(0,0,0); 黑色 color:rgb(255,255,255); 白色
c) 颜色单词
color:black; color:white; color:red;
二、文本类属性
1.文本水平对齐方式
语法：text-align:left(左对齐)|center(居中对齐)|right(右对齐)|justify(两端对齐);
注：a）当需要让容器中的文本或图片等其他元素水平居中时，给父容器添加text-align:center;
b）justify两端对齐主要针对英文
2.行高
语法：line-height:数值+单位;
eg: line-height:32px;
注：a）当单行文本的行高等于容器高时，可以实现单行文本在定高容器中垂直居中
b) line-height不允许设置负值
c) line-height的属性值只写数值不加单位时，代表行高为字体大小的多少倍
3.文本修饰
语法：text-decoration:none(没有修饰)|underline(下划线)|line-through(删除线)|overline(上划线);
eg: a{text-decoration:none;}
a:hover{text-decoration:underline;}
CSS盒模型
一、css盒模型的概念及组成
css盒模型的概念—css盒模型是css的基石，主要用来设置元素间的相互关系，每个html元素都有自己的盒模型。
css盒模型的组成—由content(主体),padding(补白，填充)，border(边框)，margin(外边距)组成。
1.content
语法：width:数值+单位;
height:数值+单位;
注：width和height的属性值必须加单位
2.padding(content和border之间的区域)
a）设置一个值
padding:20px; 上，下，左，右均为20px
b）设置两个值
padding:20px 5px; 上下为20px，左右为5px
c）设置三个值
padding:20px 5px 10px;上为20px，左右为5px，下为10px
d）设置四个值
padding:20px 5px 10px 0px;
顺时针顺序依次为：上20px，右5px，下10px,左0px
e) 还可以单独设置某一个方向的padding值
eg: padding-left:20px; （left还可以更改为top，right，bottom）
注：
I.如果元素设置了宽高，设置padding后，要在原来宽高的基础上减去设置的padding值，保证总宽高不变
II.padding不允许设置负值
III.背景可以延伸到padding区域
IV.当需要调整子元素在父元素中的位置关系时，可以通过给父元素设置padding来实现
容器溢出
一、容器溢出
语法：overflow:visible|hidden|scroll|auto|inherit;
visible 默认值，内容不会被裁剪，显示在容器之外
hidden 内容会被裁剪，隐藏不可见
scroll 溢出部分的内容以滚动条的形式查看，如果没有溢出，显示默认的滚动条
auto 容器溢出时显示滚动条
inherit 规定从父元素继承overflow属性值
还可以单独设置某一个方向的溢出：
overflow-x:hidden|scroll|auto;
overflow-y:hidden|scroll|auto;
二、文本溢出
语法：text-overflow:clip(不显示省略号)|ellipsis(显示省略号);
三、单行文本省略号的设置
四个条件缺一不可：
（a）设置固定的宽度 width:value;
（b）设置文本强制在一行显示 white-space:nowrap;
（c）设置容器溢出隐藏 overflow:hidden;
（d）设置文本溢出显示省略号 text-overflow:ellipsis;
注：I.此方法只适用于单行文本省略号的设置，如果是多行文本显示省略号可以使用js或由后端来处理
II.上述四个属性必须给文本所在最近的父元素设置
元素类型及转换
一、html元素类型
html元素分为三大类：块元素，内联元素，可变元素
注：也可将html元素分为这样三类：块元素，内联元素，内联块状元素
1.块元素
常见块元素：div,p,ul,ol,li,dl,dt,dd,form,table,tr,td,hr,h1,h2,h3,h4,h5,h6,fieldset
块状元素特点：
a) 块状元素以块的形式显示为一个矩形区域
b) 块状元素默认情况下，独占一行，自上而下排列
c) 块状元素可以定义自己的宽度和高度，以及盒模型中的任意属性（如margin，padding，border）
d) 块状元素可以作为一个容器容纳其他的块元素和内联元素
2.内联元素
常见内联元素：a,span,strong,b,i,em,br,img,input,select,textarea
内联元素特点：
a) 内联元素没有自己的形状，也显示为一个矩形区域
b) 内联元素在一行逐个进行显示
c) 内联元素不能定义宽度和高度，以及与高度相关的一些属性（margin-top,margin-bottom,padding-top,padding-bottom,line-height）
d) 内联元素不能嵌套块元素
常见内联块状元素：img,input,select,textarea
内联块状元素特点：
a) 即具有内联元素特点，在一行逐个进行显示
b) 又具有块状元素特点，可以定义宽度和高度，以及盒模型中的任意属性
注：vertical-align属性只针对内联块状元素有效
3.可变元素
根据上下文关系决定元素类型，可变范围块元素和内联元素
注：常用html元素默认有margin，padding的如下：
body 默认margin
h1-h6 默认margin
p 默认margin
ul 默认margin和padding
ol 默认margin和padding
dl 默认margin
dd 默认margin
td 默认padding
input 默认padding
textarea 默认padding
fieldset 默认padding和margin
二、元素类型转换
语法：display:block|inline|inline-block|none|list-item;
a)block 将元素转换为块元素，是大部分块元素的默认display属性值
b)inline 将元素转换为内联元素，是内联元素的默认display属性值
c)inline-block 将元素转换为内联块状元素，是内联块状元素的默认display属性值（如img,input）
d)none 将元素隐藏不可见
e)list-item 将元素转换为列表类型，是li的默认display属性值
—————————————————
扩展：图片默认有空隙：
方案一：给img添加display:block;
方案二：给img添加float属性
—————————————————
注：当给元素设置了float后就相当于转换成block
三、置换元素和非置换元素
1.置换元素
浏览器根据元素的标签和属性，来决定元素的具体显示内容。
例如：根据img标签的src属性决定在网页中显示什么样的图片
根据input标签的type属性决定在网页中显示什么类型的input控件
2.非置换元素
除了置换元素，大部分html元素都是非置换元素，其内容直接显示在浏览器中
（缺内容）
定位及锚点设置
一、常见的三种布局模型
1.流动模型（Flow）
元素没有设置css样式的布局，块元素自上而下排列，内联元素在一行逐个进行显示
2.浮动模型（Float）
使用float属性进行网页布局，可以让块元素脱离文档流在一行显示，可以让内联元素设置宽高并且在一行显示
3.层模型（Layer）
使用position定位属性进行布局
二、定位布局
语法：position:static(默认值)|absolute(绝对定位)|relative(相对定位)|fixed(固定定位);
1.绝对定位
语法：position:absolute;
要成为绝对定位元素的参照物，必须满足以下两个条件：
a)参照物和绝对定位元素必须是包含与被包含关系
b)参照物必须具有定位属性
如果找不到满足以上两个条件的父包含块，那么绝对定位的参照物是浏览器窗口
注：元素的定位位置通过left,right,top,bottom属性来进行设置
2.相对定位
语法：position:relative;
参照物：元素偏移前的位置
★相对定位和绝对定位的区别
a）参照物不同
绝对定位的参照物是离元素最近的具有定位属性的父包含块，相对定位的参照物是元素偏移前的位置
b) 是否会脱离文档流
绝对定位会脱离文档流，位置会被其他元素占据，相对定位不会脱离文档流，原来的位置保留
3.固定定位
语法：position:fixed;
参照物：浏览器窗口或屏幕窗口
注：当给元素设置了固定定位后，元素会脱离正常的文档流，位置会被其他元素占据
三、透明度设置
语法:opacity:数值; （取值范围0-1,0为完全透明，1为完全不透明）
注：IE8及以下版本的IE浏览器不支持opacity属性，兼容写法如下：
filter:alpha(opacity=数值); （取值范围0-100）
四、定位元素层叠属性
语法：z-index:auto|number;
number 无单位的整数值，也可以设置负值
注：没有设置z-index时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上；
五、锚点链接
语法：
a）命名锚记：
<标记 id=”锚记名”></标记>
b）连接锚记名
<a href=”#锚记名”></a>
eg: <h1 id=”one”>第一章 html基础</h1>
<a href=”#one”>第一章</a>
—————————————————
扩展一：如何在网页中插入flash
语法：<object width=”1000″ height=”500″>
<param name=”movie” value=”img/flash.swf”/>
<embed width=”1000″ height=”500″ src=”img/flash.swf”></embed>
</object>
扩展二：设置滚动字幕效果
语法：
<marquee behavior=”scroll|alternate” width=”200″ height=”30″ direction=”left|right|up|down” scrollamount=”20″>
滚动内容…
</marquee>
注：scrollamount用来设置滚动的速度，值越大速度越快
宽高自适应
一、宽度自适应
语法：width:100%;
注：给元素设置宽度100%将会继承父元素的宽度
块状元素默认宽度为100%
注：宽度自适应主要应用在通栏效果中
二、高度自适应
语法：height:auto; 或不设置高度
注：容器的高度由里面内容来决定
三、最大，最小高度，最大，最小宽度
1.最小高度
语法：min-height:数值+单位;
注：IE6不识别min-height属性，兼容写法如下：
a）min-height:100px; _height:100px;
b）min-height:100px; height:auto!important; height:100px;
2.最大高度
语法：max-height:数值+单位;
3.最小宽度
语法：min-width:数值+单位;
注：块状元素设置min-width属性时，需要将元素转换为内联块状元素
4.最大宽度
语法：max-width:数值+单位;
注：以上四组属性IE6及以下版本浏览器都不识别
四、高度塌陷问题
描述：父元素高度自适应，子元素float后，导致父元素高度为0称为高度塌陷问题
a）给父元素一个固定的高度
父元素{height:value;}
缺点：给父元素固定的高度违背了高度自适应的原则，不建议使用
b) 给父元素添加overflow:hidden;
优点：简单
缺点：当子元素存在定位时，定位在父元素框之外的部分将会被隐藏掉
c) 在浮动的子元素末尾添加一个空div，并设置如下样式：
.clear{clear:both;height:0;overflow:hidden;}
优点：兼容性好，所有浏览器都支持
缺点：在网页中添加若干个无意义的div，容易造成代码冗余
d）万能清除浮动法
父元素:after{content:”;
display:block;
clear:both;
height:0;
overflow:hidden;
visibility:hidden;}
优点：解决了代码冗余的问题，是官方推荐的解决高度塌陷问题的方法
五、伪元素
1. 元素:before
语法： .box:before{
content:”hello”;
font-size:30px;
color:red;
…
}
注：:before是在元素里面所有内容之前添加一个伪元素
2. 元素:after
语法：.box:after{
content:”world”;
font-size:30px;
color:green;
}
注： :after是在元素里面所有内容之后添加一个伪元素
注：I.无论伪元素内容是否为空，都必须添加content属性
II.伪元素是一个内联元素
六、元素隐藏不可见的两种方式
1.display:none;
元素隐藏不可见，位置不保留（看不见，摸不着）
2.visibility:hidden;
元素隐藏不可见，位置保留(看不见，摸得着)
七、窗口高度自适应
首先设置：
html,body{height:100%;}
然后给元素设置：
元素{height:100%;}
注：窗口高度自适应主要应用于内容不满一屏或者没有内容body和html高度为0的情况
八、水平居中
1.如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:center;来实现的。
2.满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的
注：当元素设置了float，绝对定位，固定定位，左右margin为auto将会失效
3.不定宽块状元素水平居中
方案一：给子元素设置display:inline-block;给父元素设置text-align:center;
方案二：给父元素设置display:table; margin:0 auto;
注：display:table; 将元素转换为表格形式
九、元素水平垂直都居中问题
1.定宽高元素在屏幕窗口水平垂直都居中，方法如下：
元素{
width:value;
height:value;
position:fixed;
left:50%;
top:50%;
margin-left:-width/2;
margin-top:-height/2;
}
2.不定宽高元素在屏幕窗口水平垂直都居中，方法如下：
元素{
position:fixed;
left:0;
top:0;
bottom:0;
right:0;
margin:auto;
}
3.不定宽高的子元素在父元素中水平垂直都居中，方法如下：
a）父元素{
position:relative;
}
子元素{
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
margin:auto;
}
b）父元素{
display:table-cell;
text-align:center;
vertical-align:middle;
}
注：display:table-cell;将元素转换为表格单元格形式
十、圆角效果
语法：border-radius:数值+单位;
注：border-radius:50%; (圆)
注：border-radius是css3新增的属性，低版本IE浏览器不支持，需要使用背景图片的方式来实现
常见兼容性问题
一、常见兼容性问题
1.双倍浮动bug
描述：块元素float后，又设置了横向的margin，在IE6下显示的margin比设置的margin值要大
解决方案：给浮动的块元素添加display:inline;
2.表单元素行高不一致
解决方案：
方案一：给表单元素添加vertical-align:middle;
方案二：给表单元素添加float属性
扩展：如何去掉表单元素的外边框，方法如下：
input{outline:none;}
3.在IE6不能识别较小高度的容器（一般为10px）
解决方案：
a）给容器添加overflow:hidden;
b）给容器添加font-size:0; (如果容器高度为0时使用第一种解决方案)
4.超链接中的图片在IE浏览器中有默认的边框
解决方案：给img标签添加border:0; 或 border:none;
5.min-height属性IE6不识别
解决方案：
a）min-height:100px; _height:100px;
b）min-height:100px; height:auto!important; height:100px;
6.图片默认有空隙
解决方案：
a）给img设置display:block;
b）给img设置float属性
7.百分比bug
描述：父元素宽度100%，子元素宽度50%，在IE6下，50%+50%大于100%
解决方案：给右边左浮动的子元素添加clear:right;
8.低版本IE浏览器不识别opacity属性
解决方案：filter:alpha(opacity=数值);
9.鼠标指针bug
描述：cursor:hand;只有低版本的IE浏览器支持，其他浏览器都不支持
解决方案： cursor:pointer; 所有浏览器都支持，将鼠标指针改为手型
10.上下margin重叠问题
描述：当给上下两个元素同时设置margin值时，只能识别其中较大的那个值、
解决方案：
a)margin-top和margin-bottom只设置其中一个值
b)给其中一个设置margin属性的元素外层再嵌套一个盒子，并设置overflow:hidden;
11.假传圣旨问题
描述：给子元素设置margin-top应用在了父元素上
解决方案：
1）把给子元素设置的margin-top改为给父元素设置padding-top
2）给父元素设置overflow:hidden;
3）给父元素设置float属性
4）给父元素设置border-top:1px solid transparent;
注：transparent为透明
12.按钮默认大小不一
解决方案：按照设计稿上按钮的样式设定宽高，或者使用背景图
二、css hack(过滤器)
1.下划线属性过滤器
语法： 选择器{_属性:属性值;}
eg: .box{_background:red;}
注：只有IE6可以识别带有下划线的css属性，其他浏览器都不识别
2.!important关键字过滤器
语法：选择器{属性:属性值!important;}
eg: .box{background:yellow!important;background:blue;}
注：!important关键词过滤器除IE6以外的其他浏览器都识别
添加!important关键词的css属性要放在标准css属性之前
3.*属性过滤器
语法：选择器{*属性:属性值;}
eg: .box{*background:pink;}
注：*属性过滤器只有IE6,IE7识别
4.
语法：选择器{属性:属性值;}
eg: .box{background:orange;}
注：是IE6,7,8,9都识别
5.>5.\0<
语法：选择器{属性:属性值>语法：选择器{属性:属性值\0;}<;}
eg: .box{background:black>eg: .box{background:black\0;}<;}
注：>注：\0是IE8及以上版本浏览器识别<>
三、五大浏览器内核
1.IE 内核：Trident
2.Mozilla Firefox(火狐) 内核：Gecko
3.Safari,Chrome 内核：Webkit
4.Opera(欧朋) 内核：Presto
5.由Google,Opera,software联合开发的浏览器排版引擎 内核：Blink
—————————————————
图片整合
一、图片整合的概念
图片整合是指将多张背景图片整合到一张背景图中，通过background-position属性实现图片的定位技术。
二、图片整合的优势
将多张图整合到一张图中，减少了对服务器的请求次数，加快了页面的加载速度，减小了图片体积，从而达到了网站性能的优化。
注：图片整合技术也称为滑动门技术，雪碧图，精灵图
表单，表格高级
一、表单高级
表单的组成：表单域，表单控件，提示信息
1.表单域
<form method=”get|post” action=”服务器端文件”>…</form>
2.表单控件
文本框： <input type=”text”/>
密码框： <input type=”password”/>
提交按钮： <input type=”submit” value=”login”/>
重置按钮： <input type=”reset”/>
单选按钮： <input type=”radio” name=”a”/>
复选按钮：<input type=”checkbox” checked/>
下拉菜单： <select><option>a</option>…</select>
文本域： <textarea></textarea>
3.提示信息
放置在表单控件前后的文字内容叫做提示信息，我们经常将提示信息放置在一个label标签中，语法如下：
a）点击文字选中单选按钮或复选按钮
<input type=”radio” id=”boy” name=”a”/> <label for=”boy”>男</label>
注：设置id属性值和for属性值一致产生关联即可达到点击文字选中按钮的效果
b）通过给label标签设置样式达到一定的效果
注：label是一个内联元素
4.表单字段集及表单字段集标题
语法： <fieldset>
<legend>标题</legend>
表单控件…
</fieldset>
注：将form表单中的内容进行分组，并添加一个标题，在form中可以嵌套多个fieldset
5.上传文件
语法： <input type=”file”/>
6.隐藏字段
语法： <input type=”hidden”/>
注：主要用于后端处理数据
7.图像域
语法： <input type=”image” width=”数值” height=”数值” src=”图片路径”/>
注：用在提交按钮位置的图像，使得这幅图像具有按钮的功能
二、表格高级
1.合并相邻单元格边框(给table加)
语法： border-collapse:collapse(合并相邻单元格边框)|separate(边框分开);
2.定义表格标题的位置(给table加)
语法：caption-side:top|bottom|left|right;
注：left和right只有火狐支持
3.设置单元格间距(给table加)
语法：border-spacing:数值+单位;
注：当设置了border-collapse:collapse;后，border-spacing将会失效
4.设置无内容单元格隐藏(给table加)
语法：empty-cells:show(显示)|hide(隐藏);
5.表格布局算法(给table加)
语法：table-layout:auto|fixed(单元格宽度固定，不随内容多少发生变化);
三、表格重要html属性
1.合并列
colspan=”数值”
2.合并行
rowspan=”数值”
3.单元格内容水平对齐方式
align=”left|center|right”
4.单元格内容垂直对齐方式
valign=”top|middle|bottom”
5.分隔线
rules=”rows|cols|all|groups|none”
rows 行分隔线
cols 列分隔线
all 行分隔线和列分隔线
groups 组分隔线
none 没有分隔线
注：表格行分组：<thead></thead> <tbody></tbody> <tfoot></tfoot>
表格列分组：<colgroup span=”数值”></colgroup>
注： span用来设置几列为一组，默认一列为一组
四、css样式重置
作用：CSS reset的作用是让各个浏览器的CSS样式有一个统一的基准
五、seo优化
seo—搜索引擎优化
◆ 站内优化
1.页面主题优化
给网站添加一个有意义的标题
2.页面头部优化
给网站添加关键词，描述
<meta name=”keywords” content=”” /> 关键词
<meta name=”description” content=””/> 描述
3.超链接优化
a）尽量少用或者不用flash设置超链接，seo无法识别flash中的超链接文字
b) 给a标签添加title属性，可以起到提示访客的作用
c) 尽量避免使用图片热点链接
4.图片优化
给img标签添加title，alt属性
5.网站地图
给网站添加网站地图或网站导航，方便浏览者快速找到有浏览的网页信息
6.给网站添加友情链接
7.seo认为静态页面比动态页面更有利于搜索引擎优化
8.避免”大体积”的页面，代码结构要合理
◆ 站外优化
1.百度推广
2.流量分析
3.网站品牌建设
h5新标签
一、h5新增结构性标签
1.header 定义网页的头部
2.footer 定义网页的底部
3.section 定义网页的某一个区域
4.nav 定义网页的导航部分
5.aside 定义网页的侧边栏
6.article 定义网页的一篇文章
7.hgroup 对网页中的标题进行组合
8.figure 对网页中的元素进行组合
9.figcaption 给figure组合添加一个标题
10.dialog 定义一个对话框
二、h5新增其他标签
1.定义带有记号的文本
语法： <ma rk>定义带有记号的文本</mark>
2.定义已知范围内的标量，测量
语法： <meter value=”10″ min=”1″ max=”100″></meter>
3.定义任务的进度或进程
语法： <progress value=”10″ min=”1″ max=”100″></progress>
三、音频
语法： <audio controls autoplay loop>
<source src=”1.mp3″ type=”audio/mp3″/>
…
Your browser does not support the element
</audio>
注：音频相关html属性
a）src 引入音频文件路径
b) controls 显示音频控制条
c) autoplay 设置自动播放
d) loop 设置循环播放
注：audio支持的音频格式：mp3,ogg,wav
四、视频
语法：<video controls width=”数值” height=”数值” autoplay controls poster=”图片路径”>
<source src=”2.mp4″ type=”video/mp4″/>
…
Your browser does not support the element
</video>
注：视频相关html属性
a）src 引入音频文件路径
b) controls 显示音频控制条
c) autoplay 设置自动播放
d) loop 设置循环播放
e) width 定义视频区域的宽度
f) height 定义视频区域的高度
g) poster 在视频播放前或快进快退时显示的一张图片
注：video支持的视频格式：mp4(mpeg4),ogg,webm
五、h5新增type属性值
1.type=”email”
限制用户输入为email类型（必须含有@符，@符前后内容不能为空）
2.type=”url”
限制用户输入为url类型（必须含有http://,并且后面内容不能为空）
3.type=”number”
限制用户输入为number类型
eg: <input type=”number” min=”1″ max=”100″ value=”1″ step=”2″/>
注：min 设置最小值 max 设置最大值 step 设置每次递增递减的值
4.type=”range”
产生一个滑动条的表单
eg: <input type=”range” value=”1″ min=”0″ max=”100″/>
5.type=”color”
产生一个选择颜色的面板
6.type=”date”
产生一个选择日期的面板
7.type=”time”
产生一个选择时间的面板
8.type=”month”
产生一个选择年月的面板
9.type=”search”
产生一个具有搜索意义的表单
六、h5新增表单属性
1.required 必填项，限制用户输入不能为空
eg: <input type=”text” required/>
2.placeholder=”默认提示信息内容” 给表单控件添加默认提示信息
eg: <input type=”text” placeholder=”请输入用户名”/>
3.autofocus 页面加载完成后自动聚焦到某个input框
eg: <input type=”text” autofocus/>
4.pattern=”正则表达式” 按照设置的规则输入内容
eg: <input type=”text” pattern=”^[a-zA-Z0-9]{6,16}$”/>
5.list 指定一个datalist，作为下拉提示单
eg: <input type=”search” list=”data”/>
<datalist id=”data”>
<option>a</option>
…
</datalist>
注：type为search的input框的list属性值必须和datalist标签的id名一致才能实现搜索的功能
七.取消h5的表单验证
语法： <form novalidate></form>
sublime常用快捷键
<!– sublime常用快捷键 –>
<!– 1.快速生成html基本模板 –>
<!– !+tab键 –>
<!– 2.添加或删除注释 –>
<!– ctrl+? –>
<!– <ul class=”uls”>
<li><a href=”#”>今天是2018年七月九号</a><span>2018-07-09</span></li>
<li><a href=”#”>今天是2018年七月九号</a><span>2018-07-09</span></li>
<li><a href=”#”>今天是2018年七月九号</a><span>2018-07-09</span></li>
<li><a href=”#”>今天是2018年七月九号</a><span>2018-07-09</span></li>
<li><a href=”#”>今天是2018年七月九号</a><span>2018-07-09</span></li>
<li><a href=”#”>今天是2018年七月九号</a><span>2018-07-09</span></li>
</ul> –>
<!– 3.快速生成标记内容
标记.class名>子标记名称*个数
ul.uls>li*6>a+span –>
css3选择器
一、基本选择器
1.通配符
*{margin:0; padding:0;}
2.元素选择符（标签选择器）
h1{color:red;}
3.class选择器（类选择器）
.box{background:blue;}
4.id选择器
#wraper{color:black;}
5.群组选择器
ol,ul{list-style:none;}
二、层次选择器（关系选择器）
1.E F (后代选择器或包含选择器)
匹配E元素下所有子元素F
eg: .box a{color:red;}
匹配.box下所有子元素a
2.E>F (子代选择器)
匹配E元素下第一级子元素F
eg: .box>a{color:red;}
匹配.box下第一级子元素a
3.E+F 相邻兄弟选择器
匹配E元素后面紧邻的那个F元素(有且仅有一个)
eg: .box+h1{color:blue;}
匹配.box后面紧邻的那一个h1
4.E~F 通用兄弟选择器
匹配E元素后面所有的F元素(有可能匹配到多个)
eg: .box~h1{color:blue;}
匹配.box后面所有的h1元素
三、动态伪类选择器
1.E:link 没有被访问过的状态
2.E:visited 访问过后的状态
3.E:hover 滑过时的状态
4.E:active 鼠标按下时的状态
5.E:focus 光标聚焦到input框时的状态
四、结构性伪类选择器
1. :first-child 匹配每个父元素下第一个子元素
eg: .box a:first-child{color:red;}
匹配.box下第一个子元素a(此时，a必须是.box下的第一个子元素)
eg: .box :first-child{color:red;}
匹配.box下每个父元素下的第一个子元素
注： :first-child 《=》 :nth-child(1)
都是匹配父元素下的第一个子元素
2. :last-child 匹配每个父元素下最后一个子元素
eg: .box a:last-child{color:blue;}
匹配.box下最后一个子元素a(此时，a必须是.box下最后一个子元素)
eg: .box :last-child{color:blue;}
匹配.box下每个父元素下的最后一个子元素
注： :last-child 《=》 :nth-last-child(1)
都是匹配父元素下的最后一个子元素
3. :nth-child(n) 匹配父元素下的第n个子元素
eg: .box :nth-child(3){color:red;}
匹配.box下每个父元素下的第三个子元素
4. :nth-child(2n) 匹配父元素下的第偶数个子元素
eg: .tab tr:nth-child(2n){background:red;}
匹配.tab下第偶数个tr
注： :nth-child(2n) 《=》 :nth-child(even)
5. :nth-child(2n+1) 匹配父元素下第奇数个子元素
eg: .tab tr:nth-child(2n+1){background:blue;}
匹配.tab下第奇数个tr
注： :nth-child(2n+1) 《=》 :nth-child(odd)
6. :nth-last-child(n) 匹配父元素下倒着数第n个子元素
eg: .tab tr:nth-last-child(3){color:red;}
匹配.tab下倒数第三个子元素tr
——————————————————-
7. :first-of-type 匹配父元素下指定类型的第一个子元素
eg: .uls li:first-of-type{background:pink;}
匹配.uls下li这种类型的第一个子元素
注： :first-of-type 《=》 :nth-of-type(1)
都是匹配父元素下指定类型的第一个子元素
8. :last-of-type 匹配父元素下指定类型的最后一个子元素
eg: .uls li:last-of-type{background:yellow;}
匹配.uls下li这种类型的最后一个子元素
注：:last-of-type 《=》 nth-last-of-type(1)
都是匹配父元素下指定类型的最后一个子元素
9. :nth-of-type(n) 匹配父元素下指定类型的第n个子元素
eg: .uls li:nth-of-type(3){background:blue;}
匹配.uls下li这种类型的第3个子元素
10. :nth-last-of-type(n) 匹配父元素下指定类型的倒数第n个子元素
eg: .uls li:nth-last-of-type(3){background:orange;}
匹配.uls下li这种类型的倒数第三个子元素
——————————————————-
11. :only-child 匹配父元素下唯一一个子元素
12. :only-of-type 匹配父元素下指定类型的唯一一个子元素
13. :empty 匹配内容为空的元素(空格，回车换行都不能有)
14. :root 匹配根元素html
四、UI状态伪类选择器（主要针对form表单元素）
1. E:checked 匹配选中状态的单选或复选按钮
eg: input:checked+label{color:red;}
匹配选中状态的input控件后面紧邻的那个label标签
2. E:enabled 匹配启用状态的表单元素
eg: input:enabled{border:1px solid red;}
3. E:disabled 匹配禁用状态的表单元素
eg: input:disabled{background:gray;}
五、目标伪类选择器
语法： E:target 匹配锚点链接连接到的那个元素
eg: p:target{display:block;}
当锚点链接连接到p标签，应用display:block;
六、属性选择器
1. E[attr] 匹配含有attr属性的E元素
eg: a[title]{text-decoration:none;}
匹配含有title属性的a标签
2. E[attr=value] 匹配含有attr属性并且值为value的E元素
eg: a[title=前端]{color:black;}
匹配含有title属性并且值为前端的a标签
3. E[attr^=value] 匹配含有attr属性并且值以value开头的E元素
eg: a[href^=http]{font-size:12px;}
匹配含有href属性并且属性值以http开头的a标签
4. E[attr$=value] 匹配含有attr属性并且值以value结尾的E元素
eg: a[href$=com]{color:blue;}
匹配含有href属性并且属性值以com结尾的a标签
5. E[attr~=value] 匹配含有attr属性并且属性值列表中含有value这个词的E元素
eg: a[title~=培训]{color:red;}
匹配含有title属性，并且属性值列表中含有培训这个词的a标签
6. E[attr*=value] 匹配含有attr属性并且属性值列表中含有value这个字的E元素
eg: a[title*=培训]{color:yellow;}
匹配含有title属性，并且属性值列表中含有培训两个字的a标签
7. E[attr|=value] 匹配含有attr属性，并且值以value-开头或值为value的E元素
eg: a[class|=link]{color:blue;}
匹配含有class属性并且值以link-开头或值为link的a标签
七、否定伪类选择器
语法： E:not(F) 匹配不满足条件F的E元素
eg: li:not([class=lis]){color:red;}
匹配不满足条件class=lis的li元素
八、语言伪类选择器
语法： E:lang(val) 匹配指定了lang属性，并且值为val的E元素
九、伪元素
1. E:before 在E元素所有内容之前添加一个伪元素
eg: .box:before{
content:”hello”;
font-size:32px;
…
}
2. E:after 在E元素所有内容之后添加一个伪元素
eg: .box:after{
content:””;
display:block;
clear:both;
height:0;
overflow:hidden;
visibility:hidden;
}
注：:after常用于清除浮动
伪元素是一个内联元素
不管内容是否为空，都不能省略content
3. :first-line 匹配段落文本中的第一行
4. :first-letter 匹配段落文本中的第一个字符
5. ::selection 改变选中文字的效果
注：针对火狐内核的兼容写法如下：
p::-moz-selection{color:red;}
十、渐进增强和优雅降级
1.渐进增强
一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
eg: .box{ /*渐进增强写法*/
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
2.优雅降级
一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
eg: .box{ /*优雅降级写法*/
transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
}
注：css3属性针对不同内核的兼容写法：
对webkit内核 -webkit-
针对火狐内核 -moz-
针对opera内核 -o-
针对IE内核 -ms-
扩展：如何使用border实现三角的效果，方法如下：
元素{
width:0;
height:0;
border:3px solid transparent;
border-top-color:blue; /*top还可以根据需要更改为bottom,right,left*/
}
css3圆角，阴影
一、圆角
语法： border-radius:数值+单位;
1.设置一个值
border-radius:20px; 四个方向圆角都为20px
2.设置两个值
border-radius:50px 10px; 左上，右下为50px,右上，左下为10px
3.设置三个值
border-radius:50px 0px 10px; 左上为50px,右上和左下为0,右下为10px
4.设置四个值
border-radius:0px 10px 30px 60px; 顺时针方向依次为左上0，右上10，右下30，左下60
5.用/设置圆角
border-radius:50px/100px;
第一组值代表水平半径为50px,/后的第二组值代表垂直半径为100px
6.还可以单独设置某一个方向的圆角
border-top-left-radius:10px;
注：border-top-left-radius:20px 50px; 水平半径为20px,垂直半径为50px
7.设置为圆
border-radius:50%;
二、多色彩边框
语法： .box{-moz-border-top-colors:black red yellow;}
注：只有低版本的火狐浏览器支持
三、图像边框
1.设置图像边框的路径
语法：border-image-source:url(图片路径);
2.设置图像边框的裁剪位置
语法：border-image-slice:数值;
注：a)设置数值专指像素
b) 如何需要中间部分显示出来，需要添加fill
eg: border-image-slice:27 fill;
3.设置图像边框的平铺属性
语法：border-image-repeat:stretch|repeat|round;
a)stretch 默认值，图像被拉伸
b)repeat 图片默认平铺，当碰到边界时则会被截断
c)round 图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。
eg: border-image-repeat:round stretch;
代表水平方向铺满，垂直方向拉伸
四、文本阴影
语法： text-shadow:水平偏移量 垂直偏移量 模糊度 颜色值;
eg: text-shadow:5px 5px 3px black,8px 8px 5px #999;
注：a) 多组阴影的值用逗号分隔
b) 水平偏移量向右为正，向左为负，垂直偏移量向下为正，向上为负
c) 模糊度最小值为0，不允许设置负值
扩展：文字描边，语法如下：
-webkit-text-stroke:3px blue;
五、盒阴影
语法：box-shadow:水平偏移量 垂直偏移量 模糊度 扩展半径 颜色值;
eg: box-shadow:5px 5px 10px #333,8px 8px 12px #666;
注：盒阴影默认为外阴影，如果需要设置内阴影，写法如下：
eg: box-shadow:inset 3px 3px 5px #333,inset 5px 5px 8px #666;
注：当设置了扩展半径后，一般水平和垂直偏移量设置为0
eg: box-shadow:0px 0px 5px 10px red;
box-shadow:inset 0px 0px 5px 10px red;
css3弹性布局
一、分栏布局
1.设置栏数
语法： column-count:数值;
2.设置每栏的宽度
语法：column-width:数值+单位;
注：column-count和column-width设置其中一个属性即可
3.设置栏间距
语法：column-gap:数值+单位;
4.设置栏分隔线
语法：column-rule:宽度 solid|dashed|dotted 颜色;
eg: column-rule:3px dashed blue;
5.设置是否跨栏显示
语法：column-span:all(跨栏显示)|none(不跨栏显示);
注：该属性给需要跨栏显示的元素添加
二、弹性布局
语法：display:flex;
说明：
a) 当给元素设置了display:flex;该元素就成为了弹性盒
b) 当给父元素设置弹性盒后，子元素的float,clear,vertical-align将会失效
c) 我们把设置了display:flex;属性的元素叫做flex容器，把里面的子元素叫做flex项目
d) 当给元素设置了弹性盒以后，随之会产生两根轴线：主轴和交叉轴
◆ Flex容器属性
1.改变主轴的方向
语法：flex-direction:row|row-reverse|column|column-reverse;
row 默认值，主轴在水平方向，起点在左端
row-reverse 主轴在水平方向，起点在右端
column 主轴在垂直方向，起点在上沿
column-reverse 主轴在垂直方向，起点在下沿
2.设置flex项目是单行显示还是多行显示
语法：flex-wrap:nowrap|wrap|wrap-reverse;
nowrap 默认值，不换行
wrap 换行
wrap-reverse 与wrap相似，但是行的顺序是倒过来的
3.flex-direction和flex-wrap的简写方式
语法：flex-flow:row nowrap;
4.设置主轴对齐方式
语法：justify-content:flex-start|flex-end|center|space-between|space-around;
flex-start 类似于左浮动
flex-end 类似于右浮动
center flex项目居中对齐
space-between flex项目两端对齐，中间间隔相等
space-around flex项目两侧间隔相等
5.设置交叉轴对齐方式
语法：align-items:flex-start|flex-end|center|baseline|stretch;
flex-start 对齐交叉轴的起点
flex-end 对齐交叉轴的终点
center 以交叉轴为参考，居中对齐
baseline flex项目第一行文字基线对齐
stretch flex项目没有设置高度或者为auto，将占满整个父元素的高度
———————————————–
★ 如何使用flex布局实现不定宽高的元素在屏幕窗口水平垂直都居中，方法如下：
html,body{height:100%;}
body{display:flex;justify-content:center;align-items:center;}
★ 如何使用flex布局实现不定宽高的子元素在父元素中水平垂直都居中，方法如下：
父元素{display:flex;justify-content:center;align-items:center;}
———————————————–
6.设置多根轴线对齐方式(如果只有一根轴线，该属性不起作用)
语法：align-content:flex-start|flex-end|center|space-between|space-around|stretch;
flex-start 对齐交叉轴的起点
flex-end 对齐交叉轴的终点
center 以交叉轴为参考，居中对齐
space-between 轴线两端对齐，中间间隔相等
space-around 轴线间两侧间隔相等
stretch flex项目没有设置高度或者高度为auto，将占满整个父元素的高度
◆ Flex项目属性
1.改变flex项目排列顺序
语法：order:0|数值;
注：默认值为0,值越小越靠前
2.设置某个flex项目不同于其他flex项目的交叉轴对齐方式
语法：align-self:flex-start|flex-end|center|baseline|stretch;
注：属性值的使用方法同align-items属性
3.设置flex项目的放大比例
语法：flex-grow:0|数值;
注：flex-grow默认值为0即使存在剩余空间也不放大
4.设置flex项目的缩小比例
语法：flex-shrink:1|数值;
注：flex-shrink默认值为1,当flex容器剩余空间不足时，flex项目等比例缩小
注：flex-shrink:0; 即使flex容器空间不足，flex项目也不缩小
5.设置flex项目占据主轴的空间
语法：flex-basis:数值+单位;
注：flex-basis默认值为auto
6.flex-grow,flex-shrink,flex-basis的简写方式
语法：flex:0 1 auto; (默认值)
注：flex:1; 完整写法：flex:1 1 0%;
主要应用在两个方面：
a) 等比例分配空间
b) 将剩余空间分配给某个元素
三、响应式布局
概念—写一套css样式可以应用在多个终端设备
优点：可以同时适配多个终端，灵活性更强
缺点：工作量增加，会造成代码冗余，加载时间加长
原理：媒体查询
四、媒体查询
1.外联式媒体查询
语法：
<link rel=”stylesheet” media=”screen and (min-width:960px)” href=”blue.css”/>
<link rel=”stylesheet” media=”screen and (max-width:960px)” href=”red.css”/>
注：当屏幕窗口大于等于960px时，引用blue.css文件
当屏幕窗口小于等于960px时，引用red.css文件
2.内嵌式媒体查询
语法：
@media screen and (min-width:320px) and (max-width:960px){
body{
background:red;
}
}
注：当屏幕窗口大于等于320px,小于等于960px时，body背景色为红色
标准盒模型和怪异盒模型
一、标准盒模型和怪异盒模型
标准盒模型是由content,padding,border,margin四部分组成
怪异盒模型是由content,margin组成
标准盒模型的总宽度=width+左右padding+左右border+左右margin
标准盒模型的总高度=height+上下padding+上下border+上下margin
怪异盒模型的总宽度=width+左右margin
怪异盒模型的总高度=height+上下margin
注：当网页没有添加文档声明时，就会触发某些浏览器(如IE6)的怪异模式
二、box-sizing常用属性值有哪些及其含义？
1.box-sizing:border-box;
将标准盒模型转换为怪异盒模型，总宽高不包括padding和border
2.box-sizing:content-box;
将怪异盒模型转换为标准盒模型，总宽高包含padding和border
———————————————–
扩展：如何自定义字体
语法： @font-face{
font-family:字体名称;
src:url(字体文件路径);
}
body{
font-family:字体名称;
}
css3移动端布局
一、移动端相关概念
1.屏幕尺寸
屏幕尺寸是指屏幕对角线的长度，单位为英寸，1英寸=2.54厘米
2.屏幕分辨率
屏幕分辨率是指横纵方向上的像素点数，单位为px，1个像素点=1px
(这里的1px是指物理设备上的一个像素点)
常见移动端设备屏幕分辨率：
iphone6,6s,7,8 1334*750
iponee6plus,7plus,8plus 1920*1080
注：移动端设备一般为 纵向像素*横向像素
3.ppi
屏幕每英寸可以显示的像素点数，即屏幕像素密度，单位为ppi
计算公式：
4.dpr
dpr是devicePixelRatio的简写，指物理像素与逻辑像素的比值
物理像素：屏幕分辨率
逻辑像素：写在css文件中的像素值，即要显示在设备上的像素值
常见设备dpr值：
iphone6,7,8 dpr=2
iphone6plus,7plus,8plus dpr=3
5.移动端meta设置
<meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″>
注：让视图窗口的宽度等于设备的宽度
快捷键：meta:vp+tab键
二、常见移动端布局方案
1.百分比布局(流式布局)
特点：文字流式，控件弹性，图片等比例缩放
顶部和底部的bar不管分辨率怎么变，高度和位置都不变
案例：拉勾网
注：适用于内容较少比较简单的移动端页面
2.等比例缩放布局(rem布局)
特点：使用rem为主要单位进行页面布局，很好的实现了在不同设备上页面等比例缩放
案例：网易
注：适用于页面内容较多较复杂的移动端页面
3.混合布局
特点：混合布局是指将多种布局方式(如flex布局，圣杯布局，百分比布局等)融合在一起实现移动端的屏幕适配的方法
案例：淘宝网
三、移动端相关单位
1.px
像素，相对于屏幕分辨率而言
2.em
相对于父元素字体大小放大或缩小多少倍
1em = 16px
3.rem
相对于根元素字体大小放大或缩小多少倍
4.vw
vw是viewport width的缩写，即视图窗口的宽度
1vw = 视窗宽度的1%
vh是指视图窗口的高度
vmin是vw和vh中较小值
vmax是vw和vh中较大值
css3基础变形
一、css3基础变形
语法： transform:rotate(旋转)|scale(缩放)|skew(倾斜)|translate(位移);
1.旋转(rotate)
a) rotateX(180deg) 沿x轴翻转 等价于 rotate3d(1,0,0,180deg)
b) rotateY(180deg) 沿y轴翻转 等价于 rotate3d(0,1,0,180deg)
c) rotateZ(180deg) 沿z轴翻转 等价于 rotate3d(0,0,1,180deg)
d) rotate(60deg) 不指定轴时，是2d空间的旋转，正值为顺时针，负值为逆时针
注：rotate旋转的单位是deg
2.缩放(scale)
a) scaleX(1.5) 沿x轴缩放，默认值为1，不放大不缩小，大于1为放大，小于1为缩小
b) scaleY(1.5) 沿y轴缩放
c) scale(1.5) 沿x轴和y轴同时缩放
d) scale(-1.5) 先翻转后缩放
3.倾斜(skew)
a) skewX(30deg) 沿x轴倾斜
b) skewY(-30deg) 沿y轴倾斜
c) skew(30deg) 不指定轴时，默认沿x轴倾斜
d) skew(30deg,30deg) x轴和y轴同时倾斜
skewX(30deg) skewY(30deg) x轴和y轴同时倾斜
注：两种写法倾斜效果不同
skew倾斜单位为deg
4.位移(translate)
a) translateX(100px) 沿x轴位移，向右为正，向左为负
b) translateY(-100px) 沿y轴位移，向下为正，向上为负
c) translateZ(100px) 沿z轴位移，向前为正，向后为负
d) translate(100px) 不指定轴时，默认沿x轴位移
e) translate(100px,100px) x轴和y轴同时位移
translateX(100px) translateY(100px)x轴和y轴同时位移
◆ 使用变形实现不定宽高元素在屏幕窗口水平垂直都居中，方法如下：
元素{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
◆ 使用变形实现不定宽高的子元素在父元素中水平垂直都居中，方法如下：
父元素{
position:relative;
}
子元素{
position:absolute;
left:50%;
top:50%;
transform:translateX(-50%) translateY(-50%);
}
二、变形综合
当多种变形方式综合在一起时，顺序不同，效果有可能不同，例如：
eg1: transform:rotate(360deg) scale(1.5);
transform:scale(1.5) rotate(360deg);
顺序不同，效果相同
eg2: transform:translateX(300px) rotate(360deg);
transform:rotate(360deg) translateX(300px);
顺序不同，效果不同
三、改变变形元素中心点位置
语法：transform-origin:left|center|right top|center|bottom;
四、设置元素的变形类型
语法：transform-style:flat(默认值)|preserve-3d;
flat 默认值，2d空间的变形
preserve-3d 3d空间的变形
五、透视，井深
语法：perspective:数值+单位;
eg: 父元素{perspective:1500px;}
eg: 子元素{transform:perspective(800px) rotateY(60deg);}
注：perspective主要用来设置元素3d效果的强度
transition过渡动画
一、transition过渡动画
语法：transition:过渡属性 过渡时间 过渡方式 过渡延迟时间;
eg: transition:all 1s;
1.transition-property(过渡属性)
取值：
none 没有属性发生过渡
all 所有发生变化的属性都添加过渡动画
ident 指定发生过渡的属性列表
eg: transition:transform 1s,background 2s,border-radius 3s;
2.transition-duration(过渡时间)
取值：
0 不执行过渡，直接看到结果
time 指定过渡时间，单位为s
3.transition-delay(过渡延迟时间)
取值：
0 不延迟，直接执行过渡动画
正值 按照设定的时间延迟执行过渡动画
负值 设定时间前的动画将会被截断
4.transition-timing-function(过渡方式)
取值：
ease 默认值
linear 匀速运动
ease-in 加速运动
ease-out 减速运动
ease-in-out 慢-快-慢
二、animation动画
☆ 动画关键帧
语法： @keyframes 动画名称{
0%{
属性:属性值;
}
50%{
属性:属性值;
}
…
100%{
属性:属性值;
}
}
@keyframes 动画名称{
from{
属性:属性值;
}
50%{
属性:属性值;
}
…
to{
属性:属性值;
}
}
———————————————–
语法： animation:动画名称 动画执行时间 动画延迟执行时间 动画播放次数 动画播放状态;
1.animation-name(动画名称)
eg: animation:box_ani 1s;
注：此处的动画名称要和@keyframes中的动画名称一致
2.animation-duration(动画执行一次所需时间)
取值：
0 动画不执行
time 正数，单位为s或者ms
3.animation-delay(动画延迟执行时间)
取值：
0 不延迟，动画立即执行
正数 按照设定的时间延迟执行动画
负数 设定时间前的动画将会被截断
4.animation-iteration-count(动画播放次数)
取值：
number 自定义动画执行次数，设置值可为0或正整数
infinite 无限循环播放
5.animation-play-state(设置对象动画的状态)
取值：
running 默认值，运动
paused 动画暂停
6.animation-timing-function(对象动画过渡类型)
取值：
ease
linear 匀速运动
ease-in
ease-out
ease-in-out
step-start 马上转跳到动画结束状态，或者转跳到下一帧，中间没有过渡
step-end 保持动画开始时的状态，直到动画结束时，马上转跳到动画结束状态
steps(n,start|end) n代表动画分几步完成
7. animation-direction(设置对象动画运动的方向)
取值：
normal 默认值，正常方向运动
reverse 与normal运动方向始终相反
alternate 正反方向交替运动，奇数次正方向，偶数次反方向
alternate-reverse 奇数次反方向，偶数次正方向
8.animation-fill-mode (设置对象动画时间之外的状态)
取值：
none 默认值，不设置时间之外的状态
forwards 保持动画结束时的状态
backwards 保持动画开始时的状态
both 动画遵循forwards和backwards两个规则
扩展：
隐藏翻转元素的背面，语法如下：backface-visibility:hidden;
css3背景，渐变，蒙版
一、背景切割
语法：background-clip:border-box|padding-box|content-box;
作用：设置背景在哪个区域可见
border-box 默认值.背景在边框已经边框以内的区域可见
padding-box 背景在padding区域和content区域可见
content-box 背景在content区域可见
二、背景原点
语法：background-origin:border-box|padding-box|content-box;
作用：设置背景图原点的定位区域
padding-box 默认值，背景原点从padding区域开始
border-box 背景原点从border区域开始
content-box 背景原点从content区域开始
三、背景切割&背景原点
可以将背景切割和背景原点结合使用
eg: background-clip:content-box;
background-origin:border-box;
背景原点从border区域开始，背景在content区域可见
四、背景尺寸
语法：background-size:数值|100%|cover|contain;
1.length
该数值用来设置背景图的宽度和高度，第一个值代表宽度，第二个值代表高度，如果省略第二个值，为auto,等比例缩放
eg: background-size:100px 200px; (背景图有可能发生变形)
background-size:100px; (背景图有可能超出容器,不会发生变形)
2.百分比
以容器的百分比来设置背景图的宽度和高度
eg: background-size:100% 100%;(背景图不会超出容器，但是背景图有可能发生变形)
background-size:100%;(背景图有可能超出容器，但是背景图不会发生变形)
3.cover
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像有可能超出容器，背景图不会发生变形
eg: background-size:cover;
4.contain
把图像扩展至最大尺寸，以使宽度和高度 完全适应内容区域。背景图像始终被包含在容器内,背景图不会发生变形
五、rgba模式
语法： background:rgba(r,g,b,a); a代表透明度，取值范围0~1
eg: background:rgba(0,0,0,.4);
注：rgba模式和opacity的区别：
a) 给容器添加opacity,容器中的文字和图片也会跟随透明
b) rgba模式只是给容器的背景添加一定的透明度，容器中的文本和图片不会跟随透明
———————————————–
扩展：hsla模式
语法： background:hsla(h,s,l,a);
h 色调，取值范围0~360
s 饱和度，取值范围0%~100%
l 亮度，取值范围0%~100%
a 透明度，取值范围0~1
———————————————-
六、线性渐变
语法： background:linear-gradient(渐变方向,颜色 起始位置,颜色 起始位置);
eg: background:linear-gradient(to right,red 0%,yellow 30%,blue 50%);
注：重复的线性渐变写法如下：
background:repeating-linear-gradient(to right,red 0%,yellow 15%,blue 25%);
注：设置重复的线性渐变，必须指定渐变的位置
七、径向渐变
语法：background:-webkit-radial-gradient(渐变中心点位置,渐变形状 渐变半径长度,颜色 起始位置,颜色 起始位置);
eg: background:-webkit-radial-gradient(left top,circle closest-side,red 0%,yellow 10%);
注：重复的径向渐变写法：
background:-webkit-repeating-radial-gradient(center,red 0%,yellow 10%);
注：设置重复的径向渐变，必须指定渐变的位置
———————————————–
扩展一 蒙版
语法： -webkit-mask-image:url(图片路径)|使用渐变作为蒙版图片; -webkit-mask-repeat:no-repeat|repeat-x|repeat-y|repeat;
-webkit-mask-position:center;
扩展二 背景在文字区域可见
语法： -webkit-background-clip:text;
注：设置此属性需要将文字颜色设置为透明，即 color:transparent;
扩展三：倒影
语法： -webkit-box-reflect:left|right|above(上)|below(下) 偏移量 倒影渐变;
———————————————–
八、BFC
1.概念
BFC——block formatting context (块级格式化上下文)
2.如何触发BFC
a) 设置了float除none以外的值(left,right)
b) 设置了overflow除visible以外的值(hidden,scroll,auto)
c) 设置了display属性(table-cell,inline-block,flex)
d) 设置position属性(absolute,fixed)
3.BFC的作用
a) 解决上下margin重叠问题
给设置margin的元素外边再嵌套一个父元素，并设置overflow:hidden;这样就给里面的元素创建了一个块级格式化上下文
b) 常用来清除浮动，解决高度塌陷问题
给父元素设置overflow:hidden;就给里面浮动的子元素创建了一个块级格式化上下文，闭合了浮动
c) 用于实现多栏布局
与浮动元素相邻的已生成BFC的元素不能与浮动元素互相覆盖。利用该特性可以作为多栏布局的一种实现方式
在自己的页面中嵌入其他页面是一个非常重要的操作，既能丰富自己的页面样式又能增强页面的信息量。
举个例子，如果打算在自己的页面中插入一个视频网站的视频该怎么做呢？
假如我现在自己的页面中嵌入这个视频，
我只需要在视频下侧找到"分享"。
点击之后出现这样的对话框，如图：
通过在我们的页面中粘贴这段通用代码就可以显示这个视频了。
代码如下：
<iframe height=498 width=510 src='http://player.youku.com/embed/XNDQ5Mjg1MTU1Mg==' frameborder=0 'allowfullscreen'></iframe>下面就写到我们的页面中试试吧。
首先复制"第一个网页.html"文件，改名为"在页面中嵌入页面.html"保存，然后用记事本打开，修改<head></head>标签中的<title>第一个页面</title>编辑为"在页面中嵌入页面"即可，完整代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title>在页面中嵌入页面</title>
</head>
<body>
<iframe height=498 width=510 src='http://player.youku.com/embed/XNDQ5Mjg1MTU1Mg==' frameborder=0 'allowfullscreen'></iframe>
</body>
</html>页面效果如下：
怎么样，是不是很神奇！
下面我们来分析一下这段代码的含义。
首先要引入一个新标签<iframe>，HTML的使用手册中翻译为"框架"，说实话，这么翻译初学者是不知所云的。这个框架元素的主要作用就是在自己的页面中嵌入其他页面。
在<iframe>标签中先指定路径属性即src。这里使用的是单引号，实际上只要是半角符号，单引号和双引号都可以的。
然后设置长宽属性，即width和height，大家可以尝试改变数据看看。
frameborder可以为iframe的窗口指定一个边框，大家可以尝试把0改成1看看。大家注意哈，这里输入30和输入1是一样的，因为这个属性不是定义边框的宽度，而是定义是否显示边框！在编程中叫做布尔值，0代表没有边框，1代表有边框！和我们点灯的开关一样！
如图：多了个边框出来。
最后'allowfullscreen'这个描述非常的奇葩，把它删掉没有任何影响。不晓得是干什么的，主要是也不符合html的语法（也可能是我没见识）。如果有详细了解的小伙伴欢迎留言指教，感激不尽。
下面我们尝试修改一下src属性，给它一个别的路径看看。例如:
<!DOCTYPE HTML>
<html>
<head>
<title>在页面中嵌入页面</title>
</head>
<body>
<iframe height=498 width=510 src='https://www.toutiao.com/i6790673377188119052/'>
</iframe>
</body>
</html>需要注意的是，修改了src并保存文件之后要把原页面关闭然后重新打开才可以正常显示！
效果如下：
在浏览网页时我们还经常遇到这样的情况，就是有一个独立窗口显示嵌套的页面，上面有个标题，一点击就会跳到那个嵌入的页面上，这个其实很简答，使用一个<a></a>元素即可办到，示例代码如下:
<a href="https://www.toutiao.com/i6790673377188119052/">HTML中的块级元素与内联元素——零基础自学网页制作</a>
<iframe height=498 width=510 src='https://www.toutiao.com/i6790673377188119052/'></iframe>页面示例如下：
框架元素并没有换行，所有我们可以推测出<iframe>标签实际上是个内联元素，如何让它换行呢？
为<iframe>的style属性中写入display:block即可。这句代码的意思是按照块元素来显示<iframe>内容。
示例代码如下：
<iframe height=498 width=510 style = "display:block;"src='https://www.toutiao.com/i6790673377188119052/'></iframe>页面效果如下：
是不是很有意思。
下面我们来介绍一个更有趣的玩法。如图所示：
这个怎么做呢？
这就要介绍<iframe>标签中的另一个属性：name（名字）
示例代码如下：name="iframe"
<iframe name = "iframe" height=498 width=510style = "display:block;"src='https://www.toutiao.com/i6790673377188119052/'allowfullscreen'></iframe>这里讲个题外话，如果大家了解中国古代的"请神术"的话就会知道这样一个有趣的传说，就是如果我们能叫出鬼神的名字就可以驱使它。
编程也是这样，我们给函数或变量一个名字后，就可以随时随地的驱使它。
现在我们给<iframe>起了个名字叫做"iframe"，当然您可以使用其他名字也没问题，但要使用英文或汉语拼音命名，名字是英语字母组合最好。
有了名字之后，<a>标签就要驱使<iframe>标签来显示自己路径下的内容，如何驱使呢？
大家还记得<a>标签中有一个target属性吗？只要让target="iframename"即可！
也就是target="iframe"。示例代码如下：大家要注意的是<a>标签也是内联元素，也需要添加display:block，不然也是排在一列显示。
<a style = "display:block;" target="iframe" href="https://www.toutiao.com/i6790673377188119052/">HTML中的块级元素与内联元素——零基础自学网页制作</a><!--第一个a链接的是头条文章-->
<a style = "display:block;" target="iframe" href="https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid=1838467&fr=aladdin"> 歼20战斗机百科</a><!--第二个a链接的是百度百科-->
<a style = "display:block;"target="iframe" href="image1.jpg">IT美女</a><!--第三个a链接的是本地图片-->
<iframe name = "iframe" height=498 width=510style = "display:block;"></iframe>只要我们为不同的<a>标签赋予target="iframe"的属性，点击这些<a>标签就可以在叫做"iframe"的框架元素中显示自己的页面。这时我们可以把<iframe>标签中的src属性删除掉，保存文件后，关闭测试网页，再重新打开，效果如下:
初始状态下，因为框架元素中的src是空的，所以打开后是空白的。如果您觉得单调可以任意复制3个<a>中的一个href中的链接路径给<iframe>的src属性，打开就是相应的标签。这个就不演示了，大家自己试试即可。
点击第一个链接效果如下：
点击第二个链接如下：
点击第三个链接如下：
最后再强调一下，改完框架的src属性后需要关闭页面后重新打开才可以，刷新的话并不能正确显示！切记！
今天的示例代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title>在页面中嵌入页面</title>
</head>
<body>
<a style = "display:block;" target="iframe" href="https://www.toutiao.com/i6790673377188119052/">HTML中的块级元素与内联元素——零基础自学网页制作</a>
<a style = "display:block;" target="iframe" href="https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid=1838467&fr=aladdin">歼20战斗机百科</a>
<a style = "display:block;" target="iframe" href="image1.jpg">IT美女</a>
<iframe name = "iframe" height=498 width=510 style = "display:block;"></iframe>
</body>
</html>今天的内容结束了，明天我将会为大家介绍<object>和<embed>这两个标签，它们可以在页面中嵌入更多有趣的东西。
喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！
HTML序章（学习目的、对象、基本概念）——零基础自学网页制作
HTML是什么？——零基础自学网页制作
第一个HTML页面如何写？——零基础自学网页制作
HTML页面中head标签有啥用？——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2（路径详解）——零基础自学网页制作
使用HTML添加表格1（基本元素）——零基础自学网页制作
使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作
使用HTML添加表格3（间距与颜色）——零基础自学网页制作
使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
能够写出基本的页面（里面包含图片、各种标签和链接）
我们主要用的开发工具有chrome、hbuilder、Photoshop
浏览器是网页显示、运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。
浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。
渲染引擎 ：它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
JS 引擎 则是解析 Javascript 语言，执行 javascript语言来实现网页的动态效果。
最开始渲染引擎和 JS 引擎并没有区分得很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多，如果加上没什么人使用的非商业的免费内核，可能会有10多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit。
了解一点：移动端的浏览器内核主要说的是系统内置浏览器的内核。
Android手机而言，使用率最高的就是Webkit内核，大部分国产浏览器宣称的自己的内核，基本上也是属于webkit二次开发。
iOS以及WP7平台上，由于系统原因，系统大部分自带浏览器内核，一般是Safari或者IE内核Trident的
结构标准：结构用于对网页元素进行整理和分类，咱们主要学的是HTML。 最重要
表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
行为标准：行为是指网页模型的定义及交互的编写，咱们主要学的是 Javascript
HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”。是用来描述网页的一种语言。
所谓超文本，因为它可以加入图片、声音、动画、多媒体等内容，不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。
<h1> 我是一个大标题 </h1>
注意： 体会 文本 标签 语言 几个词语
总结： HTML 作用就是用标记标签来描述网页，把网页内容在浏览器中展示出来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>1.HTML标签：
作用所有HTML中标签的一个根节点。 最大的标签 根标签
2 head标签： 文档的头部
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
注意在head标签中我们必须要设置的标签是title
3.title标签： 文档的标题
作用：让页面拥有一个属于自己的标题。
4.body标签：文档的主体 以后我们的页面内容 基本都是放到body里面的
body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
在HTML页面中，带有“< >”符号的元素被称为HTML标签，如上面提到的 HTML、head、body都是HTML骨架结构标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令，也称为HTML标签或 HTML元素
1.双标签
<标签名> 内容 </标签名>
该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“</标签名>” 表示该标签的作用结束，一般称为“结束标签（end tag）”。和开始标签相比，结束标签只是在前面加了一个关闭符“/”。
比如 <body>我是文字 </body>
2.单标签
<标签名 />
单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。
比如 <br />
标签的相互关系就分为两种：
1.嵌套关系
<head> <title> </title> </head>
2.并列关系
<head></head> <body></body>
首先 HTML和CSS是两种完全不同的语言，我们学的是结构，就只写HTML标签，认识标签就可以了。 不会再给结构标签指定样式了。
HTML标签有很多，这里我们学习最为常用的，后面有些较少用的，我们可以查下手册就可以了。
排版标签
单词缩写： head 头部. 标题 title 文档标题
为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即
<h1>、<h2>、<h3>、<h4>、<h5>和<h6>
其基本语法格式如下：
<hn> 标题文本 </hn>
<p> 文本内容 </p>
<hr />是单标签
<br />
div span 是没有语义的 是我们网页布局主要的2个盒子 css+div
div 就是 division 的缩写 分割， 分区的意思 其实有很多div 来组合网页。
span, 跨度，跨距；范围
语法格式：
<div> 这是头部 </div> <span>今日价格</span>
在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
b i s u 只有使用 没有 强调的意思 strong em del ins 语义更强烈
使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下：
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
在上面的语法中，
1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3.任何标签的属性都有默认值，省略该属性则取默认值。
采取 键值对 的格式 key="value" 的格式
比如:
<hr width="400" />
属性 是 宽度
值 是 400
单词缩写： image 图像
HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签<img />以及和他相关的属性。其基本语法格式如下：
该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。
<img src="图像URL" />
单词缩写： anchor 的缩写 [ˈæŋkə(r)] 。基本解释 锚, 铁锚 的
在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可，其基本语法格式如下：
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用
target：用于指定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式。
注意：
1.外部链接 需要添加 http:// www.baidu.com
2.内部链接 直接链接内部页面名称即可 比如 < a href="index.html"> 首页
3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
通过创建锚点链接，用户能够快速定位到目标内容。
创建锚点链接分为两步：
1.使用“a href=”#id名>“链接文本"</a>创建链接文本（被点击的） <a href="#two"> 2.使用相应的id名标注跳转目标的位置。 <h3 id="two">第2集</h3>
base 可以设置整体链接的打开状态
base 写到 <head> </head> 之间
把所有的连接 都默认添加 target="_blank"
在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。其基本语法格式如下：
<!-- 注释语句 --> ctrl + / 或者 ctrl +shift + /
注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。
实际工作中，通常新建一个文件夹专门用于存放图像文件，这时再插入图像，就需要采用“路径”的方式来指定图像文件的位置。
根目录 当前目录
路径可以分为： 相对路径和绝对路径
以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。
绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的
“D:webimglogo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/l...”。
无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：
<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ...... </ul>
注意：
有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：
<ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ...... </ol>
所有特性基本与ul 一致。
但是实际工作中， 较少用 ol img src="media/1.jpg" />
定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：
<dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd> ... <dt>名词2</dt> <dd>名词2解释1</dd> <dd>名词2解释2</dd> ... </dl>
在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：
<table> <tr> <td>单元格内的文字</td> ... </tr> ... </table>
在上面的语法中包含三对HTML标签，分别为 table</table、tr</tr、td</td，他们是创建表格的基本标签，缺一不可，下面对他们进行具体的解释
1.table用于定义一个表格。
2.tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。
3.td /td：用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，一对 <tr> </tr>中包含几对<td></td>，就表示该行中有多少列（或多少个单元格）。
注意：
1. <tr></tr>中只能嵌套<td></td> 2. <td></td>标签，他就像一个容器，可以容纳所有的元素
表头一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标签th</th替代相应的单元格标签td</td即可。
在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述），具体 如下所示：
<thead></thead>：用于定义表格的头部。
必须位于<table></table> 标签中，一般包含网页的logo和导航等头部信息。
<tbody></tbody>：用于定义表格的主体。
位于<table></table>标签中，一般包含网页中除头部和底部之外的其他内容。
表格的标题： caption
定义和用法
caption 元素定义表格标题。
<table> <caption>我是表格标题</caption> </table>caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
跨行合并：rowspan 跨列合并：colspan
合并单元格的思想：
将多个内容合并的时候，就会有多余的东西，把它删除。 例如 把 3个 td 合并成一个， 那就多余了2个，需要删除。 公式： 删除的个数 = 合并的个数 - 1
合并的顺序 先上 先左
表格的学习要求： 能手写表格结构，并且能合并单元格。
表单控件：
包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息：
一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
表单域：
他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
在上面的语法中，input /标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，input /标签还可以定义很多其他的属性，其常用属性如下表所示。
label 标签为 input 元素定义标注（标签）。
作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点
如何绑定元素呢？
for 属性规定 label 与哪个表单元素绑定。
<label for="male">Male</label> <input type="radio" name="sex" id="male" value="male">如果需要输入大量的信息，就需要用到textarea/textarea标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：
<textarea cols="每行中的字符数" rows="显示的行数"> 文本内容 </textarea>使用select控件定义下拉菜单的基本语法格式如下
<select> <option>选项1</option> <option>选项2</option> <option>选项3</option> ... </select>注意：
在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：
<form action="url地址" method="提交方式" name="表单名称"> 各种表单控件 </form>常用属性：
注意： 每个表单都应该有自己表单域。
如需转载，请注明出处，否则将追究法律责任。
*请认真填写需求信息，我们会在24小时内与您取得联系。
