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

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

在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. color: red;
  3. }
  4. <ul>
  5. <li>һһһһһ</li>
  6. <li>22222222</li>
  7. <li>33333333</li>
  8. </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>

补充：

使用HTML5 Boilerplate来写HTML5网站，它带有组织好的文件夹结构和CSS文件，加入当前编码的最佳实践、浏览器的bug修复以及js库。

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

  1. Web大前端时代之：HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  2. 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  3. 01.Web大前端时代之：HTML5+CSS3入门系列~初识HTML5

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 文档申明 <!--文档类型申明,html代表是ht ...

  4. 02.Web大前端时代之：HTML5+CSS3入门系列~H5结构元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写&l ...

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

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

  6. 04. Web大前端时代之：HTML5+CSS3入门系列~HTML5 表单

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 一.input新增类型: 1.tel:输入类型用于应该包 ...

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

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

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

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

  9. 08. Web大前端时代之：HTML5+CSS3入门系列~H5 Web存储

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html  

  10. 【HTML5&CSS3进阶04】CSS3动画应该如何在webapp中运用

    动画在webapp的现状 webapp模式的网站追求的就是一个体验,是HTML5&CSS3浪潮下的产物,抛开体验不说,webapp模式门槛比较高: 而体验优化的一个重点便是动画,可以说动画是w ...

随机推荐

  1. iOS设计模式之工厂模式

    一,什么是工厂模式 模式定义: “专门定义一个类来负责创建其他类的实例,被创建的实例通常具有共同的父类.” 世界上就是由一个工厂类,根据传入的参数,动态地决定创建出哪一个产品类的实例. 需求场景: 简 ...

  2. Linux0.11内核源码——内核态线程(进程)切换的实现

    以fork()函数为例,分析内核态进程切换的实现 首先在用户态的某个进程中执行了fork()函数 fork引发中断,切入内核,内核栈绑定用户栈 首先分析五段论中的第一段: 中断入口:先把相关寄存器压栈 ...

  3. 【Vue】axios post提交请求转为form data

    axios.js import axios from 'axios'; import qs from 'qs'; // axios 配置 axios.defaults.timeout = 8000; ...

  4. git merge 上线操作流程

    switch to branch git merge 主干到分支解决冲突,解决冲突文件,冲突文件,add to index 检查文件无<<<<<<< .=== ...

  5. GIT安装包备用地址

    如果官网下载被禁止,可在下面这个地址下载,速度飞快 http://www.wmzhe.com/soft-38801.html#download

  6. springboot 尚桂谷学习总结02

    ------向导快速创建Springboot 项目------ 1.使用spring initializer 快速创建一个springboot 项目 选择后 最后点击finsh 向导会联网创建 spr ...

  7. taintCheck的实现

    参考:http://bitblaze.cs.berkeley.edu/papers/taintcheck-full.pdf 1. 应用taint analysis需要解决三个问题 a. 哪些input ...

  8. MySQL数据库时区问题导致java程序无法连接数据库

    转载自https://blog.csdn.net/man_zuo/article/details/81027934 先把报错信息贴上, The server time zone value '???ú ...

  9. Ubuntu安装程序提示无法获得锁

    目录 1.问题描述 2.问题原因 3.解决方案 3.1方法一:杀掉apt-get进程 3.2方法二:强制解锁 1.问题描述 E: 无法获得锁 /var/lib/dpkg/lock-frontend - ...

  10. SpringMVC学习（12）：基于Hibernate+Spring+Spring MVC+Bootstrap的管理系统实现

    到这里已经写到第12篇了,前11篇基本上把Spring MVC主要的内容都讲了,现在就直接上一个项目吧,希望能对有需要的朋友有一些帮助. 一.首先看一下项目结构: InfrastructureProj ...