前端实习——H5新特性+css3

1、HTML5的新特性
1）在网页上绘制图形的canvas元素
2）多媒体相关video和audio元素
3）对本地离线存储的更好支持
本地存储：提供了两种在客户端存储数据的新方法
localStorage 没有时间限制的数据存储
sessionStorage 针对Session的数据存储
离线应用：用可以应用离线的时候查看网站信息
4）新增的语义化的标签和表单控件

2、HTML5中新增的语义化标签
新增的结构元素
1）header标签：网页的头部区域或文档中某个内容区位的头部，双标签，块级元素
一种具有引导和导航作用的结构元素，通常可以包含整个页面或一个内容区域的标题、搜索、相关logo图片
2）footer标签：网页的底部或文档中某个内容区块的底部，双标签，块级元素
通常可以包含：网页中的版权信息、相关阅读链接、文档的作者、使用条款等
3）nav标签：网页的导航区域，双标签
通常可以包含：网页中主要的导航链接组、传统的导航条、侧边栏导航、页内的导航
内容区域
4）article标签：网页中独立的完整的内容，可以包含header标签，可以独立被外部引用的内容，双标签
通常可以包含：一篇博文、论坛的帖子、报刊中的文章、一段用户评论或独立的插件
5）section标签：网页中内容的章节，双标签
通常可以包含：页面中内容的分区，文章中的章节
6）aside标签：侧边栏，表示当前网页或文章的附属信息，双标签
通常可以包含：与主要内容相关的引用、侧边栏、广告、连接组等
7）hgroup标签：标题组，双标签
通常包含多个标题
8）address标签:网页中联系信息，双标签，文字自带斜体效果
通常包含：文档的作者或文档的编辑者名称、电子邮箱、地址信息、电话号码
新增其他标签：
1）figure标签，双标签，自带间距
语法：

被主体内容引用的，相对独立的内容块，可以包含：图片、图表、代码块等
定义figure中的标题

注意：在一个figure标签中只允许放一个figcation标题
2）mark标签：定义带有标记的文本，目的吸引用户，行级元素，自带背景颜色（黄色），自带文字颜色纯黑，双标签
3）time标签：日期时间标签，定义公历时间，双标签，行级标记
2088-8-18
2088年8月18日

pubdate属性：当前内容的发布时间
注意：datetime属性定义日期时间，如果没有该属性，那么必须在元素内规定日期和时间
4）progress 标签：进度条


max属性：最大值
value属性：初始值
5）canvas标签：图形的容器
如果绘制形状，必须使用js来绘制

3、HTML5兼容
最新版的chrome、firefox、safari、Opera支持部分的HTML5特性。IE9支持部分HTML5特性，IE8不支持，IE低版本中有兼容性问题。
1）使用js新增元素的方式解决：

4、HTML已经被移出的标签
font、u、center、big、dir、basefont、frame、frameset、noframes xmp s strike applet acronym
5、新增多媒体标签
1）音频标签：IE8及更早版本的浏览器中不支持audio元素
audio标签：
您的浏览器不支持
html5支持的音频格式：
ogg 支持的浏览器chrome、Firefox、Opera10+
mp3 支持的浏览器chrome、Firefox、Opera10+、IE9+、Safari5+
wav 支持的浏览器chrome、Firefox、Opera10+、Safari
常用属性：
src属性：音频文件的URL地址
controls属性：显示音频播放控件
loop属性：重复播放
muted属性：静音
source标签：可以链接不同格式的音频文件，浏览器使用第一个可以识别的格式




您的浏览器不支持audio元素播放音频

2）视频标签：IE8及更早版本的浏览器中不支持video元素
video标签：



html5支持的音视频格式：
ogg 支持的浏览器chrome、Firefox、Opera
mepg4 支持的浏览器chrome、Firefox、Opera10、Safari、IE9+
WebM 支持的浏览器chrome、Firefox、Opera
常用属性：
src属性：音频文件的URL地址
controls属性：显示视频播放控件
loop属性：重复播放
muted属性：静音

    width、height设视频播放器的宽度和高度，单位像素
    poster属性：预览图片 poster="路径"
source标签：可以链接不同格式的视频文件，浏览器使用第一个可以识别的格式
    

6、新增的表单标签和属性
新增表单标签–input类型
input、button、select-option、textarea
1）url类型：设置包含访问协议的url地址的输入域，在提交表单时，自动验证URL域的内容
2）email类型：包含email地址的输入域，在提交表单时，会自动验证email地址

