首页 > Web开发 > 详细

HTML5基础

时间:2016-08-08 21:04:20      阅读:209      评论:0      收藏:0      [点我收藏+]

第一节 新增的结构化标签

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;

 

HTML5基础

原文:http://www.cnblogs.com/mgzxzy/p/5750706.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!