CSS浏览器前缀,HTML5新增标签

1.浏览器样式前缀

为了让CSS3样式兼容,需要加上
例如:-ms- 兼容IE浏览器
-moz 兼容Firefox
-webkit- 兼容chrome和safari
div{
-ms-transform:rotate(30deg);
...........
}

2.自动添加浏览器前缀

目前的状态是,有些CSS3属性需要加前缀,有些不需要加,有些只需加部分,可以用插件,安装autoprefixer

3.HTML5新增标签

(1)<header> 页面头部、页眉
(2)<nav>页面导航
(3)<article>一篇文章
(4)<section>文章中的章节
(5)<aside>侧边栏
(6)<footer>页面底部、页脚

(7)音频视频
<audio>
<video>

(8)PC端兼容h5的新标签的方法,在页面中引入以下js文件

(9)HTML5新增表单控件
新增类型:
网址 type="url" 邮箱Email 日期date 时间time 星期week 数量number 范围range 电话tel 颜色color 搜索search

<label>网址:</label><input type="url" name="" required>

新增常用表单控件属性:
placeholder 设置文本框默认提示文字
autofocus 自动获得焦点 //自动激活输入框
autocomplete 联想关键字 //输入框自动联想,一般不用

原文地址:http://blog.51cto.com/13742773/2337923

时间: 2024-10-14 05:27:28

CSS浏览器前缀,HTML5新增标签的相关文章

html5shiv:用于解决IE9以下版本浏览器对HTML5新增标签不识别,并导致CSS不起作用的问题

由于IE6/IE7/IE8还有很大一部分用户,为了让网站浏览者都能正常的访问HTML5网站,解决方案就有下面两个: 1. 为网站创建多套模板,通过程序对User-Agent的判断给不同的浏览器用户显示不同的页面,这样的维护成本比较高,也失去响应式设计的意义. 2. 使用Javascript来使不支持HTML5的浏览器支持HTML标签.目前大多网站采用的这种方式(Bootcss官方例子也是如此). 原理:利用脚本document.createElement("")创建对应的脚本,CSS选

如何让旧浏览器支持HTML5新标签

HTML5出现也不短了,很多网站的页面都进行了改版,为了降低代码量(不需要起太多的类名),提升加载速度,提高标签的语义性,因此,在网页中大量使用了section,article,header等HTML5标签.自己最近在写响应式布局的范例,里面也使用到了header等标签.还是比较希望能够做成兼容“旧版浏览器”的,在此和大家共享一下,如何让旧浏览器支持HTML5新增标签. 书写的基本的HTML代码: 1 <!doctype html> 2 <html> 3 <head>

让ie浏览器支持html5新标签的解决方法(使用html5shiv)

没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览器识别标签,需要新增标签,具体解决办法是: IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,代码如下: document.createElement('新标签'); / /新增创建新标签   方式一:Codi

html5新增标签progress

首先,请允许我在这里先表达一下对张鑫旭这位大牛的尊重之情,在学progress的时候,在他的网站上学到了很多我们会忽略的事情,也找到了自己的困惑的答案~~ 推荐给大家:http://www.zhangxinxu.com/wordpress/2013/02/html5-progress-element-style-control/comment-page-1/#comment-169478 参考网站:http://www.w3.org/TR/html5/forms.html#the-progres

html5新增标签与传统html的区别

一.文档声明以及编码声明的改变 html5之前的版本声明: 文档类型- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 文档编码- <meta http-equiv="Content-Type" content="text/ht

CSS3主要知识点复习总结+HTML5新增标签

1.显示属性,自身属性,文本属性 推荐样式编写顺序 1 显示属性 :display,list-style,position,float,clear [注意按照横着的顺序] 2 自身属性(合模型):width,height,margin,padding,border,background(第3点)     3 背景:background     4 行高:line-height     5 文本属性:color,font,text-decoration,text-align,vertical-al

HTML5新增标签总结和说明

HTML5出来这么久,都没有真正的理解和花时间去看,经常看到一些网页的里面包含很多陌生的标签元素,一直不清楚是什么功能.像<article>.<aside>. 其实这两个标签和<div>的功能一样仅仅是一个块级元素没有任何的样式和功能事件上的特点完全可以理解为div,.但是HTML5为什么要增加这些看似"毫无作用"标签呢.        我们知道经这么长时间的发展,HTML5的应用已经普及了.从使用的特点上来看,HTML5相对以前版本来看给人的感觉就

webpack配置css浏览器前缀

webpack打包时,css自动添加浏览器前缀.我们需要用到一个Loader:postcss-loader,和一个插件:autoprefixer 安装 npm i postcss-loader autoprefixer -D 方法一 1.在webpack.config.js文件中,找到module下的rules属性,在里面添加一个对象,完整代码如下: module:{ rules:[ { test:/\.scss$/, use:['style-loader','css-loader','sass

html5新增标签

一.语义化标签 1.没有特殊样式盒模型干净的标签 <header></header> 页眉 主要用于页面的头部的信息介绍,也可用于板块头部 <footer></footer>页脚  页面的底部 或者 版块底部 <hgroup></hgroup> 页面上的一个标题组合 一个标题和一个子标题,或者标语的组合 <hgroup> <h1>妙味课堂</h1> <h2>带您进入富有人情味的IT培训&