【中兴】web训练营~一文带你走进前端 | 百图制作

news2024/11/19 7:41:07

在这里插入图片描述

📢作者简介：物联网领域创作者，🏅阿里云专家博主🏅 🏅华为云享专家🏅
✒️个人主页：Choice~
🌐格言：可正因为难，才有价值！🔶

🏫系列专栏：
1️⃣ C/C++
2️⃣ C和指针
3️⃣ Linux
4️⃣ 数据结构与算法
5️⃣ JavaScript从入门到精通
6️⃣ 101算法JavaScript描述💰

文章目录

  • 1.介绍
    • 1.1 开发语言
    • 1.2为什么选择这些？
    • 1.3为什么学？
    • 1.4是什么？
  • 2.HTML
    • 2.1.创建项目文件
    • 2.2.我的第一个网页
  • 3.HTML
    • 3.1.语法
      • 开始和结束
      • 闭合标签
      • 注释
      • 框架
    • 3.2.文字
      • 标题
      • 段落
    • 3.3.图片
      • 路径
    • 3.4.音频
    • 3.5.视频
    • 3.6.链接
      • 外链
      • 内链
      • 锚点
  • 我的网页设计

image-20220625215019496

1.介绍

实训的项目为博雅互动企业网站，教程的方式也是以实战而编写的，也是一些常用到的，完成项目足矣~现在我们来选择吃饭的家伙：

  • 浏览器：我推荐这两个：chrome和edge,这两个浏览器大致相同，也是社会主流，而我这里是edge

  • 开发工具：Vscode和Hbuilder我用Hbuilder，为什么呢？因为Vscode后面也是需要Hbuilder的插件，我这里很干脆利落。

  • 开发语言：制作这个项目只需用到HTML，CSS，JavaScript。

    1.1 开发语言

    • 我们前面介绍的HTML必备

    • CSS:网页中样式/外观/美化jua

      我们看看小米网站，给人一种舒服的感觉image-20220626072254216

      删掉CSS之后，没有了上面好看

      image-20220626072924009我们发现网络不流畅也会出现这种情况，没加载出CSS的原因

    • JavaScript:网页中行为/交互/动效：可以点击下一张，进行人点击下一个机器执行下一个的交互行为

      image-20220626073448513

      右下禁用JS后，怎么点击也不管用了

      image-20220626073918260

      再看一组，没有勾选禁用JavaScript

      image-20220626074214525

      禁用后的

      image-20220626074246378

    JS和CSS他们之间的关系缺一都可以，没js我可以纯静态展示，缺CSS 美观也够看，但是缺HTML，JS和CSS就没用了。例如：房子，地基最重要，没了地基上面的都是摆设。

    1.2为什么选择这些？

    拿HTML来说，大家可能会有疑虑，我来一一解决；

    image-20220625221452429

  1. 单词恐惧：HTML英文单词也就七八个，很多都是文档格式，比如：

    是标题，

    段落，图片 ,音频，英文意思是身体，它在里面，等等…有很多都是见名知意的存在。

    图1

  2. 要不要背：完全不需要，看上图，这是默认的HTML最初语法，仔细看，很多都是有闭合标签像：,"/"表示闭合标签，后面还会详细讲到，不懂完全🆗。

  3. 难不难：我们看一个百度百科页面，我们看到有上千行代码，仔细看看，其实他们都有很多重复的，都是不断的以重载方式编写，所以，很简单！

    image-20220625223343378

1.3为什么学？

所以的企业招聘web开发工程师都是从下面所选择的

  • 前端开发岗位必备能力 ：可以看到下面这张应聘广告，取自boos直聘一家华为技术有限公式对前端的要求；还有很多，可以自己去网上看看。

    image-20220625224709242

  • 从事互联网行业都需要懂：拿网络来讲，下图1看到有个IP地址【112.80.248.76】，有人会问，这是什么？image-20220625225239762

    我们拿IP 112.80.248.76到网站上在域名那里输入就会发现可以直达百度百科页面，这是IP

    image-20220625225644704

    这是https://www.baidu.com域名《—而你也可以点击这里直达到百度

    image-20220625230509293

    然后又会说，这个这个有什么关系呢？我们再来看，我的只有域名（可以改，可永久使用），没有单独的IP（不能手动改，连接网络产生新的IP），是不是发现IP搜索起来很麻烦，不易记，而你看上面一张图域名 https:// 可以，但为什么?学了前端就知道了。

    image-20220625230114831

  • 职业发展，职业晋级

  • 了解产品开发原理：和移动开发做app，比如安卓应用和苹果应用，产品原理都是一样的，当你学了HTML后，了解到了互联网底层怎么做到的事情，其实你也知道了前面百度IP和域名讲了一些原理，后面会慢慢知晓。

