首页
关于
统计
壁纸
请留言
投资盈亏
友情链接
Search
1
HTTP 缓存
37 阅读
2
HTML 基础
26 阅读
3
HTML 标签
26 阅读
4
小米4a千兆版,刷入老毛子固件
26 阅读
5
Mac 错误zsh: command not found: brew解决方法
24 阅读
前端开发
HTML / CSS
JavaScript
Python
Windows
Mac OS
Linux
电子产品
Search
标签搜索
路由器
小米
HTML
常用标签
显示秒
系统时间
属性
input
brew
VS code
免密登录
红米AX6000
R4A
Openwrt
Deepin20.9
黑苹果
Hackintosh
Sunshine
累计撰写
14
篇文章
累计收到
1
条评论
首页
分类
前端开发
HTML / CSS
JavaScript
Python
Windows
Mac OS
Linux
电子产品
页面
关于
统计
壁纸
请留言
投资盈亏
友情链接
搜索到
7
篇与
的结果
2020-03-20
HTTP 缓存
前端缓存前端缓存可分为两大类:http缓存和浏览器缓存。我们今天重点讲的是http缓存,所以关于浏览器缓存大家自行去查阅。下面这张图是前端缓存的一个大致知识点: HTTP 缓存策略分为两种: 强缓存 和 协商缓存 ,这两种缓存策略都是服务端设置 HTTP Header 来实现的(一)强缓存强缓存的意思很简单,直接从浏览器缓存过的本地进行读取,不会去请求服务器。例如请求一个图片,当缓存后,第二次访问,直接从本地去拿,不会再去请求这个资源,可以节省服务器资源。可以通过三种方式来设置强缓存Expires:服务端在响应头中设置一个 GMT 格式的到期时间。客户端的本地时间小于响应头的 Expires 时间,那么会从本地进行读取,不会去请求服务器。如果超过了,那么就去请求服务器去获取最新资源。但是就是因为根据本地时间进行判断,本地时间可以随便修改,所以这种缓存机制有漏洞,会与服务端时间有偏差,为了解决这个问题,就出现了下面的 Cache-contorlCache-control:他和Expires不一样,Expires是直接设置一个时间戳就行了,而Cache-control可以设置下面这几种属性:max-age:这个用于设置一个滑动时间,例如设置 max-age=30 表示客户端时间向后滑动30秒,在这30秒内都是强缓存,不会去请求服务器s-maxage:这个和上面的一样,只不过这个设置的是代理服务器的缓存时间privte:这个表示缓存只能被客户端的浏览器缓存,不能被代理服务器缓存public:这个表示缓存既可以被浏览器缓存,也可以被代理服务器缓存no-store:这个属性表示不缓存,在任何情况下,都是与服务器进行最新的交互no-cache:这个并非不缓存的意思,这个表示强制进行协商缓存,会在下面描述(二)协商缓存协商缓存表示在使用本地的缓存之前,会先向服务器发一个请求,与服务器协商当前浏览器的缓存是否已经过期了,如果没过期,那么就使用本地的资源,如果过期了就去请求最新资源。协商缓存主要是解决强缓存资源不能及时更新的问题,协商缓存服务端可以通过2种设置来实现:第一种:last-modified 配合 If-Modified-Since 例如,客户端请求一个 03.jpg,服务端接收到这个请求后,会读取这个文件的最后修改时间,然后设置到响应头中,设置的参数就是 last-modified,参数值是文件最后修改的时间戳。客户端第二次请求 03.jpg 这个文件的时候,会带上一个 If-Modified-Since 参数,服务端能拿到这个参数与last-modified进行比对,如果一致,那么就返回304状态,否则就去请求最新的文件,使用nodejs实现这个代码:(注意协商缓存需要设置Cache-Control为no-cache,表示设置成协商缓存)... // 判断客户端请求的是03这个图片 if(pathname === '/img/03.jpg') { // 读取 03 图片的最后修改时间 const { mtime } = fs.statSync("./img/03.jpg") // 判断客户端发送过来的if-modified-since是否与mtime一致,如果一致就直接返回304 if(req.headers['if-modified-since'] === mtime.toUTCString()) { res.statusCode = 304 res.end() } else { // 如果不一致,那么就请求最新的资源返回给客户端 const data = fs.readFileSync("./img/03.jpg") // 这2句代码是设置协商缓存 res.setHeader("last-modified", mtime.toUTCString()) res.setHeader("Cache-Control", "no-cache") res.end(data) } } ...上面的 last-modified 配合 If-Modified-Since在使用时有些弊端,例如将03.jpg修改成04.jpg,再改回03.jpg。此时这个文件其实是没有变化的,但是最后修改时间更改了,因此客户端就需要重新请求,因此就出现了下面的第二种使用Etag的方式第二种:Etag 配合 If-None-Match Etag实现的方式服务端是为文件生成一个指纹,类似于MD5字符串。接着响应头中塞进 Etag 参数,参数的值就是计算出的字符串,客户端接收到后,第二次请求会带上一个 If-None-Match 的参数,接着服务端和上面第一种方式一样进行比对,nodejs的实现代码如下:// 引入 etag 模块 const etag = reqiure("etag") ... if(pathname === '/img/03.jpg') { const data = fs.readFileSync("./img/03.jpg") // 获取生成的etag字符串 const etag = etag(data) // 判断客户端发送的 If-None-Match 与服务端是否一致 if(req.headers['if-none-match'] === etag) { res.statusCode = 304 res.end() } else { // 如果不一致,那么就请求最新的资源返回给客户端 const data = fs.readFileSync("./img/03.jpg") // 这2句代码是设置协商缓存 res.setHeader("etag", etag) res.setHeader("Cache-Control", "no-cache") res.end(data) } } ...
2020年03月20日
37 阅读
0 评论
0 点赞
2018-11-24
表单 元素
iput (输入)属性名称描述type用来定义表单元素的类型。属性值如下:1. text:单行文本输入框 2.radio:单选按钮 3.checkbox:复选框 4.password:密码框 5.button:普通按钮,也可以直接写成 button 按钮,例如:<button>按钮标签</button>6.submit:提交按钮 7.reset:重置按钮 8.url:表示网址输入控件 9.date:日期控件 10.time:时间控件 11.email:电子邮件输入控件 12.file:文件选择控件,需要上传本地文件时,可以使用它 13.number:表示数字输入控件 14.color:颜色控件(不常用,了解即可)15.range:表示拖拽条(不常用,了解即可) 16.search:t 表示搜索框(不常用,了解即可)value用于为 input 元素设定值,value 值一般是给后端发送数据时使用,后续学习了相关课程就会了解name规定 input 元素的名称checked用来设置单选按钮、多选按钮的默认选中项placeholder表示提示文本,用来设置输入框的提示信息,告诉用户该输入框需要输入什么内容disabled用于禁用 input 元素,表示只读maxmax 表示最大值,表示数字输入控件(即 type="number"的 input 元素)允许输入的最大值minmin 表示最小值,最小值,表示数字输入控件(即 type="number"的 input 元素)允许输入的最小值required表示必填字段,约束某项内容是必填项,比如规定”用户名“项,是必填项textarea (文本框)定义文本域 (一个多行的输入控件)label (标签)定义了 <input> 元素的标签,一般为输入标题select (下拉列表)定义了下拉选项列表 与 option(下拉列表中的选项) 配合使用学习后实践: 表单标签
2018年11月24日
11 阅读
0 评论
0 点赞
2018-11-21
HTML 标签中的属性
属性说明langhtml 标签的属性,用来标记网页的语言;常见属性值有:"en"和"zh";en 代表英语, zh 代表中文charsetmeta 标签的属性,声明页面文档使用的字符编码类型。常用的属性值有:UTF-8 和 GB2312src(1)img 标签的属性,指定图片的路径(2)audio 标签和 video 标签也可以设置 src 属性,指定音频、视频的路径altimg 标签的属性,用来对引入的图片进行文本描述width规定元素的宽度。此属性不常用,了解即可。后续学习 css,会使用 css 样式设置元素宽度height规定元素的高度。此属性不常用,了解即可。后续学习 css,会使用 css 样式设置元素高度。注意,height 或者 width 如果省略其中一个属性,则按照图片原始比例缩放图片hrefa 标签属性,规定该链接要跳转到目标页面的地址titlea 标签属性,设置鼠标悬停的文本targeta 标签属性,规定在何处打开链接文档;如果属性值为 blank 或_blank,会打开新的标签页controlsaudio/video 的属性,用于显示播放控件autoplayaudio/video 的属性,设置音频/视频自动播放loopaudio/video 的属性,设置音频/视频可以循环播放class所有标签都可以使用这个属性,用来定义元素的类名(后续学习 css,会有详细的讲解)rowstextarea 标签属性,设置多行文本框有多少行colstextarea 标签属性,设置多行文本框有多少列border边框属性,可为 table 添加边框colspan表格标签的属性,实现跨列合并的效果,用来设置 td 或 th 跨列合并rowspan表格标签的属性,实现跨行合并的效果,用来设置 td 或 th 跨行合并
2018年11月21日
13 阅读
0 评论
0 点赞
2018-11-20
HTML 元素
块级元素注:块级元素可以独占一行,默认自上而下排列,可以设置宽高。标签说明h1~h6一级标题~六级标题(一级最大)p段落标签,用来描述网页中的段落内容div用于页面区域的划分,它就像一个容器,用来规划某个区域ul ,ol定义无序列表,定义有序列表li定义列表项,与ul或ol配合使用dt , dd定义列表中的项目,描述列表中的项目form表单标签,里面包含很多搜集信息的表单元素,如输入框,复选框等table ,canvas定义 HTML 表格,通过脚本(通常是 JavaScript)来绘制图形pre预格式化的文本内联元素注:内联元素不会自占一行,与其他内联元素在同一行显示,且宽高由内容撑起。标签说明a超链接标签,用于从一张页面链接到另一张页面span用来组合文档中的行内元素,一般用来包裹文字label为 input 元素定义标注(标记)label 可设置 for 属性b ,u字体加粗标签,下划线文本标签(不常用,了解即可)i ,strong斜体文本标签,用于强调文本的标签字体会加粗(不常用,了解即可)em用于强调文本的标签,字体变成斜体(不常用,了解即可)特殊内联元素注:可以设置宽高,但不独占一行标签说明img图片标签,用于在网页中嵌入图片audio音频标签,用于在页面中引入音频video视频标签,用于在页面中引入视频input定义用户可输入数据的输入字段。例如登录页面的用户名和密码框,都是使用 input 标签select定义下拉列表option定义下拉列表项,需要与 select 配合使用(块元素,写在这里是因为它需要跟 select 标签一起使用)textarea定义多行文本框,常用于留言框、备注框等
2018年11月20日
9 阅读
0 评论
0 点赞
2018-11-19
HTML 标签
区块标签注:html5 新增的语义化标签标签说明header定义页头nav定义导航main定义页面的主体区域aside可用作文章的侧栏artcle可用作文章的内容section可用作文档的区域块,类似于 divfooter定义页脚表格标签标签说明tbale表格标签tr表格行td表格列th标签,可以替代 td 标签,用来设置表格的标题thead定义表格头部tbody定义表格主题内容tfoot定义表格尾部caption定义表格的标题
2018年11月19日
26 阅读
0 评论
0 点赞
2018-11-17
HTML 基础
{card-default label="浏览器内核" width=""}浏览器内核说明IETridentIE 浏览器内核EdgeWebKit微软 Microsoft Edge(简称 ME 浏览器)Chrome/OperaBlink由 Google 和 Opera Software 共同研发,Blink 其实是 WebKit 的分支,以前 Google 是 WebKit 内核、现在是 BlinkFirefoxGecko火狐浏览器内核SafariWebKit苹果浏览器内核{/card-default}网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)HTML5 标准<!DOCTYPE html> 声明没有结束标签。字符集meta 元标签,表示网页的基础配置charset 字符集UTF-8 是一种字符集 <meta charset="UTF-8" />{card-default label="基础" width=""}<html>…</html> 定义 HTML 文档 <head>…</head> 文档的信息 <meta> HTML 文档的元信息 <title>…</title> 文档的标题 <link> 文档与外部资源的关系 <style>…</style> 文档的样式信息 <body>…</body> 可见的页面内容 <!--备注的内容--> HTML注释符{/card-default}{card-default label="网页三要素" width=""}title:网页的标题(30 字以内)keywords:网页的关键词(关键词之间用英文状态下的逗号 "," 分隔)description:网页的描述(150 字以内){/card-default}{card-default label="转义字符" width=""}标签说明 表示空格符号<表示小于号“<”>表示大于号“>”©表示版权符号“©”{/card-default}
2018年11月17日
26 阅读
0 评论
0 点赞
2018-10-12
前端开发学习步骤
以下是前端开发学习的详细步骤:1.HTML基础知识:了解HTML标记、标签、属性,学习HTML文本、图像、声音等元素的创建和使用。2.CSS基础知识:了解CSS样式的基本语法和规则,学习如何为HTML文档添加样式,如颜色、字体、边框、背景等。3.JavaScript基础知识:了解JavaScript语言的基本语法和数据类型,学习如何使用JavaScript控制网页和交互。4.jQuery框架:了解jQuery库的基本概念和使用方法,掌握DOM操作、事件处理和动画效果等。5.Bootstrap框架:了解Bootstrap框架的基本概念和使用方法,学习如何快速搭建响应式网页。6.Git和GitHub:了解版本控制工具Git和代码托管平台GitHub的基本用法,掌握团队协作和版本管理等技巧。7.计算机网络基础:了解计算机网络的基本概念和协议,学习HTTP协议、网络请求和响应等。8.前端框架:学习React、Vue、Angular等流行的前端框架,掌握组件化开发、状态管理和路由等。9.前端工具:了解Webpack、Babel、ESLint等前端开发工具的使用方法,提高项目开发效率和代码质量。10.网络安全:了解常见的网络攻击和防御方式,学习如何编写安全的前端代码,确保用户数据的安全性。总之,前端开发学习需要不断地实践和深入学习,从基础到高级逐步提升自己的技能和经验。
2018年10月12日
15 阅读
0 评论
1 点赞