🎶 Sym - 一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台

📕 思源笔记 - 一款桌面端笔记应用,支持 Windows、Mac 和 Linux

🎸 Solo - B3log 分布式社区的博客端节点,欢迎加入下一代社区网络

♏ Vditor - 一款浏览器端的 Markdown 编辑器

0 篇文章

等于操作符 `==` 和 `===` 有什么区别

2019-01-04 回答三个等号===表示严格相等,也就是说类型和值都必须相同。两个等号==会使其中一边的类型进行强制转换,使等号两边的类型都相等后再对数值进行比较。加分回答尽量使用全等操作符。因为其没有隐式转换,这样结果会比较容易预测、计算也会比较快除了等于操作符,还可以使用 Object.is 进行同值比较。他有着自己的特殊用途,不应说他更宽松或更严格于其他等于操作符附表一张 xy=====Objec

CSS 优先级是如何计算的?

2019-01-03 回答浏览器通过优先级权重来判断 CSS 属性值与元素之间的关系:权重越高关系越密切,高权重的 CSS 属性值就会赋予到元素上。我们可以把 CSS 分为四类,每类的矩阵权重从高到底排列如下:内联样式(如:style="font-weight:bold"):[1,0,0,0]ID 选择器(如:#comments):[0,1,0,0]类选择器(如:.footer),属性选择器(如:[src$=".p

`+` 和 `~` 选择器有什么区别?

2019-01-02 回答毗邻兄弟选择器 + 可以选择紧随元素后的所有同级元素。如:div~p 可以选择紧随 div 元素后且与其同级的 p 元素。一般兄弟选择器~可选择元素后的所有同级元素。如:p~span 将会匹配同一父元素下,p 元素后的所有 span 元素。加分回答基本元素选择器*:通用元素选择器,匹配任何元素.footer:匹配 class="footer"的所有元素#comments:匹配 id="comments

CSS sprites 的优点及如何使用?

2019-01-01 回答 CSSsprites 将多张图片合并为一张图片,从而减少浏览器对 HTTP 的请求数量,进而减少网页的加载时间。即使在 HTTP/2 协议下,这依旧可以减少网页的加载时间。在 HTTP/1.1 中,每个 TCP 连接只允许一个请求。现代浏览器虽然可以打开多个(2-8)并行的 TCP 连接,但连接数量依旧有限。HTTP/2 允许浏览器和服务器之间的多个请求在一个 TCP 连接上进行复用。这意味着 TCP 连接

`em` 和 `rem` 有什么区别?

2018-12-31 回答 em 和 rem 都是基于 font-size 的 CSS 属性。唯一的区别是他们继承的对象不同。em 继承父元素中的 font-sizerem 继承根元素(html)中的 font-size 在大多数浏览器中,根元素的 font-size 默认值为 16px 加分回答其他单位 vh 和 vw:窗口高度或宽度的 1/100。可脱离父元素的继承规则,如:窗口高 900px,父元素高 1200px,1vh 为 9px。vmin

focus 有什么效果?应该怎么正确处理他们?

2018-12-30 回答像按钮或锚点标记等元素被选中时,该元素的外围就会出现轮廓。不同浏览器会呈现不同的效果,但一般是在元素周围显示蓝色的轮廓来表示他已经被选中。过去,很多人使用 outline:0 来移除元素被选中的效果。但是,这会让键盘侠们感到很不友好,因为选中效果被移除了。但是如果不移除的话,元素外围的蓝色轮廓有时候会让大多数人感觉不够舒适美观。Bootstrap 等 UI 框架一般采用更加美观的 box

描述 CSS 盒子模型布局并简要描述其每一个部分

2018-12-29 回答 CSS 盒子模型(BoxModel)布局包含内容(content)、内边距(padding)、边框(border)、外边距(margin)四个部分。content:盒子内部填充元素内容(例如文本、图像或视频播放器等)的区域。他的大小为 content-box 的宽和高。相关 CSS 属性为 width,min-width,max-width,height,min-height,max-h

简述一下 `@media` 的媒体类型

2018-12-28 回答@media 是可根据一个或多个基于媒体特征、媒体类型等条件来使用样式的规则。其包含以下四种媒体类型:all:适用于所有设备,默认选项 print:仅适用于打印设备 screen:仅适用于台式机、平板电脑、手机等屏幕 speech:仅适用于屏幕阅读器加分回答其余的媒体类型:tty,tv,projection,handheld,braille,embossed,aural 在 MediaQ

CSS 预处理器有什么优势?

2018-12-26 回答 CSS 预处理器添加了一些实用的原生 CSS 没有的的功能,并且他通过使用 DRY(Don'tRepeatYourself)原则使生成的 CSS 更加整洁和易于维护。他通过简洁的嵌套选择器语法减少了大量重复代码。变量、颜色函数(lighten,darken,transparentize 等)等附属工具,mixins 及循环使得 CSS 更像一个真正的编程语言,这使开发者编写复杂的 CSS 更加容易了

介绍一下 CSS 的 BEM

2018-12-25 回答 BEM(Block,Element,Modifier)是一种基于组件的对 CSS 类名进行约定的 Web 开发方法。他通过定义命名空间来解决权重问题,从而使 CSS 更易于维护。BEM 使用 Block、Element、Modifier 来解释其结构。Block 是一个可跨项目重用的独立组件,且是子组件(Element)的“命名空间”。Modifier 可标示 Block 或 Element 处于某种状态

什么是 HTML5 存储?解释一下 `localStorage` 和 `sessionStorage`

2018-12-24 回答在 HTML5 中,页面可以在用户的浏览器中存储本地数据。这些数据以 name/value 的格式进行存储,且只能被存储该数据的网页访问。在 localStorage 和 sessionStorage 中存在生命周期的差异。通过 localStorage 存储的数据是持久化的:他不会过期,可以一直存储在用户的电脑上,除非 web 应用程序删除他或用户使用了浏览器中相关的缓存清除功能。sessionS

`rel="noopener"` 应在什么场景下使用,为什么?

2018-12-23 回答 rel="noopener"是 <a> 超链接标签的一个属性。他可以禁止打开的新页面中使用 window.opener 属性,这样一来打开的新页面就不能通过 window.opener 去操作你的页面。因此 rel="noopener"应在打开新页面的场景下使用,否则就会导致严重的安全漏洞。如新页面可以通过 window.opener.location=newURL 将你的页面导航至任何网址。

XHTML 和 HTML 有什么不同?

2018-12-22 回答主要区别如下:XHTML 是更严格更纯净的 HTML 代码,他必须包含 <DOCTYPE>XHTML 属性值必须使用双引号扩起来 XHTML 属性值不能省略。如 checked="checked"不能简写为 checkedXHTML 元素必须被正确地嵌套。如下就是错误的示例:<b><i>Thistextisboldanditalic</b></i><ul><li>Tea<ul><li>Black

React 和 HTML 的事件处理有什么不同?

2018-12-21 回答主要区别如下:在 HTML 中,事件名称使用小写,而 React 中使用驼峰命名。<!--HTML--><buttononclick="handleClick()">/*React*/<buttononClick="handleClick()"> 在 HTML 中,阻止事件的默认行为使用 returnfalse,而 React 中必须调用 preventDefault。<!--HTML--><bu

HTML 规范和浏览器实现存在什么区别?

2018-12-20 回答 HTML5 等 HTML 规范定义了一系列文档必须遵循的规则,以便规范能够“有效”的执行。此外,规范提供了浏览器必须如何去解析和渲染文档等诸如此类的说明。如果一个浏览器在处理文档上和规范中的规则保持一直,就可以说他已经支持了规范。到目前为止,还没有浏览器能够支持所有的 HTML5 规范(主流浏览器已经支持了绝大部分),这样一来,开发人员就必须考虑他们的产品或项目需要支持哪些浏览器,他们

什么是 DOM?

2018-12-19 回答 DOM(文档对象模型)是可扩展标记语言的标准编程接口,用来处理如 HTML 或 XML 这样由节点组成的树形结构的标记语言。这些节点(例如元素和文本节点)都是能够被编程接口操作的对象,他们任何可见的改变都会在文档中实时反映出来。在浏览器中,这些接口可供 JavaScript 进行使用,使其操作 DOM 节点来改变他们的样式、内容、在文档中的位置或者通过事件监听器来进行交互。加分回答 DOM 的设

简述 `<script>` 标签中的 defer 和 async 属性

2018-12-18 回答如果两个属性都没有(默认行为),脚本的下载和执行将会按照文档的先后顺序同步进行。当脚本下载和执行的时候,文档解析就会被阻塞,在脚本下载和执行完成之后文档才能往下继续进行解析。总之脚本的下载和执行都是按照文档的先后顺序进行。defer 属性表示脚本按顺序被解析到时就开始下载,下载过程中文档继续进行解析,当文档全部解析完成之后便开始执行下载好的脚本,这相当于在 DOMContentL

简单描述 HTML5 语义元素中 `<header>`、`<article>`、`<section>`、`<footer>` 的正确用法

2018-12-17 回答 <header>:可在段落(<body>、<section> 等)中使用,用来介绍或导航该段落的相关内容。如:标题、作者姓名、发布日期和时间、目录和其他导航信息。<article>:是一个独立的元素。能够在逻辑上独立于页面的其他内容而存在,单独创建时可保证内容的完整性。如:博客中完整的文章或新闻中的报道。<section>:是一个较为灵活的容器,可用于存放拥有一个主题的内容。如