今天完成的事情。准备小课堂，准备关于less方面的资料，以及写深度思考。

css是一门非程序语言，没有函数，没有变量，没有混合，作用域。我们需要书写大量的，臃肿的代码，这些代码毫无复用的可能。既不利于扩展，也难以维护。

什么是less

less是一门动态css语言，使css样式能够更加灵活的作用域html标签之上，在书写css的时候，由于css没有子父级关于，无法像在html里面那样用嵌套表示关系，写大的项目的是，动辄就是几百行的代码，维护起来特别困难，会经常出现，我要改的代码在那，都在这，改完之后，这个颜色要改，那个颜色也要改。

less中的变量

在less中变量以“@”来表示。

变量允许我们单独定义几个样式，在使用的时候去调用，在我们需要做全局样式的调整的时候，我们更改一下变量所赋予常量的值就行了。

less中的mixins

混合就是一种将一系列属性从一个规则集引入（“混合”）到另一个规则集的方式。

通俗的讲就是，我们单独定义一个class为A，然后在A里面书写它的样式，之后在less中的class-B中去调用。而且在调用的过程中，我们还可以传递参数。

A{

width:10px

height:20px

}

B{

.A

}

输出

.B{

width:10px

height:20px

}

less中的extend

extend是一个伪类选择器

在Extend就相当于Java的继承，它允许一个选择器继承另一个选择器的样式。Extend有两种语法格式。

demo

定义一个类，比如

.box{

color：red；

}

我希望，demo选择器器去继承.box的color属性。

方法一

.box:extend(.demo){}

方法二

.box{

.box:extend(.demo)

}

明天计划，js任务1

任务15总结，

通过写轮播图，知道了轮播图的运行原理，input框，与check的绑定，label标签。和导航栏，在这两个地方花费了不少时间，还有什么是组件库，如何使用组件库。对bootstrap4的源码的使用。但是在做任务的时候，发现对源码的不理解，又得时候会出现复制源码多了，少了导致发生冲突。

深度思考

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

         一个用于创建web应用的JavaScript MVC框架，采用基于字符串的句柄条模板，支持双向绑定，观察者模式，计算属性（依赖其他属性动态变化），自动更新模板，路由控制，状态机等  。 Ember公司使用自身扩展的类来创建灰烬对象，数组，字符串，函数，提供大量方法与属性用于操作 .https：//www.emberjs.com/

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

什么是BFC？

在一个web页面的css渲染中，块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。w3c对于BFC的定义如下：

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

为了便于理解，我们换一种方式来重新定义BFC，一个HTML要创建BFC，则满足下列任意一个或者多个条件即可：

1，float的值不是none。

2，position的值不是static或者relatve。

3，dispaly的值是inline-block，table-cell，flex，table-caption或者inline-flex

4，overflow的值不是visble

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，

并且在一个BFC钟，块盒与行盒 （行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

怎么创建BFC

要显示的创建一个BFC是非常简单的，只要满足上述4个CSS条件之一就行。例如：

<div class="container">

  你的内容

</div>

在类container中添加类似 overflow: scroll，overflow: hidden，display: flex，float: left，或 display: table 的规则来显示创建BFC。虽然添加上述的任意一条都能创建BFC，但会有一些副作用：

1、display: table 可能引发响应性问题

2、overflow: scroll 可能产生多余的滚动条

3、float: left 将把元素移至左侧，并被其他元素环绕

4、overflow: hidden 将裁切溢出元素

因而无论什么时候需要创建BFC，都要基于自身的需要来考虑。对于本文，将采用 overflow: hidden 方式：

BFC中盒子怎么对齐

如前文所说，在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。W3C给出得规范是：

在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。浮动也是如此（尽管盒子里的行盒子 Line Box 可能由于浮动而变窄），除非盒子创建了一个新的BFC（在这种情况下盒子本身可能由于浮动而变窄）。

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

什么是SEO？

全称：Search English Optimization,搜索引擎优化，自从有了搜索引擎，SEO便诞生了。