1.4是什么？

我们把它一一分解：

  1. 超文本标记语言：（Hyper Text Markup Language）简写HTML

  2. 超：图片、音频、视频、链接（淘宝网页无非就是这些）

    image-20220626065907789

  3. 文本：文本

  4. 标记：单词、描述东西

  5. 语言：一门语言

  6. 网页中的结构：知道网页上的结构，你就可以随心所欲的修改任何数据了，不需要通过PS篡改内容

    image-20220626071545376

所以HTNML当中它是带有图片，音频，视频，链接文本的一门描述性的语言

2.HTML

复制的时候，有的复制还收费，随便一篇电子书，我们是复制不了的image-20220626080445357

我们试着使用再域名前面加 read：意思是进入到阅读模式

image-20220626080549542

回车，然后可以复制和朗读了

image-20220626080802914

[还可以下载音乐]((11条消息) 利用浏览器开发者工具下载歌曲_吃饭了～的博客-CSDN博客_网页f12下载歌曲)我的用QQ音乐来实验，首先F12，打开开发者，在网页菜单栏选择网络，然后子菜单就选择媒体（这种操作主要是在元素查找.mp3查询不到的另一种方法）

image-20220626091940650

2.1.创建项目文件

我们创建一个项目，

image-20220626075432164

创建成功

image-20220626081424380

然后在test项目右击 新建-》选8.html文件

image-20220626081516952

我的HTML名为test.html，模板选择默认的-》创建

image-20220626081715408

创建好了之后，就是下图，因为我们选择模块的时候是默认的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
	</body>
</html>

所以它会给我们写好的html结构，如果想自己敲可以在上图的时候选择空白文件。

2.2.我的第一个网页

紧接上面的操作，我们在写一个hello world 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        
		hello world!
        
	</body>
</html>

image-20220626082744990

这个*提示没有保存，Ctrl+s或者点击左上角菜单文件保存，看效果

image-20220626083133703

如果你的预览会出错，应该是没网络的原因，没有安装相应的插件，有个临时的方法，就是在项目test右击

image-20220626083800766

看结果

image-20220626083847179

3.HTML

3.1.语法

开始和结束

打招呼第一句:<吃了吗?> 以 </吃了吗?>结束（有个/）

<吃了吗？>
	<找女朋友吗？></找女朋友了吗？>
		<你也没人要吗?></你也没人要吗?>
</吃了吗？>

这就是HTML的一个对话，有开始就要有结束；以成对方式出现

闭合标签

但是有几个是没有结束标签，比如和，有的人看到了可能会觉得，啊~这有的要，有的不要，好乱呐；放心，像下面这些，很少标签是不用加的。

image-20220626094252058

<!DOCTYPE html><!-- 声明一个HTML5的文件 -->

注释

行注释：<!-- 声明一个HTML5的文件 -->
多行注释：<!-- 	
		注释内容
		-->

image-20220626100207144

注释在网页里面是看不到的，所以😏；下图是百度的网页，它也有注释需要打开源代码检查控制台才能看到

image-20220626101037868

框架

我们来实验一下，看看title的效果

image-20220626102244214

源代码及注释：

<!-- 注释内容 快捷键Ctr+/ -->
<!DOCTYPE html><!-- 声明一个HTML5的文件 -->
<html>	<!-- 开始html -->
	<head>	<!-- 网页头部 -->
		<meta charset="utf-8">  <!--翻译官-->
		<title>百度两下</title><!-- 名字 -->
	</head>	<!-- 结束头部 -->
	<body>
		hello world
	<!-- Ctrl+s 保存 -->
	</body>
</html><!-- 结束html -->

3.2.文字

思维导图：

image-20220626111725162

标题

h1一级标题

<h1 >古诗</h1>

效果：

image-20220626104123326

段落

<p>
		锄禾日当午，汗滴禾下土
		谁之盘中餐，粒粒皆辛苦
</p>

文字加粗倾斜效果，作用都一样，建议使用加粗和倾斜，而&nbsp；是空格的含义

image-20220626113338537

3.3.图片

思维导图image-20220626111634399

<img src"图片路径">

我们可以用tab补全，或者选择下面的预选

