最近看了一些HTML5的基础知识，写了一些小案例，记录一下，方便查找。

1、新建的HTML5页面中显著的变化是：DOCTYPE声明变简洁(<!DOCTYPE html>) / <meta content="charset=utf-8"/>

2、新增的元素：
　　结构元素：
　　　　section(要存在一个标题，分段时使用)
　　　　article(整块使用)
　　　　aside
　　　　header
　　　　hgroup
　　　　footer
　　　　address
　　　　nav(可在一个页面中多处使用，不要用menu标签代替nav)
　　　　figure
　　其他元素：
　　　　video
　　　　audio
　　　　embed
　　　　mark
　　　　progress
　　　　meter
　　　　time
　　　　ruby
　　　　rt
　　　　rp
　　　　wbr
　　　　canvas
　　　　command
　　　　details
　　　　datalist
　　　　datagrid
　　　　keygen
　　　　output
　　　　source
　　　　menu
　　　　small标识小字印刷体的元素
　　input元素：
　　　　email
　　　　url
　　　　number
　　　　range
　　　　search
　　　　date
　　　　datetime
　　　　datetimelocal
　　　　time
　　　　month
　　　　week
　　　　ValueAsNumber

3、废除的元素：
　　能使用CSS替代的元素：basefont、big、center、font、s、tt、u等等
　　不再使用frame框架
　　只有部分浏览器支持的元素
　　其他被废除的元素

4、新增的表单相关属性：
　　formaction可以将一个表单提交到多个Action
　　formmethod提交方式
　　formenctype对表单元素编码方式
　　formtarget打开方式
　　autofocus自动获取焦点
　　required必填项(提示的文字是固定的)
　　control
　　datalist可输入的下拉框
　　placeholder在输入前显示提示文字
　　pattern填入正则表达式，方便判断
　　selectionDirection用户选择的方向

5、全局属性：
　　contentEditable属性：该元素是否可编辑，是Boolean类型，若未指定值则默认继承父元素的可编辑状态
　　designMode属性：
　　hidden属性：
　　spellcheck属性：对input和textarea的标签的内容进行语法检查
　　tabindex属性：tab键的顺序

6、网页编排规则：
　　显示编排内容区域块
　　隐示编排内容区域块
　　标题分级
　　不同区域块使用相同级别的标题

7、Range对象的基本概念：一个Range对象代表页面上的一段连续区域，通过Range对象可以获取或修改网页上的任何区域。
　　Selection
　　Range
　　SelectNode
　　SelectNodeContents
　　setStart/setEnd/setStart/setBefore
　　cloneRange/cloneContents
　　extractContents
　　insertNode
　　compareBoundaryPoints
　　collapse
　　detach

8、Canvas绘制图形：
　　lineTo()
　　moveTo()
　　bezierCurveTo() 贝塞尔曲线
　　createLinearGradient() 颜色渐变
　　createRadialGradient() 径向渐变，绘制出的图形的边线是曲线
　　globalCompositeOperation() 绘制组合图形
　　shadowOffsetX/shadowOffsetY/shadowColor/shadowBlur 绘制阴影图形
　　drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh)(img对象,原图被复制区域的起始坐标和宽高,复制区域在画布上的起始坐标和宽高)

9、Web Storage/ Web SQL/ IndxedDB：

　　HTML5新增的非常重要的功能是可以在客户端本地保存数据的WebStorage功能，之前可以使用Cookies在客户端保存简单的用户信息，但是由于Cookies会有些限制：Cookies的大小不能超过4KB;Cookies会随请求一起发送，浪费带宽;正确操纵Cookies也是很困难的，所以更倾向于使用Web Storage，它可以存储更多的数据。
　　Web Storage有两种形式：SessionStorage和LocalStorage，前者只存储在当前的页面或者窗口对象中，对其他页面不可见，当页面关闭后数据就会丢失；后者保存数据更持久，即使浏览器窗口已经关闭，数据也会保存下来并可用于所有同源网页或者窗口的加载(即用户重新打开浏览器访问相同域名，并且协议和端口一致的网址，将仍然可以有效访问LocalStorage存储的数据)。
　　如果要在客户端存储大量数据，Web Storage显然不能满足需求，此时可以考虑使用Web SQL(关系型)和IndxedDB(非关系型)两种客户端的轻量级数据库保存数据，前者在本地建了一个SQLLite数据库，操作数据库的对象有：
　　var db = openDatabase(shortName,version,displayName,maxSize)//打开数据库连接，若没有此数据库则创建
　　db.transaction(function(tx){})//开启事务,代码要写在事务中
　　tx.executeSql("")//执行的SQL语句

10、应用缓存(Application Cache)：主要用于缓存一些静态资源,LocalStorage用来缓存一些数据。

　　使用方法：通过创建一个.appcache 类型的文件，称为缓存清单(cache manifest)文件，并添加manifest属性<html manifest="index.appcache">

　　Manifest文件类型：
　　　　1)、CACHE MANIFEST：在此标题下列出的文件将在首次下载后进行缓存
　　　　2)、NETWORK：在此标题下列出的文件需要与服务器的连接，且不会被缓存
　　　　3)、FALLBACK：在此标题下列出的文件规定当页面无法访问时的回退页面(比如404页面)

　　有些注意事项：http://www.tuicool.com/articles/zmUrU3r