3）search类型：用于检索关键字的文本输入域，多用于手机客户端
4）tel类型：用于输入电话号码的输入域，为移动端网页开发服务的，在PC端网页中不生效，在移动端页面中点击tel类型输入域时，跳出虚拟电话键盘（0-9，*，#）

5）number类型：用于包含数值的输入域
max属性：最大值
min属性：最小值
value属性：初始值
step属性：步长，合法的数字间隔，默认值为1
注意：当用户输入非法的数值时，会弹出相应的提示信息，会阻止表单提交
6）range类型：生成一个数字滑动条，默认值50%，
max属性：最大值
min属性：最小值
value属性：初始值
step属性：步长，合法的数字间隔，默认值为1
注意：range类型和number类型功能基本一致，
区别：外观样式不一样，默认值不同。
range类型min默认值为0，max类型默认值为100

7）color类型：生成一个颜色选择器，值为16进制色值
注意：简写无效，必须为六位十六进制数

8）date类型：日期选择器，包含年、月、日
9）datetime类型：输入日期时间（UTC时间）——手动输入
UTC+8 东八区
UTC-10 西十区
10）datetime-local类型：日期时间选择器，包含年、月、日、时、分（无时区）
11）month类型：月选择器，包含年、月
12）time类型：时间选择器，包含时、分
13）week类型：周选择器，包含年、周（全年第几周）

14）datalist类型：选项列表，可选的下拉列表，与input元素配合使用
input元素的list属性和datalist的id属性关联


bj
cq
sz
sh
tj

7、表单属性：
1）min、max、step属性：
输入域中所允许的最小值、最大值、步长
用于包含数字的input类型的元素，如input的number、range类型
2）placeholder属性：
为输入域设置提示信息
3）list属性：
input和datalist实现可选下拉列表的属性
4）autocomplete属性：是否启用自动完成功能
autocomplete=“on"元素开启自动完成功能
autocomplete=“off"元素关闭自动完成功能
5）autofocus属性：自动获取焦点的功能
6）form属性：定义表单元素所选的表单区域



7）required属性：提交表单时，表单元素不能为空,如果设置value值，该属性失效
8）pattern属性：对用户输入内容做验证（通过正则表达式）
pattern=”[A-Za-z]{3}”
9)multiple属性：选择多个值
用于上传域和email类型的输入域

Day15
1.css3
选择器、框模型属性、背景和边框、文本效果模、2d/3d转换、动画、多列布局、用户界面
2.css2和css3区别：
css2：性能和访问相对较差；更偏向于表现，部分效果需要使用图片；无兼容问题
css3：性能和效果都能得到兼顾；能实现动画效果，在css2找那个需要使用图片实现的可以在css3中使用代码实现；部分属性需要兼容处理
3.渐进增强和优雅降级
渐进增强：针对低版本浏览器进行页面建构，保证最基本功能的实现，然后在针对高级浏览器进行效果设置，包括交互的实现，从而达到更好的用户体验
优雅降级：一开始构建完美的用户体验，然后再针对低版本的浏览器进行兼容
4.浏览器的私有前缀——兼容性前缀
浏览器 内核 css兼容性前缀
chrome|Safari webkit -webkit-
firefox gecko -moz-
Opera blink|presto -o-
IE trident -ms-
书写顺序：先写带有私有前缀的css3属性，再写标准的css3属性
Autoprefixer插件，为css3属性自动生成兼容性前缀：在css文件中，按F1，执行Auto run
5、选择器
1）属性选择器
css2中的属性选择器：权值10属性|类|伪类，伪元素选择器1
element[attr]{}指定了属性名，但是没有指定属性值的element元素
element[attr=value]既指定了属性名又指定了属性值,绝对等于
element[attr~=value]指定了属性名，并且属性值可以为词列表中的包含指定属性值的element元素
css3中新增的属性选择器：
element[attr^=value]指定了属性名称，并且以value值开头的element元素
element[attr$=value]指定了属性名称，并且以value值结尾的element元素
element[attr=*value]指定了属性名称，并且词列表中包含value值的element元素
2）结构性伪类选择器
:root{}匹配根元素
element:first-child{} 选择一组相同元素中的第一个元素
element:last-child{} 选择一组相同元素中的最后一个元素

element:nth-child(N){} 选择一组相同元素中的第N个元素，N可以是数值、关键词、表达式
    element:nth-child(odd){} 奇数
    element:nth-child(2n-1){} 奇数
    element:nth-child(even){} 偶数
    element:nth-child(2n){} 偶数
    3n 3,6