image-20220626105336134

我们看到图片太大，都看不到了

image-20220626105809185

加入参数修改图片参数大小【宽weight】，【高height】，😃可以看个够了

image-20220626110322894

还有一些很好的提示参数：alt，图片出错，有是网络慢，还有就是图片路径不正确（这里就是路径问题）

image-20220626110827979

还有一个不常用的属性，title，查看更多

image-20220626111459137

路径

HTML有2种路径的写法：相对路径和绝对路径。

如何正确引用一个文件。比如，怎样在一个HTML网页中引用另外一个HTML网页作为超链接(hyperlink)？怎样在一个网页中插入一张图片？…

如果你在引用文件时(如加入超链接，或者插入图片等)，使用了错误的文件路径，就会导致引用失效(无法浏览链接文件，或无法显示插入的图片等)。

  • 相对路径：是从当前路径开始的路径，假如当前路径为E:\Html\test\img要描述上述路径，只需输入xjj.webp

    image-20220626112922453

  • 绝对路径：是从盘符开始的路径，形如

    E:\Html\test\img

    HTML的绝对路径指带域名的文件的完整路径。表示源文件所在目录的上上级目录，以此类推。正确地引用文件，我们需要学习一下HTML路径。[详细点解这](相对路径_百度百科 (baidu.com))

    image-20220626112703028

    有时候我们是会把它们放到文件里

    image-20220626152356410我们看下图，我需要查看图片，我要点开img，我要在代码中怎么表示呢

    image-20220626152620918

    看图，在图形化界面中的步骤是：上一步->进入到img文件，命令行就是…/img，如果在很多文件夹的下面，可以使用多个…/形式进行上一步操作

    image-20220626152954241

    还有一种情况，相当简单，直接进入到img文件就行

    image-20220626153446508

3.4.音频

image-20220626125431839

<audio src="音频地址"  controls="controls"></audio>

音频名字用英文，虽然在本机上不会出现问题，但是在服务器上却会出错。音频它播放需要一个控件【controls=“controls”】,看图

image-20220626123524150

3.5.视频

视频的语法和音频一样，可以给它们加入宽高属性

<video src="an.mp4" ></video>

image-20220626131035080

3.6.链接

链接就是从一个网页跳转到另一个网页，或者从开头直达结尾这么一个跳转效果

image-20220626154443719

语法：
<a href="链接地址"></a>

外链

image-20220626155009514

没显示原因是因为没有给个提示：

image-20220626155352961

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>这是A页面</h1>
		
		<a href="https://www.baidu.com">点我去百度</a>
	</body>
</html>

发现只要写其它网页的链接地址就（我这里是baidu，也可以是京东…）可以访问到其它服务器上的网页，

内链

然后我们再试试访问本机服务器的内容：

image-20220626160308629

如果我需要让它们相互跳转可以在B.html中写入A.html的链接：

image-20220626160630717

既然可以放网页链接，那可不可以放图片或者视频链接？答案是：可以。

image-20220626161731394

源代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>这是B页面</h1>
		<img src="图片地址" width="100px">
		<br>
		<a href="链接地址">链接</a>
	</body>
</html>

image-20220626162458642

如果我想要多个链接怎么办？我们可以把需要链接的放入到链接结束之前：

image-20220626162934016

看鼠标由箭头变成一个手指，说明链接的区域可以点解的。还有就是打开链接是新窗口打开

还是自身的一个打开方式，默认的是自身打开target=“__self”

<a href="B.html" target="_blank">去B</a>

image-20220626165612744

锚点

目录为什么可以这样跳呢，原理就是锚点

image-20220626170206573

我直接拿网页源代码看看，第一步：设置锚点，链接写入ID

image-20220626170957423

语法：
<a href="#1"> 跳转到结尾</a>

第二步：元素加上对应ID名字

p是个段落，加上ID名字
<p id="1">我是结尾</p>

image-20220626171208258

然后看看结果

image-20220626171642093

我们也可以自己在结尾加个链接跳转到目录，顺序相反；我这里是

段落，也可以在或。

想要源代码自己试一下，这些内容都是为了制造滚动条，不然看不到效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="#1"> 跳转到结尾</a>
		<p>我是p6月25日，海口一男生高考取得900分成绩，被清华北大联系录取，引发人们的关注。这位男生高考查分时，捂住屏幕不敢看，当看到自己的高考成绩为900分时，家人欢呼雀跃。面对两大顶尖学府的邀请，他会做出什么样的选择呢？
