soarli博客 - HTML
type: channel
link: https://blog.soarli.top/tag/HTML
items: 键盘键码值keyCode大全
items: 旅游相册网页制作
items: 给“soarli的花园”添加了夜间模式
items: background-image参数汇总
items: PDF.JS配置记录
items: 通过CSS代码判断来实现自动PC端显示，手机端隐藏
items: docsify - 一个轻量的md转html程序
items: HTML+CSS基础语法学完啦
items: Web前端攻城狮学习笔记
items: QQ发送链接显示预览修改方法

键盘键码值keyCode大全
type: item
date: 2021-06-16T21:57:00+08:00
description: 建模实习作业是做一个界面，果断上html+css+js：https://lab.soarli.top/web/html/calc/其中，js监听键盘输入通过document.onkeydown=function(event)方法实现，下面是关于keyCode的总结记录（内容来自互联网，已在文末放置参考资料链接）：js判定不能输入某个字母或符号οnkeydοwn=“if(event.keyCode==32) return false”字母和数字键的键码值(keyCode)（左侧）按键键码按键键码按键键码按键键码A65J74S83149B66K75T84250C67L76U85351D68M77V86452E69N78W87553F70O79X88654G71P80Y89755H72Q81Z90856I73R82048957数字键盘上键的键码值（右侧）按键键码按键键码按键键码0966102Enter1081977103-1092989104.1103999105/1114100*106 5101+107 F键键码值按键键码按键键码F1112F7118F2113F8119F3114F9120F4115F10121F5116F11122F6117F12123控制键键码值(keyCode)按键键码按键键码按键键码按键键码BackSpace8Esc27Right Arrow39-_189Tab9Spacebar32Dw Arrow40.>190Clear12Page Up33Insert45/?191Enter13Page Down34Delete46`~192Shift16End35Num Lock144[{219Control17Home36;:186\ 220Alt18Left Arrow37=+187]}221Cape Lock20Up Arrow38,<188'"222多媒体键码值按键键码音量加175音量减174停止179静音173浏览器172邮件180搜索170收藏171参考资料：https://blog.csdn.net/weixin_44476265/article/details/110531227https://www.cnblogs.com/zhulmz/p/11623685.htmlhttps://www.cnblogs.com/fubuki/p/9835581.html

旅游相册网页制作
type: item
date: 2020-08-19T15:04:00+08:00
description: 第一步dir > index.txt第二步 云台山旅游照片1 完成！到此就可以伴随着小度播放的音乐在电视等大屏幕上与家人共享温暖时光了。

