首页
关于
统计
壁纸
留言板
投资盈亏
友情链接
Search
1
HTTP 缓存
24 阅读
2
HTML 标签
20 阅读
3
HTML 基础
17 阅读
4
HTML 标签中的属性
11 阅读
5
让Windows系统的时间显示到秒
8 阅读
前端开发
HTML / CSS
JavaScript
Python
Windows
Mac OS
Search
标签搜索
HTML
常用标签
显示秒
系统时间
属性
input
brew
VS code
免密登录
Sunshine
累计撰写
10
篇文章
累计收到
2
条评论
首页
分类
前端开发
HTML / CSS
JavaScript
Python
Windows
Mac OS
页面
关于
统计
壁纸
留言板
投资盈亏
友情链接
搜索到
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日
24 阅读
0 评论
0 点赞
2018-11-24
input 元素中的属性
.joe_detail__article table {width: 70%;}属性名称描述type用来定义表单元素的类型。属性值如下:1. text:单行文本输入框 2. radio:单选按钮 3 . checkbox:复选框 4. password:密码框 5 . button:普通按钮,也可以直接写成 button 按钮,例如:<button>按钮标签</button> 7. submit:提交按钮 8. reset:重置按钮 9. url:表示网址输入控件 10. date:日期控件 11. time:时间控件 12. email:电子邮件输入控件 13. file:文件选择控件,需要上传本地文件时,可以使用它 14. number:表示数字输入控件 15. color:颜色控件(不常用,了解即可) 16. range:表示拖拽条(不常用,了解即可) 17. search:t 表示搜索框(不常用,了解即可)value用于为 input 元素设定值,value 值一般是给后端发送数据时使用,后续学习了相关课程就会了解name规定 input 元素的名称checked用来设置单选按钮、多选按钮的默认选中项placeholder表示提示文本,用来设置输入框的提示信息,告诉用户该输入框需要输入什么内容disabled用于禁用 input 元素,表示只读maxmax 表示最大值,表示数字输入控件(即 type="number"的 input 元素)允许输入的最大值minmin 表示最小值,最小值,表示数字输入控件(即 type="number"的 input 元素)允许输入的最小值required表示必填字段,约束某项内容是必填项,比如规定”用户名“项,是必填项
2018年11月24日
4 阅读
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日
11 阅读
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日
7 阅读
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日
20 阅读
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日
17 阅读
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日
8 阅读
0 评论
0 点赞