HTML5-基础

最近看的《HTML秘籍》,对HTML5有了初步的了解,总结如下。

推出理由

  • Web浏览器之间兼容性低
  • 文档结构不明确
  • Web应用程序功能受限制

主要原理

  • 标准不应该引入导致已有网页无法工作的改变
  • 标准化了非官方、但广泛应用的技术
  • 以实用为目的

最佳实践

  • 包含可选的<html><body><head>元素
  • 标签全部小写
  • 为属性值加引号

元素家族

新增的元素

用于构建页面的语义元素 <article><aside><figcaption><figure><footer><header><nav><section><details><summary>

用于标识文本的语义元素 <mark><time><wbr>

Web表单及交互 <input><datalist><keygen><meter><progress><command><menu><output>

音频、视频及插件 <autio><video><source><embed>

Canvas <canvas>

非英语支持 <bdo><rp><rt><ruby>

删除的元素

为网页添加样式的元素,如 <big><center><font><tt><strike>

HTML框架,如 <frameset><frame>,但保留了 <iframe>

冗余或容易导致误会的元素,如 <acronym><applet>

改变的元素

将旧元素用于新目的,如 <small><hr><s>

停止从格式角度看问题,转换成具有真实逻辑含义的元素,如 <b><i> 分别被 <strong><em> 取代

调整的元素

调整了元素的使用规则,如 <address><cite>

标准化的元素

<embed><wbr>

构建更好的表单

改良了input元素,url、email、date、number、range等类型

占位水印 placeholder、自动获取焦点 autofocus

增加了表单验证,required、pattern、自定义验证

进度条 <progerss>、计量条 <meter>

新增功能

音频、视频、canvas

File API,有说 File API 不是HTML5规范的内容,但得到了浏览器较好的支持

Web存储,localStorage 和 sessionStorage

通过描述文件缓存资源

服务器发送事件

WebSocket

地理定位

Web Worker

零散知识

文字循环滚动

1
<marquee behavior="scroll" direction="row">啦啦啦,真的会动耶!</marquee>