HTML5-2

1 html5新增表单元素
　

<form>
    <!-- 数字  还有箭头，可以加减数字 并且可以设置最大最小值 -->    
    <input type="number" min="" max=""/>数字

    <!--  PS端优势不明显，移动端会出现邮箱输出键盘 -->
    <input type="email"/>邮件

    <!--  移动端输入时，键盘会弹出.com 等 -->
    <input type="url"/>地址

    <!--  移动端输入时，会出现九宫格数字框，还可以写正则表达式 -->
    <input type="tel" pattern=""/>电话号码

    <!--  移动端输入时，键盘会出现放大镜图标，用于搜索 -->
    <!-- 当属性名等于属性值时，可以省略后面的书写 -->
    <input type="search" autofocus/>搜索

    <!-- 多用于移动端 -->
    <input type="date"/>日历控件

    <!-- 颜色选择 -->
    <input type="color"/>颜色

    <!-- label与input的用法  嵌套即可，以前必须写关联 -->
    <label>
        <input type="radio" name="sex" value="male"/>男
    </label>

    <!--  内容 placeholder -->
    <input type="text" placeholder="请输入用户名"/>用户名
    
    <!--  内容选择  不仅可以选择已有的，也可以输入没有的选项 -->
    <input type="text" list="country"/>你的国籍
    <datalist id="country">
        <option value="美国">美国</option>
        <option value="中国">中国</option>
        <option value="韩国">韩国</option>
        <option value="马来西亚">马来西亚</option>
    </datalist>
</form>

 

2 多媒体 

先探讨html4.01插入音视频 借助于flash

<iframe height=498 width=510 src='http://player.youku.com/embed/XMzM5MTEyODgxNg==' frameborder=0 'allowfullscreen'></iframe>

视频
video标签 支持的格式mp4和ogv

//方法一：
<video src="本地路径" controls  autoplay>
    // controls属性表示  显示控件
    // autoplay属性表示 打开自动播放
</video>

//方法二：第一个放完，或者不能播放，就会往下切换播放
<video controls  autoplay>
    <source  src="本地路径1"></source>
    <source  src="本地路径2"></source>
    <source  src="本地路径3"></source>
</video>

//并且提供了js api 来判断视频的状态，以及控制视频。
//提供js api 
//onpause 监听暂停事件
//onplay 监听播放事件
//方法
//play() 
//pause()

音频

audio标签 支持格式mp3和ogg IE9开始兼容

<autio src="本地文件路径" autoplay controls>
    //和 video 相同，不赘述
</autio>

关于兼容多媒体和音频的兼容：

如果不兼容标签，会被当成div处理。所以在内部再加一个传统的flash。。。(还要继续研究。)

html4 css2 实战 
h5 
js 基础 （数据类型 流程控制结构 数组 函数 DOM ）jquery 
中级 js进阶（正则） 
高级 面向对象

css3 移动端开发
与服务器交互 ajax (少量php)
nodeJS
vue
react
webpack构建工具