HTML5和CSS3的新特性(浓缩好记版)

综述：这个问题在面试的时候经常被问到，有必要做一个总结，理解的深刻充分一些

1.html5的新特性？(记住有九大模块内容)

添加了video，radio标签
添加了canvas画布和svg,渲染矢量图片
添加了一些列语义化标签header,footer,main,section,aside,nav等
input的type值新添加了很多属性（email，url，number，range，Date pickers (date, month, week, time, datetime, datetime-local)，search，color）
添加了地理位置定位功能 Geolocation API
添加了web存储功能，localStorage和sessionStorage
使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
服务端事件推送（EventSource 对象用于接收服务器发送事件通知），所有主流浏览器均支持服务器发送事件，除了 Internet Explorer

if(typeof(EventSource)!=="undefined"){var source=new EventSource("/example/html5/demo_sse.php");source.onmessage=function(event){console.log(event.data);};}else{console.log("抱歉，您的浏览器不支持 server-sent 事件 ...");}

2.CSS3中新添加的特性？（css3也有九大属性，要多去实践应用）

媒体查询（可以查询设备的物理像素然后进行自适应操作）
transform，transition，translate,scale,skelw，rotate等相关动画效果
box-shadow,text-shadow等特效
CSS3 @font-face 规则,设计师可以引入任意的字体了
CSS3 @keyframes 规则，可以自己创建一些动画等
2D、3D转换
添加了border-radius，border-image等属性
CSS3 创建多列（column-count规定文本可以以几列的方式布局）
CSS3 用户界面（resize，box-sizing，outline-offset）

div{resize:both; /*规定元素的尺寸可以由用户进行手动的调整*/overflow:auto;
}

div{box-sizing:border-box;-moz-box-sizing:border-box;         /* Firefox */-webkit-box-sizing:border-box;    /* Safari */width:50%;float:left;
}

div{margin:20px;width:150px; padding:10px;height:70px;border:2px solid black;outline:2px solid red;  /*在元素的外围添加一层轮廓，轮廓是不占位置的*/outline-offset:12px;    /*轮廓距离border的距离*/
}

HTML5和CSS3的新特性(浓缩好记版)相关推荐

HTML5与CSS3的新特性。
HTML5与CSS3的新特性 1.HTML5新特性 1.1.新特性的兼容问题 HTML5的新增特性主要是针对以前的不足,增加了一些新的标签.新的表单和新的表单属性等. 这些新特性都有兼容性问题,基本是 ...
跟着pink老师学前端之HTML5和CSS3的新特性
文章目录 1. HTML5新特性 1.1 HTML5新增的语义化标签 1.2 HTML5新增的多媒体标签 1. 视频< video> 2. 音频< audio> 1.3 HTM ...
HTML5 和 CSS3 的新特性--HTML5 的新特性
HTML5 的新增特性主要是针对于以前的不足,增加了一些新的标签.新的表单和新的表单属性等. 这些新特性都有兼容性问题,基本是 IE9+ 以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这 ...
html5和css3的新特性
html5: 用于绘画的 canvas 元素用于媒介回放的 video 和 audio 元素对本地离线存储的更好的支持新的特殊内容元素,比如 article.footer.header.nav. ...
【HTML/CSS】HTML5和CSS3的新特性
目录 1 HTML5 1.1 语义化标签 1.2 画布canvas 1.3 新增API 1.3.1 拖拽 1.3.2 地理定位 1.4 音视频Audio/Video 1.5 Web存储 1.6 Web ...
关于html5和css3的新特性
html5增加了标签: <header>头部 <aside>侧边栏 <section>一个区块 <footer>尾部 css3增加的内容: border ...
HTML5 和 CSS3 的新特性--品优购首页制作
网站的首页一般都是使用 index 命名,比如 index.html 或者 index.php . 我们开始制作首页的头部和底部的时候,根据模块化开发,样式要写到common.css里面. 以下是我们 ...
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解大家好,又见面了,感觉我上一篇博客对部分同学都挺有帮助的,于是我决定继续写下去,会继续的解析知识点让大家更容易理解,希望能给大家 ...
css之“css3的新特性”
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

HTML5和CSS3的新特性(浓缩好记版)

HTML5和CSS3的新特性(浓缩好记版)相关推荐

最新文章

热门文章