--------------------html5 新结构标签 --------------------
1,h5 新增的主要语义化标签如下:
1,header 页面头部, 页眉
2,nav 页面导航
3,article 一篇文章
4,section 文章中的章节
5,aside 侧边栏
6,footer 页面底部, 页脚
pc 端兼容需要引用对应的 JS 脚本
<script type="text/javascript" src="//cdn.bootCSS.com/html5shiv/r29/html5.js"></script>
2,HTML5 新增表单控件: 网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索
- <label>
- 网址:
- </label>
- <input type="url" name="" required>
- <br>
- <br>
- <label>
- 邮箱:
- </label>
- <input type="email" name="" required>
- <br>
- <br>
- <label>
- 日期:
- </label>
- <input type="date" name="">
- <br>
- <br>
- <label>
- 时间:
- </label>
- <input type="time" name="">
- <br>
- <br>
- <label>
- 星期:
- </label>
- <input type="week" name="">
- <br>
- <br>
- <label>
- 数量:
- </label>
- <input type="number" name="">
- <br>
- <br>
- <label>
- 范围:
- </label>
- <input type="range" name="">
- <br>
- <br>
- <label>
- 电话:
- </label>
- <input type="tel" name="">
- <br>
- <br>
- <label>
- 颜色:
- </label>
- <input type="color" name="">
- <br>
- <br>
- <label>
- 搜索:
- </label>
- <input type="search" name="">
- <br>
- <br>
新增常用表单控件属性:
1,placeholder 设置文本框默认提示文字
2,autofocus 自动获得焦点
3,autocomplete 联想关键词
3,HTML5 音频和视频
音频: audio 标签
格式: ogg,wav,mp3
对应属性:
1,autoplay 自动播放
2,controls 显示播放器
3,loop 循环播放
4,preload 预加载
5,muted 静音
- <audio autoplay controls loop preload>
- <!-- <source src="source/audio.mp3" type=""> -->
- <source src="source/audio02.wav" type="">
- </audio>
视频: video 标签
格式: ogg,mp4,webM
对应属性:
- ,width
- ,height
- ,Poster
可选第三方播放器:
- ,cyberplayer
- ,tencentPlayer
- ,youkuplayer
-------------------- 移动端页面布局 --------------------
# 移动端 App 分类
1,Native App 原生 App 手机应用程序
使用原生的语言开发的手机应用, Android 系统用的是 java,iOS 系统用的是 object-C
2,Hybrid App 混合型 App 手机应用程序
混合使用原生的程序和 html5 页面开发的手机应用
3,Web App 基于 Web 的 App 手机应用程序
完全使用 html5 页面加前端 JS 框架开发的手机应用
#Viewport 视口
视口是移动设备上用来显示网页的区域, 一般会比移动设备可视区域大, 宽度可能是 980px 或者 1024px, 目的是为了显示下整个为 PC 端设计的网页, 这样带来的后果是移动端会出现横向滚动条, 为了避免这种情况, 移动端会将视口缩放到移动端窗口的大小. 这样会让网页不容易观看, 可以用 meta 标签, name="viewport" 来设置视口的大小, 将视口的大小设置为何移动设备可视区一样的大小.
# 视网膜屏幕 (retina 屏幕) 清晰度解决方案
视网膜屏幕指的是屏幕的物理像素密度更高的屏幕, 物理像素可以理解为屏幕上的一个发光点, 无数发光的点组成的屏幕, 视网膜屏幕比一般屏幕的物理像素点更小, 常见有 2 倍的视网膜屏幕和 3 倍的视网膜屏幕, 2 倍的视网膜屏幕, 它的物理像素点大小是一般屏幕的 1/4,3 倍的视网膜屏幕, 它的物理像素点大小是一般屏幕的 1/9.
图像在视网膜屏幕上显示的大小和在一般屏幕上显示的大小一样, 但是由于视网膜屏幕的物理像素点比一般的屏幕小, 图像在上面好像是被放大了, 图像会变得模糊, 为了解决这个问题, 可以使用比原来大一倍的图像, 然后用 CSS 样式强制把图像的尺寸设为原来图像尺寸的大小, 就可以解决模糊的问题.
背景图强制改变大小, 可以使用 background 新属性
background 新属性 :
background-size:
length: 用长度值指定背景图像大小. 不允许负值.
percentage: 用百分比指定背景图像大小. 不允许负值.
auto: 背景图像的真实大小.
cover: 将背景图像等比缩放到完全覆盖容器, 背景图像有可能超出容器.
contain: 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等, 背景图像始终被包含在容器内.
# 流体布局
流体布局, 就是使用百分比来设置元素的宽度, 元素的高度按实际高度写固定值, 流体布局中, 元素的边线无法用百分比, 可以使用样式中的计算函数 calc() 来设置宽度, 或者使用 box-sizing 属性将盒子设置为从边线计算盒子尺寸.
calc()
可以通过计算的方式给元素加尺寸, 比如: width:calc(25% - 4px);
box-sizing
1,content-box 默认的盒子尺寸计算方式 2,border-box 设置盒子的尺寸计算方式为从边框开始, 盒子的尺寸, 边框和内填充算在盒子尺寸内
# 响应式布局
响应式布局就是使用媒体查询的方式, 通过查询浏览器宽度, 不同的宽度应用不同的样式块, 每个样式块对应的是该度下的布局方式, 从而实现响应式布局. 响应式布局的页面可以适配多种终端屏幕(pc, 平板, 手机).
- @media (max-width:960px){
- .left_con{width:58%;}
- .right_con{width:38%;}
- }
- @media (max-width:768px){
- .left_con{width:100%;}
- .right_con{width:100%;}
- }
- # 基于 rem 的布局
首先了解 em 单位, em 单位是参照元素自身的文字大小来设置尺寸, rem 指的是参照根节点的文字大小, 根节点指的是 HTML 标签, 设置 HTML 标签的文字大小, 其他的元素相关尺寸设置用 rem, 这样, 所有元素都有了统一的参照标准, 改变 HTML 文字的大小, 就会改变所有元素用 rem 设置的尺寸大小.
# 弹性盒模型布局
1, 容器属性
display : flex
声明使用弹性盒布局
flex-direction : row | row-reverse | column | column-reverse
确定子元素排列的方向
flex-wrap : nowrap | wrap | wrap-reverse
元素超过父容器尺寸时是否换行
flex-flow : flex-direction | flex-wrap
同时设置 flex-direction 和 flex-wrap
justify-content : flex-start | flex-end | center | space-between | space-around
子元素的尺寸确定之后, 用此属性来设置 flex-direction 定义方向上的分布方式
align-items : flex-start | flex-end | center | baseline | stretch
子元素的尺寸确定之后, 用此属性来设置 flex-direction 定义方向上的垂直方向的分布方式
align-content : flex-start | flex-end | center | space-between | space-around | stretch
设置多行子元素在行方向上的对齐方式
2, 条目属性
flex : none | <'flex-grow'> <'flex-shrink>'? || <'flex-basis'>
同时设置 flex-grow 和 flex-shrink 以及 flex-basis
flex-grow : number
表示的是当父元素有多余的空间时, 这些空间在不同子元素之间的分配比例
flex-shrink: number
当父元素的空间不足时, 各个子元素的尺寸缩小的比例
flex-basis :length | percentage | auto | content
用来确定弹性条目的初始主轴尺寸.
align-self :auto | flex-start | flex-end | center | baseline | stretch
覆写父元素指定的对齐方式
order : integer
改变条目在容器中的出现顺序
来源: http://www.bubuko.com/infodetail-3164607.html