CSS：01.字体属性和文本属性
本文内容 CSS的单位 字体属性 文本属性 定位属性：position、float、overflow等 CSS的单位html中的单位只有一种，那就是像素 px ，所以单位是可以省略的，但是在CSS中不一样。 CSS中的单位是必须要写的，因为它没有默认单位。 绝对单位1 in = 2.54 cm = 25.4 mm =72 pt = 6 pc 。 各种单位的含义： in：英寸Inches (1 英寸 = 2.54 厘米) cm：厘米Centimeters mm：毫米Millimeters pt：点Points，或者叫英镑 (1点 = 1/72英寸) pc：皮卡Picas (1 皮卡 = 12 点) 相对单位px：像素 em：印刷单位相当于12个点 %：百分比，相对周围的文字的大小 为什么说像素px是一个相对单位呢，这也很好理解。比如说，电脑屏幕的的尺寸是不变的，但是我们可以让其显示不同的分辨率，在不同的分辨率下，单个像素的长度肯定是不一样的啦。 font 字体属性CSS中，有很多...
HTML5简单的视频播放器举例
采用 Bootstrap 网站的图标字体，作为播放器的按钮图标。 index.html 的代码如下： 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418...
HTML5详解（三）
Web 存储随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。 H5 中有两种存储的方式1. window.sessionStorage 会话存储： 保存在内存中。 生命周期为关闭浏览器窗口。也就是说，当窗口关闭时数据销毁。 在同一个窗口下数据可以共享。 2. window.localStorage 本地存储： 有可能保存在浏览器内存里，有可能在硬盘里。 永久生效，除非手动删除（比如清理垃圾的时候）。 可以多窗口共享。 Web 存储的特性 设置、读取方便。 容量较大，sessionStorage 约5M 、 localStorage 约20M。 只能存储字符串，可以将对象 JSON.stringify() 编码后存储。 常见 API设置存储内容： 1setItem(key, value); 可以新增一个 item，也...
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 的第一个草案。 什么是 HTML5HTML5并不仅仅只是做为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言。 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 toggleFullS...
网络抓包和代理工具：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 官网：https://wproxy.org/...
最简单的方法免费白嫖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 的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。 属性： type="属性值&qu...
关于包管理器npm、yarn和pnpm的一些总结
前言在Node.js生态系统中，包管理器是至关重要的组件之一，它们负责维护各种应用程序和库之间的依赖关系。 依赖(dependency)是别人为了解决一些问题而写好的代码，即我们常说的第三方包或三方库。 一个项目或多或少的会有一些依赖，而你安装的依赖又可能有它自己的依赖。 项目中的依赖，可以是一个完整的库或者框架，比如 react 或 vue;可以是一个很小的功能，比如日期格式化;也可以是一个命令行工具，比如 eslint。 如果没有现代化的构建工具，即包管理器，你需要用 <script> 标签来引入依赖。 此外，如果你发现了一个比当前使用的依赖更好的库，或者你使用的依赖发布了更新，而你想用最新版本，在一个大的项目中，这些版本管理、依赖升级将是让人头疼的问题。 于是包管理器诞生了，用来管理项目的依赖。 它提供方法给你安装依赖(即安装一个包)，管理包的存储位置，而且你可以发布自己写的包。 npm1在Node.js生态系统中，包管理器是至关重要的组件之一，它们负责维护各种应用程序和库之间的依赖关系。npm(Node.js Package Manager)是Node.js的...