文档章节

HTML5学习总结

麦芒_酱
 麦芒_酱
发布于 2014/06/13 09:57
字数 879
阅读 33
收藏 0
点赞 0
评论 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
浦东
程序员
WEB前端开发学习HTML5到底有多厉害?

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

web前端小辰 ⋅ 05/23 ⋅ 0

超级绚丽,20款前端动画特效,轰炸你的眼睛

前言 HTML5一个相当出色的web技术,它不仅可以让你更加方便地操纵页面元素,而且可以通过canvas实现更多的动画特效,引进HTML5标准后,CSS3也就可以发挥更大的作用。本文主要介绍了一些基于H...

浪漫程序员 ⋅ 04/25 ⋅ 0

HTML5学习之Web Storage基础知识

HTML5 Web 存储 在HTML5 Web Storage还没出来之前,本地存储使用的是 cookie. 但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可...

CHIEMINCHAN ⋅ 05/11 ⋅ 0

前端新人关注的Web前端饱和性分析?前端面试必知必会的十点!

现在前端市场是不是已经饱和了?巴巴巴巴巴...... 还有:XXX行业是否已经饱和? angular1.5是不是已经被淘汰? 前端还有前途吗? bootstrap为什么被称为垃圾框架?等等等 不是博主不友好,只...

web前端05 ⋅ 06/15 ⋅ 0

H5本地存储一

localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用。sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同意可...

刘梓航 ⋅ 2014/10/27 ⋅ 2

localStorage使用总结

一、什么是localStorage、sessionStorage 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空...

ywppengpeng ⋅ 2016/11/21 ⋅ 0

WEB前端学习面试常见问题系列:H5有哪些新标签?

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

web前端小辰 ⋅ 05/13 ⋅ 0

WEB前端学习常见面试题:浏览器本地存储和服务端存储的区别是什么?

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

web前端小辰 ⋅ 05/11 ⋅ 0

扣丁学堂HTML5培训课程怎么样

  在如今,随着移动互联网技术的发展和进步,比如HTML5在移动互联端的应用,让更多人了解到它的丰富性趣味性便利性,但HTML5就包括这些么?扣丁学堂HTML5培训课程怎么样?零基础能学会么?...

扣丁学堂 ⋅ 06/01 ⋅ 0

HTMl5的sessionStorage和localStorage的使用

html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。 sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结...

刘阳0292 ⋅ 2017/07/09 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Java Web如何操作Cookie的添加修改和删除

创建Cookie对象 Cookie cookie = new Cookie("id", "1"); 修改Cookie值 cookie.setValue("2"); 设置Cookie有效期和删除Cookie cookie.setMaxAge(24*60*60); // Cookie有效时间 co......

二营长意大利炮 ⋅ 今天 ⋅ 0

【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu ⋅ 今天 ⋅ 0

Spring JDBC使用方法

普通实现: 1、创建数据表customer。 可以使用任何数据库实现,在项目中要引入相应数据库驱动包并配置相应数据库连接。 2、创建Customer pojo。 Customer类的属性对应数据库的属性,除了为每...

霍淇滨 ⋅ 今天 ⋅ 0

Contos 7 安装Jenkins

Jenkins是一款能提高效率的软件,它能帮你把软件开发过程形成工作流,典型的工作流包括以下几个步骤 开发 提交 编译 测试 发布 有了Jenkins的帮助,在这5步中,除了第1步,后续的4步都是自动...

欧虞山 ⋅ 今天 ⋅ 0

revel

revel install go get github.com/revel/revelgo get github.com/revel/cmd create new app revel new git.oschina.net/zdglf/myapp run app revel run git.oschina.net/zdglf/myapp ot......

zdglf ⋅ 今天 ⋅ 0

49. Group Anagrams - LeetCode

Question 49. Group Anagrams Solution 思路:维护一个map,key是输入数组中的字符串(根据字符排好序) Java实现: public List<List<String>> groupAnagrams(String[] strs) { Map<Strin......

yysue ⋅ 今天 ⋅ 0

spring Email

使用spring发Email其实就是使用spring自己封装携带的一个javamail.JavaMailSenderImpl类而已。这个类可以当一个普通的java对象来使用,也可以通过把它配置变成spring Bean的方式然后注入使用...

BobwithB ⋅ 今天 ⋅ 0

spark 整理的一些知识

Spark 知识点 请描述spark RDD原理与特征? RDD全称是resilient distributed dataset(具有弹性的分布式数据集)。一个RDD仅仅是一个分布式的元素集合。在Spark中,所有工作都表示为创建新的...

tuoleisi77 ⋅ 今天 ⋅ 0

思考

时间一天天过感觉自己有在成长吗?最怕的是时光匆匆而过,自己没有收获!下面总结下最近自己的思考。 认识自己 认识另一个自己,人们常说要虚心听取别人意见和建议。然而人往往是很难做到的,...

hello_hp ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部