element:nth-last-child(n){} 选择一组相同元素中的倒数第n个元素
element:nth-of-type(n){} 一组元素中选择特定类型的元素，n可以使数值、关键词、表达式
odd 2n-1 奇数
even 2n 偶数
element:nth-last-of-type(n){} 一组元素中选择特定类型的元素,但是从最后一个开始计算

3）状态伪类选择器
element:checked{}：选择页面中处于选中状态的element元素
element:disabled{}：选择页面中处于禁用状态的element元素
element:enabled{}：选择页面中处于可用状态的element元素

6、border-radio属性，圆角设置
border-top-left-radio:左上角圆角设置;
100px 50%：元素本身宽度50%，高度50%

7、css3背景属性
1)多背景设置
background-image:url(图片路径),url(图片路径);
多个背景图之间用逗号隔开。书写的背景越靠前，背景图显示的越靠上
一组和另外一组之间用逗号隔开
2）背景图尺寸设置：
background-size:数值;
npx 等比例缩放
npx mpx 根据尺寸缩放
background-size:百分比
100% 100% 以元素的百分比来设置背景图片的宽度和高度
background-size:关键词
cover:覆盖，图片会等比例缩放到铺满整个盒子，但是背景图可能无法完整显示在盒子中
contain:包含，等比例缩放到图片完整显示在盒子中，但是背景图可能无法铺满整个盒子
background: background-color background-repeat background-position/background-size
3）background-origin属性：背景图片的定位区域
background-origin:content-box;背景图片相对于内容区域做定位；
background-origin:padding-box;背景图片相对于内填充区域定位；
background-origin:border-box;背景图片相对于边框区域定位；
4）background-clip属性：背景颜色绘制区域
background-clip:content-box;背景被裁减到内容区域显示，仅在内容区显示。
background-clip:padding-box;背景被裁减到内填充区域显示，仅在内容区和内填充显示。
background-clip:border-box;背景被裁减到边框区域显示，仅在内容区、内填充和边框区域显示。

8、css3渐变属性
1）线性渐变 linear-gradient
background-image:linear-gradient（方向，颜色1 范围1，颜色2 范围2）;
方向：ndeg(n为数值)
left|right|top|bottom
组合left top
to right = left
范围：background-image:linear-gradient（方向，颜色1 百分比1，颜色2 百分比2）;
0-百分比1：颜色1 百分比1-百分比2：渐变 百分比2——100%：颜色2
重复线性渐变：
background-image:repeating-linear-gradient（方向，颜色1 范围1，颜色2 范围2,…）;
2)径向渐变：radial-gradient
background-image:radial-gradient(中心点的位置,渐变的形状,颜色1 范围1,颜色2 范围2,…);
中心点的位置：
x y|
left|right|center bottom|top|center
组合
重复径向渐变：repeating-radial-gradient(中心点的位置,渐变的形状,颜色1 范围1,颜色2 范围2,…);

Day16
1.用户界面属性设置
1）resize属性：用户是否可用对元素进行调整
resize:none;不允许用户调整尺寸
resize:both;用户可以调整元素的宽度和高度；overflow：hidden|auto|scroll;相当于调整了行间样式
resize:horizontal;只允许用户调整元素的宽度;overflow：hidden|auto|scroll;
resize:vertiacl;只允许用户调整元素的高度;overflow：hidden|auto|scroll;
注意：如果要使resize属性生效，必须与overflow：hidden|auto|scroll;配合使用
2）box-sizing属性：允许以特定的方式匹配某个区域的特定元素
box-sizing:content-box;默认值，在width属性和height之外添加padding属性和border属性
box-sizing:border-box;内容的宽度和高度得到，通过width属性和height属性减去padding属性值，减去border属性值
2.多列布局——多栏布局
1）column-count属性:元素被分隔的列数
column-count:n;元素内容被分隔成n列，n为数值，无单位
column-count:auto;列数由其他属性觉得列数
2）column-width属性：列的宽度；
column-width:npx;每一列的宽度值大概在npx左右
column-width:auto:由其他属性觉得列宽
3)column-gap属性:列与列之间的间隔
column-gap:npx;两列之间的间隔为npx;
column-gap:normal;两列之间的间隔为常规间隔，W3C建议值为1em;
4)column-rule属性：列边框–列与列之间的分隔线
column-rule:column-rule-width column-rule-style column-rule-color;
column-rule-width属性：分割线宽度
column-rule-style属性：分隔线的线性（solid|double|dotted点状|dashed条状）
column-rule-color属性：分隔线的颜色（关键词，十六进制色值,rgb,rgba）
5)column-span属性：跨栏合并
column-span:all;横跨所以列合并，text-align:center;

