一：大多浏览器支持，低版本也没问题

我看点这方面的资料，是为了做手机应用网站（有三个方案，这个是备用方案），可以开发响应式网站，可以脱离开发平台进行跨平台。

在Html5网页中引入Modernizr，就能让IE支持HTML5新元素。

HTML5样板文件快速开发（html5boilerplate.com）

二：布局、标签省时省力

  1.     <header>
  2.         <!--语义相当于<div class="header">-->
  3.         <nav>导航</nav>
  4.     </header>

这样开发者就不用标记标签的结束位置了，定位时会很方便，也易于搜索引擎进行判断。

<header>定义页面或区段的头部；

<footer>定义页面或区段的尾部；

<nav>定义页面或区段的（主）导航区域；

<section>页面的逻辑区域或内容组合，比如一个用于“简介”，另一个用于“新闻列表”。

<article>定义正文或一篇完整的内容，能被直接粘贴到别的地方有独立意义，比如“博客正文”。

<aside>定义补充或相关内容，侧边栏，广告栏等。

<a>标签可以包含多个标签

  1. <a href="index.html"><h2>一</h2><img src="home.jpg"></a>

<vedio>、<audio>快速添加视频、音频

  1. <video src="myVideo.ogg" controls width="640" height="480">这里提示你没有使用支持HTML5的浏览器</video> //controls播放控制栏；支持ogg和mp4格式；响应式视频：普通情况可以使用max-width:100% height:auto，如果是外部<iframe>视频，则使用FitVids的jQuery插件

三：离线Web应用

通过.manifest文件指定哪些文件可以离线访问的

四：更灵活的CSS3

01.可以多栏显示文本

column-width:12em; //试了几个浏览器好像很多无效的~

02.众多选择器

body[id="2^"]{}  //id为"2"开头的标签

li:first-child 、 li:last-child  //针对列表的首尾项

  1.     li:nth-child(2n+1)//第“1”个li元素起，每“2”个颜色为红色
  2. {
  3.             color: red;
  4.         }
  5.      <ul>
  6.         <li>һһһһһ</li>
  7.         <li>22222222</li>
  8.         <li>33333333</li>
  9.     </ul>

p::first-line{color:red;} //第一行文字为红色

五：更丰富CSS3

传统CSS实现圆角、阴影等效果，一般要借助图片来实现，使用CSS3代替图片，可以有效减少http请求，取得更快的网页加载速度。不同浏览器对不同的CSS特性可能要使用不同的代码，可以使用预处理器SASS或LESS才处理。

01.CSS3轻松应用边框圆角

  1. <html>
  2. <head>
  3.     <style>
  4.         a
  5.         {
  6.             background-color:red;
  7.             border-top-left-radius:8px;/*圆角位置和大小*/
  8.             border-top-right-radius:8px;
  9.             padding:0.8em;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <br />
  15.     <a href="#">圆角</a>
  16. </body>
  17. </html>

02.可以使用@font-face嵌入网页字体，还可以使用可缩放的ICON（非图片格式，fico.lensco.be）

03.使用透明通道

  1.     <style>
  2.         body{
  3. 	background:url(01.jpg) no-repeat;
  4. 	}
  5. 	#wrapper{
  6. 	background-color:hsla(100,100%,100%,0.7);/*HSL是360度色相环*/
  7. 	width:500px;
  8. 	height:500px;
  9. 	}
  10.     </style>
  11. </head>
  12. <body>
  13.     <div id="wrapper">
  14. 	透明区域
  15.     </div>
  16. </body>

04文字阴影

  1. text-shadow:5px 5px 2px #333; //（正负）右、下、阴影程度、颜色

浮雕效果：

  1. <head>
  2.     <style>
  3. 	#wrapper{
  4.         height:500px;
  5.         background-color:ActiveBorder;
  6.         text-shadow:0px 1px 0px hsla(0,0%,100%,0.75);
  7.         font-size:30px;
  8. 	}
  9.     </style>
  10. </head>
  11. <body>
  12.     <div id="wrapper">
  13. 	浮雕效果
  14.     </div>
  15. </body>