存在的意义：为了提升网页在搜素引擎自然搜素结果中的收录数量以及排序位置而做的优化行为。简而言之，就是希望百度等搜素引起能多多收录我们精心制作后的网站，并且在别人访问时网站能排在前面。

分类，白帽SEO与黑帽SEO， 白帽SEO起到了改良和规范网站设计的作用，使网站对搜索引擎和用户更加友好，并且网站也能从搜索引擎中获取合理的流量，这是搜索引擎鼓励和支持的。黑帽SEO，利用和放大搜索引擎政策缺陷来获取更多用户的访问量，这类行为大多是欺骗搜索引擎，一般搜索引擎公司是不支持与鼓励的。

1，对网站的标题，关键字，描述精心设置，反映网站的定位，让搜索引擎明白网站是做什么的。

2网站内容优化，内容与关键字的对应，增加关键字的密度。

3，网站上合理的设置robot.text。文件

4，生成针对1搜素引擎友好的网站地图。

5，增加外部链接，到各个网站宣传。

搜素引擎的工作原理

当我们在输入框中，比如百度，在其后台有一个非常庞大的数据库，，里面存储了海量的关键词，而每个关键词又对应着很多网址，这些网址是百度程序从茫茫的互联网上一点一点下载收集而来的，这些程序称之为“搜索引擎蜘蛛”或“网络爬虫”。这些勤劳的“蜘蛛”每天在互联网上爬行，从一个链接到另一个链接，下载其中的内容，进行分析提炼，找到其中的关键词，如果“蜘蛛”认为关键词在数据库中没有而对用户是有用的便存入数据库。反之，如果“蜘蛛”认为是垃圾信息或重复信息，就舍弃不要，继续爬行，寻找最新的、有用的信息保存起来提供用户搜索。当用户搜索时，就能检索出与关键字相关的网址显示给访客。

　　一个关键词对用多个网址，因此就出现了排序的问题，相应的当与关键词最吻合的网址就会排在前面了。在“蜘蛛”抓取网页内容，提炼关键词的这个过程中，就存在一个问题：“蜘蛛”能否看懂。如果网站内容是flash和js，那么它是看不懂的，会犯迷糊，即使关键字再贴切也没用。相应的，如果网站内容是它的语言，那么它便能看懂，它的语言即SEO。

通过前端的角度去做好seo的话

通过网站的结构设计和网页代码的优化，使得前端页面既能让浏览器能够看懂，也能够让蜘蛛看懂。

一般而言，建立网站结构层次越少，越容易被蜘蛛抓获，也容易被收录。一般中小型网站目录结构超过3级，蜘蛛遍不愿意往下爬，万一迷路了怎么办，并且根据相关调差，访客如果经过三次跳转还没有找到需要的信息，很可能离开。

因此上层目录也是体验的需要，为此我们需要做到：

1.控制首页链接数量

网页首页是权重最高的地方，如果首页链接大少，没有桥，蜘蛛不能继续往下爬到内页，直接影响网站收录数量，但是首页链接也不能太多。

一旦太多，没有实质性的链接，很容易影响用户体验。也会降低网站首页权重，收录效果也不好。

　　因此对于中小型企业网站，建议首页链接在100个以内，链接的性质可以包含页面导航、底部导航、锚文字链接等等，注意链接要建立在用户的良好体验和引导用户获取信息的基础之上。

　　2.扁平化的目录层次，尽量让“蜘蛛”只要跳转3次，就能到达网站内的任何一个内页。扁平化的目录结构，比如：“植物”--> "水果" --> "苹果"、“桔子”、“香蕉”，通过3级就能找到香蕉了。

　　3.导航优化

　　导航应该尽量采用文字方式，也可以搭配图片导航，但是图片代码一定要进行优化，<img>标签必须添加“alt”和“title”属性，告诉搜索引擎导航的定位，做到即使图片未能正常显示时，用户也能看到提示文字。

