，例如 node.js 和 Apache CouchDB，JS 是一种基于原型、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如：函数式编程）编程风格JavaScript 介绍HTML 是一种标记语言...，用来结构化我们的网页内容和赋予内容含义，例如定义段落、标题，或是在页面中嵌入图片和视频CSS 是一种样式规则语言，我们将样式应用于我们的 HTML 内容， 例如设置背景颜色和字体，对页面的内容进行布局...是一个标准；② 文档对象模型 DOM Document Object Model ， 描述了处理网页内容的方法和接口；③ 浏览器对象模型 BOM Browser Object Model ，描述了与浏览器进行交互的方法和接口...JavaScript 特点：① 解释性执行的脚本语言；② 基于对象；③ 简单弱类型；④ 相对安全（不会操控文件）；⑤ 事件驱动；⑥ 跨平台性；JavaScript 引入方式内部写入 在 HTML 文件中直接进行代码的书写...alert 警告窗、弹出框；console.log 控制台打印；document.write 文档输出确认信息框，点击确认，返回 True；点击取消，返回 False信息提示框，将填写的信息返回控制台注释
然而一个网页中往往会有很多小背景图片作为修饰，当网页背景图像过多时，服务器就会频繁的接收发送请求，这会大大降低页面的加载速度，为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度，就出现了css...精灵技术 （CSS Sprites） CSS精灵并不是很高深的技术，CSS精灵是一种处理网页背景图像的方式，它将一个页面涉及到的所有背景图像都集中到一张大图中，然后当客户端请求服务器时，直接将这个大图发送给客户端...使用精灵图 通过定义我们知道，css精灵其实就是将网页中的一些背景图像整合到一张大图中，我们需使用精灵图里面的某个小图片就需要通过css的background-image(引入精灵图)，background-repeat...(指定不重复)， background-position(确定小图在精灵图中的位置，必须精确定位) 接下来看一下一些大型网页是否使用了精灵图 如淘宝页面 通过审查元素，查看右边小图标是否使用了精灵图...将鼠标置于选取图片的左上角 如图得到图片的大小及位置信息 在html文件中 ```php <!
6)教育研究: 我们必须研究可访问性和访问网站时面临的问题。在此基础上，对员工进行培训，使他们了解标准和问题。 #7)社会包容: 不仅在网络世界中，在现实世界中，所有人都应该被平等对待。...#4)通过关闭层叠样式表(CSS): CSS主要用于描述文档的表示。关闭后，我们可以检查背景颜色、文本样式和文本显示样式。...#9) PDF文档:尝试以文本的形式保存PDF文件，并检查内容的顺序是否保持不变。 #10)通过禁用样式:禁用样式并检查表格的内容是否正确排列。 #11)内容缩放:试着缩小图像，检查它是否可读。...#8) PDF可访问性检查器:它检查PDF文件的可访问性。 易访问性测试清单/测试用例/场景 以下是在进行此类测试时需要检查的几点: 标签书写、摆放是否正确。 音频/视频内容是否正常可听/可见。...以下是网站应满足的可访问性的关键点: 链接文本应该是描述性的。视觉残疾用户访问网页通过点击键盘上的标签按钮和从链接到链接移动。因此，正确定义链接的描述是至关重要的。确保超链接可以使用tab键访问。
雪碧图：即CSS Sprite，也称CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分。...js CSS 合并：将多个小的js、CSS合并成一个大的js、CSS文件，间接达到减少http请求的目的。 2、组件是否压缩 ?...根据缓存超时 Expires 表示存在时间，允许客户端在这个时间之前不去检查（发请求），等同max-age的效果。但是如果同时存在，则被Cache-Control的max-age覆盖。...每一个http请求都有一个相对于的返回状态标志当次请求是否如期完成，如： 1xx：请求收到，这些状态代码表示临时的响应。 2xx：操作成功，这类状态代码表明服务器成功地接受了客户端请求。...另一方面，可能H5中需要该图片，而恰好访问结果为404，那此时就定位了一个bug 的存在。
（1）雪碧图：即CSS Sprite，也称CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分。...（3）js CSS 合并：将多个小的js、CSS合并成一个大的js、CSS文件，间接达到减少http请求的目的。 2、组件是否压缩 ?...根据缓存超时Expires 表示存在时间，允许客户端在这个时间之前不去检查（发请求），等同max-age的效果。但是如果同时存在，则被Cache-Control的max-age覆盖。...每一个http请求都有一个相对于的返回状态标志当次请求是否如期完成，如： （1）xx：请求收到，这些状态代码表示临时的响应。 （2）xx：操作成功，这类状态代码表明服务器成功地接受了客户端请求。...另一方面，可能H5中需要该图片，而恰好访问结果为404，那此时就定位了一个bug 的存在。
二、✍️网站描述 ⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构...，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。...网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件； 网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver...其中： （1）html文件包含：其中index.html是首页、其他html为二级页面； （2） css文件包含：css全部页面样式,文字滚动, 图片放大等； （3） js文件包含：js实现动态轮播特效..., 表单提交, 点击事件等等（个别网页中运用到js代码）。
背景图片（作为网页的修饰效果，CSS进行表现）。写在css样式表中，如使用background属性来定义背景图。 区别： 1. 内容图片是网页内容数据的一部分，在页面中有占位。...如果图像指定了width和height（通常都是图片本身的尺寸），页面加载时会保留指定的尺寸 CSS：背景图片（background） background基本属性： 1. background-color...默认情况下，背景图像从html元素左上角开始显示毛病在水平和垂直方向上重复排列。 3. background-repeat：设置是否重复背景图像及如何重复背景图像。...当用户点击邮箱链接时，会启动电脑上的邮件客户端程序，向指定的邮箱地址发送邮件。如果用户的电脑上未安装邮件客户端程序，那么邮箱链接将无法工作。...如果同时定义了类型和图像，则图像优先。 实际应用原则： 1. 使用盒子模型属性来精确控制列表 2.
的图标文件，保存为favicon.ico，.ico文件中可以包含多个不同尺寸的同名文件。...： 具有和audio类似属性之外,还具有muted属性——设置视频的音频应该被静音；poster——设置视频下载时显示的图像或者在用户点击暂停时的出现的画面。...checked——定义是否被选中，仅用于checked和radio类型。disable——定义command是否可用。icon——定义作为command来显示的图像的URL。...radiogroup——定义command所属的组名，仅在类型为radio时使用）其中menuitem标签在web标准中已经删除MDN H5超链接 h5中允许在链接内包含任意对象，如段落、列表、整篇文章和区块...——任何定义了ID值的元素都可以作为锚点标记，给标签的ID锚点命名时不要含有空格，同时不要置于绝对定位元素内，为a标签设置href属性，属性值设为“#+锚点名称”，如“#p4”，如果链接到不同页面，则设置如
---- font-display font-display 是一个 CSS 属性，用于控制自定义字体（如 Web 字体）在加载过程中的显示行为。...❞ 分析代码覆盖率 在Coverage选项卡中的表格显示了哪些资源被分析以及每个资源中使用的代码量。点击某一行，可以在Sources面板中打开该资源，并查看逐行分解的已使用代码和未使用代码。...这种情况通常发生在「字体加载较慢或延迟的情况」下。 当网站使用自定义字体（如Web字体）时，浏览器需要下载并加载字体文件，然后再将其应用于页面上的文本元素。...---- 压缩 HTML/CSS/JavaScript ❝压缩是指从网站的HTML、CSS和JavaScript文件中删除冗余字符（如空格）。...我们可以将其理解为页面上的任何可用（即使不能交互）内容，例如背景图，文本或页眉菜单区域。 而首次绘制（First Paint）是指浏览器呈现的「第一个字节的信息，无论它是否具有内容」。
script>标签用于加载脚本文件，如： JavaScript。... 定义了HTML文档中的元数据 定义了客户端的脚本文件 定义了HTML文档的样式文件 HTML 样式- CSS CSS (Cascading Style...使用外部 CSS 文件 最好的方式是通过外部引用CSS文件....从不同的位置插入图片 本例演示如何将其他文件夹或服务器的图片显示到网页中。 HTML 图像- 图像标签（ ）和源属性（Src） 在 HTML 中，图像由 标签定义。...点击之后 HTML 图像标签 标签 描述 定义图像 定义图像地图 定义图像地图中的可点击区域 1、距形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,
） 具有通过该url()函数加载的背景图像的元素（与CSS 渐变相反） 包含文本节点或其他内联级文本元素子级的块级元素。...以较轻的格式交付您的图像 ImageKit 检测用户的浏览器是否支持现代较轻的格式，如 WebP 或 AVIF，并实时自动以最轻的格式提供图像。...预加载关键资源 在某些情况下，浏览器可能不会优先加载影响 LCP 的视觉上重要的资源。例如，折叠上方的横幅图像可以指定为 CSS 文件中的背景图像。...内联关键 CSS 关键 CSS 包含出现在页面第一折叠中的 DOM 所需的样式定义。...如果页面这部分的样式定义是内联的，即在每个元素的style属性中，浏览器就不需要依赖外部 CSS 来设置这些元素的样式。因此，它可以快速渲染页面，并且LCP下降。 3.
点击未上过的课次进行编辑或删除： ? 以及课次的拖动，如将1月22号的“08:00-09:00 高数一班”拖动到1月29号： ?...，而是显示为 +...more ，点击后才会完整显示所有的数据 eventLimit: true, //设置是否显示周六和周日，设为false则不显示 weekends: true, //日历初始化时显示的日期...//点击或者拖动选择时，是否显示时间范围的提示信息，该属性只在agenda视图里可用 selectHelper: true, //点击或者拖动选中之后，点击日历外的空白区域是否取消选中状态 true...设置event的背景颜色，若该课次还没上且该班级已经删除则显示为红色 }); }else if((ccDate>nowDate||(ccDate==nowDate&&ccTime>nowTime)...，并展示添加框 $.ajax({ url: '后台controller层查询班级信息的路径',//因为点击日历某个特定日期时，弹出框需要以下拉框的形式显示班级信息 dataType: 'json'
因此，可以在Apache配置了JS,CSS,image的缓存，如果静态资源需要更新，则采用修改文件版本号的方案确保客户端取得最新版本。 4....如果Web server检查到Accept-Encoding头，它会使用客户端支持的方法来压缩HTTP响应，会设置Content-Encoding头，如：Content-Encoding: gzip。...Web server根据文件类型来决定是否压缩，大部分网站对HTML文件进行压缩，但对脚本文件和样式表进行压缩也是值得的，实际上，对包括XML和JSON在内的任务文本信息进行压缩都是值得的，图像文件和PDF...把JavaScript和CSS放到外部文件中 使用外部文件会加快页面显示速度，因为外部文件会被浏览器缓存，如果内置JavaScript和CSS在页面中虽然会减少HTTP请求次数，但增大了页面的大小。...一个避免重复的脚本文件的方式是使用模板系统来建立脚本管理模块，除了防止重复的脚本文件外，该模块还可以实现依赖性检查和增加版本号到脚本文件名中，从而实现超长的过期时间。 13.
body元素明确指定id,这样即可用这个额外的样式来统一站点风格，定义用户样式表，以及实现多CSS样式文件。...css签名的益处在于，它允许一些资深的用户能够自行调整站点的风格。 例如，用户在浏览器中添加一张自定义的样式表，并在其中自行更改字体配置即可达到修改网站样式的目的。...background 许多设计师会同时定义背景色和背景图片。背景色由浏览器直接控制，会和CSS中的其他定义一起快速显示于页面上，而背景图片需要相对较长的时间加载。...background-position: 该属性定义了背景图片在父元素中得相对位置，它可以接受2个百分比、长度或关键字值，分别用来表示2个坐标值中的一个。...如果同时设置了2个，那么第一个值表示水平位置，第二个值表示垂直位置。 如果只设定一个值，那么它将表示水平位置，而垂直位置将取默认的50%或者居中。 设置水平位置为“负值”在背景定位中是合法的。
你可以将任何网站添加到你的 Dock 中——无论它是否使用 Manifest 文件、Service Worker 或其他技术来定制 Web 应用体验。...前往 Safari 中的网站，然后选择文件 > 添加到 Dock…，你可以自定义图标、修改名称，甚至调整 URL。然后，只需点击 Dock 中的 Web 应用图标，网站将作为独立应用打开。...背景滤镜 背景滤镜（Backdrop Filter）最早在 Safari 9.0 中引入，它提供了一种对特定元素后面的内容应用图形效果的方法。...我们还改进了实现，修复了错误并提升了互操作性。 你可以在这个演示中查看背景滤镜的可能性。使用下拉菜单切换滤镜。...CSS 基本用户界面模块第 3 级的早期版本 定义了 auto，但后来被写出了网络标准。
页面样式文件 （美化页面样式） .json 页面配置文件 （配置页面，如当前窗口的外观，引用自定义组件） 关于json文件 json 是一种数据格式，在实际开发中，json文件总是以配置文件存在...文件（局部配置） app.json文件 app.json 是关于项目的配置文件可以配置： window:全局定义小程序所有窗口样式（导航条，背景色，文字样式等） page:页面路径配置（创建页面...setting：编译配置（如：设置是否检查sitemap） appid：自己的appID projectname: 项目名称 sitemap.json文件 微信现已开放小程序内搜索，效果类似于...WXSS 和 CSS 的区别 ① 新增了rpx单位 CSS 中需要手动进行像素单位换算，例如 rem WXSS 在底层支持新的尺寸单位 rpx，在不同大小的屏幕上小程序会自动进行换算 ② 提供了全局的样式和局部样式...例如：响应用户的 点击、获取用户的位置等等 小程序中的 JS 文件分为三大类（其他：自定义组件componnet)，分别是： ① app.js 是整个小程序项目的入口文件，通过调用 App()
每个菜单项可以包含文本、图标或其他元素，以满足不同的设计和功能需求。在 CSS 方面，通过样式设置来定义菜单的外观，如背景颜色、字体样式、边框、间距等。...同时，利用 CSS 的定位属性（如 position: absolute 或 fixed）来精确控制菜单在页面中的位置，使其能够准确地位于鼠标点击的位置附近。...#custom-menu定义了菜单的基本样式，包括绝对定位、背景颜色、边框、阴影和较高的 z-index 以确保菜单显示在其他元素之上。...另外，我们还监听了click事件，当用户点击页面其他地方时，隐藏自定义菜单。三、应用场景与实例分析（一）文件管理器在文件管理器中，自定义右键菜单可以提供丰富的文件操作选项。...通过自定义右键菜单，用户可以更方便快捷地对文件进行管理，无需在菜单栏中查找各种操作选项。（二）图像编辑器在图像编辑应用中，右键菜单可以用于快速访问一些常用的编辑功能。
: 定义了文档的信息 : 定义了文档的标题 : 定义了页面链接标签的默认链接地圳 : 定义了一个文档和外部资源之间的关系 : 定义了...HTML文档中的元数据 : 定义了客户端的js脚本文件 ：定义了客户端不支持或者禁用js时执行的替代内容 : 定义了HTML文档的样式文件 温馨提示...media : 属性规定了外部资源适用的媒体类型, 例如：all、print、screen、aural、braille sizes : 属性定义了包含相应资源的可视化媒体中的 icons 的大小, 例如...这个属性的值应该是像 text/html，text/css 等 MIME 类型 as : 该属性仅在元素设置了 rel=”preload” 或者 rel=”prefetch” 时才能使用。...-- 示例2.背景（Backgrounds）将背景设置为图像，属性值为图像的URL。 如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。
总文件大小变化不大，但减少了 HTTP 请求次数从而加快了页面显示速度。 该方式只适合图片连续的情况；同时坐标的 定义是烦人又容易出错的工作。 CSS Sprites 是更好的方法。...如果 Web server 检查到 Accept-Encoding 头，它会使用客户端支持的方法来压 缩 HTTP 响应，会设置 Content-Encoding 头，如：Content-Encoding...#B8D4FF”:”#F08A00”)，即背景色每个小时切换一 次。 CSS 表达式的问题是其执行次数超过大部分人的期望。...如果内置 JavaScript 和 CSS 在页面中虽然会减少 HTTP 请求次数，但增大 了页面的大小。...一个避免重复的脚本文件的方式是使用模板系统来建立脚本管理模块。 除了防止 重复的脚本文件外，该模块还可以实现依赖性检查和增加版本号到脚本文件名 中，从而实现超长的过期时间。 法则 13.
● 功能强大：ElasticSearch作为传统数据库的一个补充，提供了数据库所不能提供的很多功能，如全文检索、同义 词处理、相关度排名。...● ElasticSearch：基于Lucene，封装了许多Lucene底层功能，提供简单易用的REST API接口和许多语言的客户端，如Java的高级客户端（Java High Level RET Client...---- 简单的集群管理 快速检查集群的健康状况 ES提供了一套API，叫做cat API，可以查看ES中各种各样的数据。 GET /_cat/health?v 如何快速的了解集群的健康状况？...● 原则：类似数据放在一个索引中。和数据库中的表的定义规则类似。如图书信息放在book索引中，员工信息放在employee索引中。各个索引存储和搜索互不影响。 ● 定义规则：英文小写。...提交数据的时候，通过一种机制验证是否存在冲突，如ES中通过版本号验证。 ○ 特点： ■ 优点：并发能力高。 ■ 缺点：操作繁琐，在提交数据的时候，可能反复重试多次。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
