HTML5详解（三）
Web 存储随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。 H5 中有两种存储的方式1. window.sessionStorage 会话存储： 保存在内存中。 生命周期为关闭浏览器窗口。也就是说，当窗口关闭时数据销毁。 在同一个窗口下数据可以共享。 2. window.localStorage 本地存储： 有可能保存在浏览器内存里，有可能在硬盘里。 永久生效，除非手动删除（比如清理垃圾的时候）。 可以多窗口共享。 Web 存储的特性 设置、读取方便。 容量较大，sessionStorage 约5M 、 localStorage 约20M。 只能存储字符串，可以将对象 JSON.stringify() 编码后存储。 常见 API设置存储内容： 1setItem(key, value); 可以新增一个...
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"...