HTML5详解（二）
本文主要内容 拖拽 历史 地理位置 全屏 拖拽 在HTML5的规范中，我们可以通过为元素增加 draggable="true" 来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启拖拽的。 1. 拖拽元素页面中设置了 draggable="true" 属性的元素。 举例如下： 123456789101112131415161718192021<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
HTML5详解（一）
HTML5的介绍Web 技术发展时间线 1991 HTML 1994 HTML2 1996 CSS1 + JavaScript 1997 HTML4 1998 CSS2 2000 XHTML1（严格的html） 2002 Tableless Web Design（表格布局） 2005 AJAX 2009 HTML5 2014 HTML5 Finalized 2002年的表格布局逐渐被淘汰，是因为：表格是用来承载数据的，并不是用来划分网页结构的。 2009年就已经推出了HTML5的草案，但直到2014年才有定稿，是因为有移动端的推动。 H5草案的前身是叫：Web Application，最早是由WHATWG这个组织在2004年提出的。 2007年被 W3C 组织接纳，并在 2008-01-22 发布 HTML5 的第一个草案。 什么是...
通过简单的css+js实现图片不弹窗浏览完整图片
效果 方法1.添加css样式 123456789101112<style> /* 初始状态 */ .enlarge { transition: all 0.2s ease-out; } /* 显示原图 */ .enlarge.fullsize { width: auto; height: auto; }</style> 这段 CSS 代码定义了一个名为 enlarge 的类，其中包含一个过渡效果的属性 transition ，该属性指定更改图像大小的过渡时间（0.2秒）和缓动函数（ease-out）。 另外，它还定义了一种新的类 .enlarge.fullsize ，用于在单击图像时将其扩大到其原始尺寸（使用 width:auto;height:auto ），以便让用户查看更大的图像。 也就是说, 比如网页中图片的初始状态大小定为设置为其他值, 在 .enlarge.fullsize 状态下则采用原图大小。 2.添加js 123456789<script> function...
网络抓包和代理工具：Whistle
简介Whistle 是基于 Node 实现的跨平台抓包调试工具，其主要特点： 完全跨平台：支持 Mac、Windows 等桌面系统，且支持服务端等命令行系统 功能强大（理论上可以对请求做任意修改）： 支持作为 HTTP、HTTPS、SOCKS 代理及反向代理 支持抓包及修改 HTTP、HTTPS、HTTP2、WebSocket、TCP 请求 支持重放及构造 HTTP、HTTPS、HTTP2、WebSocket、TCP 请求 支持设置上游代理、PAC 脚本、Hosts、延迟（限速）请求响应等 支持查看远程页面的 console 日志及 DOM 节点 支持用 Node 开发插件扩展功能，也可以作为独立 npm 包引用 操作简单： 直接通过浏览器查看抓包、修改请求 所有修改操作都可以通过配置方式实现（类似系统 Hosts），并支持分组管理 项目可以自带代理规则配置并一键设置到本地 Whistle 代理，也可以通过定制插件简化操作 功能可以说是非常强大。可能作为代理服务器使用的需求会多一些。 Whistle...
最简单的方法免费白嫖ChatGPT
前言最近OpenAI对各地区的限制又缩紧了，想要使用自己的ChatGPT对于普通人来说还是很难的。 下面介绍的方法，你不需要： OpenAI账号 科学上网 自行部署 只需要有手就行。 WeTab新标签页前往 WeTab新标签页官网 下载该浏览器插件。 使用 在插件管理页打开扩展 返回主页，找到显眼的ChatGPT图标，点击。 左侧很多源，随便找一个就行了。 注意： 这些都是公共的免费源，需要注意隐私问题。 其他其实这个插件也很好用，非常美观，也没有广告。也是比较推荐大家使用的。
HTML：05.其他标签
内容 列表标签：<ul>、<ol>、<dl> 表格标签：<table> 框架标签及内嵌框架<iframe> 表单标签：<form> 多媒体标签 滚动字幕标签：<marquee> 列表标签列表标签分为三种。 1. 无序列表<ul>，无序列表中的每一项是<li>英文单词解释如下： ul：unordered list，“无序列表”的意思。 li：list item，“列表项”的意思。 例如： 12345<ul> <li>默认1</li> <li>默认2</li> <li>默认3</li></ul> 效果： 注意： li 不能单独存在，必须包裹在 ul 里面；反过来说，ul 的“儿子”不能是别的东西，只能有 li 。 我们这里再次强调，ul...
关于包管理器npm、yarn和pnpm的一些总结
前言在Node.js生态系统中，包管理器是至关重要的组件之一，它们负责维护各种应用程序和库之间的依赖关系。 依赖(dependency)是别人为了解决一些问题而写好的代码，即我们常说的第三方包或三方库。 一个项目或多或少的会有一些依赖，而你安装的依赖又可能有它自己的依赖。 项目中的依赖，可以是一个完整的库或者框架，比如 react 或 vue;可以是一个很小的功能，比如日期格式化;也可以是一个命令行工具，比如 eslint。 如果没有现代化的构建工具，即包管理器，你需要用 <script> 标签来引入依赖。 此外，如果你发现了一个比当前使用的依赖更好的库，或者你使用的依赖发布了更新，而你想用最新版本，在一个大的项目中，这些版本管理、依赖升级将是让人头疼的问题。 于是包管理器诞生了，用来管理项目的依赖。 它提供方法给你安装依赖(即安装一个包)，管理包的存储位置，而且你可以发布自己写的包。 npm1在Node.js生态系统中，包管理器是至关重要的组件之一，它们负责维护各种应用程序和库之间的依赖关系。npm(Node.js Package...
markdown中转义字符源码显示
前言最近遇到一个问题，当我在markdown中使用代码块包裹转义字符时，最终前端还是会将字符转义出来。 比如： 1 #在前端仍然会输出为空格 解决方法在Markdown中使用反引号包裹起来的文本会被解析为代码或者代码块，而不是普通的文本。 如果希望在Markdown中展示转义字符的源码，可以使用HTML实体编码的方式来实现。 在HTML实体编码中， 表示一个空格字符，如果您想要在Markdown中展示 的源码，需要使用如下格式书写： 1&nbsp; 这样在Markdown中展示时，就会把上面代码作为普通文本处理，不会被解析成空格字符，同时在前端渲染时也不会被转义为空格，而是显示为 的源码。 其他其他转义字符的使用也是相同的。
Fancybox v5 使用体验
前言Fancybox 是一个用于创建灵活且可定制的图片和媒体弹出框的JavaScript库。 Fancybox v5是其最新版本。要使用Fancybox v5，需要在HTML文件中包含必要的CSS和JavaScript文件，以及一个HTML元素作为触发器。 然后，使用Fancybox.bind方法来绑定Fancybox到该元素。 这边稍微研究一下。 使用步骤引入fancybox123<!-- 引入fancybox --><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.min.css"...
OpenCore黑苹果安装成功案列
前言之前装了一次黑苹果没有安装成功，详见：OpenCore黑苹果安装指导 今天周末在家没啥事，就来填一下这个坑。 用的还是我现在这台电脑： CPU：Intel 10700 显卡：GTX 1060 其他配置略 由于每台电脑的配置不一样，导致中间过程有很大差异，这边我尽量把过程思路写的详细一点。 步骤第一步：准备环节我统计了一下，总共需要这些软件： AIDA64 ：用于查看系统各个硬件信息，根据Finding your hardware界面，将你电脑的CPU/存储/网络/主板/音频的设备信息截图下来 OpenCorePkg balenaEtcher ：制作U盘镜像工具 DiskGenius ：磁盘工具，不用多说。网上自行下载。 ProperTree 或者 OCAuxiliaryTools ：修改 config.plist 的软件 推荐大家使用 OCAuxiliaryTools ，这个软件支持中文，操作也方便，如果完全没用过黑苹果的话，建议还是和官方的教程一样，使用 ProperTree 。 GenSMBIOS...