第一节 新增的结构化标签
1.header 头部
2.nav 导航
3.section 区域
4.article 区域中的模块内容
5.aside 侧边栏
6.footer 底部
7.figure 定义一组媒体标签,一般为图片
8.figration 媒体内容的标题
第二节 新增的input类型
1.e-mail 邮箱
2.number 数字递增或递减
3.url 图片
4.range 范围
5.date 日期
6.week 周
7.month 月
8.time 时间
9.color 颜色
第三节 音频标签audio
1.src 播放资源地址
2.autoplay 加载完成后自动播放
3.controls 控制条
4.loop 循环播放
5.muted 初始化静音
6.preload 预加载方式
第四节 视频标签vidio
1.poster 当视频播放出现问题是出现的一张占位图,一般为播放按钮。
2.width 播放器的宽度
3.height 播放器的高度
4.除以上三个为视频标签新增属性,其余与音频标签一致。
第五节 viewport
viewport是用来适配各种移动端屏幕的。
1.width 一般为device-width获取设备的宽度
2.height 一般为device-height获取设备的高度
3.initial-scale 初始化的缩放比例
4.minimum-scale 最小的缩小比例
5.maximum-scale 最大的放大比例
第六节 流式布局
流式布局称百分比布局,用百分比来代替具体数值来可以适应不同宽高度的需求。
通常可以设置宽高度百分比布局,定位百分比布局,图片设置百分比宽高以及文本字体设置em和rem。
第七节 响应式布局
要实现响应式布局需借助媒体查询。
例子:当宽度分别在小于600px,600px到1000px,大于1000px时进行不同的设置。
@media screen and(max-width=600px){} 宽度小于600px;
@media screen and(min-width=600px) and(max-width=1000px){} 宽度大于600px小于1000px;
@media screen and(min-width=1000px){} 宽度大于1000px;
原文:http://www.cnblogs.com/mgzxzy/p/5750706.html