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. 1111 WordReplace

    #include<iostream> #include<string> using namespace std; int main() { string sa,sb,s; wh ...

  2. Numpy库（个人学习笔记）

    一样,咱的计算机还是得先拥有Python,并且安装了Numpy库.有疑问的话可以看这里呦~~~~ 下面开讲: NumPy的主要对象是齐次多维数组.它是一个元素表(通常是数字),并且都是相同类型,由正整 ...

  3. php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别

    if(isset($_POST['submit'])) 它的意思是不是判断是否配置了$_POST['submit'] 这个变量呢?如果有这个变量 在执行其它代码 应该这样用if(isset($_POS ...

  4. linux修改时区

    Linux修改时区 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任 CentOS6: 查看以前的时区: [root@localhost mysq ...

  5. js中， 用变量或对象作为if或其他条件的表达式

    源: 因为js是弱语言, 就体现在js的变量是弱类型的, 在js中所有变量类型声明都用var, 而在其他强类型语言中,如java/c,必须有强制类型转换和类型检查才能编译通过等, 但是: 弱语言也有优 ...

  6. SVN报E155024: Invalid relocation destination

    大家开发过程会遇到一个场景! 我们在使用SVN版本管理工具进行开发的过程中,前一个版本在Branch->201803 分支开发完成之后,后一版本要求在Branch->201804版本开发 ...

  7. Android Studio设置字体和主题

    步骤:File >> settings >> Appearance & Behavior >> Appearance           >> ...

  8. 利用 mount 指令解决 Read-only file system的问题

    利用 mount 指令解决 Read-only file system的问题 在linux系统中创建一个文件提示: /application/report/shiwei # touch test.ct ...

  9. java基础笔记（8）----接口

    接口 是特殊的抽象类,纯抽象类---所有方法都是抽象方法 接口和抽象类的区别: 相同点: 编译后,会分别生成对应的.class文件 都不能创建对象(实例化),但是可以生成引用(使用多态) 不同点: 抽 ...

  10. c语言程序设计第4周编程练习（素数和）

    1 素数和(5分) 题目内容: 我们认为2是第一个素数,3是第二个素数,5是第三个素数,依次类推. 现在,给定两个整数n和m,0<n<=m<=200,你的程序要计算第n个素数到第m个 ...