标签：content   主题   这一   透明图   蜘蛛   副作用   盒模型   优雅   format   

目前流行的组件库有哪些？CSS，JS各有哪些流行的库？

什么是组件？为什么要用组件库？

组件是组成页面中最基本的元素，按钮，输入框，下拉选择都是组件，组件和组件组合就变成了一个更复杂的组件。至于为什么要用组件库我想应该是体验了，用户使用体验以及开发人员的开发体验，用户在页面上的交互都是通过组件，一个颜值高的组件可以第一眼吸引用户去点击，这就是用户体验，开发体验更不用说，组件就是同种类型不同交互的封装，是用组件库可以让我们更专注的针对业务的开发和产品的交互。

什么是库，什么是框架

库：库是有用功能的有组织的集合。库的典型功能包括处理字符串，日期，HTML DOM元素，事件，Cookie，动画，网络请求等。每个函数将值返回给调用应用程序，但是你从中可以选择参数来应用。库是更多是一个封装好的特定的集合，提供给开发者使用，的英文特定而且于某一方面的集合（方法和函数），库没有控制权，控制权在使用者手中，库在查询中需要的功能在自己的应用中使用，我们可以从封装的角度理解库。

框架：框架顾名思义就是一套架构，会基于自身的特点向用户提供一套相当于叫完整的解决方案，而且控制权的在框架本身，使用者要找框架所规定的某种规范进行开发框架。是一个应用程序的骨架，它要求你以特定的方式处理软件设计，并在某些点插入自己的逻辑。通常框架提供事件。 存储和数据绑定等功能。

从网页开发人员的角度：库可以很容易地被另一个库替换但框架不能 。

目前主流的框架

Vue、Angular、React三大主流

流行的组件库或者说是UI框架

Mint UI

Mint UI是 饿了么团队开发基于vue.js的移动端UI框架，它包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。

WeUI

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。

ElementUI支持Vue、Angular、React

Element是饿了么前端开源维护的Vue UI组件库,组件齐全，基本涵盖后台所需的所有组件，文档讲解详细，例子也很丰富。 主要用于开发PC端的页面，是一个质量比较高的Vue UI组件库。官网地址:element-cn.eleme.io/#/zh-CN

vant UI

vant UI是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。

Bootstrap

简洁、直观、强悍的前端开发框架，让web开发更迅速、简单

NG-ZORRO (angular)

开箱即用的高质量 Angular 组件，与 Angular 保持同步升级。
使用 TypeScript 构建，提供完整的类型定义文件。

Amaze ~ 妹子 UI

• Amaze UI 以移动优先（Mobile first）为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。
• Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件，更有多个包含不同主题的 Web 组件，可快速构建界面出色、体验优秀的跨屏页面，大幅提升开发效率。
• 相比国外框架，Amaze UI 关注中文排版，根据用户代理调整字体，实现更好的中文排版效果；兼顾国内主流浏览器及 App 内置浏览器兼容支持。
• Amaze UI 面向 HTML5 开发，使用 CSS3 来做动画交互，平滑、高效，更适合移动设备，让 Web 应用更快速载入。

Layui

layer是一款口碑极佳的web弹层组件，是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。layui 首个版本发布于2016年秋，她区别于那些基于 MVVM 底层的 UI 框架，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。

Ant Design

Ant Design 是基于 React 开发的，并不是传统的 html。React 起源于 Facebook 的内部项目，现在已经成了一个很流行的开发工具。

请描述 BFC(Block Formatting Context) 及其如何工作

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

W3C的定义

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的块级格式化上下文。

在一个块级格式化上下文里，盒子从包含块的顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。两个相邻的块级盒子的垂直外边距会发生叠加。

在块级格式化上下文中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘），即使存在浮动也是如此，除非这个盒子创建一个新的块级格式化上下文。

BFC特性：

• 内部的Box会在垂直方向，从顶部开始一个接一个地放置。
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
• 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
• BFC的区域不会与float box叠加。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
• 计算BFC的高度时，浮动元素也参与计算。

下列方式会创建块格式化上下文：

• 根元素()
• 浮动元素（元素的 float 不是 none）
• 绝对定位元素（元素的 position 为 absolute 或 fixed）
• 行内块元素（元素的 display 为 inline-block）
• 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
• 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
• 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
• overflow 值不为 visible 的块元素
• display 值为 flow-root 的元素
• contain 值为 layout、content或 paint 的元素
• 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
• 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
• 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
• column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。
• 块格式化上下文包含创建它的元素内部的所有内容.