3.transition属性：过渡属性
transition:transition-property transition-duration transition-timging-function transition-delay;
transition:css样式（属性名称） 动画的执行时间（单位s|ms） 速度类型 动画的延迟时间（单位s|ms）;
transition-property:all;所有的属性都具有过渡属性;
transition-duration:默认0
transition-timging-function：
ease（默认值，平滑过渡）
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
transition-delay:
注意：必须要设置transition-duration属性，动画的执行时间，否则动画的执行时间为0，不会产生过渡效果、
transition:width 2s,background 3s;

4.css变形——transform
1.2D变形：
1）平移:
transform:translate(x,y);元素从当前位置移动到给定的x轴和y轴位置
注意：水平向右值为正，垂直向下值为正，
当只有一个值的时候，沿x轴做移动
transform:translateX(npx);沿着x轴方向移动;
transform:translateY(npx);沿着y轴方向移动;
2)旋转：
transform:rotate(ndeg);
注意：角度为正值，元素沿着顺时针方向旋转n度，角度为负值，沿着逆时针方向旋转。
3)缩放
transform:scale(x,y);元素沿x轴和y轴做缩放
x和y的取值：0-1缩小，1表示正常大小，1以上表示放大；负值时，先翻转后缩放
transform:scale(0.5),x轴和y轴等比例缩放0.5
transform:scaleX(npx);沿着x轴方向缩放;
transform:scaleY(npx);沿着y轴方向缩放;
4)倾斜
transform:skew(x,y);元素沿着水平方向和垂直方向倾斜，单位deg
正值，拽着左上角和右下角拖拽
负值，拽着右上角和左下角拖拽
transform:skew(ndeg);沿着x轴方向倾斜
transform:skewX(ndeg);沿着x轴方向倾斜
transform:skewY(ndeg);沿着y轴方向倾斜
注意：元素既要旋转又要缩放，复合写法：transform:scale() rotate();
5)transform-origin属性：元素基点位置的调整，必须与transform配合使用
transform-origin:right|left|center top|center|bottom;
3.3D变形：
1）transform-style属性：
transform-style:preserve-3d;创建3D空间
2）perspective属性：透视属性 近大远小，单位像素
注意：以上两个属性均需要写在父元素中
3D空间轴线：x轴（右为正）、y轴（下为正）、z轴（向外为正）
4.3D变形效果：
1）平移：
transform:translateZ(z)；沿着Z轴平移；
transform:translate3d(x,y,z);
2）旋转：
transform:rotateX(xdeg);沿x轴方向旋转;左手法则，大拇指x轴正方向，剩余手指弯曲为正方向
transform:rotateY(ydeg);沿y轴方向旋转;左手法则，大拇指y轴正方向，剩余手指弯曲为正方向
transform:rotateZ(zdeg);沿z轴方向旋转;正值顺时针方向，负值逆时针
transform:rotate3d(x,y,z,angle);沿着x轴、y轴、z轴旋转
3）缩放
transform:scaleZ(z);沿着z轴缩放，0-1缩小，1表示正常大小，1以上表示放大；负值时，先翻转后缩放
transform:scale3d(x,y,z);沿着x,y,z轴缩放

5、盒子的绝对居中——水平、垂直居中
1）margin负间距实现带有width属性和height属性的绝对定位元素的居中
2）margin:auto;实现带有width属性和height属性的绝对定位元素的居中
3）transform:translate();实现绝对定位元素的居中
.box{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: yellow;
}

6、帧动画
1）定义关键帧
@keyframes 动画名称（英文）{
0%{} 动画的开始
50%{}
100%{} 动画的结束
}
@keyframes 动画名称（英文）{
from {} 动画的开始
to{} 动画的结束
}

2)引用关键帧
animation:animation-name animation-duration [animation-timing-function][animation-delay] [animation-iteration-count] [animation-decoration] [animation-fill-mode];
animation:动画名称（必须） 动画的执行时间（单位s|ms) 动画的执行速度linear|ease|ease-in|ease-out|ease-in-out(动画的类型) 动画的延迟时间（单位s|ms）动画的执行次数（默认1次|infinite无线循环播放） 动画的运动方向（alternate正向反向轮流播放|reverse反向播放|normal正向播放|alternate-reverse反向正向轮流播放） 动画结束后显示的状态(forwards动画结束时的状态|both动画结束或开始的状态|backwards动画开始时的状态)
3）animate.css动画库
在动画库中预设了抖动shake、闪烁flash、弹跳bounce、翻转flip、旋转rotateIn|rotateOut、淡入淡出fadeIn|fadeOut
使用步骤：
1）引入css文件：
2)使用：

