最近看了一些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. Struts2(一)：怎么创建对应版本的struts.xml

    1.eclisep导航菜单:windows->preferences->Xml->Xml Catalog; 2.在Xml Catalog右侧,添加一个新的XML Catalog: 3 ...

  2. CsvHelper

    写66666行两个数字 用CsvHelper里的ExcelSerializer 400ms SaveAs 200ms 共600ms 直接用StreamWriter 150ms 行数可以超过65536 ...

  3. This application is modifying the autolayout engine from a background threa－线程错误

    警告提示:This application is modifying the autolayout engine from a background thread, which can lead to ...

  4. Bug测试报告--食物链教学工具--奋斗吧兄弟

    组名:奋斗吧兄弟 测试时间:2016-11-23 15:15 测试者:李权(nice!团队) 代码地址:HTTPS: https://git.coding.net/li_yuhuan/FoodChai ...

  5. Eclipse创建maven的Web项目

    MAVEN作用:管理jar包 1.首先新建一个maven项目,看图: 2.按照以上步骤就可以创建一个maven项目,可以看到最下图的目录结构,但是这样的目录结构是不对的,需要做一些修改. 首先为了避免 ...

  6. 解决Failed to allocate memory: 8转

    解决Failed to allocate memory: 8 昨天换了x64的Win7,发现在Eclipse上启动模拟器的时候存在问题,当设置的模拟器分辨率大于400×800的时候会出现 Failed ...

  7. Linux 多线程编程 实例 1

    子线程循环 10 次,接着主线程循环 100 次,接着又回到子线程循环 10 次,接着再回到主线程又循环 100 次,如此循环50次,试写出代码. #include <pthread.h> ...

  8. sublime设置备份

    Settings-user { "font_face": "Consolas", "font_size": 13, "line_p ...

  9. es5.0安装问题

    ES的5.0版本听说在性能上大大优化,于是老大说准备换5.0版本.由于在技术群看到很多人都说ES 5.0 安装有问题,在这里贴出自己在使用最新版5.0遇到的问题和解决方法 1.Elasticsearc ...

  10. 使用 greenDao 框架 操作数据库

    0.效果图