1、新的html5文件类型，仅需申明在html的第一行，即 <!DOCTYPE html>

2、图形元素 figure ，将<figure>与<figcaption>相结合，使图片标题与图片相搭配

 <figure>

    <img src="img/2.jpg">

     <figcaption>

         <p>尝试一下</p>

     </figcaption>

 </figure>

3、不需要为链接和脚本标签添加类型的属性

<script src=”script.js”></script>

4、h5中不需要用引号将属性包裹起来

<p class=one></p>

5、使得内容可编辑。"contenteditable"，它将允许用户编辑元素（包括他的子元素）内包含的任何文本内容。

6、增加电子邮件的输入类型

<input id=”email” name=”email” type=”email” />

注意：opera只有在指定了name属性的前提下，才可以使用

7、占位符 paceholder=' '

<input name=”email” type=”email” placeholder=”xingyuyu27@163.com” />

8、本地储存 local storage

9、语义性header和footer

在书写代码时可以使用<header>和<footer>标签

注意：使用IE浏览器时，为了确保新的HTML5元素能够以块级元素正确显示，有必要将它们用下面的代码定义风格：

header, footer, article, section, nav, menu, hgroup {

display: block;

}

就算如此，IE还是不知道这些元素究竟是什么，因而会无视这些格式，还需要用到下面的代码来解决这个问题：

document.createElement(“article”);

document.createElement(“footer”);

document.createElement(“header”);

document.createElement(“hgroup”);

document.createElement(“nav”);

document.createElement(“menu”);

11、群组标题（hgroup）

将标题之间的关系更好的表达出来，不影响文章整体纲要

    <hgroup>

        <h1>标题</h1>

         <h2>副标题</h2>

    </hgroup>

12、必要（require）属性

两种不同方式来声明这个属性：

<input type=”text” name=”someInput” required>

或者，更严谨：

<input type=”text” name=”someInput” required=”required”>

13、自动对焦（autofocus）属性

<input type=”text” name=”someInput” placeholder=”Douglas Quaid” required autofocus>

14、音频支持 <audio>

<audio autoplay=”autoplay” controls=”controls”>

<source src=”file.ogg” />

<source src=”file.mp3″ />

<a href=”file.mp3″>Download this file.</a>

</audio>

注意：Mozilla和Webkit都还没有完全支持。Firefox支持 .ogg文件，Webkit浏览器只支持最常见的.mp3扩展名。这意味着说，至少目前为止，你应该创建两个版本的音频。当Safari加载页面时，它认不出.ogg格式的文件，将会跳过并移到mp3版本上。请注意，IE并不支持它，Opera 10 或更低的版本只支持 .wav文件。

15、视频支持<video>

Safari和IE9可以支持H.264 格式的视频，Firefox 和Opera却仍然坚持Theora 和Vorbis格式。因此，显示HTML5视频的时候，你必须提供两种格式。

16、视频预加载

设置 preload=”preload”来预先加载视频，或者之间添加preload

17、正则表达式规定新模式的属性 pattern=”[A-Za-z]{4,10}”

18、检测浏览器的属性支持

两种方法：a、使用Modernizr（这是一个Javascript库）检测；

b、创建并剖析这些元素来看看浏览器都有什么能力。

例如，在前面的例子里，如果我们要确定浏览器是否能够执行pattern属性，就可以在页面上添加JavaScript:

alert( ’pattern’ in document.createElement(‘input’) ) // boolean;

19、Mark元素

<mark> 元素的主要功能就是在页面中高亮显示那些需要在视觉上向用户突出其重要性的文字。包裹在此标签里的字符串必须与用户当前的行为相关。例如，如果我在一些博客中搜索"Open your Mind" ，我可以使用在<mark>标签里使用JavaScript 来包裹每一次动作。

