28 02 月 2017 时隔十年再游轿子雪山 十年之前十年前的夏天邀请宿舍的小伙伴们还有一众亲戚来轿子雪山游玩。虽然现在都各奔东西了,但是情谊、照片,还有满满的回忆都不曾抹去。废话不多说,上照片妈妈和一个小表妹刚到缆车的地方就高原反应,吐了。但是小表妹十年之后又和我爬山了这座山好吧,这就是十年前的我。一线天,感觉每座山都有叫一线天的地方。十年之后没啥没变化。缆车,话说当年为了省钱,是爬上爬下的。还好最高峰没有开发出来,否则就要哭出来了。但是我四
01 03 月 2017 黄山 - 杭州五日游记 Day1 早上 4 点起床,开车到机场坐灰机。停车费 60 一天,据说是降过价的了由于儿童票和取公积金的事情,D 独自带着 Erik 坐了早上 8 点 40 的飞机。而我和父母坐中午 12 点 40 的,但飞机晚点了 5 个小时,中途被安排了午饭和宾馆休息。于是整个计划被打乱了,心好累。只能重新订酒店、重新安排计划 D 从来没独自带过 Erik,但看下来还是不错的。独自带着取车、办理公积金,晚上还来机场接我们。真是幸苦 D 了,为了能按时到达黄
07 12 月 2017 Pipe 主题开发指南 开发步骤主题框架 pipe/theme//主题目录 |-comment//评论组件目录 |-head//head 组件及第三方统计 |-images//通用图片目录 |-js//JS 通用方法目录 ||-article.js//文章页面 ||-common.js//所有页面 ||-manifest.json//清单 ||-symbol.js//svg 图标 |-scss//通用样式目录 |-x//主题页面目录 ||-theme-
02 12 月 2018 三阶魔方入门 背景很早很早以前看到有人能把打乱的魔方拼好,羡慕不已很早以前听说拼魔方有公式,嫉妒那些能看懂公式并且记下的人前几天小朋友买巧克力送了个魔方,然后被他打乱了反正是羡慕嫉妒恨,不如就自己学一下吧基本知识结构魔方有 6 个中心块,8 个角块,12 个棱块,1 个主轴,共 26 个块组成;中心块有 1 个颜色,角块有 3 个颜色,棱块有 2 个颜色。配色拼的过程中需要一直保持黄色中心块朝上步骤参考了 2 篇文章,走了一些弯路才拼好,特此
15 12 月 2018 清缓存的目的是什么,如何实现? 2018-12-15 缓存及优点浏览器的缓存可以临时存储一些文件,因此当页面切换或者再次加载相同页面时就不需要去重新下载这些文件。服务端可以设置头部告诉浏览器在一定时间内存储这些文件。这样不仅可以大幅度加快网站的速度还可以节省你的带宽。缓存带来的问题然而当开发者对站点进行修改时就可能会带来一些问题:某些用户可能仍在访问那些修改之前的文件。这样就会导致那些用户使用以前的功能或者访问一个坏了的站点(当服务
16 12 月 2018 HTML 中可以包含多个 `<header>` 或者 `<footer>` 元素吗? 2018-12-16 回答当然可以。W3 文档指出 <header> 和 <footer> 标签表示离他们最近的祖先“段落”区域中的头部和页脚。因此不仅 <body> 可以包含头部和页脚,<article> 和 <section> 同样也可以。加分回答 W3 建议根据你的需求编写你所需要的 <header> 和 <footer>,但是他们在离他们最近的祖先“段落”中仅能出现一次。正确示例 <body><header>...</hea
17 12 月 2018 简单描述 HTML5 语义元素中 `<header>`、`<article>`、`<section>`、`<footer>` 的正确用法 2018-12-17 回答 <header>:可在段落(<body>、<section> 等)中使用,用来介绍或导航该段落的相关内容。如:标题、作者姓名、发布日期和时间、目录和其他导航信息。<article>:是一个独立的元素。能够在逻辑上独立于页面的其他内容而存在,单独创建时可保证内容的完整性。如:博客中完整的文章或新闻中的报道。<section>:是一个较为灵活的容器,可用于存放拥有一个主题的内容。如
18 12 月 2018 简述 `<script>` 标签中的 defer 和 async 属性 2018-12-18 回答如果两个属性都没有(默认行为),脚本的下载和执行将会按照文档的先后顺序同步进行。当脚本下载和执行的时候,文档解析就会被阻塞,在脚本下载和执行完成之后文档才能往下继续进行解析。总之脚本的下载和执行都是按照文档的先后顺序进行。defer 属性表示脚本按顺序被解析到时就开始下载,下载过程中文档继续进行解析,当文档全部解析完成之后便开始执行下载好的脚本,这相当于在 DOMContentL
19 12 月 2018 什么是 DOM? 2018-12-19 回答 DOM(文档对象模型)是可扩展标记语言的标准编程接口,用来处理如 HTML 或 XML 这样由节点组成的树形结构的标记语言。这些节点(例如元素和文本节点)都是能够被编程接口操作的对象,他们任何可见的改变都会在文档中实时反映出来。在浏览器中,这些接口可供 JavaScript 进行使用,使其操作 DOM 节点来改变他们的样式、内容、在文档中的位置或者通过事件监听器来进行交互。加分回答 DOM 的设
20 12 月 2018 HTML 规范和浏览器实现存在什么区别? 2018-12-20 回答 HTML5 等 HTML 规范定义了一系列文档必须遵循的规则,以便规范能够“有效”的执行。此外,规范提供了浏览器必须如何去解析和渲染文档等诸如此类的说明。如果一个浏览器在处理文档上和规范中的规则保持一直,就可以说他已经支持了规范。到目前为止,还没有浏览器能够支持所有的 HTML5 规范(主流浏览器已经支持了绝大部分),这样一来,开发人员就必须考虑他们的产品或项目需要支持哪些浏览器,他们
22 12 月 2018 XHTML 和 HTML 有什么不同? 2018-12-22 回答主要区别如下:XHTML 是更严格更纯净的 HTML 代码,他必须包含 <DOCTYPE>XHTML 属性值必须使用双引号扩起来 XHTML 属性值不能省略。如 checked="checked"不能简写为 checkedXHTML 元素必须被正确地嵌套。如下就是错误的示例:<b><i>Thistextisboldanditalic</b></i><ul><li>Tea<ul><li>Black
23 12 月 2018 `rel="noopener"` 应在什么场景下使用,为什么? 2018-12-23 回答 rel="noopener"是 <a> 超链接标签的一个属性。他可以禁止打开的新页面中使用 window.opener 属性,这样一来打开的新页面就不能通过 window.opener 去操作你的页面。因此 rel="noopener"应在打开新页面的场景下使用,否则就会导致严重的安全漏洞。如新页面可以通过 window.opener.location=newURL 将你的页面导航至任何网址。
24 12 月 2018 什么是 HTML5 存储?解释一下 `localStorage` 和 `sessionStorage` 2018-12-24 回答在 HTML5 中,页面可以在用户的浏览器中存储本地数据。这些数据以 name/value 的格式进行存储,且只能被存储该数据的网页访问。在 localStorage 和 sessionStorage 中存在生命周期的差异。通过 localStorage 存储的数据是持久化的:他不会过期,可以一直存储在用户的电脑上,除非 web 应用程序删除他或用户使用了浏览器中相关的缓存清除功能。sessionS
25 12 月 2018 介绍一下 CSS 的 BEM 2018-12-25 回答 BEM(Block,Element,Modifier)是一种基于组件的对 CSS 类名进行约定的 Web 开发方法。他通过定义命名空间来解决权重问题,从而使 CSS 更易于维护。BEM 使用 Block、Element、Modifier 来解释其结构。Block 是一个可跨项目重用的独立组件,且是子组件(Element)的“命名空间”。Modifier 可标示 Block 或 Element 处于某种状态
26 12 月 2018 CSS 预处理器有什么优势? 2018-12-26 回答 CSS 预处理器添加了一些实用的原生 CSS 没有的的功能,并且他通过使用 DRY(Don'tRepeatYourself)原则使生成的 CSS 更加整洁和易于维护。他通过简洁的嵌套选择器语法减少了大量重复代码。变量、颜色函数(lighten,darken,transparentize 等)等附属工具,mixins 及循环使得 CSS 更像一个真正的编程语言,这使开发者编写复杂的 CSS 更加容易了
27 12 月 2018 使用 flexbox,创建一个 3 列布局,其中每列占据容器的 col-{n} / 12 比率 2018-12-27 回答设置父容器为 display:flex,然后使用 flex 为每列提供与其比值相对应的 flex-grow 值。<stylelang="scss">.row{display:flex;&__col{...&--2{flex:2}&--7{flex:7}&--3{flex:3}}}</style><divclass="row"><divclass="row__colrow__col--2
28 12 月 2018 简述一下 `@media` 的媒体类型 2018-12-28 回答@media 是可根据一个或多个基于媒体特征、媒体类型等条件来使用样式的规则。其包含以下四种媒体类型:all:适用于所有设备,默认选项 print:仅适用于打印设备 screen:仅适用于台式机、平板电脑、手机等屏幕 speech:仅适用于屏幕阅读器加分回答其余的媒体类型:tty,tv,projection,handheld,braille,embossed,aural 在 MediaQ