• 关于

    HTML拖放

    的搜索结果

回答

· dragstart:拖拽开始时在被拖拽元素上触发此事件,监听器需要设置拖拽所需数据,从操作系统拖拽文件到浏览器时不触发此事件.· dragenter:拖拽鼠标进入元素时在该元素上触发,用于给拖放元素设置视觉反馈,如高亮· dragover:拖拽时鼠标在目标元素上移动时触发.监听器通过阻止浏览器默认行为设置元素为可拖放元素.· dragleave:拖拽时鼠标移出目标元素时在目标元素上触发.此时监听器可以取消掉前面设置的视觉效果.· drag:拖拽期间在被拖拽元素上连续触发· drop:鼠标在拖放目标上释放时,在拖放目标上触发.此时监听器需要收集数据并且执行所需操作.如果是从操作系统拖放文件到浏览器,需要取消浏览器默认行为.· dragend:鼠标在拖放目标上释放时,在拖拽元素上触发.将元素从浏览器拖放到操作系统时不会触发此事件.很高兴为您解答,如果您对我的回答满意的话,请采纳一下。您的采纳是对我最大的支持阿里云优惠:领取有惊喜。https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=nb3paa5b阿里云帮助文档:https://help.aliyun.com/智能应答机器人:https://ia.aliyun.com/
景凌凯 2019-12-02 01:39:06 0 浏览量 回答数 0

问题

js/jq移动端触屏滑动 拖拽效果

1.项目需求:移动端触屏拖拽,如图简介用手指拖拽图片至左灰框中,一框一张图,如果灰框已有图片,则删除已有图片,增加当前移动图片,且把被删图片重新加到右边本身初始位置(如c被删除了,再重新回到c在右边第三个位置)2.用的是js/jq3.以实现...
a123456678 2019-12-01 20:16:08 1426 浏览量 回答数 1

回答

。首先我们得去把源码下载下来。网址在:https://github.com/facebook/three20 解压放在我们工程目录下。 2。在解压目录下src/Three20下的Three20.xcodeproj拖到自己的工程里,在弹出的对话框中Destination栏“Copy Items into destination group's folder”不要选中,Addto targets栏中选中自己的工程target,并不是unit test target,然后点Finish. 3。在工程中展开Three20,你会发现有一个group叫Dependencies,展开它,下面有六个依赖工程,选中它们,并拖到自己的工程中去。 4。将src目录下的Three20.bundle拖到自己的工程中去。 5。加入需要的静态库。如下图红色部份是加入的: 6。加入需要的目标依赖项。如下图: 7。加入Quartz.framework 8。在工程配置页,build里Header Search Paths里加入 $(BUILT_PRODUCTS_DIR)/../three20" " $(BUILT_PRODUCTS_DIR)/../../three20" " $(CONFIGURATION_BUILD_DIR)/../../three20" 如下图: 9。在Other Linker Flags里加入 -ObjC -all_load 如图: 10。然后在需要用Three20的文件中引入头文件#import "Three20/Three20.h" 就可以用Three20的功能了。 还有一种方法就是利用脚本,在src目录下面有一个script目录,打开terminal进入到script目录下,然后运行命令: python ttmodule.py -p path/to/your/project/yourproject.xcodeproj Three20 --xcode-version=4 -p后面是你工程的绝对路径,当然也可是当前script的相对路径。 这样就自动完成第一种方法中的各种配置。 这儿有一些Three20的教程,example目录下也有不少demo工程 Three20 Stylesheets iPhone Tutorial Three20 Custom Cells iPhone Tutorial Three20 Table Item Tutorial http://www.codeios.com/thread-598-1-1.html http://iosguy.com/2010/10/19/tthree20-a-brief-ttlauncherview-tutorial/ http://three20.pypt.lt/start http://three20.pypt.lt/starthttp://three20.pypt.lt/start 用终端: 把320解压后放到工程文件加下面 打开终端,输入命令 iMac:~ xx$ python Three20/src/scripts/ttmodule.py -p 工程的路径/工程的名字.xcodeproj Three20 回车就可以了; 如果不知道工程的路径、可以打开工程的文件加,找到"工程名字.xcodeproj"直接拽到终端
游客2q7uranxketok 2021-02-22 17:51:16 0 浏览量 回答数 0

阿里云试用中心,为您提供0门槛上云实践机会!

100+款试用云产品,最长免费试用12个月!拨打95187-1,咨询专业上云建议!

回答

