HTML5学习的小笔记(不全)
HTML5
一、用于实现Web应用程序的新增功能有以下几项:
1、新增用于绘画的canvas元素,该元素就像在浏览器中嵌入一块画布,使用程序可以在这画布上绘画。
2、更好的用户交互操作,包括拖放、内容可编辑等。
3、“撤销”和“重做”操作的管理。
4、扩展的HTMLDOM API。
5、本地离线存储。
6、Web SQL 数据库。
7、离线网络应用程序。
8、跨文档消息。
9、Web Workers 优化JavaScript执行
二、用于更好地呈现内容
1、用于视频、音频播放的video元素和audio元素。
2、用于文档结构的article、footer、header、nav、section等元素。
3、新的表单控件。
4、一些元素进行了新的修订
三、html5常用到的命名空间
1、HTML命名空间:http://www.w3.org/1999/xhtml.
2、MathML命名空间:http://www.w3.org/1998/Math/MathML。
3、SVG命名空间:http://www.w3.org/2000/svg。
4、XLink命名空间:http://www.w3.org/1999/xlink。
5、XML命名空间:http://www.w3.org/XML/1998/namespace。
6、XMLNS命名空间:http://www.w3.org/2000/xmlns/。
四、文档类型
1、使用XML语法编写HTML5文档
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>文档标题</title> <meta http-equiv="Content-type" content="application/xhtml+xml"/> </head> <body> </body> </html>
文档扩展名保存为.xml或者.xhtml(推荐使用.xhtml扩展名).需要注意的是使用XML语法编写的HTML5文档没有声明文档类型,但是MIME类型必须是text/xml或者application/xml,以及其他任何子类型为“+xml”的MIME类型,如HTML5规范推荐使用的application/xhtml+xml.(.xml扩展名的文档一般MIME类型都会被识别为text/xml,而使用.xhtml扩展名的文档则MIME类型是未知的)
2、使用HTML语法编写HTML5文档
<!doctype html> <html> <head> <title>文档标题</title> <meta charset="UTF-8"> </head> <body> ..... </body> </html>
注意:HTML语法格式不允许使用命名空间,但也有几个特例。同时虽然不推荐使用DTD验证,但是为了向前兼容HTML和XHTML,仍旧可以定义DTD:例如
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EM"> <!DOCTYPE html PUBLIC "-//W3C//DTD xhtml 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
五、标签:
1、媒体标签<video>和<audio>
<video src="movie.ogg" controls="controls"> 你的浏览器不支持HTML5视频功能! </video> 和 <audio src="song.ogg" controls="controls"> 你的浏览器不支持HTML5音频功能! </audio>
属性有
controls(值为controls)用来设置是否为视频,音频添加控件(如播放、暂停、进度条、音量等);
autoplay(值为autoplay)用来设定视频或音频是否在页面加载后自动播放。如果出现这个值,则马上播放;
loop(值为loop)用来设置视频或音频是否循环播放;
preload: 1、值auto:全部预加载
2、metadata:部分加载
3、none:不进行加载
src(值为URL)设置要播放的视频或音频的源文件url
width和height:用来设置媒体播放器的长宽
poster(值为url)用来指定一张图片作为预览图,在当前视频数据无效显示时显示
常用的多媒体文件及对应的MIME类型:
视频:
扩展名 MIMI类型
.ogg video/ogg
.mp4 video/mp4
.webm video/webm
.mov video/quicktime
.m4v video/x-m4v
.3gp video/3gpp
.mkv video/x-matroska
音频:
扩展名 MIME类型
.ogg audio/ogg
.mp3 audio/mpeg
.spx audio/ogg
.oga audio/ogg
<source>元素不能单独出现,只能位于<video>或<audio>之中,用于给<video>或<audio>指定多个可供选择的文件地址,(浏览器最终只选择其中一个),其拥有三个属性:src、type(值为MIME类型,有一个参数codecs,用来指定特定的媒体解码器)、media(用于说明媒体在何种介质中使用,不设置时默认值为all,表示支持所有介质)。
样例:全兼容设置
<video width="480px" height="360px" controls="controls" poster="images/moviepaper.png"> <source src="video/movie.mp4" type="video/mp4"/> <source src="video/movie.ogg" type="video/ogg"/> <source src="video/movie.webm" type="video/webm"/> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="480px" height="36opx" type="application/x-shockwave-flash"> <param name="allowFullScreen" value="true" /> <param name="movie" value="swf/videoplayer.swf"/> <param name="flashvars" value="url=video/movie.mp4"/> <embed src="swf/videoplayer.swf" width="480px" height="360px" type="application/x-shockwave-flash" flashvars="url=video/movie.mp4" allowFullScreen="true"/> </object> </video>
2、文档结构元素(具有很好的语义化)
<header>具有引导和导航作用的辅导元素,可以包含一个区间的标题或其他内容(如logo,搜索表单,或登录消息等)
<nav> 定义网页中的导航链接部分
<hgroup> 标题组合
<aside> 用来表示当前页面或文章的附属信息部分
<section>用来表现普通的文档内容区块或应用区块
<article> 用来在页面表示一套结构完整且独立的内容部分
<address> 被用来提供该文档的联系人信息
<footer> 可以被用来作为其直接父级内容或一个根区块的尾部内容
注意
以下设置可以便利地让IE9以前的浏览器支持结构元素,并且支持打印功能。
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> 支持的HTML5元素包括:abbr、article、aside、audio、video、canvas、detail、figcaption、figure、footer、header、hgroup、mark、meter、nav、output、 progress、section、summary、time。 并且需要在css中设置这些元素为块级元素。