今天看了《html5 从入门到精通》这本书,感觉阅读下来很舒心,不像阅读其他书籍很揪心。html增加的知识点,我觉得非常有价值,看完几章记录了一些内容,不但能巩固,也为下次遗忘知识点做好准备。

一、视频(video)

  video元素支持三种视频格式:Ogg,mpeg4和WebM。

  Ogg:带有 Thera 视频编码和 Vorbis 音频编码的Ogg文件

  MPEG4:带有 H.264 视频编码和 AAC 音频编码的 MPEG4文件

  WebM:带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

  1.使用方式

  第一种:

  <video src="movie.ogg" width="320" height="240" controls="controls">

    Your browser does not support the video tag.

  </video>

  第二种:

  <video width="320" height="240" controls="controls">

    <source src="movie.ogg" type="video/ogg">

    <source src="movie.mp4" type="video/mp4">

    Your browser does not support the video tag.

  </video>

  2.属性

  autoplay:如果出现该属性,则视频在就绪后马上播放。

  control:向用户显示空进,比如播放按钮。

  height:播放器高度。

  width:播放器宽度。

  loop:当媒介文件完成播放后再次开始播放。

  preload:视频在页面加载时进行加载,并预备播放。

  src:要播放视频的URL。

二、音频(audio)

  video元素支持三种视频格式:Ogg Vorbis,mp3和Wav。

  使用方式和视频video类似,属性少了width和height设置。

三、绘制图像(Canvas)

  例:

  html代码:

<canvas id="myCanvas" width="400" height="200" style="border: 1px solid gray;">
Your browser does not support the canvas element.
</canvas>

  js代码:

<script type="text/javascript">
$(function(){
/* 渐变 */
var txt = document.getElementById("myCanvas");
var c = txt.getContext("2d");
var grd = c.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#0000FF");
c.fillStyle = grd;
c.fillRect(0,0,175,50); /* 添加图片 */
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
var img = new Image();
img.src = "images/p1.jpg";
cxt.drawImage(img, 0 , 0); })
</script>

如下图所示:

四、web存储

            localStorage.lastname = "Smith"; /* 永久保存 */
$(document).data("lastname","Ann");
console.log("lastname:"+localStorage.lastname+" ,"+$(document).data("lastname")); /* 分别html5、jquery存储数据 */ /* 访问页面次数 */
if(localStorage.pagecount){
localStorage.pagecount = Number(localStorage.pagecount) + 1;
}else{
localStorage.pagecount = 1;
}
console.log("pagecount:"+localStorage.pagecount); sessionStorage.firstname = "wiy"; /* 浏览器关闭就删除 */
console.log(sessionStorage.firstname);

五、input类型

  email,url,number,range,date picker(date,month,week.time,datetime,datetime-local),search,color,用例子的显示说明,还存在浏览不兼容问题。

  

    <form action="" method="post">
Email: <input type="email" name="user_email"/><br/>
Url: <input type="url" name="user_url"/><br/>
Number: <input type="number" name="points" step="3" min="0" max="10" value="3"/><br/>
Range: <input type="range" name="points" min="1" max="10"/><br/>
Date: <input type="time" name="user_date"/><br/>
Search: <input type="search" name="user_search"/><br/> </form>

如下图所示:

六、表单元素

  datalist,keygen和output,兼容性很差,我这边没有Opera,所以基本上没看出来是什么样。

  html代码:

      <datalist id="url_list">
<option label="W3School" value="W3School"/>
<option label="Google" value="Google"/>
<option label="Microsoft" value="Microsoft"/>
</datalist><br/>
Encryption: <keygen name="security"/><br/> <input type="number" id="num_a"/>+<input type="number" id="num_b"/>=
<output id="result" onforminput="resCalc();"></output>

  js代码:

         function resCalc(){
var num_a = document.getElementById("num_a").value;
var num_b = document.getElementById("num_b").value;
var result = document.getElementById("result").value;
result = Number(num_a) + Number(num_b);
alert(result);
}

  今天就看了这些,感觉布局分块很清晰,但是兼容性不好,ie里基本上不行,让用户下载Google Chrome Frame不太现实,希望html5能早日发挥真正作用,做到传统化。

  

  