新特性: 拖拽释放(拖放)API 语义化更好的内容标签(页眉,导航,页脚,旁边,文章,部分) 音频,视频API(音频,视频) 画布(画布)API 地理(地理位置)API 本地离线存储localStorage长期存储数据,浏览器关闭后数据不丢失; sessionStorage的数据在浏览器关闭后自动删除 表单控件,日历,日期,时间,电子邮件,网址,搜索 新的技术webworker,websocket,地理位置 可移除的元素: 纯表现的元素:basefont,大,center,font,s,strike,tt,u; 对可用产生可能影响的元素:frame,frameset,noframes; 支持HTML5新标签: IE8 / IE7 / IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,浏览器支持新标签后,还需要添加标签样式的样式: 当然最好的方式是直接使用成熟的框架,使用最多的是html5shim框架 <!- [如果是IE 9,则>> 脚本> src =“ http://html5shim.googlecode.com/svn/trunk/html5.js”; </ script> <![endif] ->
茶什i 2019-12-02 03:16:12 0 浏览量 回答数 0

问题

去优酷土豆视频广告脚本—让广告别再骚扰我了!

它可以去除优酷与土豆播放器中的黑屏和广告.这又一个典型的用技术撼动 Big Company 的故事,又或者不知道能生存多久。我犹豫了很久,还是把它分享出来了。由于这个是一个浏览器脚本所以Firefox 需要 Gr...
hjytub2 2019-12-01 21:03:51 9708 浏览量 回答数 6

问题

在ubuntu下搭建asp.netmono的运行环境

第一次接触阿里云。对很多进行。net开发的人来说,window下的费用各方面都是个负担,对于新手或者小站长来说,更好更便宜的liunx是比较好的选择。 我选择的是最低配的那款,ubun...
jsong 2019-12-01 21:01:04 10974 浏览量 回答数 5

回答

推荐工具 1、Linx: Linx 是一款低代码的 IDE 和服务器。IT 专业人员使用 Linx 可以快速创建自定义的自动化业务流程、集成应用程序、公开 Web 服务,并有效地处理高工作负载。 易用使用的拖放式界面。 超过 100 种预建功能和服务,可实现快速开发。 直接从 IDE 一键部署到任何本地或远程 Linx 服务器。 输入和输出包括几乎所有的 SQL 和 NoSQL 数据库、大量文件格式(文本和二进制)或 REST 和 SOAP Web 服务。 使用分步逻辑进行现场调试。 通过计时器、目录事件或消息队列将后端流程自动化,或者公开 Web 服务,并通过 HTTP 请求调用 API。 下载链接:https://linx.software/lowcode-application-designer/?utm=99 2、Buddy Buddy 是一款面向 Web 开发人员的智能 CI/CD 工具,旨在降低 DevOps 的入门门槛。它使用交付管道来构建、测试和部署软件。这些管道由 100 多个随时可用的动作创建的,这些动作可以以任何方式进行安排,就像你用砖头建造房子一样。 15 分钟的配置,清晰易懂的用户界面 / 用户体验。 基于变更集的快速部署。 构建在具有缓存依赖项的独立容器中运行。 支持所有流行语言、框架和任务管理器。 Docker/Kubernetes 动作专用名册。 与 AWS、Google、DigitalOcean、Azure、Shopify、WordPress 等集成。 支持并行和 YAML 配置。 下载链接:https://buddy.works/ IDE (集成开发环境) 3、NetBeans NetBeans 是一款流行的免费开源 IDE。它可以用来开发桌面、移动和 Web 应用程序。 支持快速和智能代码编辑。 简单高效的项目管理流程。 快速用户界面开发。 帮助编写无 Bug 代码。 NetBeans IDE 为 C/C++ 和 PHP 开发人员提供了卓越的支持。 它可以安装在任何支持 Java 的操作系统上,从 Windows 到 Linux,再到 Mac OSX 系统。 下载链接:https://netbeans.org/downloads/index.html 4、Cloud9 IDE Cloud9 IDE 是一款在线集成软件开发环境。它支持许多编程语言,如 C、C++、PHP、Ruby、Perl、Python、JavaScript 和 Node.js。 允许克隆整个开发环境。 命令行想到的内置终端。 代码完成建议的功能可以帮助软件开发人员更快地编写代码并避免输入错误。 调试器可帮助开发人员设置断点,并检查任何 JS/Node.js 应用的变量。 只需拖动任何文件或终端即可创建多个拆分视图。 开发人员可以选择广泛的默认运行程序来执行应用程序,如 Ruby、Pythn、PHP/Apache。 下载链接:https://c9.io/pricing
有只黑白猫 2020-01-20 17:21:34 0 浏览量 回答数 0

回答

推荐工具 1、Linx: Linx 是一款低代码的 IDE 和服务器。IT 专业人员使用 Linx 可以快速创建自定义的自动化业务流程、集成应用程序、公开 Web 服务,并有效地处理高工作负载。 易用使用的拖放式界面。 超过 100 种预建功能和服务,可实现快速开发。 直接从 IDE 一键部署到任何本地或远程 Linx 服务器。 输入和输出包括几乎所有的 SQL 和 NoSQL 数据库、大量文件格式(文本和二进制)或 REST 和 SOAP Web 服务。 使用分步逻辑进行现场调试。 通过计时器、目录事件或消息队列将后端流程自动化,或者公开 Web 服务,并通过 HTTP 请求调用 API。 下载链接:https://linx.software/lowcode-application-designer/?utm=99 2、Buddy Buddy 是一款面向 Web 开发人员的智能 CI/CD 工具,旨在降低 DevOps 的入门门槛。它使用交付管道来构建、测试和部署软件。这些管道由 100 多个随时可用的动作创建的,这些动作可以以任何方式进行安排,就像你用砖头建造房子一样。 15 分钟的配置,清晰易懂的用户界面 / 用户体验。 基于变更集的快速部署。 构建在具有缓存依赖项的独立容器中运行。 支持所有流行语言、框架和任务管理器。 Docker/Kubernetes 动作专用名册。 与 AWS、Google、DigitalOcean、Azure、Shopify、WordPress 等集成。 支持并行和 YAML 配置。 下载链接:https://buddy.works/ IDE (集成开发环境) 3、NetBeans NetBeans 是一款流行的免费开源 IDE。它可以用来开发桌面、移动和 Web 应用程序。 支持快速和智能代码编辑。 简单高效的项目管理流程。 快速用户界面开发。 帮助编写无 Bug 代码。 NetBeans IDE 为 C/C++ 和 PHP 开发人员提供了卓越的支持。 它可以安装在任何支持 Java 的操作系统上,从 Windows 到 Linux,再到 Mac OSX 系统。 下载链接:https://netbeans.org/downloads/index.html 4、Cloud9 IDE Cloud9 IDE 是一款在线集成软件开发环境。它支持许多编程语言,如 C、C++、PHP、Ruby、Perl、Python、JavaScript 和 Node.js。 允许克隆整个开发环境。 命令行想到的内置终端。 代码完成建议的功能可以帮助软件开发人员更快地编写代码并避免输入错误。 调试器可帮助开发人员设置断点,并检查任何 JS/Node.js 应用的变量。 只需拖动任何文件或终端即可创建多个拆分视图。 开发人员可以选择广泛的默认运行程序来执行应用程序,如 Ruby、Pythn、PHP/Apache。 下载链接:https://c9.io/pricing
有只黑白猫 2020-01-08 17:49:54 0 浏览量 回答数 0

回答

拖拽原理 首先要明确几个概念。   ource:拖拽源,要拖动的元素。   taerget:拖放目标,能够放入source的容器。 拖拽的动作分解如下:   1. drag start:在拖拽源(source)上按下鼠标并开始移动   2. drag move: 移动过程中   3. drag enter: 移动进入目标(target)容器   4. drag leave: 移出目标(target)容器   5. drop: 在目标(target)容器上释放鼠标   6. drag end: 结束 在html5之前,页面元素不直接支持拖拽事件。所以都是通过监听鼠标事件并记录拖拽状态的方式来实现拖拽功能。 最简单的例子 最简单的拖拽是不改变元素所在的容器,而只改变其位置。例子如下: 复制代码代码如下: 拽我! 拖动到另一个容器 更常见的场景是将元素拖动到另一个容器中。这就需要在drop目标(target)容器上应用droppable函数。让我们在上一个例子的基础上,增加一个div作为容器,并应用droppable函数: 复制代码代码如下: 拽我! Drop here 事件监听和回显(Feedback) 运行上一个例子,你可能会产生疑惑,真的放到目标容器上了吗?用户也会产生同样的疑惑。所以,可以监听拖动过程中发生的一些事件,并用可见的方式让用户知道。这就叫做回显(Feedback)。 对于源(source),可以监听的事件包括:   create: 在source上应用draggable函数时触发   start:开始拖动时触发   drap:拖动过程中触发   stop:释放时触发 对于目标(target),可以监听的事件包括:   create: 在target上应用droppable函数时触发   activate:如果当前拖动的source可以drop到本target,则触发   deactivate:如果可以drop到本target的拖拽停止,则触发   over:source被拖动到target上面   out:source被拖动离开target   drop:source被释放到target 事件处理函数都是通过draggable和droppable函数的参数传递,在这些事件处理函数中就可以进行Feedback。看一下实际的例子: 复制代码代码如下: :-| Can drop! 复制拖动 前面的例子都是移动元素,另一种常见的场景是复制拖动。比如visio中的从画板中拖动元素到画布。这是通过draggable函数的helper参数设定的。 helper可以指定为“original”, "clone",其中"original"是默认值,即拖动自身,而clone表示创建自身的一个克隆用于拖拽。helper还可以指定为函数,该函数返回一个自定义的DOM元素用于拖拽。 当不是拖动自身的时候,需要在target上指定drop事件函数,在该函数中将特定的元素添加到target容器上,否则drop的时候什么事情都不会发生。 简单复制的例子如下: 复制代码代码如下: 拽我! 拖动控制 到目前位置,所有的例子中都可以对source随意拖动。在实际应用中经常需要对拖动行为进行控制。下面给出几个例子。 拖动方向 默认拖动方向为x,y两个方向。通过draggable的axis参数可以限制只能水平或竖直拖动。如下: 复制代码代码如下: -- | 拖动范围 除了方向之外,还可以通过containment参数约束拖动的范围。该参数接受Selector, Element, String, Array类型。其中String可以为parent,document,window,Array是指定一个矩形区域(regin)的四元数组:[x1,y1,x2,y2]。下面的例子分别指定了parent和regin作为范围限制: 复制代码代码如下: in parent in regin 拖动吸附 还可以在拖动的时候吸附到其他元素或网格。使用snap参数指定要吸附到的元素,使用grid参数指定吸附到网格,如下: 复制代码代码如下: 吸附到其他可拖拽元素 吸附到容器 吸附到网格(30x30) 拖动把手(handle) 默认是整个元素都可以拖动,也可以指定元素的某个子元素作为拖动的handle,如: 复制代码代码如下: handle …… Drop限制 默认的droppable指定元素能够接受所有的drop, 但是可以通过accept参数限定只能接受某些元素的drop。accept参数的类型为一个符合jquery selector的字符串。例如: $(".selector").droppable({ accept: '.special' }) 表示只接受具有special 样式的元素。 增强用户体验 前面是实现拖拽的功能,JQueryUI还有一些参数可以增强用户体验。比如,cursor参数可以指定鼠标指针的形状,cursorAt指定鼠标指针在source的相对位置,revert可以指定当drop失败时source“飘”回原来的位置。一个组合的例子如下: 复制代码代码如下: I revert when I'm not dropped Drop me here
游客2q7uranxketok 2021-02-20 15:50:07 0 浏览量 回答数 0

回答

拖拽原理 首先要明确几个概念。   ource:拖拽源,要拖动的元素。   taerget:拖放目标,能够放入source的容器。 拖拽的动作分解如下:   1. drag start:在拖拽源(source)上按下鼠标并开始移动   2. drag move: 移动过程中   3. drag enter: 移动进入目标(target)容器   4. drag leave: 移出目标(target)容器   5. drop: 在目标(target)容器上释放鼠标   6. drag end: 结束 在html5之前,页面元素不直接支持拖拽事件。所以都是通过监听鼠标事件并记录拖拽状态的方式来实现拖拽功能。 最简单的例子 最简单的拖拽是不改变元素所在的容器,而只改变其位置。例子如下: 复制代码代码如下: 拽我! 拖动到另一个容器 更常见的场景是将元素拖动到另一个容器中。这就需要在drop目标(target)容器上应用droppable函数。让我们在上一个例子的基础上,增加一个div作为容器,并应用droppable函数: 复制代码代码如下: 拽我! Drop here 事件监听和回显(Feedback) 运行上一个例子,你可能会产生疑惑,真的放到目标容器上了吗?用户也会产生同样的疑惑。所以,可以监听拖动过程中发生的一些事件,并用可见的方式让用户知道。这就叫做回显(Feedback)。 对于源(source),可以监听的事件包括:   create: 在source上应用draggable函数时触发   start:开始拖动时触发   drap:拖动过程中触发   stop:释放时触发 对于目标(target),可以监听的事件包括:   create: 在target上应用droppable函数时触发   activate:如果当前拖动的source可以drop到本target,则触发   deactivate:如果可以drop到本target的拖拽停止,则触发   over:source被拖动到target上面   out:source被拖动离开target   drop:source被释放到target 事件处理函数都是通过draggable和droppable函数的参数传递,在这些事件处理函数中就可以进行Feedback。看一下实际的例子: 复制代码代码如下: :-| Can drop! 复制拖动 前面的例子都是移动元素,另一种常见的场景是复制拖动。比如visio中的从画板中拖动元素到画布。这是通过draggable函数的helper参数设定的。 helper可以指定为“original”, "clone",其中"original"是默认值,即拖动自身,而clone表示创建自身的一个克隆用于拖拽。helper还可以指定为函数,该函数返回一个自定义的DOM元素用于拖拽。 当不是拖动自身的时候,需要在target上指定drop事件函数,在该函数中将特定的元素添加到target容器上,否则drop的时候什么事情都不会发生。 简单复制的例子如下: 复制代码代码如下: 拽我! 拖动控制 到目前位置,所有的例子中都可以对source随意拖动。在实际应用中经常需要对拖动行为进行控制。下面给出几个例子。 拖动方向 默认拖动方向为x,y两个方向。通过draggable的axis参数可以限制只能水平或竖直拖动。如下: 复制代码代码如下: -- | 拖动范围 除了方向之外,还可以通过containment参数约束拖动的范围。该参数接受Selector, Element, String, Array类型。其中String可以为parent,document,window,Array是指定一个矩形区域(regin)的四元数组:[x1,y1,x2,y2]。下面的例子分别指定了parent和regin作为范围限制: 复制代码代码如下: in parent in regin 拖动吸附 还可以在拖动的时候吸附到其他元素或网格。使用snap参数指定要吸附到的元素,使用grid参数指定吸附到网格,如下: 复制代码代码如下: 吸附到其他可拖拽元素 吸附到容器 吸附到网格(30x30) 拖动把手(handle) 默认是整个元素都可以拖动,也可以指定元素的某个子元素作为拖动的handle,如: 复制代码代码如下: handle …… Drop限制 默认的droppable指定元素能够接受所有的drop, 但是可以通过accept参数限定只能接受某些元素的drop。accept参数的类型为一个符合jquery selector的字符串。例如: $(".selector").droppable({ accept: '.special' }) 表示只接受具有special 样式的元素。 增强用户体验 前面是实现拖拽的功能,JQueryUI还有一些参数可以增强用户体验。比如,cursor参数可以指定鼠标指针的形状,cursorAt指定鼠标指针在source的相对位置,revert可以指定当drop失败时source“飘”回原来的位置。一个组合的例子如下: 复制代码代码如下: I revert when I'm not dropped Drop me here
游客2q7uranxketok 2021-02-20 15:49:40 0 浏览量 回答数 0

回答

拖拽原理 首先要明确几个概念。   ource:拖拽源,要拖动的元素。   taerget:拖放目标,能够放入source的容器。 拖拽的动作分解如下:   1. drag start:在拖拽源(source)上按下鼠标并开始移动   2. drag move: 移动过程中   3. drag enter: 移动进入目标(target)容器   4. drag leave: 移出目标(target)容器   5. drop: 在目标(target)容器上释放鼠标   6. drag end: 结束 在html5之前,页面元素不直接支持拖拽事件。所以都是通过监听鼠标事件并记录拖拽状态的方式来实现拖拽功能。 最简单的例子 最简单的拖拽是不改变元素所在的容器,而只改变其位置。例子如下: 复制代码代码如下: 拽我! 拖动到另一个容器 更常见的场景是将元素拖动到另一个容器中。这就需要在drop目标(target)容器上应用droppable函数。让我们在上一个例子的基础上,增加一个div作为容器,并应用droppable函数: 复制代码代码如下: 拽我! Drop here 事件监听和回显(Feedback) 运行上一个例子,你可能会产生疑惑,真的放到目标容器上了吗?用户也会产生同样的疑惑。所以,可以监听拖动过程中发生的一些事件,并用可见的方式让用户知道。这就叫做回显(Feedback)。 对于源(source),可以监听的事件包括:   create: 在source上应用draggable函数时触发   start:开始拖动时触发   drap:拖动过程中触发   stop:释放时触发 对于目标(target),可以监听的事件包括:   create: 在target上应用droppable函数时触发   activate:如果当前拖动的source可以drop到本target,则触发   deactivate:如果可以drop到本target的拖拽停止,则触发   over:source被拖动到target上面   out:source被拖动离开target   drop:source被释放到target 事件处理函数都是通过draggable和droppable函数的参数传递,在这些事件处理函数中就可以进行Feedback。看一下实际的例子: 复制代码代码如下: :-| Can drop! 复制拖动 前面的例子都是移动元素,另一种常见的场景是复制拖动。比如visio中的从画板中拖动元素到画布。这是通过draggable函数的helper参数设定的。 helper可以指定为“original”, "clone",其中"original"是默认值,即拖动自身,而clone表示创建自身的一个克隆用于拖拽。helper还可以指定为函数,该函数返回一个自定义的DOM元素用于拖拽。 当不是拖动自身的时候,需要在target上指定drop事件函数,在该函数中将特定的元素添加到target容器上,否则drop的时候什么事情都不会发生。 简单复制的例子如下: 复制代码代码如下: 拽我! 拖动控制 到目前位置,所有的例子中都可以对source随意拖动。在实际应用中经常需要对拖动行为进行控制。下面给出几个例子。 拖动方向 默认拖动方向为x,y两个方向。通过draggable的axis参数可以限制只能水平或竖直拖动。如下: 复制代码代码如下: -- | 拖动范围 除了方向之外,还可以通过containment参数约束拖动的范围。该参数接受Selector, Element, String, Array类型。其中String可以为parent,document,window,Array是指定一个矩形区域(regin)的四元数组:[x1,y1,x2,y2]。下面的例子分别指定了parent和regin作为范围限制: 复制代码代码如下: in parent in regin 拖动吸附 还可以在拖动的时候吸附到其他元素或网格。使用snap参数指定要吸附到的元素,使用grid参数指定吸附到网格,如下: 复制代码代码如下: 吸附到其他可拖拽元素 吸附到容器 吸附到网格(30x30) 拖动把手(handle) 默认是整个元素都可以拖动,也可以指定元素的某个子元素作为拖动的handle,如: 复制代码代码如下: handle …… Drop限制 默认的droppable指定元素能够接受所有的drop, 但是可以通过accept参数限定只能接受某些元素的drop。accept参数的类型为一个符合jquery selector的字符串。例如: $(".selector").droppable({ accept: '.special' }) 表示只接受具有special 样式的元素。 增强用户体验 前面是实现拖拽的功能,JQueryUI还有一些参数可以增强用户体验。比如,cursor参数可以指定鼠标指针的形状,cursorAt指定鼠标指针在source的相对位置,revert可以指定当drop失败时source“飘”回原来的位置。一个组合的例子如下: 复制代码代码如下: I revert when I'm not dropped Drop me here
游客2q7uranxketok 2021-02-20 15:50:18 0 浏览量 回答数 0

问题

我2017年的WordPress 的 SEO 优化经验分享

前言 自己用 WordPress 作为个人博客的 Web 程序差不多也有七八年了,中间也是积攒了非常多的使用经验,不过网站在搜索引擎收录这一个问题上差不多到 2017年 才摸索明白,这里也就...
妙正灰 2019-12-01 21:41:43 1693 浏览量 回答数 3

回答

HTML5究竟是什么? (注:目前网上介绍HTML5的文章都是千篇一律,譬如某个时间段发布某个版本,这种对于初学者或者从实用性角度来看,没有太多甚至完全不具备学习价值,只能说了解到它的出现时间,但是具体作用是什么呢?基本都是没有详细阐述,不少读者看完估计还是一头雾水的,因此笔者会用更加通俗易懂的话语,让各位能够知道HTML5究竟是什么) 首先HTML是定义了网页的结构,那么HTML5则是其不断更新的一部分。它目前有两个版本, 第一个是万维网联盟的5.2推荐标准(w3c) ,是为网页内容开发者设计的;第二个是浏览器开发者的 HTML 生活标准(HTML Living Standard) ,由微软网页超文本技术工作小组公司(WHATWG)维护。 HTML5引入了一些新的元素和属性,同时也是一个 W3C推荐标准。Web 应用程序以这些 HTML 元素为基础运行,同时包含了 HTML4和 XHTML,但是向后兼容以前的版本。另外,它与 PHP 更加兼容,新的 api 包括拖放、网络消息和网络存储、协议处理程序注册、微数据、画布、文本轨道和定时媒体播放,还有一个标准化的服务器发送事件自动更新和更好的浏览器支持,这些新的 api 为网页设计者提供了更好的控制。对于生活标准版本,新的 API 还包括地理定位、web 音频(Javascript 音频应用程序)、web RTC 和 web 加密 API。 这些元素和属性反映了现代网站的典型用法,其中包括超文本标记语言和对文档对象模型(DOM)脚本的新兴趣。HTML5语法还允许在文档内部使用 MathML,而 indexeddb将存储扩展到本地存储之外。并且从 HTML 4.01中删除了一些不推荐的元素,包括像 font 和 center 这样的纯表示元素,这些元素的效果早已被更强大的层叠样式表所取代。此外,DOM 脚本在 Web 行为中的重要性也得到了重新强调。 HTML5知识点有哪些? 经过前面的一些讲解,相信各位对HTML5已经有初步的认识,那么接下来我们将会正式探讨下,究竟有哪些知识点需要我们学习掌握的呢?(注:由于HTML5涵盖知识点较多,且本文属于入门级别的知识指南,不适宜进行全面深入地讲解,因此笔者筛选出了必须掌握的知识点,希望能够让初学者迅速入门) 知识点一:HTML5主体结构 <!doctype> 声明必须位于 HTML5 文档中首行,声明此为HTML5文档 标签限定了文档的开始点和结束点,内部包含文档头部和主体 标签用于定义文档的头部,内部的元素可以引用脚本或者样式表、提供元信息等等,并且描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等,绝大多数文档头部包含的数据都不会真正作为内容显示给读者。 标签声明使用utf-8编码 标签定义文档标题 定义文档的主体,内部包含文档的所有内容,比如文本、超链接、图像、表格和列表等等,均可展示给用户浏览器显示出来(注释除外) 以上就是HTML5主体结构的讲解,可能有细心地读者就会发现,有的标签是一个的,有的又是两个对称的,那么这是何解呢? 这里就引入一个知识点,通常情况下绝大多数标签都是双标签,也就是需要写成格式,但是也有的单标签也称为自闭合标签是不需要结束符的,如 等,那么这些标签具体用法又是如何呢?下面我们将会进行常用标签的讲解! 知识点二:HTML5常用标签 众所周知,HTML5简单点说就是由一个个标签组成的文档,既然如此我们就需要学习,每一个标签究竟代表着什么含义如何使用呢?(因为标签实在太多,倘若全部阐释一遍,怕初学者们嫌弃篇幅太长感到枯燥,或者是知识点太多很难吸收掌握,因此笔者精选出一些较为常用的标签进行讲解,对于标签可能有多个属性可以选择,笔者同样会挑选出较为常用属性进行讲解) 注:以下标签,笔者没有截效果图,建议初学者自主尝试 注释标签:在我们日常编写代码时候,为了日后方便自己查看或者是别人查阅,我们通常会在某些地方写上注释标签,里面内容不会展示给浏览器用户看到 阿里云开发者社区 链接标签:超链接跳转,把需要跳转的网址写到标签的href里面,然后在开始标签和结束标签之间可以写内容展示出去,当用户点击内容将会发生跳转 换行标签:换行作用,有的小伙伴可能看到这里会说,为什么我写也是有效果的呢?这种写法不能说错误只能说是老版本的规范,按照HTML4.0规范都需要按照XHTML的写法,也就是对于单标签都是采用加斜杠的写法(下同) 按钮 按钮标签:按钮上需要展示什么文字,可在开始标签和结束标签之间写入,现阶段若写静态网站用得较少,后期学JS制作动态网站或者做交互时候比较常用 内容 块级标签:标签本身没有特殊含义,那么在其里面可以写文本内容,或者是加入其它标签均可,凡是加入其内部所有东西都会被其所包裹,形成一个独立的块级区域并且独自占用一行(css可格式化) 标题 标题标签:用于定义标题,从h1至h6均可根据自身需求选择 分隔符标签:起到装饰分隔作用,默认显示为一条黑色的水平线 图片标签:展示图片,src里面放置图片的链接,然后有时候可能出现各种原因导致图片未能加载,那么系统会自动展示alt里面的文字内容 输入框标签:默认是输入框,当然其有多个属性可以选择,然后较为常用的是type属性,该属性又有多个值可供选择,如: password 用户输入任何文本内容均会显示为小圆点 checkbox 选择框 Button按钮 列表 列表标签:通常用于展示一列数据,而且数据所采用的css样式均相同,譬如导航栏、当然还有 有序列表不过较为少用 段落 段落标签:写在内部的一段文字将会被定义为一个段落 脚本标签:现阶段不会用到,等学习到js需要用到,初学者可在标签内部写js代码,随着学习深入可以采用外部写好js文件后导入 文字 脚本标签:通常需要搭配css样式进行使用,对部分内容进行样式修改 样式标签:现阶段不会用到,等学习到css需要用到,样式需要写在标签内部 HTML5入门知识指南 经过前面的一系列学习,相信各位已经初步掌握HTML5的使用,能够制作一些简单的界面了,当然对于学习能力较强或者有一定基础的同学,可以自主深入学习HTML5深层次的知识点,当能够熟练敲出你想要的界面时候,那建议开始学习CSS让界面变得更加美丽,笔者下期将会给各位带来CSS入门知识指南,欢迎大家踊跃参与学习,当然如果有童鞋看完本文,对于某些知识点还是不太明白,或者是对下一期学习有什么建议,欢迎各位在下方评论区留言哦,如果觉得笔者文章写得不错,那么也可以分享给朋友一起学习,咱们下期再见啦!
剑曼红尘 2020-03-03 17:56:06 0 浏览量 回答数 0

问题

Linux系统远程登录程序MobaXterm简明使用例子

看到云友远程登录Linux系统,使用的程序有 putty,XShell 等,我个人使用的是MobaXterm。各程序有各自的优点,这里我简要写一下MobaXterm的使用例子和一些优点...
dongshan8 2019-12-01 21:34:38 13618 浏览量 回答数 2

问题

Web设计与开发终极资源大全(上)报错 

Web 技术突飞猛进,Web 设计与开发者们可以选择的工具越来越多,Web 开发者的技巧不再只限于 HTML 和 服务器端编程,还需要精通各种第三方资源,这些第三方资源有时候比你的项目...
kun坤 2020-06-08 19:29:45 1 浏览量 回答数 1

问题

【云计算的1024种玩法】拥有一个自己的论坛

前言 当志同道合的人越来越多的时候,单纯的通过群聊很容易错过重要内容或者时不时的跳出群聊弄的非常烦躁。这时候论坛就是一个非常好的工具了,一天定时看一下论坛不怕错过什么重要的内容,也不会觉得心...
琴瑟 2019-12-01 21:14:32 2380 浏览量 回答数 2

问题

【分享】WeX5的正确打开方式(1)

        最近在研究WeX5,想在这里记录下使用过程中的点滴,今天先把之前已经掌握的分享一下。        WeX5官方的开发指南难度系数较大,面向的受众可能是已经敲过上万行代码的html5...
小太阳1号 2019-12-01 21:15:23 6117 浏览量 回答数 0

问题

用DzzOffice管理阿里云OSS

在DzzOffice中分两种方式管理阿里云OSS 1、把阿里云oss作为多人或企业的共享网盘使用。 2、接入个人的阿里云oss管理,可同时管理多个bucket,多个bucket之间可以互传文件。 下...
fhxsnabi 2019-12-01 22:03:30 15353 浏览量 回答数 3

问题

CKeditor七牛云JS SDK前端上传插件修改

新版CKeditor七牛云插件修改基于,CKeditor 4.6的源码,CKeditor新版支持从word复制内容直接上传了(IE9+),所以不需要之前的imag...
yahoo8 2019-12-01 20:57:38 4793 浏览量 回答数 0

回答

转自:思否 本文作者:Michael van der Gulik 原文链接:《Why WebAssembly is a big deal》 译者:敖小剑 WebAssembly 是每个程序员都应该关注的技术。WebAssembly 会变得更流行。 WebAssembly 将取代 JavaScript。WebAssembly 将取代 HTML 和 CSS。 WebAssembly 将取代手机应用。WebAssembly 将取代桌面应用。在 10 年内,我保证每个程序员至少需要知道如何使用工具来操作 WebAssembly 并理解它是如何工作的。 你可能会说,“太离谱了!” 好吧,请继续阅读。 什么是 WebAssembly 当前形式的 WebAssembly 是 Web 浏览器的新扩展,可以运行预编译代码…快速地。在 C ++ 中编写了一些小代码,然后使用 Emscripten 编译器将该代码编译为 WebAssembly。通过一些 Javascript 粘合,就可以在 Web 浏览器中调用这一小段代码,例如,运行粒子模拟。 WebAssembly 文件,扩展名为.wasm,本身是包含可执行指令的二进制格式。要使用该文件,必须编写一个运行某些 Javascript 的 HTML 文件来获取、编译和执行 WebAssembly 文件。WebAssembly 文件在基于堆栈的虚拟机上执行,并使用共享内存与其 JavaScript 包装器进行通信。 到目前为止,这似乎并不有趣。它看起来只不过是 JavaScript 的加速器。但是,聪明的读者会对 WebAssembly 可能成为什么有所了解。 WebAssembly 将成为什么? 第一个重要发现是 WebAssembly 是一个安全的沙盒虚拟机。可以从 Internet 运行喜欢的 WebAssembly 代码,而确保它不会接管 PC 或服务器。四个主流 Web 浏览器对它的安全性非常有信心,它已经默认实现并启用了。它的真正安全性还有待观察,但安全性是 WebAssembly 的核心设计目标。 第二个重要发现是 WebAssembly 是一个通用的编译目标。它的原始编译器是一个 C 编译器,这个编译器很好地指示了 WebAssembly 虚拟机的低级和可重定向性。许多编程语言都使用 C 语言编写虚拟机,其他一些语言甚至使用 C 本身作为编译目标。 此时,有人整理了一个可以编译为 WebAssembly 的编程语言列表。这份名单将在未来很多年中继续增长。 WebAssembly 允许使用任何编程语言编写代码,然后让其他人在任何平台上安全地运行该代码,无需安装任何内容。朋友们,这是美好梦想的开始。 部署问题 我们来谈谈如何将软件提供给用户。 为新项目选择编程语言的一个重要因素是如何将项目部署到客户。您的程序员喜欢用 Haskell,Python,Visual Basic 或其他语言编写应用程序,具体取决于他们的喜好。要使用喜欢的语言,他们需要编译应用,制作一些可安装的软件包,并以某种方式将其安装在客户端的计算机上。有许多方法可以提供软件 - 包管理器,可执行安装程序或安装服务,如 Steam,Apple App Store,Google Play 或 Microsoft store。 每一个安装机制都意味着痛苦,从应用商店安装时的轻微疼痛,到管理员要求在他的 PC 上运行一些旧的 COBOL 代码时的集群头痛。 部署是一个问题。对于开发人员和系统管理员来说,部署一直是一个痛点。我们使用的编程语言与我们所针对的平台密切相关。如果大量用户在 PC 或移动设备上,我们使用 HTML 和 Javascript。如果用户是 Apple 移动设备用户,我们使用……呃…… Swift?(我实际上不知道)。如果用户在 Android 设备上,我们使用 Java 或 Kotlin。如果用户在真实计算机上并且愿意处理掉他们的部署问题,那么我们开发人员才能在我们使用的编程语言中有更多选择。 WebAssembly 有可能解决部署问题。 有了 WebAssembly,您可以使用任何编程语言编写应用,只要这些编程语言可以支持 WebAssembly,而应用可以在任何设备和任何具有现代 Web 浏览器的操作系统上运行。 硬件垄断 想购买台式机或笔记本电脑。有什么选择?好吧,有英特尔,有 AMD。多年来一直是双寡头垄断。保持这种双寡头垄断的一个原因是 x86 架构只在这两家公司之间交叉许可,而且通常预编译的代码需要 x86 或 x86-64(也就是 AMD-64)架构。还有其他因素,例如设计世界上最快的 CPU 是一件很艰难但也很昂贵的事情。 WebAssembly 是一种可让您在任何平台上运行代码的技术(之一)。如果它成为下一个风口,硬件市场将变得商品化。应用编译为 WebAssembly,就可以在任何东西上运行 - x86,ARM,RISC-V,SPARC。即便是操作系统市场也会商品化;您所需要的只是一个支持 WebAssembly 的浏览器,以便在硬件可以运行时运行最苛刻的应用程序。 编者注:Second State 研发的专为服务端优化的 WebAssembly 引擎 SSVM 已经可以运行在高通骁龙芯片上。Github 链接:https://github.com/second-sta... 云计算 但等等,还有更多。云计算成为IT经理办公室的流行词已有一段时间,WebAssembly 可以直接迎合它。 WebAssembly 在安全沙箱中执行。可以制作一个容器,它可以在服务器上接受和执行 WebAssembly 模块,而资源开销很小。对于提供的每个服务,无需在虚拟机上运行完整的操作系统。托管提供商只提供对可以上传代码的WebAssembly 容器的访问权限。它可以是一个原始容器,接收 socket 并解析自己的 HTTP 连接,也可以是一个完整的 Web 服务容器,其中 WebAssembly 模块只需要处理预解析的HTTP请求。 这还不存在。如果有人想变得富有,那么可以考虑这个想法。 编者注:目前已经有人正在实现这个想法,Byte Alliance 计划将WebAssembly 带到浏览器之外,Second State 已经发布了为服务端设计的WebAssembly 引擎开发者预览版。 不是云计算 WebAssembly 足以取代 PC 上本地安装的大多数应用程序。我们已经使用 WebGL(又名OpenGL ES 2.0)移植了游戏。我预测不久之后,受益于WebAssembly,像 LibreOffice 这样的大型应用可以直接从网站上获得,而无需安装。 在这种情况下,在本地安装应用没什么意义。本地安装的应用和 WebAssembly 应用之间几乎没有区别。WebAssembly 应用已经可以使用屏幕,键盘和鼠标进行交互。它可以在 2D 或 OpenGL 中进行图形处理,并使用硬件对视频流进行解码。可以播放和录制声音。可以访问网络摄像头。可以使用 WebSockets。可以使用 IndexedDB 存储大量数据在本地磁盘上。这些已经是 Web 浏览器中的标准功能,并且都可以使用 JavaScript 向 WebAssembly 暴露。 目前唯一困难的地方是 WebAssembly 无法访问本地文件系统。好吧,可以通过 HTML 使用文件上传对话,但这不算。最终,总会有人为此创建 API,并可能称之为 “WASI”。 “从互联网上运行应用程序!?胡说八道!“,你说。好吧,这是使用 Qt 和 WebAssembly 实现的文本编辑器 (以及更多)。 这是一个简单的例子。复杂的例子是在 WebBrowser 中运行的 Adobe Premier Pro 或 Blender。或者考虑像 Steam 游戏一样可以直接从网络上运行。这听起来像小说,但从技术上说这并非不能发生。 它会来的。 让我们裸奔! 目前,WebAssembly 在包含 HTML 和 Javascript 包装器的环境中执行。为什么不脱掉这些?有了 WebAssembly,为什么还要在浏览器中包含 HTML 渲染器和 JavaScript 引擎? 通过为所有服务提供标准化 API,这些服务通常是 Web 浏览器提供的,可以创建裸 WebAssembly。就是没有 HTML和 Javascript 包装来管理的 WebAssembly。访问的网页是 .wasm 文件,浏览器会抓取并运行该文件。浏览器为WebAssembly 模块提供画布,事件处理程序以及对浏览器提供的所有服务的访问。 这目前还不存在。如果现在使用 Web 浏览器直接访问 .wasm 文件,它会询问是否要下载它。我假设将设计所需的 API 并使其工作。 结果是 Web 可以发展。网站不再局限于 HTML,CSS 和 Javascript。可以创建全新的文档描述语言。可以发明全新的布局引擎。而且,对于像我这样的 polyglots 最相关,我们可以选择任何编程语言来实现在线服务。 可访问性 但我听到了强烈抗议!可访问性怎么样??搜索引擎怎么办? 好吧,我还没有一个好的答案。但我可以想象几种技术解决方案。 一个解决方案是我们保留内容和表现的分离。内容以标准化格式编写,例如 HTML。演示文稿由 WebAssembly 应用管理,该应用可以获取并显示内容。这允许网页设计师使用想要的任何技术进行任意演示 - 不需要 CSS,而搜索引擎和需要不同类型的可访问性的用户仍然可以访问内容。 请记住,许多 WebAssembly 应用并不是可以通过文本访问的,例如游戏和许多应用。盲人不会从图像编辑器中获得太多好处。 另一个解决方案是发明一个 API,它可以作为 WebAssembly 模块,来提供想在屏幕上呈现的 DOM,供屏幕阅读器或搜索引擎使用。基本上会有两种表示形式:一种是在图形画布上,另一种是产生结构化文本输出。 第三种解决方案是使用屏幕阅读器或搜索引擎可以使用的元数据来增强画布。执行 WebAssembly 并在画布上呈现内容,其中包含描述渲染内容的额外元数据。例如,该元数据将包括屏幕上的区域是否是菜单以及存在哪些选项,或者区域是否想要文本输入,以及屏幕上的区域的自然排序(也称为标签顺序)是什么。基本上,曾经在 HTML 中描述的内容现在被描述为具有元数据的画布区域。同样,这只是一个想法,它可能在实践中很糟糕。 可能是什么 1995年,Sun Microsystems 发布了 Java,带有 Java applets 和大量的宣传。有史以来第一次,网页可以做一些比 和 GIF 动画更有趣的事情。开发人员可以使应用完全在用户的 Web 浏览器中运行。它们没有集成到浏览器中,而是实现为繁重的插件,需要安装整个 JVM。1995年,这不是一个小的安装。applets 也需要一段时间来加载并使用大量内存。我们现在凭借大量内存,这不再是一个问题,但在 Java 生命的第一个十年里,它让体验变得令人厌烦。 applets 也不可靠。无法保证它们会运行,尤其是在用户使用 Microsoft 的实现时。他们也不安全,这是棺材里的最后一颗钉子。 以 JVM 为荣,其他语言最终演变为在 JVM 上运行。但现在,那艘船航行了。 FutureSplash / Macromedia / Adobe Flash 也是一个竞争者,但是是专有的,具有专有工具集和专有语言的专有格式。我读到他们确实在2009年开启了文件格式。最终从浏览器中删除了支持,因为它存在安全风险。 这里的结论是,如果希望您的技术存在于每个人的机器上,那么安全性就需要正视。我真诚地希望 WebAssembly 作为标准对安全问题做出很好的反应。 需要什么? WebAssembly 仍处于初期阶段。它目前能很好的运行代码,而规范版本是 1.0,二进制格式定型。目前正在开展SIMD 指令支持。通过 Web Workers 进行多线程处理也正在进行中。 工具可用,并将在未来几年不断改进。浏览器已经让你窥视 WebAssembly 文件。至少 Firefox 允许查看WebAssembly 字节码,设置断点并查看调用堆栈。我听说浏览器也有 profiling 支持。 语言支持包括一套不错的语言集合–C,C++和Rust是一流的公民。C#,Go和Lua显然有稳定的支持。Python,Scala,Ruby,Java和Typescript都有实验性支持。这可能是一个傲慢的陈述,但我真的相信任何想要在21世纪存在的语言都需要能够在 WebAssembly 上编译或运行。 在访问外部设备的 API 支持方面,我所知道的唯一可用于裸 WebAssembly 的 API 是 WASI,它允许文件和流访问等核心功能,允许 WebAssembly 在浏览器外运行。否则,任何访问外部世界的 API 都需要在浏览器中的 Javascript 中实现。除了本地机器上的文件访问,打印机访问和其他新颖的硬件访问(例如非标准蓝牙或USB设备)之外,应用所需的一切几乎都可以满足。“裸WebAssembly”并不是它成功的必要条件; 它只是一个小的优化,不需要浏览器包含对 HTML,CSS 或 Javascript 的支持。 我不确定在桌面环境中让 WebAssembly 成为一等公民需要什么。需要良好的复制和粘贴支持,拖放支持,本地化和国际化,窗口管理事件以及创建通知的功能。也许这些已经可以从网络浏览器中获得; 我经常惊讶与已经可能的事情。 引发爆炸的火花是创建允许现有应用移植的环境。如果创造了“用于 WebAssembly 的 Linux 子系统”,那么可以将大量现有的开源软件移植到 WebAssembly 上。它需要模拟一个文件系统 - 可以通过将文件系统的所有只读部分都缓存为 HTTP 请求来完成,并且所有可写部分都可以在内存中,远程存储或使用浏览器可以提供的任何文件访问。图形支持可以通过移植 X11 或 Wayland 的实现来使用 WebGL(我理解已经作为 AIGLX 存在?)。 一些 SDL 游戏已经被移植到 WebAssembly - 最着名的是官方演示。 一旦 JVM 在 WebAssembly 中运行,就可以在浏览器中运行大量的 Java 软件。同样适用于其他虚拟机和使用它们的语言。 与 Windows 软件的巨大世界一样,我没有答案。WINE 和 ReactOS 都需要底层的 x86 或 x86-64 机器,所以唯一的选择是获取源代码并移植它,或者使用 x86 模拟器。 尾声 WebAssembly 即将到来。 它来得很慢,但现在所有的部分都可以在你正在使用的浏览器上使用。现在我们等待构建用于从各种编程语言中定位 WebAssembly 的基础设施。一旦构建完成,我们将摆脱 HTML,CSS 和 Javascript 的束缚。 加入阿里云钉钉群享福利:每周技术直播,定期群内有奖活动、大咖问答 阿里云开发者社区
茶什i 2020-01-07 10:32:35 0 浏览量 回答数 0

问题

原创部分转载Linux:NginxMySQLPHP环境下装wordpress

事后感慨一下:求人不如求己呀,在不懂什么是云服务器的情况下,鬼使神差的买了阿里云,在不懂什么是linux的情况下,莫名其妙的买了台Linux服务器。既然钱都花了ÿ...
queeny 2019-12-01 21:11:17 13913 浏览量 回答数 3

问题

移植到 Direct3D 11:报错 

图形处理 Graphic (Drawing & Animation) 1 绘制基本图形 2 使用位图绘制图像 3 实现三维效果 Windows8提供的动画 情节提要动画 关键帧动画 缓动函数动画 视觉状态的情节提要动画 Window...
kun坤 2020-06-04 21:07:16 6 浏览量 回答数 1

问题

我们一起来游戏 (四)——(AS3零基础做AIR卡牌网游):报错

小伙伴们一定都在想,楼主你不要掉胃口了,赶快来写点更实在的吧,这都好几天了,连个登录都没看到。别急,别急,小伙伴们我们一起来登录啊! 配置...
kun坤 2020-06-08 11:10:24 2 浏览量 回答数 1

回答

前言 这期我想写很久了,但是因为时间的原因一直拖到了现在,我以为一两天就写完了,结果从构思到整理资料,再到写出来用了差不多一周的时间吧。 你们也知道丙丙一直都是创作鬼才来的,所以我肯定不会一本正经的写,我想了好几个切入点,最后决定用一个完整的电商系统作为切入点,带着大家看看,我们需要学些啥,我甚至还收集配套视频和资料,暖男石锤啊,这期是呕心沥血之作,不要白嫖了。 正文 在写这个文章之前,我花了点时间,自己臆想了一个电商系统,基本上算是麻雀虽小五脏俱全,我今天就用它开刀,一步步剖析,我会讲一下我们可能会接触的技术栈可能不全,但是够用,最后给个学习路线。 Tip:请多欣赏一会,每个点看一下,看看什么地方是你接触过的,什么技术栈是你不太熟悉的,我觉得还算是比较全的,有什么建议也可以留言给我。 不知道大家都看了一下没,现在我们就要庖丁解牛了,我从上到下依次分析。 前端 你可能会会好奇,你不是讲后端学习路线嘛,为啥还有前端的部分,我只能告诉你,傻瓜,肤浅。 我们可不能闭门造车,谁告诉你后端就不学点前端了? 前端现在很多也了解后端的技术栈的,你想我们去一个网站,最先接触的,最先看到的是啥? 没错就是前端,在大学你要是找不到专门的前端同学,去做系统肯定也要自己顶一下前端的,那我觉得最基本的技术栈得熟悉和了解吧,丙丙现在也是偶尔会开发一下我们的管理系统主要是VUE和React。 在这里我列举了我目前觉得比较简单和我们后端可以了解的技术栈,都是比较基础的。 作为一名后端了解部分前端知识还是很有必要的,在以后开发的时候,公司有前端那能帮助你前后端联调更顺畅,如果没前端你自己也能顶一下简单的页面。 HTML、CSS、JS、Ajax我觉得是必须掌握的点,看着简单其实深究或者去操作的话还是有很多东西的,其他作为扩展有兴趣可以了解,反正入门简单,只是精通很难很难。 在这一层不光有这些还有Http协议和Servlet,request、response、cookie、session这些也会伴随你整个技术生涯,理解他们对后面的你肯定有不少好处。 Tip:我这里最后删除了JSP相关的技术,我个人觉得没必要学了,很多公司除了老项目之外,新项目都不会使用那些技术了。 前端在我看来比后端难,技术迭代比较快,知识好像也没特定的体系,所以面试大厂的前端很多朋友都说难,不是技术多难,而是知识多且复杂,找不到一个完整的体系,相比之下后端明朗很多,我后面就开始讲后端了。 网关层: 互联网发展到现在,涌现了很多互联网公司,技术更新迭代了很多个版本,从早期的单机时代,到现在超大规模的互联网时代,几亿人参与的春运,几千亿成交规模的双十一,无数互联网前辈的造就了现在互联网的辉煌。 微服务,分布式,负载均衡等我们经常提到的这些名词都是这些技术在场景背后支撑。 单机顶不住,我们就多找点服务器,但是怎么将流量均匀的打到这些服务器上呢? 负载均衡,LVS 我们机器都是IP访问的,那怎么通过我们申请的域名去请求到服务器呢? DNS 大家刷的抖音,B站,快手等等视频服务商,是怎么保证同时为全国的用户提供快速的体验? CDN 我们这么多系统和服务,还有这么多中间件的调度怎么去管理调度等等? zk 这么多的服务器,怎么对外统一访问呢,就可能需要知道反向代理的服务器。 Nginx 这一层做了反向负载、服务路由、服务治理、流量管理、安全隔离、服务容错等等都做了,大家公司的内外网隔离也是这一层做的。 我之前还接触过一些比较有意思的项目,所有对外的接口都是加密的,几十个服务会经过网关解密,找到真的路由再去请求。 这一层的知识点其实也不少,你往后面学会发现分布式事务,分布式锁,还有很多中间件都离不开zk这一层,我们继续往下看。 服务层: 这一层有点东西了,算是整个框架的核心,如果你跟我帅丙一样以后都是从事后端开发的话,我们基本上整个技术生涯,大部分时间都在跟这一层的技术栈打交道了,各种琳琅满目的中间件,计算机基础知识,Linux操作,算法数据结构,架构框架,研发工具等等。 我想在看这个文章的各位,计算机基础肯定都是学过的吧,如果大学的时候没好好学,我觉得还是有必要再看看的。 为什么我们网页能保证安全可靠的传输,你可能会了解到HTTP,TCP协议,什么三次握手,四次挥手。 还有进程、线程、协程,什么内存屏障,指令乱序,分支预测,CPU亲和性等等,在之后的编程生涯,如果你能掌握这些东西,会让你在遇到很多问题的时候瞬间get到点,而不是像个无头苍蝇一样乱撞(然而丙丙还做得不够)。 了解这些计算机知识后,你就需要接触编程语言了,大学的C语言基础会让你学什么语言入门都会快点,我选择了面向对象的JAVA,但是也不知道为啥现在还没对象。 JAVA的基础也一样重要,面向对象(包括类、对象、方法、继承、封装、抽象、 多态、消息解析等),常见API,数据结构,集合框架,设计模式(包括创建型、结构型、行为型),多线程和并发,I/O流,Stream,网络编程你都需要了解。 代码会写了,你就要开始学习一些能帮助你把系统变得更加规范的框架,SSM可以会让你的开发更加便捷,结构层次更加分明。 写代码的时候你会发现你大学用的Eclipse在公司看不到了,你跟大家一样去用了IDEA,第一天这是什么玩意,一周后,真香,但是这玩意收费有点贵,那免费的VSCode真的就是不错的选择了。 代码写的时候你会接触代码的仓库管理工具maven、Gradle,提交代码的时候会去写项目版本管理工具Git。 代码提交之后,发布之后你会发现很多东西需要自己去服务器亲自排查,那Linux的知识点就可以在里面灵活运用了,查看进程,查看文件,各种Vim操作等等。 系统的优化很多地方没优化的空间了,你可能会尝试从算法,或者优化数据结构去优化,你看到了HashMap的源码,想去了解红黑树,然后在算法网上看到了二叉树搜索树和各种常见的算法问题,刷多了,你也能总结出精华所在,什么贪心,分治,动态规划等。 这么多个服务,你发现HTTP请求已经开始有点不满足你的需求了,你想开发更便捷,像访问本地服务一样访问远程服务,所以我们去了解了Dubbo,Spring cloud。 了解Dubbo的过程中,你发现了RPC的精华所在,所以你去接触到了高性能的NIO框架,Netty。 代码写好了,服务也能通信了,但是你发现你的代码链路好长,都耦合在一起了,所以你接触了消息队列,这种异步的处理方式,真香。 他还可以帮你在突发流量的时候用队列做缓冲,但是你发现分布式的情况,事务就不好管理了,你就了解到了分布式事务,什么两段式,三段式,TCC,XA,阿里云的全局事务服务GTS等等。 分布式事务的时候你会想去了解RocketMQ,因为他自带了分布式事务的解决方案,大数据的场景你又看到了Kafka。 我上面提到过zk,像Dubbo、Kafka等中间件都是用它做注册中心的,所以很多技术栈最后都组成了一个知识体系,你先了解了体系中的每一员,你才能把它们联系起来。 服务的交互都从进程内通信变成了远程通信,所以性能必然会受到一些影响。 此外由于很多不确定性的因素,例如网络拥塞、Server 端服务器宕机、挖掘机铲断机房光纤等等,需要许多额外的功能和措施才能保证微服务流畅稳定的工作。 **Spring Cloud **中就有 Hystrix 熔断器、Ribbon客户端负载均衡器、Eureka注册中心等等都是用来解决这些问题的微服务组件。 你感觉学习得差不多了,你发现各大论坛博客出现了一些前沿技术,比如容器化,你可能就会去了解容器化的知识,像**Docker,Kubernetes(K8s)**等。 微服务之所以能够快速发展,很重要的一个原因就是:容器化技术的发展和容器管理系统的成熟。 这一层的东西呢其实远远不止这些的,我不过多赘述,写多了像个劝退师一样,但是大家也不用慌,大部分的技术都是慢慢接触了,工作中慢慢去了解,去深入的。 好啦我们继续沿着图往下看,那再往下是啥呢? 数据层: 数据库可能是整个系统中最值钱的部分了,在我码文字的前一天,刚好发生了微盟程序员删库跑路的操作,删库跑路其实是我们在网上最常用的笑话,没想到还是照进了现实。 这里也提一点点吧,36小时的故障,其实在互联网公司应该是个笑话了吧,权限控制没做好类似rm -rf 、fdisk、drop等等这样的高危命令是可以实时拦截掉的,备份,全量备份,增量备份,延迟备份,异地容灾全部都考虑一下应该也不至于这样,一家上市公司还是有点点不应该。 数据库基本的事务隔离级别,索引,SQL,主被同步,读写分离等都可能是你学的时候要了解到的。 上面我们提到了安全,不要把鸡蛋放一个篮子的道理大家应该都知道,那分库的意义就很明显了,然后你会发现时间久了表的数据大了,就会想到去接触分表,什么TDDL、Sharding-JDBC、DRDS这些插件都会接触到。 你发现流量大的时候,或者热点数据打到数据库还是有点顶不住,压力太大了,那非关系型数据库就进场了,Redis当然是首选,但是MongoDB、memcache也有各自的应用场景。 Redis使用后,真香,真快,但是你会开始担心最开始提到的安全问题,这玩意快是因为在内存中操作,那断点了数据丢了怎么办?你就开始阅读官方文档,了解RDB,AOF这些持久化机制,线上用的时候还会遇到缓存雪崩击穿、穿透等等问题。 单机不满足你就用了,他的集群模式,用了集群可能也担心集群的健康状态,所以就得去了解哨兵,他的主从同步,时间久了Key多了,就得了解内存淘汰机制…… 他的大容量存储有问题,你可能需要去了解Pika…. 其实远远没完,每个的点我都点到为止,但是其实要深究每个点都要学很久,我们接着往下看。 实时/离线/大数据 等你把几种关系型非关系型数据库的知识点,整理清楚后,你会发现数据还是大啊,而且数据的场景越来越多多样化了,那大数据的各种中间件你就得了解了。 你会发现很多场景,不需要实时的数据,比如你查你的支付宝去年的,上个月的账单,这些都是不会变化的数据,没必要实时,那你可能会接触像ODPS这样的中间件去做数据的离线分析。 然后你可能会接触Hadoop系列相关的东西,比如于Hadoop(HDFS)的一个数据仓库工具Hive,是建立在 Hadoop 文件系统之上的分布式面向列的数据库HBase 。 写多的场景,适合做一些简单查询,用他们又有点大材小用,那Cassandra就再合适不过了。 离线的数据分析没办法满足一些实时的常见,类似风控,那Flink你也得略知一二,他的窗口思想还是很有意思。 数据接触完了,计算引擎Spark你是不是也不能放过…… 搜索引擎: 传统关系型数据库和NoSQL非关系型数据都没办法解决一些问题,比如我们在百度,淘宝搜索东西的时候,往往都是几个关键字在一起一起搜索东西的,在数据库除非把几次的结果做交集,不然很难去实现。 那全文检索引擎就诞生了,解决了搜索的问题,你得思考怎么把数据库的东西实时同步到ES中去,那你可能会思考到logstash去定时跑脚本同步,又或者去接触伪装成一台MySQL从服务的Canal,他会去订阅MySQL主服务的binlog,然后自己解析了去操作Es中的数据。 这些都搞定了,那可视化的后台查询又怎么解决呢?Kibana,他他是一个可视化的平台,甚至对Es集群的健康管理都做了可视化,很多公司的日志查询系统都是用它做的。 学习路线 看了这么久你是不是发现,帅丙只是一直在介绍每个层级的技术栈,并没说到具体的一个路线,那是因为我想让大家先有个认知或者说是扫盲吧,我一样用脑图的方式汇总一下吧,如果图片被平台二压了。 资料/学习网站 Tip:本来这一栏有很多我准备的资料的,但是都是外链,或者不合适的分享方式,博客的运营小姐姐提醒了我,所以大家去公众号回复【路线】好了。 絮叨 如果你想去一家不错的公司,但是目前的硬实力又不到,我觉得还是有必要去努力一下的,技术能力的高低能决定你走多远,平台的高低,能决定你的高度。 如果你通过努力成功进入到了心仪的公司,一定不要懈怠放松,职场成长和新技术学习一样,不进则退。 丙丙发现在工作中发现我身边的人真的就是实力越强的越努力,最高级的自律,享受孤独(周末的歪哥)。 总结 我提到的技术栈你想全部了解,我觉得初步了解可能几个月就够了,这里的了解仅限于你知道它,知道他是干嘛的,知道怎么去使用它,并不是说深入了解他的底层原理,了解他的常见问题,熟悉问题的解决方案等等。 你想做到后者,基本上只能靠时间上的日积月累,或者不断的去尝试积累经验,也没什么速成的东西,欲速则不达大家也是知道的。 技术这条路,说实话很枯燥,很辛苦,但是待遇也会高于其他一些基础岗位。 所实话我大学学这个就是为了兴趣,我从小对电子,对计算机都比较热爱,但是现在打磨得,现在就是为了钱吧,是不是很现实?若家境殷实,谁愿颠沛流离。 但是至少丙丙因为做软件,改变了家庭的窘境,自己日子也向小康一步步迈过去。 说做程序员改变了我和我家人的一生可能夸张了,但是我总有一种下班辈子会因为我选择走这条路而改变的错觉。 我是敖丙,一个在互联网苟且偷生的工具人。 创作不易,本期硬核,不想被白嫖,各位的「三连」就是丙丙创作的最大动力,我们下次见! 本文 GitHub https://github.com/JavaFamily 已经收录,有大厂面试完整考点,欢迎Star。 该回答来自:敖丙
剑曼红尘 2020-03-06 11:35:37 0 浏览量 回答数 0

问题

请js大神帮抓bug,愿发200元红包:图片被拖动后莫名其妙影响其它相邻图片的大小? 400 报错

请js大神帮抓bug,愿发200元红包:图片被拖动后莫名其妙影响其它相邻图片的大小? 400 报错 已在一品威客网站发布任务,请搜索“解决图片被拖动后莫名其妙影响其它相邻图片的大小”࿰...
爱吃鱼的程序员 2020-06-03 15:46:30 3 浏览量 回答数 1

云产品推荐

上海奇点人才服务相关的云产品 小程序定制 上海微企信息技术相关的云产品 国内短信套餐包 ECS云服务器安全配置相关的云产品 开发者问答 阿里云建站 自然场景识别相关的云产品 万网 小程序开发制作 视频内容分析 视频集锦 代理记账服务 阿里云AIoT 阿里云科技驱动中小企业数字化