最近看了一些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. python install (version problem-method ln -s)

    一般情况下,无需自己安装Python.因为在大多数Linux版本中,如Fedora,Ubuntu等,都已经默认安装了Python,但也可以根据需要自定义安装Python.下面使用源码编译安装来举个例子 ...

  2. 文本标记器vi

    在打开某一类文件时,遇到了vi,当时不知是什么东西,鼠标,包括键盘上的键在文本上都没有用,后来才知道那是vi 参考文档

  3. Clob类型转化String类型

    Clob clob=rs.getClob(列数); Clob clob=rs.getClob("列名");String content=clob.getSubString((lon ...

  4. 夺命雷公狗-----React---13--事件监听

    在react中事件监听直接作为组建的属性来添加即可,就像DOM中的html操作 <!DOCTYPE> <html> <head> <meta charset= ...

  5. HTML5 webSQL 中查询结果集 result.rows.item 的用法

    加入查询回调函数如下: function(tx,result){ var len = result.rows.length; var recordset = result.rows.item; ){ ...

  6. php调用一个c语言写的接口问题

    用php调用一个c语言写的soap接口时,遇到一个问题:不管提交的数据正确与否,都无法请求到接口 1.用php标准的soap接口去请求 2.拼接xml数据去请求 以上两种方式都不正确 解决办法:php ...

  7. python核心编程学习记录之条件和循环

  8. yii2框架原生的结合框架使用的图片上传

    首先我们要从model层开始写起,主要是为了创建验证规则,还有图片上传的路径以及图片的命名规则(UploadForm.php) 接下来我们要在控制器层写好业务逻辑,就是什么情况下直接在调用model层 ...

  9. C中字符串的几种定义方法及说明

    在C中定义字符串有下列几种形式:字符串常量,char数组,char指针 1.字符串常量 即:位于一对双括号中的任何字符.双引号里的字符加上编译器自动提供的结束标志\0字符,作为 一个字符串存储在内存中 ...

  10. Linux的加密认证功能以及openssl详解

    一.详细介绍加密.解密技术 现在的加密/解密技术主要有三种:对称加密,非对称加密,和单向加密 这三种加密解密技术的组合就是现在电子商务的基础,它们三个有各自最适合的领域,而且所要完成的功能也是不同的, ...