Web开发者需要经常更新他们的知识,学习新的技术,如果他们还想继续在Web开发领域混并混得还不错的话。下面将为你展示7项新的Web开发技术,作为一个Web开发人员,你需要了解、熟悉并学会的技术。
1.CSS3 media queries
目前,大量的智能手机设备的涌现,同时各种不同尺寸屏幕的设备,如平板电脑之类的出现,对Web开发带来了前所未有的挑战,如何让Web页面能适应各种尺寸的屏幕让很多Web开发人员相当的纠结。幸运的是CSS3规范可帮我们轻松的解决此事,你可以根据不同尺寸的屏幕定义不同的CSS样式。
例如,下面的代码只在屏幕显示区域大小为767px的时候才有效:
- @mediascreenand(max-width:767px){
- #container{
- width:320px;
- }
- headerh1#logoa{
- width:320px;
- height:44px;
- background:url(image-small.jpg)no-repeat00;
- }
- }
更详细的信息请阅读:Create an adaptable website layout with CSS3
media queries
2.Font resizing with REMs
CSS3引入新的字体尺寸单位 rem (root rm)
em单位是相对于父节点的font-size,会有一些组合的问题,而rem是相对于根节点(或者是html节点),意思就是说你可以在html节点定义一个单独的字体大小,然后所有其他元素使用rem相对于这个字体的百分比进行设置。
- html{font-size:62.5%;}
- body{font-size:1.4rem;}/*=14px*/
- h1{font-size:2.4rem;}/*=24px*/
更多关于rem的内容请看:Font resizing with REMs
3.Cache pages for offline usage
HTML5引入了一个强大的特性:离线缓存。该特性可让你告诉浏览器缓存某些页面,使得用户可以在离线的情况下再次访问该页面。
要缓存页面非常简单,首先在你网站的.htaccess文件中添加如下一行:
- AddTypetext/cache-manifest.manifest
然后你可创建一个文件如offline.manifest,包含如下内容:
- CACHEMANIFEST
- CACHE
- index.html
- style.css
- image.jpg
最后,在html节点中增加:
- <htmlmanifest="/offline.manifest">
就这么多。
更多信息请阅读:How to create offline HTML5 web apps in 5 easy steps
4.Server-side JavaScript
JavaScript现在已经是非常流行的Web客户端编程语言了,但JavaScript也越来越多的出现在服务器端了,通过强大的JavaScript服务器端环境:Jaxer, Node.js and Narwhal.
下面代码显示如何用Node.js创建一个简单的Hello World程序
- varsys=require("sys");
- sys.puts("HelloWorld!");
更详细内容请阅读:Learning Server-Side JavaScript with Node.js
5.HTML5 drag & drop
HTML5让网页上的拖放变得非常简单,我们只需要简单的定义 draggable="true" 属性即可,如下所示:
有了这些draggable=true的元素,我们只需要编写一些简单的JavaScript代码来处理拖放,这里不再详细描述处理过程,如果你感兴趣,可以阅读这里。
提示:如果你希望阻止可拖放元素被选中,可使用以下 CSS 规则:
- [draggable]{
- -moz-user-select:none;
- -khtml-user-select:none;
- -webkit-user-select:none;
- user-select:none;
- }
更多信息请阅读:Cross Browser HTML5 Drag and Drop
6.Forms,the HTML5 way
HTML5 规范在表单定义方面引入很多新特性,包含很多新的表单组件,例如日期选择、数字调整、使用正则表达式对输入框进行验证等等(email、tel、link)
下面代码显示了一些新的表单元素:。
- <form>
-
<labelfor="range-slider">Slider</label>
-
<inputtype="range"name="range-slider"id="range-slider"class="slider"min="0"max="20"step="1"value="0">
-
<labelfor="numeric-spinner">Numericspinner</label>
-
<inputtype="number"name="numeric-spinner"id="numeric-spinner"value="2">
-
<labelfor="date-picker">Datepicker</label>
-
<inputtype="date"name="date-picker"id="date-picker"value="2010-10-06">
-
<labelfor="color-picker">Colorpicker</label>
-
<inputtype="color"name="color-picker"id="color-picker"value="ff0000">
-
<labelfor="text-field">Textfieldwithplaceholder</label>
-
<inputtype="text"name="text-field"id="text-field"placeholder="Insertyourtexthere">
-
<labelfor="url-field">Urlfield</label>
-
<inputtype="url"id="url-field"name="url-field"placeholder="http://net.tutsplus.com/"required>
-
<labelfor="email-field">Emailfield</label>
-
<inputtype="email"id="email-field"name="email-field"placeholder="contact@ghinda.net"required>
-
<buttontype="submit"class="ui-buttonui-widgetui-state-defaultui-corner-allui-button-text-only"role="button"aria-disabled="false">
-
<spanclass="ui-button-text">Submitform</span>
-
</button>
-
</form>
更多信息请阅读:How to Build Cross-Browser HTML5 Forms
7.CSS animations
很多现在的浏览器都支持CSS动画,是的,CSS已经允许你创建一些简单的动画,而无需JavaScript的支持。
下面代码显示如何让背景色改变:
- #logo{
- margin:15px15px015px;
- background:red;
- float:left;
- /*Firefox4+*/
- -moz-animation-name:colour-change;
- -moz-animation-timing-function:linear;
- -moz-animation-iteration-count:infinite;
- -moz-animation-duration:30s;
- /*Webkit*/
- -webkit-animation-name:colour-change;
- -webkit-animation-timing-function:linear;
- -webkit-animation-iteration-count:infinite;
- -webkit-animation-duration:30s;
- }
- @-moz-keyframescolour-change{
- 0%{
- background:red;
- }
- 33%{
- background:green;
- }
- 66%{
- background:blue;
- }
- }
- @-webkit-keyframescolour-change{
- 0%{
- background:red;
- }
- 33%{
- background:green;
- }
- 66%{
- background:blue;
- }
- }
更多信息请阅读:Enhance Your Sites with CSS3 Animations
分享到:
相关推荐
微信小程序-乐助 说明: 实现任务交易完整功能,特色: 地图选择自己位置 数据接口: ...https://api.getweapp.com/vendor/lezhu/postNeed ...微信web开发者工具 v0.11.112301 项目截图: https://www.getweapp.com/pr
14. CSDN - 专业开发者社区 https://www.csdn.net/ ———————————————— 版权声明:本文为CSDN博主「foxlzd」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:...
[14本经典Android开发教程]-7-Android编程入门教程 -------------------------------------------------- 本文为以前已经使用Java编程并想开始为Android平台开发的开发者编写。我试着尽可能地多的"展开",在合适的每...
微信小程序-芒果TV 说明: 实现了湖南卫视首页精选及分类展示,搜索热门,王牌强档以及视频播放...微信web开发者工具 v0.10.102800 项目截图: https://www.getweapp.com/project?projectId=5832d0d1bb2538f8186c707b
13份WPF经典开发教程 http://download.csdn.net/album/detail/1115 C#资料合辑二[C#桌面编程入门篇] http://download.csdn.net/album/detail/957 C#资料合辑一[C#入门篇] ...
微信web开发者工具 v0.11.122100 项目截图: https://www.getweapp.com/project?projectId=58932b1452e1e8733dc567f4 感谢: 本项目原始版本由airingursb提供:https://github.com/airingursb/miemie
Atom-valhalla.zip,Paradise for Vala developers (no longer maintained, please use https://github.com/naaando/ide-vala)这个包旨在将atom变成一个强大的vala ide。...,atom是一个用web技术构建的开源文本编辑器。
学习纯正的英语口语,要用地道的训练工具 --“澳华口语通”简介-- 澳华口语通充分发挥多媒体的各项功能,采用最新的语音教学方法,实现“声音可视化”(Visual-Audio)....与开发者联系: caesoft@hotmail.com
C#.net web开发者指南C#.net web开发者指南
webApp-demo 微信小程序 demo / ...查看『微信Web开发者工具』内容 替换以下文件 /Resources/app.nw/app/dist/components/create/createstep.js /Resources/app.nw/app/dist/stores/projectStores.js 运行『微信
开发者指南: http://alibaba.github.io/dubbo-doc-static/Developer Guide-zh.htm Dubbo FAQ: http://alibaba.github.io/dubbo-doc-static/FAQ-zh.htm Dubbo社区: ...
服务器:tomcat7 数据库:mysql 5.7(一定要5.7版本) 数据库工具:Navicat11 开发软件:eclipse/myeclipse/idea Maven包:Maven3.3.9 浏览器:谷歌浏览器 小程序框架:uniapp 小程序开发软件:HBuilder X 小程序...
服务器:tomcat7 数据库:mysql 5.7(一定要5.7版本) 数据库工具:Navicat11 开发软件:eclipse/myeclipse/idea Maven包:Maven3.3.9 浏览器:谷歌浏览器 小程序框架:uniapp 小程序开发软件:HBuilder X 小程序...
“个人简历”微信小程序+源码 运行工具:微信web开发者工具 截图链接:https://blog.csdn.net/qq_38275941/article/details/85303724
服务器:tomcat7 数据库:mysql 5.7(一定要5.7版本) 数据库工具:Navicat11 开发软件:eclipse/myeclipse/idea Maven包:Maven3.3.9 浏览器:谷歌浏览器 小程序框架:uniapp 小程序开发软件:HBuilder X 小程序...
服务器:tomcat7 数据库:mysql 5.7(一定要5.7版本) 数据库工具:Navicat11 开发软件:eclipse/myeclipse/idea Maven包:Maven3.3.9 浏览器:谷歌浏览器 小程序框架:uniapp 小程序开发软件:HBuilder X 小程序...
服务器:tomcat7 数据库:mysql 5.7(一定要5.7版本) 数据库工具:Navicat11 开发软件:eclipse/myeclipse/idea Maven包:Maven3.3.9 浏览器:谷歌浏览器 小程序框架:uniapp 小程序开发软件:HBuilder X 小程序...
服务器:tomcat7 数据库:mysql 5.7(一定要5.7版本) 数据库工具:Navicat11 开发软件:eclipse/myeclipse/idea Maven包:Maven3.3.9 浏览器:谷歌浏览器 小程序框架:uniapp 小程序开发软件:HBuilder X 小程序...
服务器:tomcat7 数据库:mysql 5.7(一定要5.7版本) 数据库工具:Navicat11 开发软件:eclipse/myeclipse/idea Maven包:Maven3.3.9 浏览器:谷歌浏览器 小程序框架:uniapp 小程序开发软件:HBuilder X 小程序...
服务器:tomcat7 数据库:mysql 5.7(一定要5.7版本) 数据库工具:Navicat11 开发软件:eclipse/myeclipse/idea Maven包:Maven3.3.9 浏览器:谷歌浏览器 小程序框架:uniapp 小程序开发软件:HBuilder X 小程序...