在函数内部window.a =  a  在全局中就可以拿到这个变量

变量命名。作为函数的参数的时候要详细。调用的时候可以简单点

做全局变量的两个方案 1.绑在标签上data 2.闭包

视频一般都是二进制格式

HTML5新特性

  1. 语义化标签

    <!DOCTYPE html>
    
<html>
    
    <title>标题</title>
    
    <body>
    
        <header></header>
    
        <nav>导航</nav>
    
        <article>
    
            <section>区块</section>
    
        </article>
    
        <aside>侧栏</aside>
    
        <footer>页脚</footer>
    
    </body>
    
</html>
  2. 自定义标签（可以用来消除全局变量，储存数据data）
  3. 媒体标签audio和video
  4. localstorage和sessionstorage本地离线储存
  5. 新增表单特性如新控件 calendar email color
  6. 用于绘图和游戏的canvas
  7. 高性能图形的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新特性的更多相关文章

  1. html5新特性

    这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...

  2. 转: HTML5新特性之Mutation Observer

    转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...

  3. HTML5新特性之CSS+HTML5实例

    1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...

  4. HTML5新特性：FileReader 和 FormData

    连接在这里: HTML5新特性:FileReader 和 FormData

  5. web全栈架构师[笔记] — 03 html5新特性

    HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...

  6. HTML5新特性：范围样式

    原文出处:http://blog.csdn.net/hfahe/article/details/7381141        Chromium 最近实现了一个HTML5的新特性:范围样式,又叫做< ...

  7. html5新特性与用法大全了解一下

    有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...

  8. html5新特性contenteditable 属性更容易实现动态表单

    介绍html5新特性的一个属性:contenteditable 作用域全局.所有的块标签都可以,例如:span.p.div.td等标签.但是,不可以作用域<br/>类型的标签. conte ...

  9. HTML5新特性之文件和二进制数据的操作 Blob对象

    HTML5新特性之文件和二进制数据的操作 1.Blob对象 2.FileList对象 3.File对象 4.FileReader 对象 5.URL对象

随机推荐

  1. poj 1330 Nearest Common Ancestors 求最近祖先节点

    Nearest Common Ancestors Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 37386   Accept ...

  2. 使用Oracle VM VirtualBox安装CentOS 7.6操作系统

    使用Oracle VM VirtualBox安装CentOS 7.6操作系统                                                               ...

  3. 洛谷 P2370 yyy2015c01的U盘

    题目传送门 解题思路: 先将每个文件按照占空间从小到大排序,然后跑背包,当到了某一个文件时,价值够了,那么当前文件的体积就是答案. 其实本题是可以二分答案的,但是写挂了... AC代码: #inclu ...

  4. 16 react 发送异步请求获取数据 和 使用Redux-thunk中间件进行 ajax 请求发送

    1.发送异步请求获取数据 1.引入 axios ( 使用 yarn add axios 进行安装 ) import axios from 'axios'; 2. 模拟 在元素完成挂载后加载数据 并初始 ...

  5. Swift之分割视图控制器-UISplitViewController

    Swift之分割视图控制器-UISplitViewController UISplitViewController这种控制器只能用于iPad,它可以在iPad屏幕中显示两个不同的场景:在横向模式下,左 ...

  6. Codeforces 442A Borya and Hanabi

    有五种花色 外加 五种点数 共25张牌,每次有n张牌,主人知道这n张牌中有哪些牌,并且哪种牌有几张,但是不知道具体是哪张牌,他可以问某种花色,然后知道了哪几张是该花色,也可以问点数,然后就知道了哪几张 ...

  7. 2019 年 Google 编程之夏活动报告

    2019 年 Google 编程之夏活动报告 主要介绍了 GSoC 2019 活动的几个课题并讲述了整个活动的组织过程 Google 编程之夏活动不仅仅是一个夏日的实习项目,对于组织和一些社区的成员来 ...

  8. 吴裕雄--天生自然JAVA SPRING框架开发学习笔记：Spring IoC容器BeanFactory和ApplicationContext

    IoC 是指在程序开发中,实例的创建不再由调用者管理,而是由 Spring 容器创建.Spring 容器会负责控制程序之间的关系,而不是由程序代码直接控制,因此,控制权由程序代码转移到了 Spring ...

  9. Android进阶——多线程系列之wait、notify、sleep、join、yield、synchronized关键字、ReentrantLock锁

    多线程一直是初学者最困惑的地方,每次看到一篇文章,觉得很有难度,就马上叉掉,不看了,我以前也是这样过来的.后来,我发现这样的态度不行,知难而退,永远进步不了.于是,我狠下心来看完别人的博客,尽管很难但 ...

  10. 类似今日头条，头部tab可滑动，下面的内容可跟着滚动，掺杂着vue和require等用法例子

    1.在main.js里 /*主模块的入口 结合require一起使用*/ require.config({//require的基础用法 配置一下 paths: { "Zepto" ...