HTML5的常用新特性你必须知道

1 新的<!DOCTYPE> 声明

HTML 有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。

1.1 常用的声明

HTML5

<!DOCTYPE html>

HTML 4.01 混杂模式（该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 严格模式（该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

2 Figure元素

figure 标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

<figure>

  <p>黄浦江上的的卢浦大桥</p>

  <p>拍摄者：W3School 项目组，拍摄时间：2010 年 10 月</p>

  <img src="/i/shanghai_lupu_bridge.jpg" width="350" height="234" />

</figure>

3 重新定义的small

small 标签呈现小号字体效果。

small 标签和它所对应的 big 标签一样，但它是缩小字体而不是放大。如果被包围的字体已经是字体模型所支持的最小字号，那么 small 标签将不起任何作用。

与 big 标签类似，small 标签也可以嵌套，从而连续地把文字缩小。每个 small 标签都把文本的字体变小一号，直到达到下限的一号字。

4 Local Storage

使用Local Storage可以永久存储大的数据片段在客户端（除非主动删除），目前大部分浏览器已经支持，在使用之前可以检测一下window.localStorage是否存在

5 html5表单新特性

5.1 autofocus 属性

autofocus 属性规定在页面加载时，域自动地获得焦点。

注释：autofocus 属性适用于所有 input 标签的类型。

User name: <input type="text" name="user_name"  autofocus="autofocus" />

5.2 form 属性

form 属性规定输入域所属的一个或多个表单。

注释：form 属性适用于所有 input 标签的类型。

form 属性必须引用所属表单的 id：

<form action="demo_form.asp" method="get" id="user_form">

First name:<input type="text" name="fname" />

<input type="submit" />

</form>

Last name: <input type="text" name="lname" form="user_form" />

5.3 height 和 width 属性

height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。

注释：height 和 width 属性只适用于 image 类型的 input 标签。

<input type="image" src="img_submit.gif" width="99" height="99" />

5.4 placeholder 属性

placeholder 属性提供一种提示（hint），描述输入域所期待的值。

注释：placeholder 属性适用于以下类型的 input 标签：text, search, url, telephone, email 以及 password。

提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失：

<input type="search" name="user_search"  placeholder="Search W3School" />

6 Audio支持

HTML5提供了audio 标签，你不需要再按照第三方插件来渲染音频，大多数现代浏览器提供了对于HTML5 Audio的支持，不过目前仍旧需要提供一些兼容处理，如

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

<source src=”file.ogg” /><!–FF–>

<source src=”file.mp3″ /><!–Webkit–>

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

</audio>

7 Mark元素

把 mark 元素看做是高亮的作用，当我选择一段文字的时候，javascript对于HTML的markup效果应该是这样的：

<h3> Search Results </h3>

<p> They were interrupted, just after Quato said, <mark>”Open your Mind”</mark>. </p>

HTML5的常用新特性你必须知道的更多相关文章

  1. ES6常用新特性

    https://segmentfault.com/a/1190000011976770?share_user=1030000010776722 该文章为转载文章!仅个人喜好收藏文章! 1.前言 前几天 ...

  2. es6/es7/es8常用新特性总结(超实用)

    本文标题有误导性,因为我其实想写node8的新特性,说实话一下子从node v1.x跳跃到node 8.x+ 真有点受宠若惊的感觉.一直觉得node 数组. 对象.序列等的处理没有python方便,因 ...

  3. Java8常用新特性实践

    前言: 时下Oracle开速迭代的Java社区以即将推出Java10,但尴尬的是不少小中企业仍使用JDK7甚至JDK6开发. 从上面列出的JDK8特性中我们可以发现Java8的部分特性很明显的是从Sc ...

  4. ES6、7、8常用新特性总结(超实用)

    ES6常用新特性 1. let && const let 命令也用于变量声明,但是作用域为局部 { let a = 10; var b = 1; } 在函数外部可以获取到b,获取不到a ...

  5. 常用的HTML5、CSS3新特性能力检测写法

    伴随着今年10月底HTML5标准版的发布,未来使用H5的场景会越来越多,这是令web开发者欢欣鼓舞的事情.然而有一个现实我们不得不看清,那就是IE系列浏览器还占有一大部分市场份额,以IE8.9为主,w ...

  6. HTML5和CSS3新特性一览

    HTML5 1.HTML5 新元素 HTML5提供了新的元素来创建更好的页面结构: 标签 描述 <article> 定义页面独立的内容区域. <aside> 定义页面的侧边栏内 ...

  7. HTML的表格标签，列表标签，表单标签，HTML5有哪些新特性

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...

  8. HTML5和CSS3新特性

    1.HTML5新标签和属性 1.1 兼容性前缀与语义化 兼容低版本的写法.比较新的浏览器,可以直接写.兼容性前缀,是每个浏览器私有的. 内核 兼容性前缀 浏览器 Gecko -moz- Firefox ...

  9. HTML5 中的新特性：

    一,用于绘画的 canvas 元素,<canvas>标签替代Flash Flash给很多Web开发者带来了麻烦,要在网页上播放Flash需要一堆代码和插件.<canvas>标签 ...

随机推荐

  1. ASP.NET部分代码示例

    using System; using System.Collections.Generic; using Model; using System.Data; using System.Data.Sq ...

  2. 读取pdf内容分页和全部

    //读取pdf 全部内容public static String topdffile(String pdffile){ StringBuffer result = new StringBuffer() ...

  3. react开发

    webpack.config.js var webpack=require("webpack"); var htmlWebpackPlugin=require('html-webp ...

  4. Spring中Bean的生命周期讨论

    1.代码和配置文件准备 1.1.测试类(user.java) public class User { private int id; private String name; private int ...

  5. 【Linux】 环境变量与shell配置&执行

    ■ 变量与环境变量 shell环境通常存在很多变量,变量可以通过echo $VAR或${VAR}的方式查看.set命令可以查看当前环境中的所有变量(包括一般的自定义变量和环境变量) 变量的设置通过简单 ...

  6. react 实用的性能优化方式

    react 组件渲染分为初始化渲染和更新渲染,当我们更新某个组件的时候,只是想关键路径上组件的render,但react的默认做法是调用所以组件的reder,再生成虚拟dom进行对比,如不变则不进行更 ...

  7. oracle 常用select sql语句

    本人认为很实用的几条语句 1)select ... from ...into... 2)insert into ...select ... 3)select ...from ...left join ...

  8. Android 源代码结构

    简介 在使用Andriod SDK进行应用程序开发的时候,我们需要对源代码进行调试,有可能需要进入到某个Android API函数内部进行跟踪调试.但是,如果目标版本的SDK没有关联对应版本的源代码的 ...

  9. Android中文API (110) —— CursorTreeAdapter

    前言 本章内容是android.widget.CursorTreeAdapter,版本为Android 3.0 r1,翻译来自"深夜未眠",欢迎访问它的博客:"http: ...

  10. 微信app支付详细教程

    微信支付作为三大支付之一,越来越多的客户要求产品中添加微信支付   但是网上能找到可用的demo很少 所以写一篇自己写微信支付的过程,希望能给有需要的开发者一点帮助. 下面让我们来进入正题 1准备工作 ...