HTML5 中的一些新特性
HTML5是HTML最新的修订版本,包含了新的标签元素,属性和行为,同时包含了一系列可以被用来让 Web 站点和应用更加多样化,功能更强大的技术。HTML5实现了不依赖flash插件播放视频,而且引入了一大批需要JavaScript驱动的功能。也可以让网页可以像桌面软件那样丰富多彩,富有交互能力。HTML5的终极目标,就是浏览器不依赖插件也能提供丰富的视频,交互功能和各种漂亮的效果。
下面来具体看看HTML5有那些新的东西。
1.定义了新的语义标签元素
<article>:规定独立的自包含内容。
<aside>:<aside> 标签定义其所处内容之外的内容。<aside> 的内容可用作文章的侧栏。
<figcaption>:定义 figure元素的标题(caption)。
<figure>:规定独立的流内容(图像、图表、照片、代码等等)
<footer>:义文档或节的页脚。
<header>:定义文档的页眉(介绍信息)
<nav>:定义导航链接
<section>:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
<mark>
<time>
<progress>
<meter>
2.通过使用video标签来添加视频,使用audio加载音频
实例:
<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>
属性值:
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。
src url 要播放的视频的 URL。
width 设置视频播放器的宽度。
3.HTML5表单
(1).<input>
的 type 特性拥有更多的值.
color 用于选取颜色
date 从一个日期选择器选择一个日期
datetime
datetime-local
email e-mail 地址的输入域,在提交表单时,会自动验证 email 域的值是否合法有效
month
number 数值的输入域,能够设定对所接受的数字的限定
range 显示为滑动条,一定范围内数字值的输入域
search 一个搜索框
tel 电话号码的输入控件
time 选择一个时间
url URL 地址的输入域,在提交表单时,会自动验证 url 域的值
week
(2).新的表单元素
<datalist> 规定输入域的选项列表,使用 <input> 元素的列表属性与 <datalist> 元素绑定.
<keygen> 用于表单的密钥对生成器字段。当提交表单时,会生成两个键,一个是私钥,一个公钥。私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。
<output> 用于不同类型的输出
(3).新的表单属性
autocomplete 自动完成
novalidate 设置了该特性不会在表单提交之前对其进行验证
novalidate 设置了该特性不会在表单提交之前对其进行验证
min and max 限定了能够输入元素的最大与最小值
maxlength 限制了用户能够输入的最大字符数
multiple 属性规定<input> 元素中可选择多个值
pattern (regexp) 用于限定元素值必须匹配一个特定的正则表达式
placeholder 作用于 <input> 与 <textarea> 元素上,提示用户此域内能够输入什么内容。
required 指定必须提供该元素的值,不能为空
step 规定输入数字间隔
4.支持拖放功能,canvas(画布,强大的功能)
5.支持地理定位
6.支持数据存储
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
7.支持离线功能
8.与服务器通信
一种是服务器发送事件(server-sent event),允许网页获得来自服务器的更新。
另一种是web socket框架,让网页和服务器双向通信
9.支持后台运行JavaScript
使用Web Worker
,可以支持后台运行JavaScript
HTML5 中的一些新特性的更多相关文章
- HTML5中的DOM新特性
元素下的classList属性 classList属性下面有四个方法: add(value): 添加,已存在的属性不添加 remove(value):删除属性 contain(value):检测属性是 ...
- Jdk5.0中出现的新特性
掌握jdk5.0中出现的新特性1.泛型(Generics)2.增强的"for"循环(Enhanced For loop)3.自动装箱/自动拆箱(Autoboxing/unboxin ...
- MVC中的其他新特性
MVC中的其他新特性 (GlobalImport全局导入功能) 默认新建立的MVC程序中,在Views目录下,新增加了一个_GlobalImport.cshtml文件和_ViewStart.cshtm ...
- C#6.0 中的那些新特性
C#6.0 中的那些新特性 前言 VS2015在自己机器上确实是装好了,费了老劲了,想来体验一下跨平台的快感,结果被微软狠狠的来了一棒子了,装好了还是没什么用,应该还需要装Xarmain插件,配置一些 ...
- iOS中的项目新特性页面的处理
一般项目中都会出现新特性页面,比如第一次使用应用的时候,或者在应用设置里查看新特性的时候会出现. 这里,选择新建一个专门处理项目新特性的控制器,来完成功能. 首先是 NewFeaturesViewCo ...
- Xcode中StoryBoard Reference 新特性的使用
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- 浅析Oracle 12c中Data Guard新特性
浅析Oracle 12c中Data Guard新特性 写在前面 无论是做Oracle运维的小伙伴还是老伙伴,想必对Oracle数据库的数据级灾备核心技术—Data Guard是再熟悉不过了!这项从 ...
- ES6系列之项目中常用的新特性
ES6系列之项目中常用的新特性 ES6常用特性 平时项目开发中灵活运用ES6+语法可以让开发者减少很多开发时间,提高工作效率.ES6版本提供了很多新的特性,接下来我列举项目中常用的ES6+的特性: l ...
- HTML5和CSS3中的交互新特性
当文章的标题是一副用photoshop制作的图片,那么势必在搜索引擎中无法搜索到.并且因为图片的体积不算小.可能在网速慢的的时候不得不耐心的等待图片的刷新. 所以.我们来谈谈有没有一种新的方法能够避免 ...
随机推荐
- css中文本框与按钮对不齐解决方案
我们先对对input标记设定样式,代码如下: html 代码 <form> <input type=”text” name=”text1” id=”text1” /> < ...
- linux dump 命令详解
功能说明:备份文件系统. 语 法:dump [-cnu][-0123456789][-b <区块大小>][-B <区块数目>][-d <密度>][-f <设备 ...
- 基于协同过滤的个性化Web推荐
下面这是论文笔记,其实主要是摘抄,这片博士论文很有逻辑性,层层深入,所以笔者保留的比较多. 看到第二章,我发现其实这片文章对我来说更多是科普,科普吧…… 一.论文来源 Personalized Web ...
- LibLinear(SVM包)使用说明之(二)MATLAB接口
LibLinear(SVM包)使用说明之(二)MATLAB接口 LibLinear(SVM包)使用说明之(二)MATLAB接口 zouxy09@qq.com http://blog.csdn.net/ ...
- codeforces 390C Inna and Candy Boxes
这个题目看似不是很好下手,不过很容易发现每次询问的时候总是会问到第r个盒子是否有糖果: 这样的话就很好办事了: 维护两个数组: 一个sum数组:累加和: 一个in数组:如果i位是1的话,in[i]=i ...
- Android编程中常用的PopupWindow和Dialog对话框
注意:PopupWindow组件的使用问题,PopupWindow是一个阻塞对话框,如果你直接在Activity创建的方法中显示它,则会报错:android.view.WindowManager$Ba ...
- apt-get用法
转自apt-get语法- - 对于debian来说,安装软件大多都是通过apt-get来实现的. 1.apt-get update 更新软件包信息库.在Debian中,软件包是通过一个数据库来管理的, ...
- HDU2167+状态压缩DP
状态压缩dp 详见代码 /* 状态压缩dp dp[ i ][ j ]:第i行j状态的最大和 dp[i][j] = max( dp[i-1][k]+sum[i][j] ); 题意:给定一个N*N的方格, ...
- php nl2br() 函数
nl2br() 函数在字符串中的每个新行 (\n) 之前插入 HTML 换行符 (<br />).
- 海量数据的二度人脉挖掘算法(Hadoop 实现)
最近做了一个项目,要求找出二度人脉的一些关系,就好似新浪微博的“你可能感兴趣的人” 中,间接关注推荐:简单描述:即你关注的人中有N个人同时都关注了 XXX . 在程序的实现上,其实我们要找的是:若 U ...