应该了解的7 项新的 Web 开发技术

2023-11-03 02:32

本文主要是介绍应该了解的7 项新的 Web 开发技术,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!



  1、CSS3 media queries

  目前,大量智能手机设备的涌现,同时各种不同尺寸屏幕的设备,如平板电脑之类的出现,对 Web 开发带来了前所未有的挑战,如何让 Web 页面能适应各种尺寸的屏幕让很多 Web 开发人员相当的纠结。幸运的是 CSS3 规范可帮我们轻松的解决此事,你可以根据不同尺寸的屏幕定义不同的 CSS 样式。

  例如,下面的代码只在屏幕显示区域大小为 767px 的时候才有效:

@media screen and (max-width:767px){ 
         #container{ 
             width:320px; 
         }  
       
         header h1#logo a{ 
             width:320px; 
             height:44px; 
             background:url(image-small.jpg) no-repeat 0 0
         }                            
       
     }

  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 */

  3、Cache pages for offline usage

  HTML5 引入了一个强大的特性:离线缓存。该特性可让你告诉浏览器缓存某些页面,使得用户可以在离线的情况下再次访问该页面。

  要缓存页面非常简单,首先在你网站的 .htaccess 文件中添加如下一行:

AddType text/cache-manifest .manifest

然后你可创建一个文件如 offline.manifest ,包含如下内容:

CACHE MANIFEST 
     CACHE 
     index.html 
     style.css 
     image.jpg

最后,在 html 节点中增加:

<html manifest= "/offline.manifest" >

  4、Server-side JavaScript

  JavaScript 现在已经是非常流行的 Web 客户端编程语言了,但 JavaScript 也越来越多的出现在服务器端了,通过强大的 JavaScript 服务器端环境:Jaxer、Node.js 和 Narwhal。

  下面代码显示如何用 Node.js 创建一个简单的 Hello World 程序:

var sys = require( "sys" ); 
     sys.puts( "Hello World!" );

  5、HTML5 drag & drop

  HTML5 让网页上的拖放变得非常简单,我们只需要简单的定义 draggable="true" 属性即可,如下所示:

<div id= "columns"
       <div class = "column" draggable= "true" ><header>A</header></div> 
       <div class = "column" draggable= "true" ><header>B</header></div> 
       <div class = "column" draggable= "true" ><header>C</header></div> 
     </div>

  有了这些 draggable=true 的元素,我们只需要编写一些简单的 JavaScript 代码来处理拖放,这里不再详细描述处理过程。

  提示:如果你希望阻止可拖放元素被选中,可使用以下 CSS 规则:

[draggable] { 
       -moz-user-select: none; 
       -khtml-user-select: none; 
       -webkit-user-select: none; 
       user-select: none; 
     }

  6、Forms, the HTML5 way

  HTML5 规范在表单定义方面引入很多新特性,包含很多新的表单组件,例如日期选择、数字调整、使用正则表达式对输入框进行验证等等(email、tel、link)。

  下面代码显示了一些新的表单元素:

<form> 
         <label for = "range-slider" >Slider</label> 
         <input type= "range" name= "range-slider" id= "range-slider" class = "slider" min= "0" max= "20" step= "1" value= "0"
       
         <label for = "numeric-spinner" >Numeric spinner</label> 
         <input type= "number" name= "numeric-spinner" id= "numeric-spinner" value= "2"
       
         <label for = "date-picker" >Date picker</label> 
         <input type= "date" name= "date-picker" id= "date-picker" value= "2010-10-06"
       
         <label for = "color-picker" >Color picker</label> 
         <input type= "color" name= "color-picker" id= "color-picker" value= "ff0000"
       
         <label for = "text-field" >Text field with placeholder</label> 
         <input type= "text" name= "text-field" id= "text-field" placeholder= "Insert your text here"
       
         <label for = "url-field" >Url field</label> 
         <input type= "url" id= "url-field" name= "url-field" placeholder= "<a href="http://net.tutsplus.com/" "="" style="outline: none; text-decoration: none; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.2em !important; margin: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-size: 1em !important; min-height: inherit !important; color: rgb(0, 51, 102) !important; background: none !important;">http://net.tutsplus.com/" required> 
       
         <label for = "email-field" >Email field</label> 
         <input type= "email" id= "email-field" name= "email-field" placeholder= "contact@ghinda.net" required> 
       
         <button type= "submit" class = "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role= "button" aria-disabled= "false"
         <span class = "ui-button-text" >Submit form</span> 
         </button> 
     </form>

  7、CSS animations

  很多现在的浏览器都支持 CSS 动画,是的,CSS 已经允许你创建一些简单的动画,而无需 JavaScript 的支持。

  下面代码显示如何让背景色改变:

