版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xyyojl/article/details/82749785
HTML5新标签和响应式
- HTML5新标签
- 代码规范
- 响应式
- visibility的使用
HTML5是什么
HTML5:标准HTML的第五代版本
新增功能:
-
增加了许多移动端的支持,广义上讲HTML5提供了一套全新的界面设计制作的解决方案
-
本地存储技术:可以制作基于网页的APP,代替普通APP
-
兼容性:提供性的数据与应用的接口,可直接调用
-
外部比如摄像头接口:
-
连接推送: 数据交互更加便捷
-
三维图形,特效:基于SVG/Canvas/WebGl/CSS3的3D的功能
HTML5的作用
替换元素/语义元素/功能元素
HTML5的性质
元素类型,默认样式,可以使用属性(需要阅读文档)mdn
HTML5新标签的特性
- 语义性: 为页面赋予更好的结构和含义,标签名自带结果或者功能上的解释
- 多媒体支持: 某些新标签对audio/video支持性更好,代替了flash
HTML5新增标签
结构性标签: 底层含义与div相同
- header标签,页眉与块头部使用
- nav标签 导航块
- section 页面中的版块
- article 表示页面独立结构完整的部分内容
- aside 侧边栏,广告,与article相关
- footer 页脚,页面底部版块
语义化标签:
- hgroup标签,标题组(不常用)
- figure标签 图像等多媒体和文本组合
- figcaption figure中的标题
- dislog 可展开的对话内容,加open展开
- address 定义地址和联系方式
- meter 定义范围内的标尺
<meter min="0" max="10" value="3"></meter> - progress 定义进度百分比
<progress max=‘100’ value>
<span>76</span>%
</progress>
代码规范
- 标签小写
- tab缩进,属性值引号
- p/dt/h不能嵌套块元素
- a标签不能嵌套a标签,可嵌套块元素
- 内联元素不能嵌套块元素
- 参考http://tguide.qq.com/main/base.htm
响应式和自适应
目的:为了解决在不同大小和分辨率的设备上正常显示网页
响应式:一个网站能兼容多个终端,不需要为每个终端做一个特定的版本,常用在移动端页面中
自适应: 针对用户设备的不同,提供不同的代码,从而保证在不同设备下都能完美展示网页,可保证页面效果不一致。
响应式媒体查询
- 媒体查询: 设置样式的时候判断当前用户的设备参数,选择设置样式
- 媒体类型
- all所有/screen彩屏/print打印机
- 了解(已废弃)speech阅读器/braille盲文触摸/embossed盲人印刷/projection投影/tv电视
- 关键词
- and 并且 条件叠加
- not 除了,删除某些特殊条件
- only 限制某种特定媒体
- 特性值
- (min-width:800px) 宽度大于800px的时候
- (max-width:600px) 宽度小于600px的时候
- (orientation: portrait) 竖屏的时候
- (orientation: landscape) 横屏的时候
- 控制样式演示
@media screen and (min-width: 600px) and (max-width: 800px) {
body{background-color : blue}
}
- 控制样式引入
@import url(‘css/css.css’) screen and...
/* 上面相当于下面的 */
<link rel=‘stylesheet’ media=‘all and (orientation: portrait)’ href=‘blabla/css.css’>
响应式viewport
视口: 在移动端中,页面宽度超出设备,浏览器内虚拟一个页面容器,将页面容器缩放到设备这么大展示
<meta name=‘viewport’ content=‘width=deice-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0’>
兼容性
/* 最佳渲染兼容模式 */
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1“>
visibility的使用
元素是否可见
- visible; 可见
- hidden; 不可见
- 特点:支持transition,可用于控制显示隐藏下拉菜单,并具有变化效果