开发者社区> y0umer> 正文

HTML5学习笔记

简介: HTML5可以做的事情 1. 制作时尚的表单 2. 构建实用的HTML5框架 3. 开发丰富多彩的游戏 4.  以更直观的方式让数据可视化呈现 5. HTML5的未来 – 惊艳的HTML5示例和实验 HTML的新特点 新特性 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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
HTML 学习总结 !
HTML 学习总结 !
12 0
前端知识学习案例3-开发企业网站3-编写html结构代码1
前端知识学习案例3-开发企业网站3-编写html结构代码1
25 0
前端知识学习案例4-开发企业网站4-编写html结构代码2
前端知识学习案例4-开发企业网站4-编写html结构代码2
14 0
HTML 学习总结
HTML 学习总结
63 0
HTML5的学习之新增元素
HTML5的学习之新增元素 这篇文章学习一下HTML5新增的元素及浏览器的兼容 标签 描述 <article> 定义页面独立的内容区域。 <aside> 定义页面的侧边栏内容。 <bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置。 <command> 定义命令按钮,比如单选按钮、复选框或按钮 <details> 用于描述文档或文档某个部分的细节 <dialog> 定义对话框,比如提示框 <summary> 标签包含 details 元素的标题 <figure> 规定独立的流内容(图像、图
21 0
HTML5的学习之表单元素
HTML5的学习之表单元素 这篇博客我们继续对HTML5进行学习,主要讲解HTML5的表单元素相关的内容。 1.input元素新增的类型 type类型 描述 color 选色板 month 月份 week 周 date 日期 datetime 多数不兼容 datetime-local 日期加时间 time 时间 email 检测邮箱地址 number 数字 range 范围 调节音量 进度条 search 搜索 tel 电话 不支持 url 地址 检测 HTML代码: <form> <input type="text" autofocus placehol
28 0
HTML5的学习之媒体元素
HTML5的学习之媒体元素 前几篇博客我们将HTML5中的canvas画布元素进行了讲解,接下来开始学习其他的HTML5新元素。这篇就博文主要讲解HTML5中的媒体元素 <video> 和 <audio> 。 HTML代码: <!-- 视频 --> <video src="../js练习/英雄联盟.mp4" controls autoplay></video> <video controls> <source src="../js练习/英雄联盟.mp4" type="
43 0
HTML5的学习之canvas画布(五)
HTML5的学习之canvas画布 canvas其他剩余的方法和属性。 转换 方法 描述 scale() 缩放当前绘图至更大或更小。 rotate() 旋转当前绘图。 translate() 重新映射画布上的 (0,0) 位置。 transform() 替换绘图的当前转换矩阵。 setTransform() 将当前转换重置为单位矩阵。然后运行 transform()。 图像绘制 方法 描述 drawImage() 向画布上绘制图像、画布或视频。 createImageData() 创建新的、空白的 ImageData 对象。 getImageData() 返回 ImageData 对象,
21 0
HTML5的学习之canvas画布(四)
HTML5的学习之canvas画布 这篇博客继续学习canvas的文字相关属性和方法。 属性 属性 描述 font 设置或返回文本内容的当前字体属性。 textAlign 设置或返回文本内容的当前对齐方式。 textBaseline 设置或返回在绘制文本时使用的当前文本基线。 方法 方法 描述 fillText() 在画布上绘制"被填充的"文本。 strokeText() 在画布上绘制文本(无填充)。 measureText() 返回包含指定文本宽度的对象。 使用canvas绘制艺术字 HTML代码: <canvas id="my_canvas"&
35 0
HTML5的学习之canvas画布(三)
HTML5的学习之canvas画布 上篇博客主要讲解了canvas线条有关的一些属性和方法。这篇文章我们继续学习canvas有关图形绘制的方法。 1.矩形 方法 描述 rect() 创建矩形。 fillRect() 绘制"被填充"的矩形。 strokeRect() 绘制矩形(无填充)。 clearRect() 在给定的矩形内清除指定的像素。 2.圆形 方法 描述 arc() 创建弧/曲线(用于创建圆形或部分圆)。 arcTo() 创建两切线之间的弧/曲线。 ellipse() 创建椭圆。 3.路径 方法 描述 fill() 填充当前绘图(路径)。 stroke() 绘制已定
29 0
+关注
y0umer
高级网络安全技术员
文章
问答
文章排行榜
最热
最新
相关电子书
更多
天猫 HTML5 互动技术实践
立即下载
天猫HTML5互动技术实践
立即下载
《零基础HTML入门教程》
立即下载