使用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 ...
随机推荐
- 【转】在 Windows 10 下,配置 Kinect v2 可用于 Windows Hello 验证身份
先要修改下注册表HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\DriverFlighting\Partner如果没有这个文件夹就创建一个吧 然后创建一个字符串类型的变量T ...
- 【Android开发】Android应用程序目录结构
原文:http://android.eoe.cn/topic/summary Android开发之旅:组件生命周期吴秦 Android开发之旅:HelloWorld项目的目录结构 * HelloWor ...
- [fixed] 解决 slf4j + log4j eclipse 可以打印日志,而在云服务器上不能打印
今天发现服务上没有打印任何日志,而log4j已经设置为了INFO 很奇怪,在eclipse中是可以打印的,也能输出到单独的日志中 后来发现原来是冲突了 把log4j注释掉即可 保留slf4j即可
- Objective-c在宏里拼接字符串
//正式服务器#define API_DOMAIN @"www.online.com"//测试服务器//#define DOMAINXX @"192.168.0.10&q ...
- IOS 设备备份文件详解 (一)
IOS设备如果没有越狱的话想获取一些敏感的信息还是有写复杂的,比如获取上网信息,短信,通话记录等等这些,但是有一个通用的方法可以获取到这些信息,那就是IOS 设备的备份功能.文章不涉及如何备份以及恢复 ...
- Python 传值和传址 copy/deepcopy
传值:被调函数局部变量改变不会影响主调函数局部变量 传址:被调函数局部变量改变会影响主调函数局部变量 Python参数传递方式:传递对象引用(传值和传址的混合方式),如果是数字,字符串,元组则传值:如 ...
- XShell 技巧
说明: 很长时间了,一直用XShell,但是总是用鼠标操作,后来想用其他方式代替鼠标,一想肯定有快捷方式等,这里就先记下一遍有用的博文,转自: http://sundful.iteye.com/blo ...
- 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-1导入JavaScript插件
导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...
- 获取控制台窗口句柄GetConsoleWindow
在创建direct 3D对象时需要一个窗口句柄,在命令行程序中又不想调用windows api创建窗口对象,所以尝试查找控制台下有无可用并且有效的窗口句柄.找了一下,函数原型如下: HWND WINA ...
- libevent源码分析:event_add、event_del
event_add.event_del两个函数分别是使event生效和失效的,下面就来看一下两个函数的实现. event_add int event_add(struct event *ev, con ...