内容

animated类名是基本类名，必须添加，第二个类名为实现指定动画的样式名

7、弹性盒子–flexBox
1)弹性盒子——css3中新增的布局方式，是一种当屏幕大小、设备类型不同的时候，都能确保元素拥有恰当的布局方式
弹性盒模型的内容包括：弹性容器，弹性子元素（项目）
引入弹性盒布局的目的：用一种较为有效的方式对容器中的子元素进行排列、对齐、分配空白空间，即使弹性子元素尺寸发生动态变化，弹性盒布局也能够正常的工作。
2）设置弹性盒子：
display：flex;将元素设置为弹性盒容器（加给父元素）
display：inline-flex;将元素设置为弹性盒容器，
注意：设置为flex布局之后，子元素float、clear、vertical-align属性都会失效
3）基本概念：
容器：
项目：
主轴：默认水平方向，向右
主轴的起点
主轴的终点
交叉轴：默认垂直方向，向下
交叉轴的起点
交叉轴的终点
4）容器的属性——添加在弹性容器上
flex-direcation属性：设置主轴的方向(弹性子元素的排列次序)
flex-direction: row;/默认值，设置主轴方向为水平方向，起点在左侧/
flex-direction: row-reverse;/设置主轴方向为水平方向，起点在右侧/
flex-direction: column;/设置主轴方向为垂直方向，交叉轴为水平方向，起点在上方，依次排列/
flex-direction: column-reverse;/设置主轴方向为垂直方向，交叉轴为水平方向，起点在下方，依次排列/
justify-content属性：弹性子元素在主轴上的对齐方式
justify-content: flex-start;/默认值，子元素位于弹性盒的开头/
justify-content: flex-end;/子元素位于弹性盒的结尾/
justify-content: center;/子元素位于弹性盒的中间/
justify-content: space-around;/子元素之前、之后、之间都有空白空间/
justify-content: space-between;/子元素和子元素之间有空白空间/
align-item属性：弹性子元素在交叉轴上的对齐方式
align-items: stretch;/默认值，如果子元素没有高度或高度为auto时，将占满整个容器的高/
align-items: flex-start;/子元素在交叉轴的起点对齐/
align-items: flex-end;/子元素在交叉轴的终点对齐/
align-items: center;/子元素在交叉轴的中点对齐/
align-items: baseline;/子元素在交叉轴的第一行文字的基线对齐/
wrap属性：设置弹性子元素在一根轴线上排不下的换行方式
flex-wrap: nowrap;/默认值，不换行/
flex-wrap: wrap;/换行，第一行显示在上方/
flex-wrap: wrap-reverse;/换行,第一行显示在下方/
align-content属性：设置多根轴线的对齐方式，如果只有一根轴线，属性失效
align-content: stretch;/默认值，轴线占满整个交叉轴/
align-content: flex-start;/与交叉轴的起点对齐/
align-content: flex-end;/与交叉轴的终点对齐/
align-content: center;/与交叉轴的中点对齐/
align-content: space-around;/每根轴线之上、之下、之间都有空白空间/
align-content: space-between;/每根轴线之间有空白空间/
步骤：1.创建弹性容器；2.调整主轴方向4；3.设置子元素在主轴对齐方式5；4.设置子元素在交叉轴对齐方式5；5.设置弹性子元素在一根轴线上排不下的换行方式3；6.设置多根轴线的对齐方式6；
5）项目属性——添加在子元素上
order属性：调整子元素的排列次序
order:数值；数值不加单位，默认值为0，数值越大，排序越靠后，数值相同，执行顺序。
flex-grow属性：调整资源的放大比例
flex-grow属性：数值不加单位，默认值为0，表示不放大，
flex-shrink属性：调整子元素的缩小比例
flex-shrink属性:数值不加单位，默认值为1，表示当空间不足时，等比例缩小；值为0，表示当空间不足的时候，不缩小
align-self属性：调整弹性容器中，被选中的子元素的对齐方式
align-self: auto;/默认值，继承了父元素的aligin-items属性，如果没有父元素值为stretch/
align-self: stretch;/占满整个容器的高度/
align-self: flex-start;/交叉轴的起点对齐/
align-self: flex-end;/交叉轴的终点对齐/
align-self: center;/交叉轴的中点对齐/
align-self: baseline;/子元素的第一行文字的基线对齐/

8.calc()函数：动态计算长度值的函数，css3新增的函数
语法：calc(数学表达式)
支持+、-、*、/运算，先算括号里面的
注意：运算符前后添加空格
兼容性IE9+