11、Web Workers：
　　Web Workers为WEB前端网页上的脚本提供了一种能在后台进程中运行的方法。一旦它被创建，Web Workers就可以通过postMessage()向任务池发送任务请求，执行完之后再通过postMessage()返回消息给创建者指定的事件处理程序(通过onmessage进行捕获)。Web Workers进程能够在不影响用户界面的情况下处理任务，并且，它还可以使用XMLHttpRequest来处理I/O，无论responseXML和channel属性是否为null。
　　注意：通常，后台进程（包括web workers进程）不能对DOM进行操作。如果希望后台程序处理的结果能够改变DOM，只能通过返回消息给创建者的回调函数进行处理。

HTML5基本元素初探的更多相关文章

  1. HTML5编程之旅系列一：HTML5 Geolocation 初探

    让我们假设这样一个场景,有一个web应用程序,它可以向用户提供附近不远处某商场的打折优惠信息.使用HTML5 Geolocation API(地理定位 API),可以请求用户共享他们的位置信息. HT ...

  2. HTML5 Canvas 初探

    仅仅只是一个简单的hello world. js代码很简单: <!DOCTYPE HTML> <html lang="cn"> <head> & ...

  3. Web前端开发高手进阶

     Web前端开发高手进阶 js框架+Ajax技术01.初识javascript及其语言基础(一)02.初识javascript及其语言基础(二)03.初识javascript及其语言基础(三)及js原 ...

  4. HTML5+MUI+HBuilder 之初探情人

    07,08年那会儿正当Java火爆,C/C++仍是广泛运用的一门语言的时候,所以 我的大学都献给了C/C++和Java.当诺基亚的倒闭成为按键机时代衰落的标志时,移动APP的开发也如破堤之洪,爆炸式的 ...

  5. HTML5 Application cache初探和企业应用启示

    Application Cache 在自己做的开源项目( https://github.com/etoah/Lucien ) 用到了HTML5 的Application Cache,现总结如下: 目录 ...

  6. 利用HTML5的History API实现无刷新跳转页面初探

    HTML4中的History API history这个东西大家应该都不陌生,我们经常使用history.back(-1)来实现后退功能,具体的属性和方法如下: 属性 length 历史的项数.Jav ...

  7. html5游戏开发--"动静"结合用地图块拼成大地图 & 初探lufyl

    一.前言   本次教程将向大家讲解如何用html5将小地图块拼成大地图,以及如何用现有的高级html5游戏开发库件lufylegend.js开发游戏.   首先让我们来了解了解如何用html5实现动画 ...

  8. 《HTML5编程之旅》系列二：Communication 技术初探

     本文主要探讨用于构建实时跨源通信的两个模块:跨文档消息通信(Cross Document Messaging)和XMLHttpRequestLevel2.通过这两个模块,我们可以构建不同域间进行安全 ...

  9. html5游戏开发--"动静"结合(二)-用地图块拼成大地图 & 初探lufylegend

    一.前言 本次教程将向大家讲解如何用HTML5将小地图块拼成大地图,以及如何用现有的高级html5游戏开发库件lufylegend.js开发游戏. 首先让我们来了解了解如何用html5实现动画,毕竟“ ...

随机推荐

  1. Java集合容器简介

    Java集合容器主要有以下几类: 1,内置容器:数组 2,list容器:Vetor,Stack,ArrayList,LinkedList, CopyOnWriteArrayList(1.5),Attr ...

  2. Java接口回调

    public class A { private D d; private C c; public A (C c) { this.c = c; } public void setD (D d) { t ...

  3. bzoj2424 [HAOI2010]订货

    模拟一下仓库里面存储物品的价格情况即可,如果当前物品大于仓库里面物品那么就替换一下仓库里的物品,然后订货直接从仓库里先取,仓库里不够则直接购买,每次做完后记得买当前物品填补一下仓库直至仓库填满,当然这 ...

  4. Python2.6.6执行selenium自动化

    系统类型: [root@bogon home]# uname -aLinux bogon 2.6.32-431.el6.x86_64 #1 SMP Sun Nov 10 22:19:54 EST 20 ...

  5. JQuery MultiSelect（左右选择框）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Java关于md5+salt盐加密验证

    一.陈述一下工作流程: 1.根据已有的密码字符串去生成一个密码+盐字符串,可以将盐的加密字符串也存放在数据库(看需求), 2.验证时将提交的密码字符串进行同样的加密再从数据库中取得已有的盐进行组合密码 ...

  7. enbale blakboxing

    chrome://flags/#enable-devtools-experiments

  8. Hibernate 简单使用

    首先在数据库中创建相应的表,脚本如下: create table Student (id int primary key, sName ), sNO ), sex ), email )) 在Myecl ...

  9. Maven打包pom里面配置exclude 排除掉环境相关的配置文件

    Maven打包pom里面配置exclude 排除掉环境相关的配置文件 有几种方式:1. 打包时,指定环境参数把环境的配置文件复制过去2. 不打包所有的环境相关的配置文件,直接由运维的人维护 可以在上传 ...

  10. 2016.8.16 Java培训第一天

    1. 十进制转换二进制 31/2=15余1  15/2=7余1 7/2=3余1 3/2=1余1    31的二进制结果为11111 35/2=17余1  17/2=8余1  8/2=4余0 4/2=2 ...