　　其次，在每一个网页上应该加上面包屑导航，好处：从用户体验方面来说，可以让用户了解当前所处的位置以及当前页面在整个网站中的位置，帮助用户很快了解网站组织形式，从而形成更好的位置感，同时提供了返回各个页面的接口，方便用户操作；对“蜘蛛”而言，能够清楚的了解网站结构，同时还增加了大量的内部链接，方便抓取，降低跳出率。

　　4. 网站的结构布局--不可忽略的细节

　　页面头部：logo及主导航，以及用户的信息。

　　页面主体：左边正文，包括面包屑导航及正文；右边放热门文章及相关文章，好处：留住访客，让访客多停留，对“蜘蛛”而言，这些文章属于相关链接，增强了页面相关性，也能增强页面的权重。

　　页面底部：版权信息和友情链接。

　　特别注意：分页导航写法，推荐写法：“首页 1 2 3 4 5 6 7 8 9 下拉框”，这样“蜘蛛”能够根据相应页码直接跳转，下拉框直接选择页面跳转。而下面的写法是不推荐的，“首页 下一页 尾页”，特别是当分页数量特别多时，“蜘蛛”需要经过很多次往下爬，才能抓取，会很累、会容易放弃。

　　5.控制页面的大小，减少http请求，提高网站的加载速度。

　　一个页面最好不要超过100k，太大，页面加载速度慢。当速度很慢时，用户体验不好，留不住访客，并且一旦超时，“蜘蛛”也会离开。　　(2)网页代码优化

　　1.<title>标题：只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的<title>标题中不要设置相同的内容。

　　2.<meta keywords>标签：关键词，列举出几个页面的重要关键字即可，切记过分堆砌。

　　3.<meta description>标签：网页描述，需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。

　　4.<body>中的标签：尽量让代码语义化，在适当的位置使用适当的标签，用正确的标签做正确的事。让阅读源码者和“蜘蛛”都一目了然。比如：h1-h6 是用于标题类的，<nav>标签是用来设置页面主导航的等。

　　5.<a>标签：页内链接，要加 “title” 属性加以说明，让访客和 “蜘蛛” 知道。而外部链接，链接到其他网站的，则需要加上 el="nofollow" 属性, 告诉 “蜘蛛” 不要爬，因为一旦“蜘蛛”爬了外部链接之后，就不会再回来了。

　　6.正文标题要用<h1>标签：“蜘蛛” 认为它最重要，若不喜欢<h1>的默认样式可以通过CSS设置。尽量做到正文标题用<h1>标签，副标题用<h2>标签, 而其它地方不应该随便乱用 h 标题标签。

　　7.<br>标签：只用于文本内容的换行，比如:

<p>

　　 第一行文字内容<br/>

第二行文字内容<br/>

第三行文字内容

</p>

　　8.表格应该使用<caption>表格标题标签

 　  9.<img>应使用 "alt" 属性加以说明

　　10.<strong>、<em>标签 : 需要强调时使用。<strong>标签在搜索引擎中能够得到高度的重视，它能突出关键词，表现重要的内容，<em>标签强调效果仅次于<strong>标签。

　　　  <b>、<i>标签: 只是用于显示效果时使用，在SEO中不会起任何效果。

　　10、文本缩进不要使用特殊符号 &nbsp; 应当使用CSS进行设置。版权符号不要使用特殊符号 &copy; 可以直接使用输入法，拼“banquan”，选择序号5就能打出版权符号©。

　　12、巧妙利用CSS布局，将重要内容的HTML代码放在最前面，最前面的内容被认为是最重要的，优先让“蜘蛛”读取，进行内容关键词抓取。

　　13.重要内容不要用JS输出，因为“蜘蛛”不认识

　　14.尽量少使用iframe框架,因为“蜘蛛”一般不会读取其中的内容

　　15.谨慎使用 display：none ：对于不想显示的文字内容，应当设置z-index或设置到浏览器显示器之外。因为搜索引擎会过滤掉display:none其中的内容。

　　16. 不断精简代码

　　17.js代码如果是操作DOM操作，应尽量放在body结束标签之前，html代码之后。

知道css有个content属性吗？有什么作用？有什么应用？

HTML5离线储存如何使用