块格式化上下文对浮动定位（参见 float）与清除浮动（参见 clear）都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间。

使用display: flow-root
一个新的 display 属性的值，它可以创建无副作用的BFC。在父级块中使用 display: flow-root 可以创建新的BFC。

谈谈以前端角度出发做好SEO需要考虑什么？

1. 维护网站，提高内容质量，保持更新

搜索引擎会考评网站的质量，保持网站的经常更新，使网站拥有大量的、有用的、可读性强的优质信息。网站的权重会相应的提升。

2. 网站结构布局优化：尽量简单、开门见山，提倡扁平化结构。

建立的网站结构层次越少，越容易被“蜘蛛”抓取，也就容易被收录。

3. 控制首页链接数量

网站首页是权重最高的地方，如果首页链接太少，没有“桥”，“蜘蛛”不能继续往下爬到内页，直接影响网站收录数量。但是首页链接也不能太多，一旦太多，没有实质性的链接，很容易影响用户体验，也会降低网站首页的权重，收录效果也不好。注意链接要建立在用户的良好体验和引导用户获取信息的基础之上。

4. 导航优化

导航应该尽量采用文字方式，也可以搭配图片导航，但是图片代码一定要进行优化，img标签必须添加“alt”和“title”属性，告诉搜索引擎导航的定位，做到即使图片未能正常显示时，用户也能看到提示文字。其次，在每一个网页上应该加上面包屑导航，好处：从用户体验方面来说，可以让用户了解当前所处的位置以及当前页面在整个网站中的位置，帮助用户很快了解网站组织形式，从而形成更好的位置感，同时提供了返回各个页面的接口，方便用户操作；对“蜘蛛”而言，能够清楚的了解网站结构，同时还增加了大量的内部链接，方便抓取，降低跳出率。

5. 减少http请求，提高网站的加载速度。

当速度很慢时，用户体验不好，留不住访客，并且一旦超时，“蜘蛛”也会离开

6.适量的关键词和网页描述

• 关键词不宜太多也不宜太少，列举出几个页面的重要关键字即可，切记过分堆砌
• title标题：只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的title标题中不要设置相同的内容。
• meta keywords标签：关键词，列举出几个页面的重要关键字即可，切记过分堆砌。
• meta description标签：网页描述，需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。
• body中的标签：尽量让代码语义化，在适当的位置使用适当的标签，用正确的标签做正确的事。
• a标签：页内链接，要加 “title” 属性加以说明，让访客和 “蜘蛛” 知道。而外部链接，链接到其他网站的，则需要加上 el=“nofollow” 属性, 告诉 “蜘蛛” 不要爬，因为一旦“蜘蛛”爬了外部链接之后，就不会再回来了。
• img应使用 “alt” 属性加以说明。为图片加上alt属性,当网络速度很慢，或者图片地址失效的时候，就可以体现出alt属性的作用，他可以让用户在图片没有显示的时候知道这个图片的作用。
• strong、em标签 : 需要强调时使用。strong标签在搜索引擎中能够得到高度的重视，它能突出关键词，表现重要的内容，em标签强调效果仅次于strong标签。
• 巧妙利用CSS布局，将重要内容的HTML代码放在最前面，最前面的内容被认为是最重要的，优先让“蜘蛛”读取，进行内容关键词抓取。搜索引擎抓取HTML内容是从上到下，利用这一特点，可以让主要代码优先读取，广告等不重要代码放在下边。
• 谨慎使用 display：none ：对于不想显示的文字内容，应当设置z-index或设置到浏览器显示器之外。因为搜索引擎会过滤掉display:none其中的内容。
• 保留文字效果如果需要兼顾用户体验和SEO效果，在必须用图片的地方，例如个性字体的标题，我们可以利用样式控制，让文本文字不会出现在浏览器上，但在网页代码中是有该标题的。例如这里的“电视剧分类”，为了完美还原设计图，前端工程师可以把文字做成背景图，之后用样式让html中的文字的缩进设置成足够大的负数，偏离出浏览器之外，也可以利用设置行高的方法让文字隐藏。
• 利用CSS截取字符如果文字长度过长，可以用样式截取，设置高度，超出的部分隐藏即可。这样做的好处是让文字完整呈现给搜索引擎，同时在表现上也保证了美观。