《html5 从入门到精通》读书笔记(一)的更多相关文章

  1. HTML5从入门到精通(明日科技) 中文pdf扫描版

    HTML5从入门到精通(明日科技) 中文pdf扫描版

  2. HTML5从入门到精通(千锋教育)免费电子版+PDF下载

    本书是HTML5初学者极好的入门教材之一,内容通俗易懂.由浅入深.循序渐进.本书内容覆盖全面.讲解详细,其中包括标签语义化.标签使用规范.选择器类型.盒模型.标签分类.样式重置.CSS优化.Photo ...

  3. Unity Shader入门精要读书笔记(一)序章

    本系列的博文是笔者读<Unity Shader入门精要>的读书笔记,这本书的章节框架是: 第一章:着手准备. 第二章:GPU流水线. 第三章:Shader基本语法. 第四章:Shader数 ...

  4. Oracle从入门到精通----学习笔记

    书名:<Oracle从入门到精通:视频实战版>秦靖.刘存勇等编著 第4章 SQL基础 1.SQL语言分类 数据定义语言 --- DDL,Data Definition Language 数 ...

  5. MySQL数据库应用 从入门到精通 学习笔记

    以下内容是学习<MySQL数据库应用 从入门到精通>过程中总结的一些内容提要,供以后自己复现使用. 一:数据库查看所有数据库: SHOW DATABASES创建数据库: CREATE DA ...

  6. Unity Shader入门精要读书笔记(二)UnityShader概述

    第三章<UnityShader概述>的读书笔记: 1.Unity Shader模板提供了几种选择: 标准光照模型(新添加的基于物理的渲染方法) 不含光照的基本的顶点.片元着色器 屏幕后处理 ...

  7. 《html5 从入门到精通》读书笔记(二)

    接着上面继续记录笔记,这次要记的知识点比较多...记录下我认为比较重要的东西. 一.表单属性 1.autocomplete属性 该属性规定form或input域应该拥有自动完成功能. <form ...

  8. 《html5 从入门到精通》读书笔记(三)

    二.标签详解 标签 描述 4 5 <form> 定义表单. 4 5 <h1> to <h6> 定义标题1到标题6. 4 5 <head> 定义关于文档的 ...

  9. 《HTML5 CANVAS基础教程》读书笔记

    一.HTML5简介 1.HTML5新特性 1)结构元素:section,header,hgroup,footer,nav,article,aside, 2)内容元素:figure,figcaption ...

随机推荐

  1. 简单获取各大视频网站的flash地址

    最近做网站的时候遇到一个需求:给定一个视频地址,获取它的swf地址.例如,给一个优酷的视频地址:http://v.youku.com /v_show/id_XNDg4MzY5ODU2.html,想获取 ...

  2. vue 时间选择器组件

    vue 时间选择器组件 组件效果: 单文件组件: <template> <div class="date-pickers"> <!--date为com ...

  3. 使用ffmpeg合并视频文件的三种方法

    ffmpeg合并视频的方法有三种.国内大多数仅介绍了其中之一.于是觉得有必要翻译一下.其实在ffmpeg的 FAQ文档中有比较详细的说明. 使用concat协议进行视频文件的合并 这种方式的适用场景是 ...

  4. VS2013 查看程序各个函数的CPU利用率<转>

    自己写的程序CPU占用率过高,无法锁定原因时,可以用VS2013帮忙检测 1. 打开VS 性能分析 2. 启动项目进行检测 3. 选择CPU采样 完成 4. 分析一段时间 然后停止分析 5. 选择显示 ...

  5. PHP中使用CURL模拟文件上传实例

    调用实例: 该方法将本地的E盘文件test.doc上传到接口服务器上的 uploadFile方法中,uploadFile会对上传的文件做进一步处理. 若你想自己对上传的文件做操作,将接口uploadF ...

  6. 纸牌游戏CardBattle的设计与开发

  7. 创建数据库sql语句

    create database JXGL; go create table S( sno char(10)primary key not null, sname nvarchar(10) not nu ...

  8. JS的事件汇总

    一.前言 事件的绑定触发有很多种方法,我们如何选择呢? 很多时候,我们会使用鼠标事件,但是鼠标事件只能在PC设备上使用,当我们需要对不同设备兼容时怎么办呢? 二.正文 1. 事件的几个概念: 事件流: ...

  9. 启动图。引导页以及EAIntroView的使用

    ios启动图: 1242 x 2208 (6plus)    R5.5位置 750 x 1334   (6)           R4.7位置 640 x 960     (4/4s)      2x ...

  10. 支付宝soa框架发展思路(转载)

    大家好,这里是首届QCon Beijing的现场,现在坐在我的旁边是的支付宝的首席架构师程立.先给大家介绍一下,支付宝架构发展到今天,经历哪些时期,都有哪些里程碑? 我回忆一下,支付宝系统架构发展大概 ...