发表于： 2018-12-02 21:01:10

1 709

今天完成的事情：今天的话一直还是在继续看js的教程，了解下click 事件以及dom操作
明天计划的事情：明天的话计划把绑定dom的操作以及尝做出来
遇到的问题：

1，今天的话还是通过修真院<web全能课>了解js。目前最让我感到困惑应该就是其中的函数了，比如说要在屏幕上输出一条内容，或者说绑定一个p标签输出一段文字吧，按照目前所了解的一共有三种办法吧。

document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()

第一种的话是通过绑定id的方式，

第二种的话是通过绑定class的方式。

第三种的话是绑定tag。简单来说绑定的就是

 <p></p>
<span></span>

标签，不过最常用的话就是绑定class类名了

2，目前来说还算是比较迷惑的就是dom中的节点操作了，常见的话有七种，

Document：整个文档树的顶层节点
DocumentType：doctype标签（比如<!DOCTYPE html>）
Element：网页的各种 HTML 标签（比如<body>、<a>等）
Attribute：网页元素的属性（比如class="right"）
Text：标签之间或标签包含的文本
Comment：注释
DocumentFragment：文档的片段

，但是在这个目录下面还存在节点数，节点数还包括

文档节点（document）：9，对应常量Node.DOCUMENT_NODE
元素节点（element）：1，对应常量Node.ELEMENT_NODE
属性节点（attr）：2，对应常量Node.ATTRIBUTE_NODE
文本节点（text）：3，对应常量Node.TEXT_NODE
文档片断节点（DocumentFragment）：11，对应常量Node.DOCUMENT_FRAGMENT_NODE
文档类型节点（DocumentType）：10，对应常量Node.DOCUMENT_TYPE_NODE
注释节点（Comment）：8，对应常量Node.COMMENT_NODE

。对于这一部分的概念还是有点不是很了解，不知道到底每个属性改怎么用。

收获：这2天的还一直在了解js内容，但是刚入门的话好多东西还是不太了解，不知道到底该去使用哪个函数去进行相对应的操作。只能说这方面的话还得继续哪里吧。

任务14，15总结：

任务耗时8天

总结：任务14.15算是对于css所学的全部内容的一次使用了。包括像后面所学到的sass 属性的一些使用，以及组建自己所使用的组件库了等等的。在这个任务中。消耗时间最长的就是导航栏和轮播图了。卡在这两个任务的时候感觉很困难，但是做完之后对这两个任务来说会其实还是很简单的。主要的可能就是当时思路的问题了。做完这个任务任务之后守护还是相对很大的，比如拆分组件库，对之前不经常使用的动画属性都有了更深的了解吧

深度思考

1. 为什么要做组件库？

使用组件库的目的应该就是使自己的代码更加规范，后期更加容易维护吧。比如每次在写html的时候都要声明

body{
    margin: 0;
}

就可以写在组件库里面，还有就是经常使用的flex属性吧，应为要经常搭配其他属性来进行使用，经常使用的

display: flex;
align-items: center;

就可以在sass里使用

@mixin

来进行提前声明这个变量使其更加简单一点

任务15深度思考。

1. 目前流行的组件库有哪些？css，js 各有哪些流行的库？

css:Bootstrap

Foundation

Semantic UI

Pure

UIkit

js:Prototype

Dojo

YUI

MooTools

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

1.BFC 是什么

定义：一个块级格式化上下文 [BFC] 是可视化 CSS 渲染网页的一部分，它是一个区域，块级布局，相互浮动在这个区域发生。它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。

2. 怎样才能形成 BFC

float 的值不为 none。

overflow 的值不为 visible

display 的值为 table-cell, table-caption, inline-block 中的任何一个

position 的值不为 relative 和 static

css3 中 flex boxes

fieldset 元素

3.BFC 的作用

包含浮动元素 (清除浮动)BFC 会根据子元素的情况自适高度，这个特性是对父元素使用 overflow:hidden/auto/scroll、 float:left/right 样式可以闭合浮动的

不被浮动元素覆盖浮动元素会无视兄弟元素的存在，覆盖在兄弟元素的上面，为该兄弟元素创建 BFC 后可以阻止这种情况的出现

4.BFC 规则

内部的 Box 会在垂直方向，从顶部开始一个接一个地放置

Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生叠加

每个元素的 margin box 的左边，与包含块 border box 的左边相接触 (对于从左往右的格式化，否则相反)。即使存在浮动也是如此

BFC 的区域不会与 float box 叠加

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

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

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

3. 控制首页链接数量

4. 导航优化

5. 控制页面的大小

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

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

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。

作用的话可以生成简单的图标，比如轮播图的焦点，hover时候的样式也可以用这个来添加

5. 知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？

由于 HTML 中缺少相应的元素，很难突出显示人、地点或日期等类型的信息。为了解决这个问题，有一组开发人员决定开发一套标准的命名约定盒标记模式来表示这些数据。这些命名约定基于 vCard（电子名片）和 iCalendar（日历数据交换）等现有的数据格式，现在称为微格式（microformat)。

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

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

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

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

6.HTML5 的离线储存怎么使用？

1、页面头部像下面一样加入一个 manifest 的属性；
2、在 cache.manifest 文件的编写离线存储的资源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
3、在离线状态时，操作 window.applicationCache 进行需求实现。

7. 渐进增强和优雅降级之间有什么不同?

渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。（从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面添加无害于基础浏览器的额外样式和功能。当浏览器支持时，它们会自动地呈现出来并发挥作用。）

优雅降级（graceful degradation）：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。（Web 站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于 IE 独特的盒模型布局问题，针对不同版本的 IE 的 hack 实践过优雅降级了，为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。）

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的、能够起作用的版本开始，并不断扩充，以适应未来环境的需要。

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

Quirks Mode 是一种浏览器（像 IE，Firefox，Opera）操作模式。从根本上说，怪异模式（也称之为兼容模式）意味着一个相对新的浏览器故意模拟许多在旧浏览器中存在的 bug，特别是在 IE4 和 IE5 中。

Quirks Mode 是由文档类型探查法触发。也就是大家熟知的文档类型切换。这意味着浏览器检查一个 HTML 文档的开始，看它是否包含一个 HTML 规范所要求的文档类型声明。

盒模型：在 W3C 标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在 Quirks 模式下，IE 的宽度和高度还包含了 padding 和 border。

设置行内元素的高宽：在 Standards 模式下，给 <span> 等行内元素设置 wdith 和 height 都不会生效，而在 quirks 模式下，则会生效。

设置百分比的高度：在 standards 模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用 margin:0 auto 设置水平居中：使用 margin:0 auto 在 standards 模式下可以使元素水平居中，但在 quirks 模式下却会失效。

9. 经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用 hack 的技巧？

1. 各浏览器不同标签 margin,padding 不同

解决：*{margin:0;padding:0;}

2. 居中问题，div 里的内容，IE 默认为居中，而 Firefox 默认为左对齐

解决：margin: 0 auto;

3. IE 浮动 margin 产生的双倍距离

解决：#box {

float:left;

width:100px;

margin:0 0 0 100px; // 这种情况之下 IE 会产生 200px 的距离

display:inline; // 使浮动忽略

}