1 html5新增表单元素
 

  1. <form>
  2. <!-- 数字 还有箭头,可以加减数字 并且可以设置最大最小值 -->
  3. <input type="number" min="" max=""/>数字
  4.  
  5. <!-- PS端优势不明显,移动端会出现邮箱输出键盘 -->
  6. <input type="email"/>邮件
  7.  
  8. <!-- 移动端输入时,键盘会弹出.com 等 -->
  9. <input type="url"/>地址
  10.  
  11. <!-- 移动端输入时,会出现九宫格数字框,还可以写正则表达式 -->
  12. <input type="tel" pattern=""/>电话号码
  13.  
  14. <!-- 移动端输入时,键盘会出现放大镜图标,用于搜索 -->
  15. <!-- 当属性名等于属性值时,可以省略后面的书写 -->
  16. <input type="search" autofocus/>搜索
  17.  
  18. <!-- 多用于移动端 -->
  19. <input type="date"/>日历控件
  20.  
  21. <!-- 颜色选择 -->
  22. <input type="color"/>颜色
  23.  
  24. <!-- label与input的用法 嵌套即可,以前必须写关联 -->
  25. <label>
  26. <input type="radio" name="sex" value="male"/>
  27. </label>
  28.  
  29. <!-- 内容 placeholder -->
  30. <input type="text" placeholder="请输入用户名"/>用户名
  31.  
  32. <!-- 内容选择 不仅可以选择已有的,也可以输入没有的选项 -->
  33. <input type="text" list="country"/>你的国籍
  34. <datalist id="country">
  35. <option value="美国">美国</option>
  36. <option value="中国">中国</option>
  37. <option value="韩国">韩国</option>
  38. <option value="马来西亚">马来西亚</option>
  39. </datalist>
  40. </form>

2 多媒体

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

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

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

  1. //方法一:
  2. <video src="本地路径" controls autoplay>
  3. // controls属性表示 显示控件
  4. // autoplay属性表示 打开自动播放
  5. </video>
  6.  
  7. //方法二:第一个放完,或者不能播放,就会往下切换播放
  8. <video controls autoplay>
  9. <source src="本地路径1"></source>
  10. <source src="本地路径2"></source>
  11. <source src="本地路径3"></source>
  12. </video>
  13.  
  14. //并且提供了js api 来判断视频的状态,以及控制视频。
    //提供js api 
    //onpause 监听暂停事件
    //onplay 监听播放事件
    //方法
    //play() 
    //pause()

音频

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

  1. <autio src="本地文件路径" autoplay controls>
  2. //和 video 相同,不赘述
  3. </autio>

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

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

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

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

HTML5-2的更多相关文章

  1. 使用HTML5开发Kinect体感游戏

    一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...

  2. 读书笔记:《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

  3. HTML5 Boilerplate - 让页面有个好的开始

    最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用.   一:HTML5 ...

  4. 戏说HTML5

    如果有非技术人员问你,HTML5是什么,你会怎么回答? 新的HTML规范... 给浏览器提供了牛逼能力,干以前不能干的事...(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能. ...

  5. nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞

    第0.1节 HTML5和桌面软件开发的碰撞 当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...

  6. Web大前端时代之:HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  7. 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  8. HTML5 介绍

    本篇主要介绍HTML5规范的内容和页面上的架构变动. 目录 1. HTML5介绍 1.1 介绍 1.2 内容 1.3 浏览器支持情况 2. 创建HTML5页面 2.1 <!DOCTYPE> ...

  9. HTML5 语义元素(一)页面结构

    本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.< ...

  10. HTML5 input元素新的特性

    在HTML5中,<input>元素增加了许多新的属性.方法及控件.本文章分别对这三方面进行介绍. 目录 1. 属性 2. 方法 3. 新控件 1. 属性 <input>元素在H ...

随机推荐

  1. C语言实例:结构体

    结构体: #include <stdio.h> #include <stdlib.h> //#pragma pack(1) typedef struct{ short i; / ...

  2. vector某元素是否存在、查找指定元素 、去重

    vector.map 判断某元素是否存在.查找指定元素 [C++]判断元素是否在vector中,对vector去重,两个vector求交集.并集 PS:注意重载

  3. mongodb常用的sql语句总结

    本文为博主原创,转载请注明出处: 1 .  查询所有 db.getCollection('CollectionName').find() 2.根据条件查询 db.getCollection('Coll ...

  4. 小程序云开发--云函数上传文件或图片 base64

    云函数开发遇到的问题 在微信云开发环境当中,普通的用户并没有往云存储内写入文件的权限 所以普通用户想要使用wx.cloud.uploadFile显然是不现实的 但是我们同时也知道,云函数是后台服务端, ...

  5. Unity日常记录-本地保存未来时间实现倒计时

    本地保存未来时间实现倒计时 TimeTool工具类:获取当前时间.未来时间.两时间差 using System; using UnityEngine; public class TimeTool { ...

  6. pytest-xdist分布式执行测试用例

    前言 平常我们手工测试用例非常多时,比如有1千条用例,假设每个用例执行需要1分钟.如果一个测试人员执行需要1000分钟才能执行完,当项目非常紧急的时候,我们会用测试人力成本换取时间成本,这个时候多找个 ...

  7. “妄”眼欲穿之CSS 居中问题

    妄:狂妄: 不会的东西只有怀着一颗狂妄的心,假装能把它看穿吧. 作为一个什么都不会的小白,为了学习,特别在拿来主义之后写一些对于某些css布局的总结,进一步加深对知识的记忆.知识是人类的共同财富,中华 ...

  8. xilinx Vivado的使用详细介绍(2):创建工程、添加文件、综合、实现、管脚约束、产生比特流文件、烧写程序、硬件验证

    xilinx Vivado的使用详细介绍(2):创建工程.添加文件.综合.实现.管脚约束.产生比特流文件.烧写程序.硬件验证 Author:zhangxianhe 新建工程 打开Vivado软件,直接 ...

  9. 4.3 thymeleaf模板引擎的使用

    参考说明:以下笔记参考来自尚硅谷springboot教学中的笔记! thymeleaf官网docs: https://www.thymeleaf.org/documentation.html 模板引擎 ...

  10. python+selenium测试

    网址http://blog.csdn.net/u011541946/article/category/6788788/1