HTML5基本元素初探

时间:2023-11-11 10:09:32

最近看了一些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,只能通过返回消息给创建者的回调函数进行处理。