6月25日，海口一男生高考取得900分成绩，被清华北大联系录取，引发人们的关注。这位男生高考查分时，捂住屏幕不敢看，当看到自己的高考成绩为900分时，家人欢呼雀跃。面对两大顶尖学府的邀请，他会做出什么样的选择呢？6月25日，海口一男生高考取得900分成绩，被清华北大联系录取，引发人们的关注。这位男生高考查分时，捂住屏幕不敢看，当看到自己的高考成绩为900分时，家人欢呼雀跃。面对两大顶尖学府的邀请，他会做出什么样的选择呢？6月25日，海口一男生高考取得900分成绩，被清华北大联系录取，引发人们的关注。这位男生高考查分时，捂住屏幕不敢看，当看到自己的高考成绩为900分时，家人欢呼雀跃。面对两大顶尖学府的邀请，他会做出什么样的选择呢？6月25日，海口一男生高考取得900分成绩，被清华北大联系录取，引发人们的关注。这位男生高考查分时，捂住屏幕不敢看，当看到自己的高考成绩为900分时，家人欢呼雀跃。面对两大顶尖学府的邀请，他会做出什么样的选择呢？6月25日，海口一男生高考取得900分成绩，被清华北大联系录取，引发人们的关注。这位男生高考查分时，捂住屏幕不敢看，当看到自己的高考成绩为900分时，家人欢呼雀跃。面对两大顶尖学府的邀请，他会做出什么样的选择呢？6月25日，海口一男生高考取得900分成绩，被清华北大联系录取，引发人们的关注。这位男生高考查分时，捂住屏幕不敢看，当看到自己的高考成绩为900分时，家人欢呼雀跃。面对两大顶尖学府的邀请，他会做出什么样的选择呢？
<img src="../img/xjj.webp">
6月25日，海口一男生高考取得900分成绩，被清华北大联系录取，引发人们的关注。这位男生高考查分时，捂住屏幕不敢看，当看到自己的高考成绩为900分时，家人欢呼雀跃。面对两大顶尖学府的邀请，他会做出什么样的选择呢？6月25日，海口一男生高考取得900分成绩，被清华北大联系录取，引发人们的关注。这位男生高考查分时，捂住屏幕不敢看，当看到自己的高考成绩为900分时，家人欢呼雀跃。面对两大顶尖学府的邀请，他会做出什么样的选择呢？6月25日，海口一男生高考取得900分成绩，被清华北大联系录取，引发人们的关注。这位男生高考查分时，捂住屏幕不敢看，当看到自己的高考成绩为900分时，家人欢呼雀跃。面对两大顶尖学府的邀请，他会做出什么样的选择呢？6月25日，海口一男生高考取得900分成绩，被清华北大联系录取，引发人们的关注。这位男生高考查分时，捂住屏幕不敢看，当看到自己的高考成绩为900分时，家人欢呼雀跃。面对两大顶尖学府的邀请，他会做出什么样的选择呢？6月25日，海口一男生高考取得900分成绩，被清华北大联系录取，引发人们的关注。这位男生高考查分时，捂住屏幕不敢看，当看到自己的高考成绩为900分时，家人欢呼雀跃。面对两大顶尖学府的邀请，他会做出什么样的选择呢？l
</p>
		<br><br>
		<br>
		<audio src="../mp3/yy.mp3" controls="controls"></audio>>

		
		<p id="1">我是结尾</p>
	</body>
</html>

我的网页设计

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Linux 使用Nginx部署web(vue、react)项目

Linux 使用Nginx部署web(vue、react)项目

前言 本文基于&#xff1a;操作系统 CentOS 7.6 使用的工具&#xff1a;Xshell7、Xftp7 1.安装所需依赖 安装gcc yum -y install gcc安装pcre、pcre-devel yum -y install pcre pcre-devel安装zlib、zlib-devel yum install -y zlib zlib-devel安装openssl、openssl-dev…
阅读更多...
【uni-app】点击左上角返回按钮，弹出弹窗或者是携带参数返回上一页

【uni-app】点击左上角返回按钮，弹出弹窗或者是携带参数返回上一页

目录 1、弹出弹窗 2、把这一页的数据带回到上一页&#xff08;获取下一页的数据 &#xff09; 3、跳转页面并携带参数&#xff0c;接受页获取参数 1、弹出弹窗 当我返回上一页的时候需要做一个判断是否需要保存 onBackPress 只支持APP和H5 但不支持小程序 &#xff0c;可以…
阅读更多...
Java web—访问http://localhost:8080/xx/xx.jsp报404错误问题

