《html5 从入门到精通》读书笔记(一)
今天看了《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 从入门到精通》读书笔记(一)的更多相关文章
- HTML5从入门到精通(明日科技) 中文pdf扫描版
HTML5从入门到精通(明日科技) 中文pdf扫描版
- HTML5从入门到精通(千锋教育)免费电子版+PDF下载
本书是HTML5初学者极好的入门教材之一,内容通俗易懂.由浅入深.循序渐进.本书内容覆盖全面.讲解详细,其中包括标签语义化.标签使用规范.选择器类型.盒模型.标签分类.样式重置.CSS优化.Photo ...
- Unity Shader入门精要读书笔记(一)序章
本系列的博文是笔者读<Unity Shader入门精要>的读书笔记,这本书的章节框架是: 第一章:着手准备. 第二章:GPU流水线. 第三章:Shader基本语法. 第四章:Shader数 ...
- Oracle从入门到精通----学习笔记
书名:<Oracle从入门到精通:视频实战版>秦靖.刘存勇等编著 第4章 SQL基础 1.SQL语言分类 数据定义语言 --- DDL,Data Definition Language 数 ...
- MySQL数据库应用 从入门到精通 学习笔记
以下内容是学习<MySQL数据库应用 从入门到精通>过程中总结的一些内容提要,供以后自己复现使用. 一:数据库查看所有数据库: SHOW DATABASES创建数据库: CREATE DA ...
- Unity Shader入门精要读书笔记(二)UnityShader概述
第三章<UnityShader概述>的读书笔记: 1.Unity Shader模板提供了几种选择: 标准光照模型(新添加的基于物理的渲染方法) 不含光照的基本的顶点.片元着色器 屏幕后处理 ...
- 《html5 从入门到精通》读书笔记(二)
接着上面继续记录笔记,这次要记的知识点比较多...记录下我认为比较重要的东西. 一.表单属性 1.autocomplete属性 该属性规定form或input域应该拥有自动完成功能. <form ...
- 《html5 从入门到精通》读书笔记(三)
二.标签详解 标签 描述 4 5 <form> 定义表单. 4 5 <h1> to <h6> 定义标题1到标题6. 4 5 <head> 定义关于文档的 ...
- 《HTML5 CANVAS基础教程》读书笔记
一.HTML5简介 1.HTML5新特性 1)结构元素:section,header,hgroup,footer,nav,article,aside, 2)内容元素:figure,figcaption ...
随机推荐
- 简单获取各大视频网站的flash地址
最近做网站的时候遇到一个需求:给定一个视频地址,获取它的swf地址.例如,给一个优酷的视频地址:http://v.youku.com /v_show/id_XNDg4MzY5ODU2.html,想获取 ...
- vue 时间选择器组件
vue 时间选择器组件 组件效果: 单文件组件: <template> <div class="date-pickers"> <!--date为com ...
- 使用ffmpeg合并视频文件的三种方法
ffmpeg合并视频的方法有三种.国内大多数仅介绍了其中之一.于是觉得有必要翻译一下.其实在ffmpeg的 FAQ文档中有比较详细的说明. 使用concat协议进行视频文件的合并 这种方式的适用场景是 ...
- VS2013 查看程序各个函数的CPU利用率<转>
自己写的程序CPU占用率过高,无法锁定原因时,可以用VS2013帮忙检测 1. 打开VS 性能分析 2. 启动项目进行检测 3. 选择CPU采样 完成 4. 分析一段时间 然后停止分析 5. 选择显示 ...
- PHP中使用CURL模拟文件上传实例
调用实例: 该方法将本地的E盘文件test.doc上传到接口服务器上的 uploadFile方法中,uploadFile会对上传的文件做进一步处理. 若你想自己对上传的文件做操作,将接口uploadF ...
- 纸牌游戏CardBattle的设计与开发
- 创建数据库sql语句
create database JXGL; go create table S( sno char(10)primary key not null, sname nvarchar(10) not nu ...
- JS的事件汇总
一.前言 事件的绑定触发有很多种方法,我们如何选择呢? 很多时候,我们会使用鼠标事件,但是鼠标事件只能在PC设备上使用,当我们需要对不同设备兼容时怎么办呢? 二.正文 1. 事件的几个概念: 事件流: ...
- 启动图。引导页以及EAIntroView的使用
ios启动图: 1242 x 2208 (6plus) R5.5位置 750 x 1334 (6) R4.7位置 640 x 960 (4/4s) 2x ...
- 支付宝soa框架发展思路(转载)
大家好,这里是首届QCon Beijing的现场,现在坐在我的旁边是的支付宝的首席架构师程立.先给大家介绍一下,支付宝架构发展到今天,经历哪些时期,都有哪些里程碑? 我回忆一下,支付宝系统架构发展大概 ...