使用Html5+CSS3的优势
一：大多浏览器支持，低版本也没问题
我看点这方面的资料，是为了做手机应用网站（有三个方案，这个是备用方案），可以开发响应式网站，可以脱离开发平台进行跨平台。
在Html5网页中引入Modernizr，就能让IE支持HTML5新元素。
HTML5样板文件快速开发（html5boilerplate.com）
二：布局、标签省时省力
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
<header>
<!--语义相当于<div class="header">-->
<nav>导航</nav>
</header>
这样开发者就不用标记标签的结束位置了，定位时会很方便，也易于搜索引擎进行判断。
<header>定义页面或区段的头部；
<footer>定义页面或区段的尾部；
<nav>定义页面或区段的（主）导航区域；
<section>页面的逻辑区域或内容组合，比如一个用于“简介”，另一个用于“新闻列表”。
<article>定义正文或一篇完整的内容，能被直接粘贴到别的地方有独立意义，比如“博客正文”。
<aside>定义补充或相关内容，侧边栏，广告栏等。
<a>标签可以包含多个标签
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
<a href="index.html"><h2>一</h2><img src="home.jpg"></a>
<vedio>、<audio>快速添加视频、音频
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
<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 //针对列表的首尾项
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
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] view plaincopyprint?在CODE上查看代码片派生到我的代码片
<html>
<head>
<style>
a
{
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）
补充：
使用HTML5 Boilerplate来写HTML5网站，它带有组织好的文件夹结构和CSS文件，加入当前编码的最佳实践、浏览器的bug修复以及js库。
怎么样，优势明显，但是如果想真正入门的话，还是建议学一下北风网推出的 “跨平台开发技术-HTML5+CSS3从入门到精通(配两实战项目，兼顾PC版&&移动版网页+手游开发)” 课程，能总本质上给你带来帮助，从此踏入跨平台的程序后行列！
使用Html5+CSS3的优势的更多相关文章
- 【HTML5&CSS3进阶04】CSS3动画应该如何在webapp中运用
动画在webapp的现状 webapp模式的网站追求的就是一个体验,是HTML5&CSS3浪潮下的产物,抛开体验不说,webapp模式门槛比较高: 而体验优化的一个重点便是动画,可以说动画是w ...
- HTML5+CSS3学习笔记（一）
HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML ...
- 用Html5/CSS3做Winform，一步一步教你搭建CefSharp开发环境（附JavaScript异步调用C#例子，及全部源代码）上
本文为鸡毛巾原创,原文地址:http://www.cnblogs.com/jimaojin/p/7077131.html,转载请注明 CefSharp说白了就是Chromium浏览器的嵌入式核心,我们 ...
- 好程序员分享DIV+CSS3和html5+CSS3有什么区别
DIV+CSS3和html5+CSS3有什么区别,不管是DIV+CSS3还是html5+CSS3,他们都是我们对网页开发布局方式的统称,但是DIV+CSS3作为网页的基础开发这句话其实并不严谨,因为而 ...
- 用HTML5/CSS3/JS开发Android/IOS应用框架大全
现在人人都想成为安卓/IOS应用开发工程师.其实,安卓/IOS应用可以用很多种语言来实现.由于我们前端开发工程师,对HTML5/CSS/JavaScript的网络编程已经相当熟悉了.所以,今天大家将会 ...
- HTML5+CSS3学习笔记（一） 概述
HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就 ...
- front-end——HTML5/CSS3基础
概述 1.什么是前端 前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页,随着互联网技术的发展,html5,css3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,完 ...
- Web大前端时代之：HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
- 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
随机推荐
- 【Linux运维-集群技术进阶】Nginx+Keepalived+Tomcat搭建高可用/负载均衡/动静分离的Webserver集群
额.博客名字有点长.. . 前言 最终到这篇文章了,心情是有点激动的. 由于这篇文章会集中曾经博客讲到的全部Nginx功能点.包含主要的负载均衡,还有动静分离技术再加上这篇文章的重点.通过Keepal ...
- PHP数组排序sort、asort与ksort用法
分享下PHP数组排序之sort.asort与ksort用法,实例中简单示范了sort.asort与ksort的用法,并备有注释加以详细说明. PHP数组排序中sort.asort与ksort的用法. ...
- vivado自定IP例化的问题，怎么生成VHDL的例化
在tools 下面选中project settings.然后选targat language为VHDL .这样就会生成一个以VHDL语言为模板的ip. 转载:https://zhidao.baidu. ...
- nodepad++ 正则 替换
(?<k1>.*?)\=(?<k2>.*?); cookie.Add(new CookieList() { Key = "\1", Value = &quo ...
- UIView的alpha、hidden和opaque属性之间的关系和区别
转自:http://blog.csdn.net/wzzvictory/article/details/10076323 作者:wangzz 原文地址:http://blog.csdn.net/wzzv ...
- 菜鸟学SSH（七）——Spring jar包详解
Struts.Hibernate.Spring这类的框架给我们开发带来非常大的好处,让我们更加快速.有效的开发.所以我们在开发中通常都会用到各种框架,每个框架都有很多jar包,每个jar都有各自不同的 ...
- Oracle客户端使用sqlldr导数据中文乱码问题解决方法
String strctl = "OPTIONS (skip=0)" + // 0是从第一行开始 1是 从第二行 CHARACTERSET AL32UTF8 是为了解决导入中文为乱 ...
- ffmpeg与H264编码指南
注:本文属于转载译文,原文地址:http://blog.csdn.net/vblittleboy/article/details/8982857. 英文地址:https://trac.ffmpeg.o ...
- LeetCode: Insertion Sort List 解题报告
Insertion Sort List Sort a linked list using insertion sort. SOLUTION: 使用一个dummynode 创建一个新的链,将旧的节点插入 ...
- python导外部包
win7+python2.7下安装spark 最近在学习Spark,由于我的Python是在windows下安装的,好多库也已经配置好,所以需要将spark安装在windows环境下,下面是安装过程: ...