一、基础班模块
基础部分
1. 什么是HTML？
- [ ] HTML并不是真正的的程序语言，他是一种 标 记 语 言 ，用来结构化和含义化你想要放在web 网站上的那些内容。它由一系列的元素（elements）所组成，这些元素可以用来封装你的内容中担任不同工作的各部分和各个角色。
2. 什么是CSS？
- [ ] 就像 HTML，CSS 也不是真正的编程语言。它是样式表语言，也就是说，它允许你有选择性的为 HTML 文档的元素添加样式。
3. 行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？
- [ ] 块级元素(block)特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
和相邻的内联元素在同一行;宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的），就是里面文字或图片的大小。
4. 简述一下你对HTML语义化的理解？
- [ ] 1. HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；
2. 即使在没有样式CSS 的情况下也能以一种文档格式显示，并且是容易阅读的；
3. 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，有利于SEO；
4. 使阅读源代码的人更容易将网站分块，便于阅读、维护和理解；
5. rgba() 和 opacity 设置透明度的区别是什么？
- [ ] rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）
6. DOCTYPE的作用？
- [ ] 1. <!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。
1. 严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。
2. 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
3. DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。
7. 介绍一下你对浏览器内核的理解？都有哪些常见的浏览器内核？
- [ ] 要或者说核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释（如标准通用标记语言下的一个应用 HTML、JavaScript）并渲染（显示）网页。 所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。
常见浏览器内核：
Trident 内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称 MSHTML]
Gecko内核：Netscape6 及以上版本，FF,MozillaSuite/SeaMonkey 等。
Presto 内核：Opera7及以上。 [Opera内核原为：Presto，现为、Blink;]
Webkit 内核：Safari,Chrome 等。 [ Chrome 的：Blink（WebKit 的分支）]
EdgeHTML内核：Microsoft Edge。 [此内核其实是从 MSHTML fork 而来，删掉了几乎所有的 IE私有特性
8. CSS选择器权重如何计算？
- [ ] 页面显示样式的优先级取决于其“特殊性”’，特殊性越高，就显示最高的，当特殊性相等时，显示后者
特殊性表述为 4个部分：0,0,0,0
一个选择器的特殊性如下:
对于选择器是#id的属性值,特殊性值为：0,1,0,0
对于属性选择器，class或伪类，特殊性值为：0,0,1,0
对于标签选择器或伪元素，特殊性值为：0,0,0,1
通配符‘*’特殊性值为：0,0,0,0
内联样式特殊性值为：1,0,0,0
9. 对WEB标准以及W3C的理解与认识？
- [ ] 1. 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链 css 和 js 脚本、结构行为表现的分离，
2. 文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，
3. 容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。
10. CSS中优雅降级和渐进增强有什么区别？
- [ ] 优雅降级和渐进增强印象中是随着css3 流出来的一个概念。由于低级浏览器不支持
css3，但 css3 的效果又太优秀不忍放弃，所以在高级浏览中使用 css3 而低级浏览器只保证最基本的功能。咋一看两个概念差不多，都是在关注不同浏览器下的不同体验，关键的区别是他们所侧重的内容，以及这种不同造成的工作流程的差异。
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。
“渐进增强”观点则认为应关注于内容本身。
11. 对BFC规范的理解有哪些？
- [ ] 1. 定义：
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有 Block-level box 参与，它规定了内部的Block-level Box 如何布局，并且与这个区域外部毫不相干。
布局规则：
A. 内部的Box 会在垂直方向，一个接一个地放置。
B. Box垂直方向的距离由 margin决定。属于同一个 BFC的两个相邻 Box的 margin 会发生重叠。
C. 每个元素的 margin box 的左边，与包含块border box 的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
D. BFC 的区域不会与 float box 重叠。
E. BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
F. 计算 BFC 的高度时，浮动元素也参与计算。
1. 哪些元素会生成 BFC：
A. 根元素
B. float 属性不为 none
C. position为 absolute 或 fixed
D. display为inline-block， table-cell， table-caption， flex， inline-flex
F. overflow 不为 visible
12. 有多少种清除浮动的方法？
- [ ] 1. 父级div定义 height
原理：父级 div手动定义 height，就解决了父级 div无法自动获取到高度的问题。 简单、代码少、容易掌握 ，但只适合高度固定的布局.
1. 结尾处加空 div标签 clear：both
原理：在浮动元素的后面添加一个空div兄弟元素，利用 css 提高的clear：both清除浮动，让父级div能自动获取到高度 ，如果页面浮动布局多，就要增加很多空 div，让人感觉很 不好 .
1. 父级div定义 伪类：after 和 zoom
/清除浮动代码/
.clearfix：after{
content：""；
display：block；
visibility：hidden；
height：0；
line-height：0；
clear：both；
}
.clearfix{zoom：1}
原理：IE8以上和非 IE浏览器才支持：after，原理和方法 2有点类似，zoom(IE专有属性)
可解决ie6，ie7 浮动问题 ，推荐使用，建议定义公共类，以减少CSS 代码。
1. 父级div定义 overflow：hidden
超出盒子部分会被隐藏，不推荐使用.
1. 双伪元素法：
.clearfix：before，.clearfix：after {
content： ""；
display： block；
clear：both；
}
.clearfix {
zoom： 1；}
实际工作部分
1. HTML常见兼容性问题？
- [ ] 1. 双边距BUG float引起的 使用display
1. 3像素问题 使用float引起的 使用dislpay:inline -3px
2. 超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
3. Iez-index问题 给父级添加position:relative
4. Png透明 使用js代码改
5. Min-height最小高度 ！Important解决’
6. select在ie6下遮盖使用iframe嵌套
7. 为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08line-height:1px）
8. IE5-8不支持opacity，解决办法：
.opacity{
opacity: 0.4
filter: alpha(opacity=60); /* for IE5-7 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
}
9. IE6不支持PNG透明背景，解决办法: IE6下使用gif图片
2. 描述一个"reset"的CSS文件并如何使用它。知道`normalize.css`吗？你了解他们的不同之处？
- [ ] 重置样式非常多，凡是一个前端开发人员肯定有一个常用的重置CSS文件并知道如何使用它们。他们是盲目的在做还是知道为什么这么做呢？原因是不同的浏览器对一些元素有不同的默认样式，如果你不处理，在不同的浏览器下会存在必要的风险，或者更有戏剧性的性发生。
你可能会用Normalize来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗体的标题）。
在这一方面，无法做每一个复位重置。它也确实有些超过一个重置，它处理了你永远都不用考虑的怪癖，像HTML的audio元素不一致或line-height不一致。
3. BFC是什么？
- [ ] BFC（块级格式化上下文），一个创建了新的BFC的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。在同一个BFC中的两个相邻的盒子在垂直方向发生margin重叠的问题
BFC是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用
4. 怎样实现三栏布局，两边宽度固定，中间自适应？
- [ ] 圣杯布局 双飞翼布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#left {
width: 200px;
height: 200px;
float: left;
background-color: red;
}
#right {
width: 150px;
height: 200px;
float: right;
background-color: mistyrose;
}
#middle {
height: 200px;
margin: 0 150px 0 200px;
background-color: saddlebrown;
word-break: break-word;
}
</style>
</head>
<body>
<div id="content">
<div id="left">我是左侧内容我是左侧内容我是左侧内容我是左侧内容我是左侧内容</div>
<div id="right">我是右侧内容我是右侧内容我是右侧内容我是右侧内容我是右侧内容我是右侧内容</div>
<div id="middle">我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容</div>
</div>
</body>
</html>
5. 精灵图(CSS Sprites)的优点和缺点
- [ ] 精灵图是一种网页图片应用处理方式。就是把网页中很多小背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景图显示及定位，达到显示某一部分背景图的效果。
精灵图的优点：
1. 减少图片的体积，因为每个图片都有一个头部信息，把多个图片放到一个图片里，就会共用同一个头部信息，从而减少了字节数。
2. 减少了网页的http请求次数，从而加快了网页加载速度，提高用户体验。
3. 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
4. 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。
精灵图的缺点：
1. 在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；
2. 在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐；
3. 在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。
4. 精灵图不能随意改变大小和颜色。精灵图改变大小会失真模糊，降低用户体验，css3新属性可以改变精灵图颜色，但是比较麻烦，并且新属性有兼容问题。现在一般都是用web字体(图标字体)来代替精灵图。.
网友评论