给“soarli的花园”添加了夜间模式
type: item
date: 2020-06-22T18:50:00+08:00
description: 6.22首次接触暂时对“夜间版”只是修改了方块div亮度，换了张亮度较低的背景图，但是配置过程相对复杂（ 尤其对于js小白 ）我是从一个大佬站点强行把功能扒了下来勉强实现了功能。不想罗嗦了，上代码：dark.css/*实际页面效果*/ .DarkMode *{ transition: .2s; } .DarkMode .mk-title-describe{ color: black!important; } .DarkMode body{ background-image:url(images/caoyuan_dark.jpg)!important; } .DarkMode .mk-color-item{ filter:opacity(0.8)!important; } /*切换动画效果*/ .Cuteen_DarkSky,.Cuteen_DarkSky:before { content: ""; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 88888888; } .Cuteen_DarkSky { background: linear-gradient(#feb8b0,#fef9db) } .Cuteen_DarkSky:before { transition: 2s ease all; opacity: 0; background: linear-gradient(#4c3f6d,#6c62bb,#93b1ed) } .DarkMode .Cuteen_DarkSky:before { opacity: 1; } .Cuteen_DarkPlanet { z-index: 99999999; position: fixed; left: -50%; top: -50%; width: 200%; height: 200%; -webkit-animation: CuteenPlanetMove 2s cubic-bezier(.7,0,0,1); animation: CuteenPlanetMove 2s cubic-bezier(.7,0,0,1); transform-origin: center bottom; } @-webkit-keyframes CuteenPlanetMove { 0% { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes CuteenPlanetMove { 0% { transform: rotate(0); } to { transform: rotate(360deg); } } .Cuteen_DarkPlanet:after { position: absolute; left: 35%; top: 40%; width: 9.375rem; height: 9.375rem; border-radius: 50%; content: ""; background: linear-gradient(#fefefe,#fffbe8); }dark.js/* function switchNightMode(){ var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0'; if(night == '0'){ document.querySelector('link[title="dark"]').disabled = true; document.querySelector('link[title="dark"]').disabled = false; document.cookie = "night=1;path=/" console.log('夜间模式开启'); }else{ document.querySelector('link[title="dark"]').disabled = true; document.cookie = "night=0;path=/" console.log('夜间模式关闭'); } }*/ function switchNightMode() { stopp();/*切换到夜间模式，关闭樱花飘落*/ $(' ').appendTo($("body")), setTimeout(function() { var DarkMode = document.cookie.replace(/(?:(?:^|.*;\s*)DarkMode\s*\=\…

background-image参数汇总
type: item
date: 2020-06-22T18:36:23+08:00
description: /*加载背景图*/ background-image：url（./images/background.jpg）; /* 背景图垂直、水平均居中 */ background-position: center center; /* 背景图不平铺 */ background-repeat: no-repeat; /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */ background-attachment: fixed; //此条属性必须设置否则可能无效/ /* 让背景图基于容器大小伸缩 */ background-size: cover; /* 设置背景颜色，背景图加载过程中会显示背景色 */ background-color: #CCCCCC; }或简写为如下CSS样式： body{ background:url(./images/background.jpg) no-repeat center center; background-size:cover; background-attachment:fixed; background-color:#CCCCCC; }background-size中，100%和cover的区别background-size：100% 100%;---按容器比例撑满，图片变形；background-size：cover;---把背景图片放大到适合元素容器的尺寸，图片比例不变，但是要注意，超出容器的部分可能会裁掉。参考资料：blog.csdn.net/weixin_44433499/article/details/86219615blog.csdn.net/wzj2584454/article/details/78100233

PDF.JS配置记录
type: item
date: 2020-06-20T01:06:00+08:00
description: 前言前段时间在“soarli实验室”搭建了“AI书架”，涉及到大量pdf文件的问题，目标如下：点击即可在浏览器里面预览，不必下载尽量隐藏真实文件地址，最大化程度上尊重版权不明确提供下载/打印功能多设备、多浏览器均可用要能够确保打开、实际渲染的速度不能太慢考虑经济效益，尽最大可能减少恶意请求带来的影响如果直接跨域引用CDN上的资源，严格意义上讲，以上几点都不能满足。一次尝试源码打包 soarli - pdf jquery.media.js/* * jQuery Media Plugin for converting elements into rich media content. * * Examples and documentation at: http://malsup.com/jquery/media/ * Copyright (c) 2007-2010 M. Alsup * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * * @author: M. Alsup * @version: 0.99 (05-JUN-2013) * @requires jQuery v1.1.2 or later * $Id: jquery.media.js 2460 2007-07-23 02:53:15Z malsup $ * * Supported Media Players: * - Flash * - Quicktime * - Real Player * - Silverlight * - Windows Media Player * - iframe * * Supported Media Formats: * Any types supported by the above players, such as: * Video: asf, avi, flv, mov, mpg, mpeg, mp4, qt, smil, swf, wmv, 3g2, 3gp * Audio: aif, aac, au, gsm, mid, midi, mov, mp3, m4a, snd, rm, wav, wma * Other: bmp, html, pdf, psd, qif, qtif, qti, tif, tiff, xaml * * Thanks to Mark Hicken and Brent Pedersen for helping me debug this on the Mac! * Thanks to Dan Rossi for numerous bug reports and code bits! * Thanks to Skye Giordano for several great suggestions! * Thanks to Richard Connamacher for excellent improvements to the non-IE behavior! */ /*global SWFObject alert Sys */ /*jshint forin:false */ ;(function($) { "use strict"; var mode = document.documentMode || 0; var msie = /MSIE/.test(navigator.userAgent); var lameIE = msie && (/MSIE (6|7|8)\.0/.test(navigator.userAgent) || mode < 9); /** * Chainable method for converting elements into rich media. * * @param options * @param callback fn invoked for each matched element before conversion * @param callback fn invoked for each matched element after conversion */ $.fn.media = function(options, f1, f2) { if (options == 'undo') { return this.each(function() { var $this = $(this); var html = $this.data('…

通过CSS代码判断来实现自动PC端显示，手机端隐藏
type: item
date: 2020-06-11T17:40:00+08:00
description: 实现场景描述：有些内容部署在PC端但是有不适合在手机端显示（比如盒子过大，遮挡内容）或者手机端显示毫无意义等。我们可以使用下面的代码来实现：电脑端显示，手机端隐藏。实现方法：CSS控制判断@media screen and (max-width: 1221px) { .wapnone{display:none; } }在需要隐藏的区域加一个DIV，代码如下： 你要css判断隐藏的内容 括号里面的1221px表示如果屏幕尺寸达到了1221像素以下将会隐藏否则显示，具体数值可以自行调试。原文地址：muuzi.cn/655.html

docsify - 一个轻量的md转html程序
type: item
date: 2020-06-10T23:52:49+08:00
description: 1. docsify介绍docsify 是一个动态生成文档网站的工具。不同于 GitBook、Hexo 的地方是它不会生成将 .md 转成 .html 文件，所有转换工作都是在运行时进行。这将非常实用，如果只是需要快速的搭建一个小型的文档网站，或者不想因为生成的一堆 .html 文件“污染” commit 记录，只需要创建一个 index.html 就可以开始写文档而且直接部署在 GitHub Pages。2. 引入docsify方式模板index.html 我的index.html 正在加载，请稍侯... 默认支持README.md，如需其他文件，接着看。3.关于每个页面和URL路径说明如果需要创建多个页面，或者需要多级路由的网站，在docsify里也能很容易的实现。例如创建一个guide.md文件，那么对应的路由就是/#/guide如果你的目录结构如下：-| ./ -| README.md -| guide.md -| zh-cn/ -| README.md -| guide.md那么对应的访问页面将是:./README.md => http://domain.com ./guide.md => http://domain.com/#/guide ./zh-cn/README.md => http://domain.com/#/zh-cn/ ./zh-cn/guide.md => http://domain.com/#/zh-cn/guide到这里基本功能就实现了，放Matlab安装教程方便给同学看的目的也达到了。后续：本想深入了解，但是时间预算不足...（懒）留下几个坑，看啥时候能填上：怎样实现搜索怎样才能不在http请求中暴漏md文件（防盗）其他功能有网友和官方文档已经总结到位了，链接在文末，顺便贴上部分截图防止失联：参考资料：docsify.js.org/#/zh-cn/segmentfault.com/a/1190000017576714juejin.im/post/5d672e286fb9a06aff5e8439

HTML+CSS基础语法学完啦
type: item
date: 2020-06-02T00:43:00+08:00
description: 从明天起，做一个幸福的人，喂猫、学Python、周游网络世界...我有一所房子，位居网络深海、春暖花开。第4章表格第12章 XML与XHTML第13章CSS入门基础认识CSS传统HTML设计网页版面的缺点CSS的特点CSS的排版样式第14章 CSS文字与文本CSS中长度与颜色CSS中的文字属性CSS中的文本属性第15章 CSS背景与列表CSS 中背景的使用CSS中列表的使用第16章 CSS边框与边界CSS中边框的使用CSS中边界的使用第17章 CSS区块、浮动、定位、溢出、滚动条CSS中区块的使用CSS中浮动的使用CSS中定位的使用CSS中溢出的使用CSS中滚动条的使用第18章 CSS链接、光标、DHTML、缩放CSS 中链接的使用CSS 中光标的使用CSS 中 DHTML 的使用CSS 中缩放的使用第19章 CSS滤镜（非重点）Filter属性介绍（以下仅适用于IE浏览器）Alpha滤镜的使用Blur滤镜的使用Fliph、Flipv滤镜DropShadow滤镜Glow 滤镜Gray ,Invert,Xray 滤镜Shadow 滤镜Chrome写法：来源：https://www.runoob.com/cssref/css3-pr-filter.html.blur { -webkit-filter: blur(4px); filter: blur(4px); } .brightness { -webkit-filter: brightness(0.30); filter: brightness(0.30); } .contrast { -webkit-filter: contrast(180%); filter: contrast(180%); } .grayscale { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .huerotate { -webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg); } .invert { -webkit-filter: invert(100%); filter: invert(100%); } .opacity { -webkit-filter: opacity(50%); filter: opacity(50%); } .saturate { -webkit-filter: saturate(7); filter: saturate(7); } .sepia { -webkit-filter: sepia(100%); filter: sepia(100%); } .shadow { -webkit-filter: drop-shadow(8px 8px 10px green); filter: drop-shadow(8px 8px 10px green); }第20章CSS定义选择器ID 与类(1).应用 ID(2).将 ID 与选择器结合(3).ID 的使用场合(4).避免使用 ID 的场合(5).应用类(6).结合多个类和 ID(7).利用类改写基本样式:(8).直接将类链接到元素上(9).避免,适合层叠分组继承上下文选择器子类选择器其他选择器代码注释与结构第21章 CSS构造模型div边距边框定位浮动第22章 CSS构造颜色、背景与图像1.设定颜色2.十六进制三元组3.使用 17 种具名颜色4.使用 span 更好的控制文本中局部区域的文本5.使用 display 属性提供区块转换6.背景图象渐变的制作7.给一个区块加上一个背景8.给标题加上一个小图标9.圆顶角10.简单的 CSS 阴影效果第23章CSS构造列表与导航1.内边距与外边距2.使用图片作为列表图标3.以背景图片作为项目列表图标4.内联列表5.背景图片和内联列表6.垂直导航栏7.创建垂直翻转的列表8.创建水平导航条第24章 CSS构造超链接1.给链接加上边框2.在文章段落中加上超级链接3.用背景图象添加记号4.利用派生来影响链接5.利用图片作为下划线6.突出显示不同类型的链接7.使用属性选择器来做链接8.创建按钮和翻转9.具有图象的翻转10.以访问链接样式11.纯 css 工具提示第25章 CSS 构造表格1.简单表格2.行组和列组3.表格选择符4.分隔的边框5.重复的边框6.隐藏和删除单元格、行、列7.垂直对齐数据第 26 章 CSS 构造表单1.表单标签的使用2.去掉默认的表单间隔3.给文本框添加漂亮的边框4.给下拉菜单设置背景色5.给文本区域添加滚动条6.表单外边框设置 fieldset legend7.结构化表单布局第27章 布局1. 流体浮动布局规格：当视窗变化时跟着…

Web前端攻城狮学习笔记
type: item
date: 2020-05-15T19:30:52+08:00
description: 前言：前段时间过度青睐于web应用与云计算产品实例的体验，期间遇到过很多问题也解决过很多问题（当然还有暂未解决的问题），但是一直没有系统学习过其基础知识。今天无意间在学习强国网站学习一个CSS样式时在其上发现了一个资源宝库，如下图：在这个专栏，数学、物理、化学甚至是计算机的开放课程被搜罗的样样俱全，同时刚好看到了一门关于web的课程。借此机会，打算用一周左右的时间系统地学习下这一块儿，再系统地学完PHP+MYSQL（实在“没时间”的话就算了少睡会儿）真的得专注学习数学和机器学习了（这都5月中旬了，留给我的时间真的不多了）。回顾一下，大概是在初中一二年级的时候（应该是初一）首次对网站搭建产生了浓厚的兴趣（当时主要是受hao123的影响）。那时候接触到了HTML，听说了网页“三剑客”。但是当时由于资源实在有限（懒得找），了解最深的地方应该也就是超链接标签的写法了，至于web服务器－也就只是知道建网站需要有个“空间”，空间需要花很多钱去买，需要会使用一个名字叫做FTP的东西。。然后就拿新浪博客（现已关闭）的自定义栏目里面可以自定义源代码的功能练手。然后就没有然后了。。。一直到了大二上学期，一个超级偶然的机会，在学校的实验室里，认识了一个很厉害又有耐心的学长。从他那里先后了解到了Tomcat和Nginx，经过局域网内文件的成功传输，顿时明白了WEB服务器的作用，借助当时已经了解到的关于HEXO的知识和电脑120的一个计科大佬一起完成了电脑120网站后台发布与管理系统的配置。电脑120的网站有了雏形。考试之前只顾捣鼓电脑120的网站，自己搭建的博客闲置到一边了，为了纪念，已将其静态骨架保存在cdn站点首页，有缘的朋友们可以去看看。寒假期间，在Anoyer学长的启发下，接触到了Typecho，并利用寒假搭建了完全属于自己的第一个动态博客。当然，阿里云的学生机资格给了电脑120，在这儿只能用腾讯云1M的小水管了。好在各大免费CDN（首页底部挂有链接）和阿里云OSS，使得博客访问体验不算太差。博客只是基础设施，最重要的是内容的记载、知识的学习、能力的提升。写了这么多，也该看会儿视频，奔入主题啦。第一章：HTML详解与CSS选择器1.0内容介绍HTML+CSS部分主要参考资料开发工具和调试工具前端学习方法建议先完成再完美先理解问题练习、练习、再练习1.1Web是如何工作的：基本架构和原理Web无处不在：看新闻、刷微博、刷朋友圈、购物、学习…从输入URL，到页面呈现完成，究竟发生了什么？HTTP响应：HTTP：1.0、1.1、2.0HTML：4、51.2HTML基本要素（标记、元素、内容、属性）在HTML中，实际上一般不必区分“标记”和“元素”的概念。但是在严格定义中，我们通常把标记理解为“具体的某一个”，具有唯一性的概念；元素来理解为“某一类中的一个”-->每一个都可以有自己的属性。从面向对象的角度考虑：标记类比于“类”，元素类比于“对象”。HTML单标记元素HTML全局属性其中：id属性具有唯一性；class属性通常对应CSS中的class选择器；style属性叫做“行列样式属性”；title属性的作用主要是指定光标移上时显示的提示字样。1.3HTML 文档类型、注释1.4 HTML head及相关标记1.5 HTML 标题、段落和文本格式化1.6 HTML图片Image和超链接HyperlinkHTML图片其中，alt属性有利于图片友好显示和搜索引擎优化。HTML超链接1.7 HTML列表List和表格Table1.8 HTML的div和span作用：实现统一的样式设置/交互效果方法一：将效果添加到每个元素上（会导致维护超级困难）更好的方法：将他们放入一个统一的元素中概念的引入：块级元素：独占行行内元素：与其他元素共用行table元素从理论上讲可以直接用其多行多列的效果容纳其他元素，但最好不要这样做（应该用其直接存放数据）。1.9 HTML5中各种语义化分段元素引入这些分段元素的原因：如果用div id来自行分段：不利于项目交付（命名规则不尽相同）不利于搜索引擎优化因此引入了以上统一的分段元素规范。1.10 HTML表单Form1.11 文档对象模型DOMCSS选择器的基础1.12 HTML5最佳实践与全部标记总览1.13 HMTL Demo：开发和上线一个简单在线个人简历1.14 HTML中应用CSS的三种常用的方式文档内样式代码：元素的行内样式（代码可复用性低）：优化：外部样式文件（代码可复用性最高）：只需一行1.15 CSS规则基本语法选择器：选择器组：注意：选择器组里面若有任何一个选择器无效，则该选择器组无效。属性选择器：1.16 简单选择器（Type、ID、Class选择器）类型选择器：ID选择器：Class选择器：一个元素可以有…

QQ发送链接显示预览修改方法
type: item
date: 2020-04-24T14:44:00+08:00
description: 效果：head部分添加一下内容： 参考资料：https://blog.csdn.net/qq_41320944/article/details/79921336https://www.zhihu.com/question/21386860