12 为何使用Html5+CSS3
一：大多浏览器支持，低版本也没问题
我看点这方面的资料，是为了做手机应用网站（有三个方案，这个是备用方案），可以开发响应式网站，可以脱离开发平台进行跨平台。
在Html5网页中引入Modernizr，就能让IE支持HTML5新元素。
HTML5样板文件快速开发（html5boilerplate.com）
二：布局、标签省时省力
<header>
<!--语义相当于<div class="header">-->
<nav>导航</nav>
</header>
这样开发者就不用标记标签的结束位置了，定位时会很方便，也易于搜索引擎进行判断。
<header>定义页面或区段的头部；
<footer>定义页面或区段的尾部；
<nav>定义页面或区段的（主）导航区域；
<section>页面的逻辑区域或内容组合，比如一个用于“简介”，另一个用于“新闻列表”。
<article>定义正文或一篇完整的内容，能被直接粘贴到别的地方有独立意义，比如“博客正文”。
<aside>定义补充或相关内容，侧边栏，广告栏等。
<a>标签可以包含多个标签
<a href="index.html"><h2>一</h2><img src="home.jpg"></a>
<vedio>、<audio>快速添加视频、音频
<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 //针对列表的首尾项
li:nth-child(2n+1)//第“1”个li元素起，每“2”个颜色为红色
{
color: red;
}
<ul>
<li>һһһһһ</li>
<li>22222222</li>
<li>33333333</li>
</ul>
p::first-line{color:red;} //第一行文字为红色
五：更丰富CSS3
传统CSS实现圆角、阴影等效果，一般要借助图片来实现，使用CSS3代替图片，可以有效减少http请求，取得更快的网页加载速度。不同浏览器对不同的CSS特性可能要使用不同的代码，可以使用预处理器SASS或LESS才处理。
01.CSS3轻松应用边框圆角
<html>
<head>
<style>
a
{
background-color:red;
border-top-left-radius:8px;/*圆角位置和大小*/
border-top-right-radius:8px;
padding:0.8em;
}
</style>
</head>
<body>
<br />
<a href="#">圆角</a>
</body>
</html>
02.可以使用@font-face嵌入网页字体，还可以使用可缩放的ICON（非图片格式，fico.lensco.be）
03.使用透明通道
<style>
body{
background:url(01.jpg) no-repeat;
}
#wrapper{
background-color:hsla(100,100%,100%,0.7);/*HSL是360度色相环*/
width:500px;
height:500px;
}
</style>
</head>
<body>
<div id="wrapper">
透明区域
</div>
</body>
04文字阴影
text-shadow:5px 5px 2px #333; //（正负）右、下、阴影程度、颜色
浮雕效果：
<head>
<style>
#wrapper{
height:500px;
background-color:ActiveBorder;
text-shadow:0px 1px 0px hsla(0,0%,100%,0.75);
font-size:30px;
}
</style>
</head>
<body>
<div id="wrapper">
浮雕效果
</div>
</body>
同理可以使用盒阴影box-shadow给照片加阴影
05颜色渐变
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来解决）。
<head>
<style>
/*伪选择器*/
.input:required /*如果没有填入必填项，则边框变红色*/
{
border:1px solid #f00;
}
.input:focus:invalid /*如果填入的数据无效时*/
{
}
.input:focus:invalid /*如果填入的数据正确时*/
{
}
</style>
</head>
<body>
<form method="post">
<div>
<label for="userName">请输入用户名</label>
<input id="userName" type="text" placeholder="例如:Admin" required aria-required="true" autofocus />
<!--placeholder表示提示输入
required aria-required="true"表示为必填项；
autofocus表示自动获取到光标焦点
pattern属性可以填正则表达式，可以判定用户的输入行为
-->
<input type="search" value="与text差不多，部分浏览器表现比较强悍" />
<!--此外还有type=number之类的-->
<input type="submit" value="确定" />
</div>
</form>
</body>
12 为何使用Html5+CSS3的更多相关文章
- 12款非常精致的免费 HTML5 & CSS3 网站模板
01. Joefrey Mahusay 很炫的单页网站模板,基于 HTML5 & CSS3 制作,适合用于设计师个人简历.摄影师和平面设计师的个人作品展示. 演示 下载 02. Folder ...
- 12个新潮的 HTML5 & CSS3 网站设计欣赏
响应式设计和基于 HTML5 & CSS3 编码的网站是为网站制作的理想解决方案. HTML5 & CSS3 制作出来的网站结构良好,有很多惊人的效果,并能够在任何设备上浏览. 今天, ...
- 12款界面精美的 HTML5 & CSS3 网站模板
这里分享的12款完全采用响应式设计的 HTML5 & CSS3 网站设计模板.每一个细节都精心设计,以创建一个美妙的用户体验.这些响应主题和模板最适合用于电子商务,商业门户网站,个人作品集以及 ...
- 12款高质量的响应式 HTML5/CSS3 网站模板
HTML5 已经成为众所周知的语言,大量的 HTML5 资源和工具正在建立,以帮助开发人员和设计人员.今天,我们展示12款免费的响应式 HTML5/CSS3 网站模板,帮助你创建醒目和视觉震撼的网站. ...
- 03.Web大前端时代之：HTML5+CSS3入门系列~H5功能元素
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1.hgroup 对网页或区段(secti ...
- 05. Web大前端时代之：HTML5+CSS3入门系列~H5 多媒体系
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.引入 概述 音频文件或视频文件都可以看做是一个容器文 ...
- 06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...
- HTML5&CSS3练习笔记(二)
HTML5&CSS3 练习CSS3伪选择器使用 1.first-line 格式:元素:first-line 说明:设置同一个标签下所有行内容的第一行的样式,例如: <table st ...
- 15款免费的 HTML5/CSS3 响应式网页模板
如果你想快速制作出一个优秀的网站,网站模板一定是必不可少的.网页设计师和开发人员也可以从网站模板入手,学习先进的布局方式和编码风格.下面这个列表为大家挑选了15款免费的 HTML5/CSS3 响应式网 ...
随机推荐
- Codeforces Round #247 (Div. 2) C. k-Tree （dp）
题目链接 自己的dp, 不是很好,这道dp题是 完全自己做出来的,完全没看题解,还是有点进步,虽然这个dp题比较简单. 题意:一个k叉树, 每一个对应权值1-k, 问最后相加权值为n, 且最大值至少为 ...
- HDU 4946 共线凸包
题目大意: 一些点在一张无穷图上面,每个点可以控制一些区域,这个区域满足这个点到达这个区域的时间严格小于其他点.求哪些点能够控制无穷面积的区域. 题目思路: 速度小的控制范围一定有限. 速度最大当且仅 ...
- android和ios流媒体库推荐
1基本信息编辑 Vitamio是一款 Android 与 iOS 平台上的全能多媒体开发框架,全面支持硬件解码与 GPU 渲染.从2011年8月上线到2014年1月,Vitamio 凭借其简洁易用的 ...
- hdu 3496 Watch The Movie
题意:题目给定N部电影,每部电影有时长和价值,要求看M部电影,并且时间控制在L以内,转化为背包问题,让我们在N件物品中找正好M件物品塞进容量L的包中,求最大的价值.// dp[i][j] 表示在容量为 ...
- GreenDao官方文档翻译(上)
笔记摘要: 上一篇博客简单介绍了SQLite和GreenDao的比较,后来说要详细介绍下GreenDao的使用,这里就贴出本人自己根据官网的文档进行翻译的文章,这里将所有的文档分成上下两部分翻译,只为 ...
- MyBatis学习 之 二、SQL语句映射文件(2)增删改查、参数、缓存
目录(?)[-] 二SQL语句映射文件2增删改查参数缓存 select insert updatedelete sql parameters 基本类型参数 Java实体类型参数 Map参数 多参数的实 ...
- 《C++ primer》--第11章
习题11.1 algorithm头文件定义了一个count的函数,其功能类似于find.这个函数使用一对迭代器和一个值做参数,返回这个值出现次数的统计结果.编写程序读取一系列int型数据,并将它们存储 ...
- HDU 1025-Constructing Roads In JGShining's Kingdom（最长不降子序列，线段树优化）
分析: 最长不降子序列,n很大o(n^2)肯定超,想到了小明序列那个题用线段树维护前面的最大值即可 该题也可用二分搜索来做. 注意问题输出时的坑,路复数后加s #include <map> ...
- codeforces 696A Lorenzo Von Matterhorn 水题
这题一眼看就是水题,map随便计 然后我之所以发这个题解,是因为我用了log2()这个函数判断在哪一层 我只能说我真是太傻逼了,这个函数以前听人说有精度问题,还慢,为了图快用的,没想到被坑惨了,以后尽 ...
- JSP中字符编码转换问题
问题描述:一个input.jsp页面中的参数,传递到另外一个save.jsp页面上,然后存入到数据库中,如果input.jsp页面输入偶数中文没有问题,输入奇数则出现?,存入数据库的也是?. 问题源码 ...