CSS被忽略的content属性

CSS的 content 属性，大家应该都不陌生，很多时候我们都使用过，一般情况下你看到最多的用法无外乎这样两种：一种用于清除浮动，一种用于我们经常使用的字体图标。

.clear:after {
  content: "";
  display: block;
  clear: both;
}

.icon:before {
  content: "\e778";
}

它的更多用法:

CSS 的 content 属性用于在元素的::before和::after伪元素中插入内容。使用content属性插入的内容都是匿名的可替换元素。

从上面看到它只能用于「伪元素」中，但其实它在 chrome 浏览器中，可用于任何元素.不过除了chrome浏览器，其它浏览器并不支持直接在元素上使用，只能用在「伪元素」上。所以使用场景并不多。

属性值

• string
  指定的文本值。字符串是最常见的用法，比如上面说的字体图标。不过你还可以做的更多。
  

Q：是不是发现了新大陆？

A：是

Q：登哥，你是如何看待别人都说你很帅的？

A：我这该死的，无处安放的魅力

• url
  值可以为：图像，声音，视频等内容。

通常你想在网页中显示一张图片，一般是两种方式：使用或者使用 background-image。

除此之外，你还可以利用 content 属性，它的值可以是图片的地址

不过以这种方式插入时无法更改图像的尺寸。所以我们很少这么使用

• attr

可以用它获取 HTML 属性的值。

年龄：18

• counter（计数器）

通常你要实现一个动态的递增数，都是通过 JavaScript 实现，你可能都没有想过 CSS 也是可以实现递增数。

本质上 CSS 计数器是由 CSS 维护的变量，这些变量可能根据 CSS 规则增加以跟踪使用次数。
计数器的值通过使用 counter-reset 和 counter-increment 操作，然后通过 counter() 或 counters()函数来显示在页面上。

如何使用它:

首先，使用前必须要通过 counter-reset 重置一个初始值。它默认是 0。你也可以指定初始值

counter-reset: record; /* 重置计数器为 0 */
counter-reset: record 2; /* 重置计数器为 2 */

除此之外，它的值还可以是多个。

counter() 函数可以接受两个参数。

  counter(name, list-style-type)

list-style-type 的值可以为：disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | none | inherit

除了 counter() 之外还有一个 counters()，那它是做什么的呢？

counters() 对嵌套的计数器非常有用，它可以在不同级别的嵌套计数器之间插入字符串。

什么是微格式？在前端构建中应该考虑微格式吗？

microformat微格式定义

建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式（microformats.org官方定义）。是把语义嵌入到HTML以便有助于分离式开发而制定的一些简单约定，是兼顾人机可读性设计的数据表达方式，对Web网页进行语义注解的方法。

微格式在实际应用中的意义和作用又是什么呢？

微格式按照某种已有的被广泛应用的标准，通过对内容块的语义标记，可以让外部应用程序、聚合程序和搜索引擎能够做以下事情：

1、在捉取Web内容时，能够更为准确地识别内容块的语义；

2、对内容进行操作，包括提供访问、校对，还可以将其转化成其他的相关格式，提供给外部程序和Web服务使用。

我们从上面的描述知道，微格式实际就是为现有的(X)HTML元素添加元数据和其他属性，增强语义。

不同种类的微格式

• XFN 用于描述社交关系
• hCalendar 用于描述事件
• hCard 描述联系信息
• hNews 描述新闻内容
• hProduct 描述商品
• XOXO 描述列表和大纲

微格式应用举例

1、
例如 一个地理坐标：46.32，-12.33，普通人无法理解这些数字的含义，现在把它做成微格式：

52.48
-1.89

这样机器就可以正确地理解这些字符的含义，并对其进行索引并在地图上发现相应位置，导出到GPS设备，或者用于其他的用途。

2、

当我用手机浏览某公司的网站时，手机浏览器识别出了网页中的 hCard 信息。这个 hCard 标记了该公司的多种联络方式，手机浏览器很聪明地提示我“是否保存到通讯录”，于是我很经松地保存了我所需要的信息。

HTML5的离线储存怎么使用？

HTML5新功能离线存储

