1.语义化标签

优点

  • 比
    标签有更丰富的含义，方便开发与维护
  • 搜索引擎更容易识别
  • 方便其他设置解析（如移动设备，盲人阅读器等）

新标签

1）header

通常被放置在页面或者页面中某个区块元素的顶部，包含整个页面或者区块的标题、简介等信息，起到引导与导航的作用。

2）nav

主要用于导航

3）article

标识页面中的主体内容。以博客为例，每篇帖子都是一个重要内容，可用article标识每一个帖子

4）section

标记页面上重要的部分。类似于将文档分为多个章节

5）aside

表示和页面主要内容相关，但不是页面的一部分，经常表示一个相关链接

6）footer

和header相对，表示文档或者章节的页脚

  1. <body>
  2.   <header></header>
  3.   <nav></nav>
  4.   <div>
  5.     <article>
  6.       <section></section>
  7.     </article>
  8.     <aside></aside>
  9.   </div>
  10.   <footer></footer>
  11. </body>

2.表单增强应用

Input元素的Type属性扩充

Type属性 说明
search 搜索框
tel 输入电话号码
url 输入URL地址
email 输入邮箱
date 输入日期
color 输入颜色
number 输入数字
range 模块输入

表单验证

通过input属性进行表单验证

  • required：标记当前元素为必填
  • pattern：采用正则表达式验证表单输入

其他属性

  • autofocus：页面加载时 自动聚焦到当前input元素
  • form：将input元素和特定的Form表单关联
  • placeholder：输入占位符，提示用户输入

音频和视频

音频
视频

离线和存储

通信

  • PostMessages
  • XMLHttpRequest Level 2
  • Server Sent Event
  • WebSocket
  • WebRTC

拖拽元素

web workers线程

Web Worker 使用教程