HTML5的新变化的更多相关文章

  1. 前端面试之HTML5的新变化

    前端面试之HTML5的新变化 H5新增语义化标签 头部标签 <header> :头部标签 <nav> :导航标签 <article> :内容标签 <secti ...

  2. HTML5中新添加事件

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  3. 学习HTML5之新特性标签一览（详细）

    HTML5又2008年诞生,HTML5大致可以等同于=html+css3+javascriptapi.... so --->支持css3强大的选择器和动画以及javascript的新的函数 先来 ...

  4. HTML5部分新标签属性及DOM扩展元素

    HTML5定义了一系列新元素,如新语义标签.智能表单.多媒体标签等. 我们日常讨论的H5其实是一个泛称,它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台. ...

  5. HTML语义化：HTML5的新标签及IE5.5~9的部分兼容方案

    一.前言 本文将介绍HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理. 目录一坨: 二.语义化标签:article.aside.t ...

  6. HTML5的新特性

    HTML5 中的一些有趣的新特性: 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素,比如 article.footer. ...

  7. ［转］Material Design Library 23.1.0的新变化与代码实战

    Design Library出来已经快有一个月了,当时大概看了一下介绍这个新版本变化的译文,内容不多,给我印象最深的就是Percent lib.AppBarLayout 和NavigationView ...

  8. 开发者必须知道的HTML5十五大新特性

    HTML5想必大家都很熟悉了,因为太多的媒体在讨论这一技术.然而,你能准确地说出HTML5带来了哪些新特性吗?本文总结了HTML5带来的15项你必须知道的新特性. 一起来看下: 1.新的文档类型  ( ...

  9. HTML5十五大新特性

    HTML5想必大家都很熟悉了.然而,你能准确地说出HTML5带来了哪些新特性吗?本文总结了HTML5带来的15项你必须知道的新特性. 一起来看下: 1.新的文档类型  (New Doctype) 目前 ...

随机推荐

  1. LC 535. Encode and Decode TinyURL

    Note: This is a companion problem to the System Design problem: Design TinyURL. TinyURL is a URL sho ...

  2. 发布机制-A/B 测试：百科

    ylbtech-发布机制-A/B 测试:百科 AB测试是为Web或App界面或流程制作两个(A/B)或多个(A/B/n)版本,在同一时间维度,分别让组成成分相同(相似)的访客群组(目标人群)随机的访问 ...

  3. 【React自制全家桶】六、React性能优化（持续更新总结）

    一.通过虚拟DOM来提升性能(自动) 底层讲解见[React自制全家桶]二.分析React的虚拟DOM和Diff算法   二.将多次setState合并为一次执行(自动) 底层讲解见[React自制全 ...

  4. Ironic 裸金属管理服务的底层技术支撑

    目录 文章目录 目录 底层技术支撑 DHCP NBP TFTP IPMI PXE & iPXE Cloud Init Linux 操作系统启动引导过程 底层技术支撑 PXE:预启动执行环境,支 ...

  5. [NodeJS] 优缺点及适用场景

    概述: NodeJS宣称其目标是“旨在提供一种简单的构建可伸缩网络程序的方法”,那么它的出现是为了解决什么问题呢,它有什么优缺点以及它适用于什么场景呢? 本文就个人使用经验对这些问题进行探讨. 一. ...

  6. vue-router懒加载

    require.ensure(dependencies:String [],callback:function(require),errorCallback:function(error),chunk ...

  7. 使用第三方UITableView+FDTemplateLayoutCell计算cell行高注意点

    现在很方便的计算单元格的行高大部分都是使用的第三方框架UITableView+FDTemplateLayoutCell,不知道你在使用这个框架的时候有没有遇到和我一样的问题,比如: 在这样计算cell ...

  8. 【JVM学习笔记】类加载器

    概述 类加载器用来把类加载到Java虚拟机中.从JDK1.2版本开始,类的加载过程采用父委托机制,这种机制能更好地保证Java平台的安全.在此委托机制中,除了Java虚拟机自带的根类加载器以外,其余的 ...

  9. SQL常见面试题（借书卡表_图书表_借书记录表）

    问题描述: 本题用到下面三个关系表: CARD 借书卡:          CNO 卡号,NAME 姓名,CLASS 班级 BOOKS 图书:           BNO 书号,BNAME 书名,AU ...

  10. Nginx实现负载均衡的方式有哪几种呢？

    什么是负载均衡 当一台服务器的单位时间内的访问量越大时,服务器压力就越大,大到超过自身承受能力时,服务器就会崩溃.为了避免服务器崩溃,让用户有更好的体验,我们通过负载均衡的方式来分担服务器压力. 我们 ...