同理可以使用盒阴影box-shadow给照片加阴影
05颜色渐变

  1. background:linear-gradient(90deg,red 0%,blue 50%,#ffffff 100%);

可以控制线性渐变方向渐变位置等，还有径向（球状）渐变
06文字2D变形

代码参数比较多，在网站 http://www.useragentman.com/matrix/ 进行制作吧

之外还有图片3D效果，貌似用得还不多。http://webdesignerwall.com/ 这里有很多很酷的关于这方面的内容，我还特别在里面找了一篇文章翻译出来了：http://blog.csdn.net/wowkk/article/details/12572447

最后说下表单的优势，HTML5可以在不借助jQuery的情况下，对用户的输入行为进行判断（某些浏览器对HTML5表单支持也不是很好，可以通过Webshims Lib来解决）。

  1. <head>
  2.     <style>
  3.         /*伪选择器*/
  4.         .input:required /*如果没有填入必填项，则边框变红色*/
  5.         {
  6.             border:1px solid #f00;
  7.         }
  8.         .input:focus:invalid /*如果填入的数据无效时*/
  9.         {
  10.         }
  11.         .input:focus:invalid /*如果填入的数据正确时*/
  12.         {
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <form method="post">
  18.         <div>
  19.             <label for="userName">请输入用户名</label>
  20.             <input id="userName" type="text" placeholder="例如:Admin" required aria-required="true" autofocus />
  21.             <!--placeholder表示提示输入
  22.                 required aria-required="true"表示为必填项；
  23.                 autofocus表示自动获取到光标焦点
  24.                 pattern属性可以填正则表达式，可以判定用户的输入行为
  25.                  -->
  26.             <input type="search" value="与text差不多，部分浏览器表现比较强悍" />
  27.             <!--此外还有type=number之类的-->
  28.             <input type="submit" value="确定" />
  29.         </div>
  30.     </form>
  31. </body>

12 为何使用Html5+CSS3的更多相关文章

  1. 12款非常精致的免费 HTML5 & CSS3 网站模板

    01. Joefrey Mahusay 很炫的单页网站模板,基于 HTML5 & CSS3 制作,适合用于设计师个人简历.摄影师和平面设计师的个人作品展示. 演示  下载 02. Folder ...

  2. 12个新潮的 HTML5 & CSS3 网站设计欣赏

    响应式设计和基于 HTML5 & CSS3 编码的网站是为网站制作的理想解决方案. HTML5 & CSS3 制作出来的网站结构良好,有很多惊人的效果,并能够在任何设备上浏览. 今天, ...

  3. 12款界面精美的 HTML5 & CSS3 网站模板

    这里分享的12款完全采用响应式设计的 HTML5 & CSS3 网站设计模板.每一个细节都精心设计,以创建一个美妙的用户体验.这些响应主题和模板最适合用于电子商务,商业门户网站,个人作品集以及 ...

  4. 12款高质量的响应式 HTML5/CSS3 网站模板

    HTML5 已经成为众所周知的语言,大量的 HTML5 资源和工具正在建立,以帮助开发人员和设计人员.今天,我们展示12款免费的响应式 HTML5/CSS3 网站模板,帮助你创建醒目和视觉震撼的网站. ...

  5. 03.Web大前端时代之：HTML5+CSS3入门系列~H5功能元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1.hgroup 对网页或区段(secti ...

  6. 05. Web大前端时代之：HTML5+CSS3入门系列~H5 多媒体系

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.引入 概述 音频文件或视频文件都可以看做是一个容器文 ...

  7. 06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...

  8. HTML5&CSS3练习笔记(二)

    HTML5&CSS3  练习CSS3伪选择器使用 1.first-line  格式:元素:first-line 说明:设置同一个标签下所有行内容的第一行的样式,例如: <table st ...

  9. 15款免费的 HTML5/CSS3 响应式网页模板

    如果你想快速制作出一个优秀的网站,网站模板一定是必不可少的.网页设计师和开发人员也可以从网站模板入手,学习先进的布局方式和编码风格.下面这个列表为大家挑选了15款免费的 HTML5/CSS3 响应式网 ...

随机推荐

  1. 【笨嘴拙舌WINDOWS】API

    如今,相对于大行其道的对象,服务,API概念的提出要早很多,却依然经久不衰:所谓万变不离其宗,如今很多服务(Web Services,云服务)的提供方式和API如出一辙. Windows API(Ap ...

  2. IIS没有ASP.NET选项卡

    问题: 1.IIS没有ASP.NET选项卡 2.默认文档不起作用 分析: 1,在安装了.net framework 2.0后,iis站点属性里才会有asp.net的选项. 2,安装asp.net2.0 ...

  3. fancybox 无效 失效 直接打开页面, ajax 之后 fancybox对更新的数据无效,Jquery失效 无效

    案例:做个聊天室项目,数据都是通过ajax刷新出来的,而对新数据绑定的fancybox均无效,点击直接打开到了新页面而不是弹窗,解决方法其实很简单   简单分析:ajax加载内容是在$(documen ...

  4. 封装Log工具类

    public class LogUtil { public static final int VERBOSE = 1; public static final int DEBUG = 2; publi ...

  5. Java Socket(2): 异常处理

    1 超时 套接字底层是基于TCP的,所以socket的超时和TCP超时是相同的.下面先讨论套接字读写缓冲区,接着讨论连接建立超时.读写超时以及JAVA套接字编程的嵌套异常捕获和一个超时例子程序的抓包示 ...

  6. Oracle 课程一之Oracle体系结构

    课程目标 •理解ORACLE数据库体系架构—内存结构和进程 •理解SQL在数据库中的运作流程 •理解UNDO&REDO原理 •理解commit原理   1.Oracle数据库概述 •数据库:物 ...

  7. Android 使用Instrumentation进行界面的单元测试

    如果我们要对一个Activity界面上的一个按钮的点击事件进行单元测试,则可使用ActivityInstrumentationTestCase2类来进行测试. 首先我们定义一个测试类: public ...

  8. [Everyday Mathematics]20150113

    设 $f\in C^2(0,+\infty)$ 适合 $$\bex \lim_{x\to 0^+}f'(x)=-\infty,\quad \lim_{x\to 0^+}f''(x)=+\infty. ...

  9. delete drop truncate

    一.相同点 1 truncate.不带where子句的delete.drop都会删除表内的数据2 drop.truncate都是DDL语句(数据定义语言),执行后会自动提交 二.不同点 1trunca ...

  10. 大数据性能调优之HBase的RowKey设计

    1 概述 HBase是一个分布式的.面向列的数据库,它和一般关系型数据库的最大区别是:HBase很适合于存储非结构化的数据,还有就是它基于列的而不是基于行的模式. 既然HBase是采用KeyValue ...