Java web—访问http://localhost:8080/xx/xx.jsp报404错误问题

由于我们在eclipse ee中把项目部署在web端经常会出现报404错误。 原因为&#xff1a; 404状态码是一种http状态码&#xff0c;其意思是&#xff1a; 所请求的页面不存在或已被删除。通俗的讲就是当用户输入了错误的链接时&#xff0c;返回的页面。 以下描述几种情况&#xff1a…
阅读更多...
IDEA从零到精通（24）之lombok插件的安装与使用

IDEA从零到精通（24）之lombok插件的安装与使用

文章目录作者简介引言导航概述安装插件使用小结导航热门专栏推荐作者简介 作者名&#xff1a;编程界明世隐 简介&#xff1a;CSDN博客专家&#xff0c;从事软件开发多年&#xff0c;精通Java、JavaScript&#xff0c;博主也是从零开始一步步把学习成长、深知学习和积累的重要性…
阅读更多...
【Vue】 组件封装

【Vue】 组件封装

目录1 组件封装1.1 全局注册1.2 局部注册1.2.1 命名1.2.2 引用组件1.2.2.1 传统写法1.2.2.2 setup1.2.2.3 easycom1.3 父子组件间的数据传递1.3.1 子组件 data() 中设置数据1.3.2 父组件通过 prop 将数据传递给子组件1.3.3 子组件不能直接修改 prop 中的值1.3.4 子组件通过 emi…
阅读更多...
Pinia中action使用详解

Pinia中action使用详解

