HTML5学习笔记

HTML5可以做的事情

1. 制作时尚的表单

2. 构建实用的HTML5框架

3. 开发丰富多彩的游戏

4.  以更直观的方式让数据可视化呈现

5. HTML5的未来 – 惊艳的HTML5示例和实验

HTML的新特点

新特性

HTML5 中的一些有趣的新特性:

· 用于绘画的 canvas 元素

· 用于媒介回放的 video 和 audio 元素

· 对本地离线存储的更好的支持

· 新的特殊内容元素,比如 article、footer、header、nav、section

· 新的表单控件,比如 calendar、date、time、email、url、search

HTML5 新的 Input 类型

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

这些新的输入类型:

· email

· url

· number

· range

· Date pickers (date, month, week, time, datetime, datetime-local)

· search

· color

浏览器支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

 

HTML5的接口演示

  1. 以PPT的形式演示,感觉很牛逼:http://slides.html5rocks.com/
  2. 比较详细的接口演示:http://html5demos.com/
  3. 接口+代码+调试演示:http://playground.html5rocks.com/

视频播放标签

视频播放:

<video width="320" height="240" controls="controls" autoplay ="autoplay" loop="loop" >
  <source src="/dym/video.mp4" type="video/mp4" >
Your browser does not support the video tag.
</video>

参数:controls 播放器控制信息

autoplay:自动播放

loop:循环播放

自动播放且支持自动循环播放,如果加上preload="auto",则可以在页面加载的时候就可播放(注意:atuopaly需要关闭)

检测浏览器是否支持HTML5

  1. 使用js方法:

    这是w3school里面的方法,这个可以检测浏览器是否支持html5,但是不能检测出每个浏览器是否支持html5所有的标签。

js代码:

  

1调用js检测,返回信息
1  

2.第二种直接使用该标签

1在标签之间加上你的浏览器不支持的话,如
<audio src="song.ogg" controls="controls">
你的浏览器不支持该标签!
</audio>
如果浏览器不支持的话,中间的“你的浏览器不支持该标签!”会输出.
 

其他的方法:

HTML5特性检测--检测技术:http://www.html5china.com/course/20111007_2184.html

检测浏览器支持哪些HTML5新特性的方法:http://www.html5china.com/course/20111007_2185.html

比较好的学习资源:

22个HTML5的初级技巧:http://stylechen.com/22-html5-tips.html

学习演示接口的网站:http://html5demos.com/

html5中文网:   http://www.html5china.com  

w3school的教程 http://www.w3school.com.cn/html5/index.asp

 
Technorati 标签: html5 浏览器兼容
 

知识共享许可协议本文基于署名-非商业性使用 3.0许可协议发布,欢迎转载,演绎,但是必须保留本文的署名PHP淮北(包含链接),且不得用于商业目的。如您有任何疑问或者授权方面的协商,请与我联系。

0

转载于:https://www.cnblogs.com/y0umer/archive/2011/10/11/2809495.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/422730.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

特别慢_这款“爱豆”很特别,它带你重温旧时光,体验慢生活的时代

说到浪漫之都的法国巴黎&#xff0c;就不得不让人想到卢浮宫、凡尔赛宫、凯旋门等古老建筑&#xff0c;当然还有让全世界震惊的埃菲尔铁塔&#xff0c;这些名胜古迹无一不让法国人民感到骄傲。如果问及法国巴黎有着华人家乡味道的&#xff0c;就不得不说到一间不起眼的老式港式…

MarkDown编辑器中数学公式与符号-LaTeX 各种数学命令,符号

