html5的新特性
添加了用于媒介回放的 ， 元素
添加了语义标签譬如 header、footer、nav 等等元素
添加了用于绘画的 canvas 元素和svg绘图
扩充了input的输入类型，如下
输入类型
描述
color
主要用于选取颜色
date
从一个日期选择器选择一个日期
datetime
选择一个日期(UTC 时间)
datetime-local
选择一个日期和时间 (无时区)
包含 e-mail 地址的输入域
month
选择一个月份
number
数值的输入域
range
一定范围内数字值的输入域
search
用于搜索域
tel
定义输入电话号码字段
time
选择一个时间
url
URL 地址的输入域
week
选择周和年
添加了地理位置定位功能Geolocation(地理定位)
window.navigator.geolocation {
getCurrentPosition: fn 用于获取当前的位置数据
watchPosition: fn 监视用户位置的改变
clearWatch: fn 清除定位监视
}
下面是获取用户定位信息示例
navigator.geolocation.getCurrentPosition(
function(pos){
console.log('用户定位数据获取成功')
//console.log(arguments);
console.log('定位时间：',pos.timestamp)
console.log('经度：',pos.coords.longitude)
console.log('纬度：',pos.coords.latitude)
console.log('海拔：',pos.coords.altitude)
console.log('速度：',pos.coords.speed)
}, //定位成功的回调
function(err){
console.log('用户定位数据获取失败')
//console.log(arguments);
} //定位失败的回调
)
添加了web存储功能，localStorage和sessionStorage
使用 HTML5，通过创建cache manifest文件，可以轻松地创建 web 应用的离线版本
manifest 文件可分为三个部分：
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面
web worker
web worker是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行(相当于实现多线程并发)。
服务端事件推送，所有主流浏览器均支持服务器发送事件，除了 Internet Explorer
EventSource 对象用于接收服务器发送事件通知：
var source=newEventSource("demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data +"
";
};
为了让上面的例子可以运行，您还需要能够发送数据更新的服务器(比如 PHP 和 ASP)。
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}nn";
flush();
?>
CSS3的新特性
媒体查询
从 CSS 版本 2 开始，就可以通过媒体类型在 CSS 中获得媒体支持。如果您曾经使用过打印样式表，那么您可能已经使用过媒体类型。清单 1 展示了一个示例。
清单 1. 使用媒体类型
清单 2. 媒体查询规则
@media all and(min-width:800px){...}
@media all 是媒体类型，也就是说，将此 CSS 应用于所有媒体类型。
(min-width:800px) 是包含媒体查询的表达式，如果浏览器的最小宽度为 800 像素，则会告诉浏览器只运用下列 CSS。
清单 3. and 条件
@media(min-width:800px)and(max-width:1200px)and(orientation:portrait){...}
清单 4. or 关键词
@media(min-width:800px)or(orientation:portrait){...}
清单 5. 使用 not
@media(not min-width:800px){...}
选择器
transform，transition，translate,scale,skelw，rotate等相关动画效果
属性
描述
CSS
简写属性，用于在一个属性中设置四个过渡属性。
3
规定应用过渡的 CSS 属性的名称。
3
定义过渡效果花费的时间。默认是 0。
3
规定过渡效果何时开始。默认是 0。
3
div
{
transition-property: width;
transition-duration:1s;
transition-timing-function: linear;
transition-delay:2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}
box-shadow,text-shadow等特效
添加了border-radius，border-image等属性
属性
说明
CSS
设置所有边框图像的速记属性。
3
一个用于设置所有四个边框- *-半径属性的速记属性
3
附加一个或多个下拉框的阴影
3
CSS3 @font-face 规则,可以引入任意的字体了
CSS3 @keyframes 规则，可以自己创建一些动画等
2D、3D转换
CSS3 创建多列(column-count规定文本可以以几列的方式布局)
CSS3 用户界面(resize，box-sizing，outline-offset)
HTML5、CSS3等新特性:
HTML5:1/绘画 canvas 元素;2/用于媒介回放的 video 和 audio 元素;3/本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;4/sessionSt ...
html5和CSS3中新特性
H5 1.语义化标签 header.footer.aside.nav.section.article 2.表单输入类型 email.url.number.range.Date Pickers.sear ...
css3的新特性选择器-------属性选择器
自己学css的时候比较乱,这次趁着复习把css3的新特性选择器和css2以前不怎么用的选择器做一个总结
I'm a ...
CSS3常用新特性
CSS3的新特性 新增CSS3特性有兼容性问题,ie9+才支持 移动端支持优于PC端 新增选择器和盒子模型以及其他特性 CSS新增选择器 属性选择器 属性选择器可以根据元素特定属性来选择元素,这样就可 ...
CSS3的新特性
CSS3中增加的新特性: (1)选择器的种类 (2)字体 font (3)text-overflow (4)文本渲染 text-decoration (5)多列布局 column-count (6)R ...
10个html5增加的重要新特性和内容
文章开篇之前我们先了解一下什么是html5,百度上是这样定义html5的:万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改. 其实说白了html5也就是人为定义 ...
HTML5的十大新特性
为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api拖放元素,定位,包括网页 应用程序缓存,存储,网络工作者 ...
HTML5 中的一些新特性
HTML5是HTML最新的修订版本,包含了新的标签元素,属性和行为,同时包含了一系列可以被用来让 Web 站点和应用更加多样化,功能更强大的技术.HTML5实现了不依赖flash插件播放视频,而且引入 ...
小K的H5之旅-HTML5与CSS3部分新属性浅见
一.HTML部分 1.HTML5新特点 向下兼容.用户至上.化繁为简.无插件范式.访问通用性.引入语义.引入原生媒体支持.引入可编程内容 2.HTML5标签语法 可以省略的元素:空元素语法的元素{br ...
随机推荐
git 创建版本库
服务器安装后git后 1.在repositories仓库文件夹中执行git init aa.git --bare 创建aa的中心库(注意建立aa版本库时当前登录用户必须为git的相关用户,并保证/d ...
Something wrong with EnCase index search in Unallocated area
hi, My EnCase version is v7 and I found a terrible issue about index search in Unallocated area. Wit ...
discuz二次开发技巧
discuz二次开发技巧 二次开发大多时候知识设置和处理,如果能够获知模板文件获得的变量数组将大大提高我们的开发效率 获取页面已经定义的变量
KEIL C51 中嵌入汇编以及C51与A51间的相互调用
如何在 KEIL C51(v6.21) 中调用汇编函数的一个示例 有关c51调用汇编的方法已经有很多帖子讲到,但是一般只讲要点,很少有对整个过程作详细描述,对于初学者是不够的,这里笔者通过一个简单例子 ...
IOS Main函数
int main(int argc, char * argv[]) { @autoreleasepool { return UIApplicationMain(argc, argv, nil, NSS ...
BZOJ 1756: Vijos1083 小白逛公园
题目 1756: Vijos1083 小白逛公园 Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 856 Solved: 264[Submit][Sta ...
用openssl库RSA加密解密
#include #include #include #include < ...
KMP算法 Next数组详解
题面 题目描述 如题,给出两个字符串s1和s2,其中s2为s1的子串,求出s2在s1中所有出现的位置. 为了减少骗分的情况,接下来还要输出子串的前缀数组next.如果你不知道这是什么意思也不要问,去百 ...
java的强制类型转换
java强制类型转换 详细连接https://www.cnblogs.com/kuangwong/p/6198862.html 在Java项目的实际开发和应用中,常常需要用到将对象转为String这 ...
Rainbond v5.1.2发布，微服务架构应用便捷管理和交付
Rainbond v5.1.2发布,微服务架构应用便捷管理和交付 Rainbond是开源的企业应用云操作系统,支撑企业应用的开发.架构.交付和运维的全流程,通过无侵入架构,无缝衔接各类企业应用,底层资 ...
847
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