actions的使用 动作相当于组件中的方法。它们可以使用actionsin 属性进行定义。 并且在pinia中的action既可以有同步函数也可以有异步函数。 在actions中可以通过this访问该仓库所有实例 export const useUsers defineStore(users,{state:()>{userData:null},actions:{a…
阅读更多...
【SpringMVC】集成Web、MVC执行流程、数据响应、数据交互

【SpringMVC】集成Web、MVC执行流程、数据响应、数据交互

文章目录前言一.Spring集成Web二.对于SpringMVC的理解三.MVC执行流程&#xff08;&#x1f3f3;️‍&#x1f308;&#xff09;1.组件解析2.RequestMapping四.SpringMVC数据响应页面跳转回写数据五.SpringMVC获得请求数据前言 SpringMVC确实很麻烦&#xff0c;零碎的点太多 一…
阅读更多...
小程序自定义tabbar导航栏、动态控制tabbar功能实现(uniapp)

小程序自定义tabbar导航栏、动态控制tabbar功能实现(uniapp)

uniapp开发小程序&#xff0c;不同角色/已登录未登录&#xff0c;都有不一样的底部导航栏&#xff0c;这些情况下就需要自行定义tabbar&#xff0c;从而实现动态tabbar的实现。 1.首先我们需要在pages.json配置tabbar 我这里并没有开启custom(自定义)&#xff0c;不开启的话&a…
阅读更多...
vue实现思维导图

vue实现思维导图

介绍 前景&#xff1a; 仿幕布实现思维导图效果 技术实现&#xff1a;jsmind 完整代码&#xff1a;vue-jsmind 参考文章&#xff1a; 在vue中使用jsmind组织架构或思维导图 实现效果&#xff1a; 功能描述&#xff1a; 编辑、删除、插入、拖拽、展开/收起节点分布结构切换…
阅读更多...
数字IC前端面试问题总结

数字IC前端面试问题总结

本篇主要参考了 1、新芯设计(3条消息) 新芯设计的博客_CSDN博客-如何成为一名高级数字 IC 设计工程师,数字 IC 技能拓展,基于 SoC 的卷积神经网络车牌识别系统设计领域博主 2、小汪的IC自习室 (3条消息) 小汪的IC自习室的博客_CSDN博客-数字IC设计,SystemVerilog & I…
阅读更多...
前端使用xlsx插件读取excel文件数据（保姆级教程）

前端使用xlsx插件读取excel文件数据（保姆级教程）

本人属于一个实习菜鸟&#xff0c;大神请谨慎阅读............ 在开发过程中&#xff0c;难免会碰到用前端来处理excel文件的需求&#xff0c;我们需要解析出excel文件的内容然后在以对象的形式展示或者与后端对接 功能的实现思路&#xff1a; 文件选择 > FileReader对象…
阅读更多...
微信小程序中使用vant框架，方法步骤清晰，简单适用

微信小程序中使用vant框架，方法步骤清晰，简单适用

1.说到vant框架相信大家应该并不陌生了吧&#xff0c;做过移动端开发的小伙伴们应该都知道它吧。 2.Vant 是有赞前端团队开源的移动端组件库&#xff0c;于 2017 年开源&#xff0c;已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务&#xff0c;对外服务十多万开发者&am…
阅读更多...
Vue 权限菜单（动态路由）详解

Vue 权限菜单（动态路由）详解

今天记录一下Vue的权限菜单&#xff08;动态路由&#xff09;&#xff0c;在我们写后台的时候用的比较多&#xff0c;Vue的权限菜单分两种&#xff0c;一种是通过本地进行&#xff0c;根据账号的权限进行筛选出可用的权限&#xff0c;组合菜单并在页面上渲染显示&#xff0c;另…
阅读更多...
Vue3 从入门到放弃 （第一篇.环境准备）

Vue3 从入门到放弃 （第一篇.环境准备）

什么是 Vue&#xff1f;# Vue (发音为 /vjuː/&#xff0c;类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建&#xff0c;并提供了一套声明式的、组件化的编程模型&#xff0c;帮助你高效地开发用户界面。无论是简单还是复杂的…
阅读更多...
uniapp-路由uni-simple-router

uniapp-路由uni-simple-router

背景 专为uniapp打造的路由器&#xff0c;和uniapp深度集成通配小程序、App和H5端H5能完全使用vue-router开发模块化、查询、通配符、路由参数使 uni-app实现嵌套路由&#xff08;仅H5端完全使用vue-router&#xff09;uniapp用到了很多vue的api&#xff0c;但在路由管理的功能…
阅读更多...
vue 上传文件和下载文件

vue 上传文件和下载文件

vue 上传文件和下载文件1. 上传文件2. 下载文件1. 上传文件 上传文件我所使用的组件是element ui 的 el-upload&#xff0c;我一共进行了如下两步&#xff0c;第一步&#xff1a;修改样式&#xff0c;因为el-upload的样式不是我所要的&#xff0c;我想要这种的 代码如下 <…
阅读更多...
【Vue 项目】使用 vuedraggable 实现拖拽效果时遇到的问题及解决方案总结（允许 el-table 行拖拽、部分元素不允许拖拽、拖拽避免影响文字复制和输入框输入文字）

【Vue 项目】使用 vuedraggable 实现拖拽效果时遇到的问题及解决方案总结（允许 el-table 行拖拽、部分元素不允许拖拽、拖拽避免影响文字复制和输入框输入文字）

由于在自己的工作和学习过程中&#xff0c;只查看某个大佬的教程或文章无法满足自己的学习需求和解决遇到的问题&#xff0c;所以自己在追赶大佬们步伐的基础上&#xff0c;又自己总结、整理、汇总了一些资料&#xff0c;方便自己理解和后续回顾&#xff0c;同时也希望给大家带…
阅读更多...
【Node.js】深度解析常用核心模块-path模块

【Node.js】深度解析常用核心模块-path模块

✅ 作者简介&#xff1a;一名将要迈入大三的大学生&#xff0c;致力于提高前端开发能力 ✨ 个人主页&#xff1a;前端小白在前进的主页 &#x1f525; 系列专栏 &#xff1a; node.js学习专栏 ⭐️ 个人社区 : 个人交流社区 &#x1f340; 学习格言: ☀️ 打不倒你的会使你更强…
阅读更多...
本地存储(Local Storage) 和 会话存储(Session Storage)

本地存储(Local Storage) 和 会话存储(Session Storage)

我不会告诉你任何定义和概念&#xff0c;上车&#xff0c;读完这篇博客&#xff0c;你就会对本地存储(Local Storage) 和 会话存储(Session Storage)有一个清晰的认识。 目录前提知识范例示例1&#xff1a;将键值对提供给本地存储示例2: 本地存储中设置键值对示例3: 获取空值示…
阅读更多...
浏览器链接跳转进入小程序指定页面（适用安卓和iOS）

浏览器链接跳转进入小程序指定页面（适用安卓和iOS）

安卓和ios 浏览器外部链接跳转进入小程序 需求&#xff1a;用户点击链接进入小程序 第一步&#xff1a; 需要后端配合调用微信官方提供的接口方法 生成小程序的链接。 官方文档如下&#xff1a; https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023