使用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版&&移动版网页+手游开发)” 课程,能总本质上给你带来帮助,从此踏入跨平台的程序后行列!

posted @ 2014-12-19 08:57  super1234  阅读(1473)  评论(1编辑  收藏  举报