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构建工具
HTML5-2的更多相关文章
- 使用HTML5开发Kinect体感游戏
一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...
- 读书笔记:《HTML5开发手册》--HTML5新的结构元素
读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...
- HTML5 Boilerplate - 让页面有个好的开始
最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用. 一:HTML5 ...
- 戏说HTML5
如果有非技术人员问你,HTML5是什么,你会怎么回答? 新的HTML规范... 给浏览器提供了牛逼能力,干以前不能干的事...(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能. ...
- nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞
第0.1节 HTML5和桌面软件开发的碰撞 当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...
- Web大前端时代之:HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
- 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
- HTML5 介绍
本篇主要介绍HTML5规范的内容和页面上的架构变动. 目录 1. HTML5介绍 1.1 介绍 1.2 内容 1.3 浏览器支持情况 2. 创建HTML5页面 2.1 <!DOCTYPE> ...
- HTML5 语义元素(一)页面结构
本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.< ...
- HTML5 input元素新的特性
在HTML5中,<input>元素增加了许多新的属性.方法及控件.本文章分别对这三方面进行介绍. 目录 1. 属性 2. 方法 3. 新控件 1. 属性 <input>元素在H ...
随机推荐
- MyElasticsearch
目录 那些必须要知道的事儿 搭建elasticsearch环境 快速上手 elasticsearch分析数据的过程漫谈 建议器:Suggester IK中文分词器 elasticsearch for ...
- JSP页面静态包含和动态包含的区别与联系
---恢复内容开始--- JSP页面静态包含和动态包含的区别与联系: 1.<%@ include file=" " %> 是指令元素,<jsp:include p ...
- 性能测试监控工具nmon安装及使用方法
1.概述 监控,在检查系统问题或优化系统性能工作上是一个不可缺少的部分.通过操作系统监控工具监视操作系统资源的使用情况,间接地反映了各服务器程序的运行情况.根据运行结果分析可以帮助我们快速定位系统问题 ...
- 记一次IIS发布网站导致系统时常跳入登录页面的问题解决
服务器:winserver2012R2 iis 发布网站后,正常浏览网页,时常跳到登录页面,第一反应session过期,因为登录信息都存在session,但session 都是默认配置过期时间为20分 ...
- mysql 通过测试'for update',深入了解行锁、表锁、索引
mysql 通过测试'for update',深入了解行锁.表锁.索引 条件 FOR UPDATE 仅适用于InnoDB存储引擎,且必须在事务区块(BEGIN/COMMIT)中才能生效. mysql默 ...
- _spellmod_aura_pct_on_stat
为玩家添加属性转换光环 `comment` 备注 `aura`光环ID `auraType1` 选择添加('治疗效果','法术强度','近战攻击强度','远程攻击强度','空') `statType ...
- 基于三层架构项目下的Ado【六】
一.基于三层架构项目下的Ado增删改查总结,提示:现在一般都是使用EF框架操作. 1. 先在model层创建出一个和你将会查询出一样类型的表,比如你将查询出的有五个字段,那么你就需要创建出一个和你查询 ...
- Eclipse下运行maven项目失败且Tomcat服务器也启动不了
今天遇到一个神奇的问题,在eclipse中创建一个maven项目后,Run on server 时说服务器启动失败.我以为是Eclipse配置tomcat的问题.找了一大堆没找到想要的答案!!! 我还 ...
- 导航栏中各按钮在点击当前按钮变色其他按钮恢复为原有色的实现方法(vue、jq、原生js)
一.vue如何实现? 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- week 10--了解原型设计的工具
了解原型设计的工具 随着原型应用的普及,越来越多的产品会采用原型设计来表述.完善整体需求,这样做自然有其原因.首先原型的制作成本和演示成本都比较低,除非比较复杂或者保真度要求比较高的原型,在描述一个功 ...