文档章节

HTML5学习总结

麦芒_酱
 麦芒_酱
发布于 2014/06/13 09:57
字数 879
阅读 34
收藏 0

HTML5几个重要关注的点:

1/ <header> <footer> <section>

2/ canvas

3/ 视频

4/ 地理定位

5/ 本地数据存储

6/ 离线web应用程序

7/ HTML web表单

8/ HTML5扩展词汇表



1、MIME类型

application/xhtml+xml

text/html

2、html5只是一些独立特性的集合

3、modernizr是一个JavaScript类库,可用于检测浏览器是否支持HTML5和CSS3特性。

生成Modernizr的全局对象

4、<canvas> <canvastext> <video> 本地存储localstorage,web workers,离线web应用applicationcatche,地理位置geolocation,输入框input新类型,占位文本placeholder,表单自动聚焦autofocus,微数据microdata

5、doctype变得简洁

<!DOCTYPE html>

根元素可简化为<html>

6、HTML页面必须指定字符编码,即使你不使用怪异的字符。因为若不指定会存在安全漏洞

<meta charset="utf-8">

7、新增的语义元素

<section> <nav> <article> <aside> <hgroup> <header> <footer> <time> <mark>


用Remy Sharp的“HTML5 enabling script”解决IE不存在这些新元素的问题。在header中加入

<!--[if It IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

8、对于canvas元素用getContext("2d")获取到上下文后就可以绘制简单图形、路径、文本、颜色渐变、图像。

在canvas上绘制的图形文本是么诶有盒模型的,它们没有浮动,没有边距,没有留白,也没有自动换行

IE要加载excanvas.js,才可使用canvas

9、视频容器格式:MPEG-4 Flash Ogg WebM 音频视频交错(Audio Video Interleave)

10、HTML5的<video>标签,不提供播放控制。video标签的几个属性:controls浏览器内置的控制界面,preload页面加载时就下载,autoplay页面加载时就下载视频,并自动播放

video下可以添加多个source,考虑视频的兼容性

11、HTML5<video>标签现在只支持Ogg/MPEG-4/WebM三种视频格式

12、移动设备获取用户地理位置的方式:通过距离用户相对临近的不同信号基站来计算用户位置信息;使用用户设备上的专用GPS设备和环地球GPS定位卫星通讯。

13、navigator.geolocation getCurrentPosition(success_callback, error_callback, {enableHighAccuracy/timeout/maxmumAge})

watchPosition()

14、geo.js 使用geo可以不用考虑不同地理位置API的情况,使用统一的接口即可。注意:放在页面底部,防止加载过慢。

<script src="gears_init.js"></script>

<script src="geo.js"></script>

15、web应用数据存储,HTML5存储是基于键值对的,也可用数组的方式获取。

interface Storage {

  getter any getItem(in DOMString key);

  setter creator void setItem(in DOMString key, in any data);

};

interface Storage {

  deleter void removeItem(in DOMString key);

  void clear();

};

interface Storage {

  readonly attribute unsigned long length;

  getter DOMString key(in unsigned long index);

};

16、IE的事件对象存储在window.event上。

17、每个域默认拥有5MB的存储空间

18、Web SQL数据库

IndexedDB引入对象存储的概念

19、离线web应用 核心是缓存清单文件。Web应用中的每个页面都需要将manifest属性指向缓存清单文件<html manifest="/cache.manifest">

缓存清单文件以CACHE MANIFEST开始,其余部分分为:显示段、默认段、线上白名单(或网络段)

CACHE MANIFEST

FALLBACK:

NETWORK:

CACHE:

20、表单

占位文本 placeholder

自动聚焦 autofocus  JS实现自动聚焦是用focus()方法

Email地址 type="email"

Web地址 type="url"

数值 type="number" max min step value

数值滑块 type="range"

日期选择器 type="date""month""week""time""datetime""datetime-local"

搜索框 type="search"

21、微数据:使用来自自定义词汇表的、带作用域的名/值来给DOM做标记。

© 著作权归作者所有

共有 人打赏支持
麦芒_酱
粉丝 4
博文 24
码字总数 4345
作品 0
浦东
程序员
史无前例的 HTML5 资源参考指南

尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 ...

李长春
2012/03/02
0
1
Session, LocalStorage ,Cache-Control

Session 为什么要使用Session? Session的使用? 总结Cookie与Session: Cookie Session LocalStorage localStorage是html5提供的一个API,localStorage的实质是一个哈希 Session是服务器的哈...

code_susu
07/31
0
0
WEB前端开发学习HTML5到底有多厉害?

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰
05/23
0
0
基于HTML5技术的电力3D监控应用(二)

上篇介绍了我们电力项目的基本情况,我们选用HTML5技术还是顶着很大压力,毕竟HTML5技术性能行不行,浏览器兼容性会不会有问题,这些在项目选型阶段还是充满疑惑,项目做到现在终于快收尾了我...

xhload3d
2013/12/15
0
1
HTML5从入门到精通,零基础学员必看

学习html5从入门到精通,零基础新手也能看懂,无论你是唱歌,画画的艺术生,还是学习机械专业的工科生,或者大学读的文学学科。先了解HTML5可以实现的功能有哪儿些? 1. HTML5可以同时在多种...

课工场CC老师
2017/11/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

992. Sort Array By Parity II - LeetCode

Question 992. Sort Array By Parity II Solution 题目大意:给一个int数组,一半是奇数一半是偶数,分别对偶数数和奇数数排序并要求这个数本身是偶数要放在偶数位上 思路:把奇数数和偶数数...

yysue
23分钟前
1
0
Snackbar源码分析

目录介绍 1.最简单创造方法 1.1 Snackbar作用 1.2 最简单的创建 1.3 Snackbar消失的几种方式 2.源码分析 2.1 Snackbar的make方法源码分析 2.2 对Snackbar属性进行设置 2.3 Snackbar的show显示...

潇湘剑雨
55分钟前
1
0
分布式作业系统 Elastic-Job-Lite 源码分析 —— 作业数据存储

分布式作业系统 Elastic-Job-Lite 源码分析 —— 作业数据存储 摘要: 原创出处 http://www.iocoder.cn/Elastic-Job/job-storage/ 本文基于 Elastic-Job V2.1.5 版本分享 1. 概述 本文主要分享...

DemonsI
今天
1
0
jmockit demo

1、@Mocked,标识一个指定的class的实例或被测对象的参数被Mock掉。 2、@Capturing,标识一个被Mock的对象,从该对象派生的子类也被Mock了。 3、@Injectable,标识只有一个指定的被测对象的内...

我的老腰啊
今天
1
0
内容换行

用 <textarea>13611112222 这里想换行 13877779999</textarea><textarea>13611112222 13877779999</textarea>...

小黄狗
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部