HTML5的常用新特性你必须知道
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的常用新特性你必须知道的更多相关文章
- ES6常用新特性
https://segmentfault.com/a/1190000011976770?share_user=1030000010776722 该文章为转载文章!仅个人喜好收藏文章! 1.前言 前几天 ...
- es6/es7/es8常用新特性总结(超实用)
本文标题有误导性,因为我其实想写node8的新特性,说实话一下子从node v1.x跳跃到node 8.x+ 真有点受宠若惊的感觉.一直觉得node 数组. 对象.序列等的处理没有python方便,因 ...
- Java8常用新特性实践
前言: 时下Oracle开速迭代的Java社区以即将推出Java10,但尴尬的是不少小中企业仍使用JDK7甚至JDK6开发. 从上面列出的JDK8特性中我们可以发现Java8的部分特性很明显的是从Sc ...
- ES6、7、8常用新特性总结(超实用)
ES6常用新特性 1. let && const let 命令也用于变量声明,但是作用域为局部 { let a = 10; var b = 1; } 在函数外部可以获取到b,获取不到a ...
- 常用的HTML5、CSS3新特性能力检测写法
伴随着今年10月底HTML5标准版的发布,未来使用H5的场景会越来越多,这是令web开发者欢欣鼓舞的事情.然而有一个现实我们不得不看清,那就是IE系列浏览器还占有一大部分市场份额,以IE8.9为主,w ...
- HTML5和CSS3新特性一览
HTML5 1.HTML5 新元素 HTML5提供了新的元素来创建更好的页面结构: 标签 描述 <article> 定义页面独立的内容区域. <aside> 定义页面的侧边栏内 ...
- HTML的表格标签，列表标签，表单标签，HTML5有哪些新特性
欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...
- HTML5和CSS3新特性
1.HTML5新标签和属性 1.1 兼容性前缀与语义化 兼容低版本的写法.比较新的浏览器,可以直接写.兼容性前缀,是每个浏览器私有的. 内核 兼容性前缀 浏览器 Gecko -moz- Firefox ...
- HTML5 中的新特性：
一,用于绘画的 canvas 元素,<canvas>标签替代Flash Flash给很多Web开发者带来了麻烦,要在网页上播放Flash需要一堆代码和插件.<canvas>标签 ...
随机推荐
- 【Unity3D与23种设计模式】桥接模式（Bridge）
GoF定义: "将抽象与实现分离,使二者可以独立的变化" 游戏中,经常有这么一种情况 基类角色类(ICharacter),下面有子类士兵类(ISoldier).敌军类(IEnemy ...
- shell中的ps3为何物以及select循环
shell中的ps3为何物: author :headsen chen 2017-10-18 13:59:57 PS3作为select语句的shell界面提示符,提示符为PS3的值(赋 ...
- 修改UI及盒子启动及部分后续操作
服务器操作: 1.配置nfs: # vim /etc/exports /home/nfsroot *(insecure,rw,no_root_squash) mkdir -pv /home/nfsro ...
- docker进阶-利用dcoker Swarm搭建简单集群
什么是Swarm 在介绍Swarm之前我们要说一下什么Docker三剑客? Docker-Machine:负责在多种平台上快速安装 Docker 环境. Docker-Compose:Docker ...
- 斑马ZPL指令加入如换行、回车等控制符的方法
在程序中可能会被过滤掉,直接在指令中加入ASCII对应的16进制字符即可解决改问题, 语法:_十六进制(ASCII) 栗子:hello_0D_0Aworld 换行 扫描结果: hello world
- xml解析多个结点方法（C#）
解析多个结点的XML文件,格式如下: <?xml version="1.0" encoding="utf-8"?> <response> ...
- hibernate学习之持久化对象
Hibernate对其持久化对象实现了缓存管理,来提高系统性能,Hibernate支持两级缓存管理,一级缓存 是由Session提供的,因此它只存在于Session的生命周期中,是Session所内置 ...
- [学习笔记]Javaweb开发视频教程之Tomcat9配置
参考自北京动力节点的视频教程:https://www.bilibili.com/video/av14548279/?p=1 1.Java XE Java SE 是做电脑上运行的软件. Java EE ...
- 利用CSS3制作网页动画
如何在网页中实现动画效果动态图片 flashjavascriptcss3变形是一些效果的集合如平移 旋转 缩放 倾斜效果每个效果都可以称为变形(transfrom) 它们可以分别操控元素发生平移.旋转 ...
- 【Java实现】栈和队列就是这么简单
一.前言 上一篇已经讲过了链表[Java实现单向链表]了,它跟数组都是线性结构的基础,本文主要讲解线性结构的应用:栈和队列 如果写错的地方希望大家能够多多体谅并指正哦,如果有更好的理解的方式也希望能够 ...