离线存储可以将站点的一些文件存储在本地，在没有网络的时候还是可以访问到以缓存的对应的站点页面，其中这些文件可以包括html，js，css，img等等文件，即使在有网络的时候，浏览器也会优先使用已离线存储的文件，返回一个200（fromcache）头。这跟HTTP的缓存使用策略是不同的。

做好相应资源的缓存可以带来更好的用户体验，当用户使用自己的流量上网时，本地缓存不仅可以提高用户访问速度，而且大大节约用户的使用流量。

原理：

HTML5的离线存储是基于一个新建的.manifest文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，
这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

什么是manifest文件

Manifest是一个简单的文本文件，它的扩展名是任意的，定义需要缓存的文件、资源，当第一次打开时，浏览器会自动缓存相应的资源。

Manifest 的特点：

• 离线浏览：即当网络断开时，可以继续访问你的页面。
• 访问速度快：将文件缓存到本地，不需每次都从网络上请求。
• 稳定性：做了Manifest缓存，遇到突发网络故障或者服务器故障，继续访问本地缓存

如何使用离线存储

• 页面头部像下面一样加入一个manifest的属性。
  
• 在cache.manifest文件的编写离线存储的资源。

离线存储的manifest一般由三个部分组成：

• CACHE：必选，表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
• NETWORK：可选，可以使用通配符，表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。
• FALLBACK：可选，表示如果访问第一个资源失败，那么就使用第二个资源来替换他

如何更新缓存？

• 更新manifest文件
  • 给manifest添加或删除文件。
  • 若manifest没有添加或删除文件，只是修改了文件，可以通过更改版本号等更新manifest文件。　
• 通过javascript操作html5中引入了js操作离线缓存的方法：window.applicationCache.update()，可以手动更新缓存。
• 清除浏览器缓存如果用户清除了浏览器缓存（手动或用其他一些工具），都会重新下载文件

h5还有哪些存储方式？

• localStorage没有时间限制的数据存储(永久),对于同一个浏览，当用户关闭浏览器窗口后，数据不会被删除。
• sessionStorage针对一个session的数据存储(sesion/),当用户关闭浏览器窗口后，数据会被删除。
• cookie：不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得cookie 速度很慢而且效率也不高

离线存储有什么优缺点？

优点：

• 离线浏览,用户可在应用离线时使用它们
• 速度,已缓存资源加载得更快
• 减少服务器负载,浏览器将只从服务器下载更新过或更改过的资源。

缺点：

• 更新的资源，需要二次刷新才会被页面采用
• 不支持增量更新，只有manifest发生变化，所有资源全部重新下载一次
• 缺乏足够容错机制，当清单中任意资源文件出现加载异常，都会导致整个manifest策略运行异常

渐进增强 VS 优雅降级

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

写法

.transition{
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;  
}

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

写法

.transition{ 
　　     transition: all .5s;
　　  -o-transition: all .5s;
  　-moz-transition: all .5s;
 -webkit-transition: all .5s;
}

渐进增强相当于向上兼容，而优雅降级相当于向下兼容。

如何抉择

根据你的用户所使用的客户端的版本来做决定

现在有很成熟的技术，能够让你分析使用你客户端程序的版本比例。如果低版本用户居多，当然优先采用渐进增强的开发流程；如果高版本用户居多，为了提高大多数用户的使用体验，那当然优先采用优雅降级的开发流程。

Quirks模式是什么？它和Standards模式有什么区别？

浏览器的排版引擎有三种模式

Quirks怪异模式、标准模式（Standards mode）和接近标准模式（Almost standards mode）

浏览器如何决定用哪个模式？

对HTML文件来说，声明位于标签之前，这个可以告知浏览器使用哪种 HTML 规范

当 doctype 信息如上时，表明该页面是遵守了 HTML5 规范的，浏览器会选择 Standards Mode，这种 doctype 是最推荐的一种，我们平时设计页面都应该加上这一个 doctype。

当 doctype 如上时，浏览器同样会选择 Standards Mode，虽然和第一种 doctype 有一些区别，但是几乎可以认为是一样的。

当 doctype 如上时，浏览器会选择 Almost Standards Mode，需要注意的是如果今后需要把这个页面改为 HTML5 规范，那么

Opacity:0.8;

Filter:alpha(opacity=80);

-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(opacity=80)”;

Height: auto !important;

Height: 300px;

Min_height: 300px;

a{outline:none;}

a:focus{outline:none;}