#logo { 
         margin: 15px 15px 0 15px; 
         background: red; 
         float : left; 
       
         /* Firefox 4+ */ 
         -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-keyframes colour-change { 
         0 % { 
             background: red; 
        
         33 % { 
             background: green; 
        
         66 % { 
             background: blue; 
        
    
       
     @-webkit-keyframes colour-change { 
         0 % { 
             background: red; 
        
         33 % { 
             background: green; 
        
         66 % { 
             background: blue; 
        
     }

附:各浏览器的Hack写法http://www.w3cplus.com/css/create-css-browers-hacks

  1、CSS3 media queries

  目前,大量智能手机设备的涌现,同时各种不同尺寸屏幕的设备,如平板电脑之类的出现,对 Web 开发带来了前所未有的挑战,如何让 Web 页面能适应各种尺寸的屏幕让很多 Web 开发人员相当的纠结。幸运的是 CSS3 规范可帮我们轻松的解决此事,你可以根据不同尺寸的屏幕定义不同的 CSS 样式。

  例如,下面的代码只在屏幕显示区域大小为 767px 的时候才有效:

@media screen and (max-width:767px){ 
         #container{ 
             width:320px; 
         }  
       
         header h1#logo a{ 
             width:320px; 
             height:44px; 
             background:url(image-small.jpg) no-repeat 0 0
         }                            
       
     }

  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 */

  3、Cache pages for offline usage

  HTML5 引入了一个强大的特性:离线缓存。该特性可让你告诉浏览器缓存某些页面,使得用户可以在离线的情况下再次访问该页面。

  要缓存页面非常简单,首先在你网站的 .htaccess 文件中添加如下一行:

AddType text/cache-manifest .manifest

然后你可创建一个文件如 offline.manifest ,包含如下内容:

CACHE MANIFEST 
     CACHE 
     index.html 
     style.css 
     image.jpg

最后,在 html 节点中增加:

<html manifest= "/offline.manifest" >

  4、Server-side JavaScript

  JavaScript 现在已经是非常流行的 Web 客户端编程语言了,但 JavaScript 也越来越多的出现在服务器端了,通过强大的 JavaScript 服务器端环境:Jaxer、Node.js 和 Narwhal。

  下面代码显示如何用 Node.js 创建一个简单的 Hello World 程序:

var sys = require( "sys" ); 
     sys.puts( "Hello World!" );

  5、HTML5 drag & drop

  HTML5 让网页上的拖放变得非常简单,我们只需要简单的定义 draggable="true" 属性即可,如下所示:

<div id= "columns"
       <div class = "column" draggable= "true" ><header>A</header></div> 
       <div class = "column" draggable= "true" ><header>B</header></div> 
       <div class = "column" draggable= "true" ><header>C</header></div> 
     </div>

  有了这些 draggable=true 的元素,我们只需要编写一些简单的 JavaScript 代码来处理拖放,这里不再详细描述处理过程。

  提示:如果你希望阻止可拖放元素被选中,可使用以下 CSS 规则:

[draggable] { 
       -moz-user-select: none; 
       -khtml-user-select: none; 
       -webkit-user-select: none; 
       user-select: none; 
     }

  6、Forms, the HTML5 way

  HTML5 规范在表单定义方面引入很多新特性,包含很多新的表单组件,例如日期选择、数字调整、使用正则表达式对输入框进行验证等等(email、tel、link)。

  下面代码显示了一些新的表单元素:

<form> 
         <label for = "range-slider" >Slider</label> 
         <input type= "range" name= "range-slider" id= "range-slider" class = "slider" min= "0" max= "20" step= "1" value= "0"
       
         <label for = "numeric-spinner" >Numeric spinner</label> 
         <input type= "number" name= "numeric-spinner" id= "numeric-spinner" value= "2"
       
         <label for = "date-picker" >Date picker</label> 
         <input type= "date" name= "date-picker" id= "date-picker" value= "2010-10-06"
       
         <label for = "color-picker" >Color picker</label> 
         <input type= "color" name= "color-picker" id= "color-picker" value= "ff0000"
       
         <label for = "text-field" >Text field with placeholder</label> 
         <input type= "text" name= "text-field" id= "text-field" placeholder= "Insert your text here"
       
         <label for = "url-field" >Url field</label> 
         <input type= "url" id= "url-field" name= "url-field" placeholder= "<a href="http://net.tutsplus.com/" "="" style="outline: none; text-decoration: none; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.2em !important; margin: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-size: 1em !important; min-height: inherit !important; color: rgb(0, 51, 102) !important; background: none !important;">http://net.tutsplus.com/" required> 
       
         <label for = "email-field" >Email field</label> 
         <input type= "email" id= "email-field" name= "email-field" placeholder= "contact@ghinda.net" required> 
       
         <button type= "submit" class = "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role= "button" aria-disabled= "false"
         <span class = "ui-button-text" >Submit form</span> 
         </button> 
     </form>

  7、CSS animations

  很多现在的浏览器都支持 CSS 动画,是的,CSS 已经允许你创建一些简单的动画,而无需 JavaScript 的支持。

  下面代码显示如何让背景色改变:

#logo { 
         margin: 15px 15px 0 15px; 
         background: red; 
         float : left; 
       
         /* Firefox 4+ */ 
         -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-keyframes colour-change { 
         0 % { 
             background: red; 
        
         33 % { 
             background: green; 
        
         66 % { 
             background: blue; 
        
    
       
     @-webkit-keyframes colour-change { 
         0 % { 
             background: red; 
        
         33 % { 
             background: green; 
        
         66 % { 
             background: blue; 
        
     }

附:各浏览器的Hack写法http://www.w3cplus.com/css/create-css-browers-hacks

这篇关于应该了解的7 项新的 Web 开发技术的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/334985

相关文章

解决JavaWeb-file.isDirectory()遇到的坑问题

《解决JavaWeb-file.isDirectory()遇到的坑问题》JavaWeb开发中,使用`file.isDirectory()`判断路径是否为文件夹时,需要特别注意:该方法只能判断已存在的文... 目录Jahttp://www.chinasem.cnvaWeb-file.isDirectory()遇

JavaWeb-WebSocket浏览器服务器双向通信方式

《JavaWeb-WebSocket浏览器服务器双向通信方式》文章介绍了WebSocket协议的工作原理和应用场景,包括与HTTP的对比,接着,详细介绍了如何在Java中使用WebSocket,包括配... 目录一、概述二、入门2.1 POM依赖2.2 编写配置类2.3 编写WebSocket服务2.4 浏

Spring常见错误之Web嵌套对象校验失效解决办法

《Spring常见错误之Web嵌套对象校验失效解决办法》:本文主要介绍Spring常见错误之Web嵌套对象校验失效解决的相关资料,通过在Phone对象上添加@Valid注解,问题得以解决,需要的朋... 目录问题复现案例解析问题修正总结  问题复现当开发一个学籍管理系统时,我们会提供了一个 API 接口去

使用IntelliJ IDEA创建简单的Java Web项目完整步骤

《使用IntelliJIDEA创建简单的JavaWeb项目完整步骤》:本文主要介绍如何使用IntelliJIDEA创建一个简单的JavaWeb项目,实现登录、注册和查看用户列表功能,使用Se... 目录前置准备项目功能实现步骤1. 创建项目2. 配置 Tomcat3. 项目文件结构4. 创建数据库和表5.

手把手教你idea中创建一个javaweb(webapp)项目详细图文教程

《手把手教你idea中创建一个javaweb(webapp)项目详细图文教程》:本文主要介绍如何使用IntelliJIDEA创建一个Maven项目,并配置Tomcat服务器进行运行,过程包括创建... 1.启动idea2.创建项目模板点击项目-新建项目-选择maven,显示如下页面输入项目名称,选择

关于数据埋点,你需要了解这些基本知识

产品汪每天都在和数据打交道,你知道数据来自哪里吗? 移动app端内的用户行为数据大多来自埋点,了解一些埋点知识,能和数据分析师、技术侃大山,参与到前期的数据采集,更重要是让最终的埋点数据能为我所用,否则可怜巴巴等上几个月是常有的事。   埋点类型 根据埋点方式,可以区分为: 手动埋点半自动埋点全自动埋点 秉承“任何事物都有两面性”的道理:自动程度高的,能解决通用统计,便于统一化管理,但个性化定

购买磨轮平衡机时应该注意什么问题和技巧

在购买磨轮平衡机时,您应该注意以下几个关键点: 平衡精度 平衡精度是衡量平衡机性能的核心指标,直接影响到不平衡量的检测与校准的准确性,从而决定磨轮的振动和噪声水平。高精度的平衡机能显著减少振动和噪声,提高磨削加工的精度。 转速范围 宽广的转速范围意味着平衡机能够处理更多种类的磨轮,适应不同的工作条件和规格要求。 振动监测能力 振动监测能力是评估平衡机性能的重要因素。通过传感器实时监

Java Web指的是什么

Java Web指的是使用Java技术进行Web开发的一种方式。Java在Web开发领域有着广泛的应用,主要通过Java EE(Enterprise Edition)平台来实现。  主要特点和技术包括: 1. Servlets和JSP:     Servlets 是Java编写的服务器端程序,用于处理客户端请求和生成动态网页内容。     JSP(JavaServer Pages)

BUUCTF靶场[web][极客大挑战 2019]Http、[HCTF 2018]admin

目录   [web][极客大挑战 2019]Http 考点:Referer协议、UA协议、X-Forwarded-For协议 [web][HCTF 2018]admin 考点:弱密码字典爆破 四种方法:   [web][极客大挑战 2019]Http 考点:Referer协议、UA协议、X-Forwarded-For协议 访问环境 老规矩,我们先查看源代码

cross-plateform 跨平台应用程序-03-如果只选择一个框架,应该选择哪一个?

跨平台系列 cross-plateform 跨平台应用程序-01-概览 cross-plateform 跨平台应用程序-02-有哪些主流技术栈? cross-plateform 跨平台应用程序-03-如果只选择一个框架,应该选择哪一个? cross-plateform 跨平台应用程序-04-React Native 介绍 cross-plateform 跨平台应用程序-05-Flutte