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

视频
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构建工具