HTML5新特性

语义化标签

<!DOCTYPE html>

<html>

    <title>标题</title>

    <body>

        <header></header>

        <nav>导航</nav>

        <article>

            <section>区块</section>

        </article>

        <aside>侧栏</aside>

        <footer>页脚</footer>

    </body>

</html>

自定义标签（可以用来消除全局变量，储存数据data）
媒体标签audio和video
localstorage和sessionstorage本地离线储存
新增表单特性如新控件 calendar email color
用于绘图和游戏的canvas
高性能图形的webGL

音频audio

不同浏览器有不同的文件格式要求
所以用 2 个 source 标签指定不同的音频格式

a.play() 播放
a.pause() 停止
a.autoPlay 是否循环播放(true/false)
a.src
a.volume 音量(默认0到1)
a.duration 长度
a.currentTime = 1 当前播放到多少，给多少值可以从哪播放
a.playbackRate 倍速

标签可以绑定事件 ended canplay事件等等

新控件

<input type="calendar">

<input type="checkbox" checked>

<input type="checkbox" checked="checked">

<input type="checkbox" checked="">

<input type="checkbox" checked="false">

移动网页手机网页和电脑网页的技术是一样的区别仅在屏幕尺寸和交互方式

下面只列出手机页面开发中重要的点

1 设置 viewport
viewport 是 html 的父元素
在手机上需要用下面的语句设置它的尺寸
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

属性解释
width=device-width      宽度等于设备宽度
height=device-height    高度等于设备高度
initial-scale           初始缩放比例
minimum-scale           允许用户缩放的最小比例
maximum-scale           允许用户缩放的最大比例
user-scalable           是否允许用户缩放

2 调试页
可以用 chrome 的开发工具调试手机页面
但是由于浏览器兼容性问题，最终的外观得用手机
标签/css 的兼容性问题有很多网站可以查询
caniuse.com

3 媒体查询
媒体查询实际上是用来做响应式设计的
响应式设计就是一套 CSS 根据当前的分辨率选择不同的样式
现在已经没有前几年那么热门了，不过我们还是过一遍

媒体查询主要用来：
- 检测媒体的类型，比如 screen, tv 等
- 检测布局视口的特性，比如视口的宽高分辨率等

用法
@media all and (min-width: 200px) and (max-width: 300px) {
    body {
        background: red;
    }
}
上面代码中，all 是媒体类型，代表任何设备
and 是逻辑操作
意思是，对于任何设备，在宽度在 200 - 300 的范围内应用这个样式

4 Hybrid App(混合开发)
混合开发说的是, 你写的网页运行在手机程序里
本来网页能提供的功能是有限的
但是应用程序可以给页面添加函数
在这种情况下, js 就可以调用别人提供的功能
这就是混合开发的基础

比如你 js 不能实现让手机震动的功能
但是别的程序能实现这个功能, 并且把这个功能
注册为你网页中的一个 js 函数
这样 js 也就拥有这个功能了
然后你调用 vfds() 就让手机震动了

这样的效果就是原生代码(相对于 js 而言的官方开发语言)实现功能并且提供 js 函数
js 代码用别人提供的功能写逻辑

andro把震动函数暴露出去api js调用该函数 使手机震动

桌面应用程序 electron

秒客网

第二季第八天 HTML5新特性

HTML5新特性

音频audio

a.play() 播放

a.pause() 停止

a.autoPlay 是否循环播放(true/false)

a.src

a.volume 音量(默认0到1)

a.duration 长度

a.currentTime = 1 当前播放到多少，给多少值可以从哪播放

标签可以绑定事件 ended canplay事件等等

新控件

相关文章