函数、符号及特殊字符 声调 语法效果语法效果语法效果\bar{x}\acute{\eta}\check{\alpha}\grave{\eta}\breve{a}\ddot{y}\dot{x}\hat{\alpha}\tilde{\iota}函数 语法效果语法效果语法效果\sin\theta\cos\theta\tan\theta\arcsin\frac{L}{r}\arccos\frac{T}{r}\arctan\frac{L}{T…

php操作带中文的json数据

1 <?php 2 //json格式字符串转成数组 3 $json{"name":"肖滔","sex":"男","age":27}; 4 echo $json."<br/>"; 5 $json iconv("gbk", "UTF-8", $json); 6 echo $json."<br/…

spark中dataframe解析_Spark-SQL

fe缺点不方便添加新的优化策略线程安全问题Spark SQL支持三种语言javaScalapythonDataFrame大规模数据化结构能历、提高了运算能力从sql到dataFrame的转化&#xff0c;支持sql查询RDD是分布式的java对象的集合&#xff0c;对象颞部结构不可知dataframe以rdd为基础的分布式数据集…

【算法设计与分析】01 算法涉及的研究内容概述

文章目录1 算法的研究内容2 算法设计的两个例子2.1 调度问题2.2 算法设计的步骤2.3 投资问题3 总结在学习算法涉及与分析的内容之前&#xff0c;先了解一下算法所涉及的几个大块的内容&#xff0c;方便以后学习。1 算法的研究内容 算法的研究内容主要包括三点&#xff1a; 计…

解题报告 百进制数

题目 4. 百进制数 &#xff08;hex.pas/c/cpp&#xff09; 【问题描述】 科学进步飞快&#xff0c;日新月异&#xff0c;人们早已经不再习惯十进制那种单调的表示数字的方式。最近&#xff0c;Y同学投入百进制数的研究中。两个百进制数可以相邻当且仅当前一个百进制数的最后一位…

python 遗传算法 agv_基于改进遗传算法的AGV路径规划

基于改进遗传算法的AGV路径规划苑光明&#xff0c;翟云飞&#xff0c;丁承君&#xff0c;张鹏【摘要】&#xff3b;摘要&#xff3d;针对AGV在自动化生产线中原有路径规划算法存在路径拐弯次数多&#xff0c;不利于AGV自动控制的问题&#xff0c;提出了一种改进遗传算法。为提高…

CSDN博客图片水印|自定义水印|去除水印

参考博文1&#xff1a;https://blog.csdn.net/stereohomology/article/details/54561782 参考博文2&#xff1a;https://blog.csdn.net/u011479200/article/details/81026798 CSDN改版后&#xff0c;原来的修改方法不行了~~ 在 CSDN 中&#xff0c;上传图片时&#xff0c;会默…

win2003 定时重启BAT

echo offat 2:00 /every:M,T,W,Th,F,S,Su %windir%\system32\shutdown.exe /recho 设置完成&#xff0c;请按任意键退出……pause>nul 运行后计划任务中会新增一个JOB 很简单的&#xff0c;记录一下免得忘记 转载于:https://www.cnblogs.com/relax/archive/2011/10/18/22160…

【算法设计与分析】02 货郎问题与计算复杂性理论

什么是NP系列问题&#xff1f;今天来看看这些问题。 文章目录1 货郎问题2 0-1背包问题3 什么是NP-hard问题&#xff08;NP难问题&#xff09;1 货郎问题 问题&#xff1a;有n个城市&#xff0c;已知任何两个城市之间的距离&#xff0c;求一条每个城市恰好经过1次的回路&#xf…

ad17编辑界面怎么检查未连线_软件账务处理流程之——凭证审核与检查

金蝶是我们财务人非常熟悉的财务软件&#xff0c;但是我们很多财务人只在应用软件的时候还是会出现很多的问题&#xff0c;为了帮助大家更好地应用这个软件&#xff0c;今天就来和大家讲讲关于金蝶软件凭证审核与检查的一些基本处理流程。凭证审核凭证输入完成后&#xff0c;更…

快速可扩展的Ajax流代理——提供持续下载跨域数据

简介 由于浏览器禁止跨域的XMLHTTP调用&#xff0c;所有的Ajax网站都必须有一个服务端代理来从外部域比如Flickr或者Digg来抓去内容。对客户端Javascript代码来说&#xff0c;一个XMLHttp的调用将请求传递给宿主在相同域里的服务端代理&#xff0c;然后由代理来从外部服务器上下…

Markdown编辑器 公式指导手册

#Cmd Markdown 公式指导手册 标签&#xff1a; Tutorial 2018-03-20 补档&#xff1a; 收到很多小伙伴对本文的源文档转载需求&#xff0c;故传了一份 md 文件&#xff0c;请按需 下载 。 本文固定链接: https://www.zybuluo.com/codeep/note/163962 点击跳转至 Cmd Markdown …

python建db文件_临时数据库之python用sqlite3模块操作sqlite

SQLite是一个包含在C库中的轻量级数据库。它并不需要独立的维护进程&#xff0c;并且允许使用非标准变体(nonstandard variant)的SQL查询语句来访问数据库。一些应用可是使用SQLite保存内部数据。它也可以在构建应用原型的时候使用&#xff0c;以便于以后转移到更大型的数据库。…

MDX as的使用

用到as的时候&#xff0c;如果用到了某个纬度&#xff0c;例如&#xff1a;withmember mydate as now()member [告警投诉数量a] as lookupcube("[ALARM_RECORD]","[Measures].[告警投诉数量]") member [故障总量啊] as lookupcube("[EOMS_FAULT_RECO…

【算法设计与分析】03 算法及其时间复杂度

在学习算法的时间复杂度之前&#xff0c;需要了解下面5条概念 什么是算法的时间复杂度&#xff1f; 针对指定基本运算&#xff0c;计数算法所做的运算次数。什么是基本运算&#xff1f;比较、加法、乘法、置指针、交换…什么是输入规模&#xff1f;输入串的编码长度&#xff0c…

用单片机测量流体流速的_影响超声波流量计(热量表)测量精度的主要因素

1、上下游直管段的影响由于时差式超声波流量计标定系数K值是雷诺数函数&#xff0c;所以当流体从层流过渡到紊流时&#xff0c;其流速分布不均匀&#xff0c;标定系数K值将产生较大的变化&#xff0c;从而影响测量准确度。根据设计要求换能器应安装在上游直管段为10倍管径、下游…

【算法设计与分析】04 函数的渐进的界

今天学习函数的渐进的界&#xff0c;会涉及多种数学符号。对以后学习分析算法复杂度有很大的帮助。 1 大OOO符号 定义&#xff1a; 设 f 和 g是定义域为自然数集N上的函数. 若存在正数 c 和 n0&#xff0c; 使得 对一切 n ≥\geq≥ n0有: c≤f(n)≤cg(n)c\leq f(n) \leq cg(n…

11月10日 14:00~16:00 上海敏捷开发沙龙

主题&#xff1a;火星人陈勇将赴上海主办线下沙龙&#xff0c;主题是“自组织团队与松结对编程”&#xff08;2011 微软 TechED演讲主题&#xff09;&#xff0c;演讲后有团队问答PK活动。日期&#xff1a;2011年11月10日时间&#xff1a;下午14&#xff1a;00&#xff5e;16&a…