前端高频笔试题之HTML/CSS部分

大佬略过(๑•ᴗ•๑)，有问题欢迎指出在下及时更改~感谢~

大家也知道 笔试总是偶尔会考些奇奇怪怪的东西~（还不是因为你cai） 进入正题啦~

1.什么是html？

HTML并不是真正的的程序语言，他是一种 标 记 语 言 ，用来结构化和含义化你想要放 在web 网站上的那些内容。它由一系列的元素（elements）所组成，这些元素可以用来 封装你的内容中担任不同工作的各部分和各个角色。

2.简述一下你对HTML语义化的理解？

1. HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；
2. 即使在没有样式CSS 的情况下也能以一种文档格式显示，并且是容易阅读的；
3. 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，有利于SEO；
4. 使阅读源代码的人更容易将网站分块，便于阅读、维护和理解；

3.DOCTYPE的作用？

1. 声明位于文档中的最前面，处于 标签之前。告知浏览器以何种模式来渲染文档。
2. 严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。
3. 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站 点无法工作。
4. DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。

4.介绍一下你对浏览器内核的理解？

要或者说核心的部分是“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私有特性

5.对WEB标准以及W3C的理解与认识？

1. 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链 css 和 js 脚 本、结构行为表现的分离，
2. 文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所 访问、更少的代码和组件，
3. 容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提 高网站易用性。

6.CSS中优雅降级和渐进增强有什么区别？

优雅降级和渐进增强印象中是随着css3 流出来的一个概念。由于低级浏览器不支持 css3，但 css3 的效果又太优秀不忍放弃，所以在高级浏览中使用 css3 而低级浏览器只保证最基本的功能。咋一看两个概念差不多，都是在关注不同浏览器下的不同体验，关键的区别是他们所侧重的内容，以及这种不同造成的工作流程的差异。“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。“渐进增强”观点则认为应关注于内容本身。

7.对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 的高度时，浮动元素也参与计算。
2. 哪些元素会生成 BFC： A. 根元素 B. float 属性不为 none C. position为 absolute 或 fixed D. display为inline-block， table-cell， table-caption， flex， inline-flex F. overflow 不为 visible

8.Rgba() 和 Opacity 设置透明度的区别是什么？

rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

9. 描述一个"reset"的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不同之处吗？

重置样式非常多，凡是一个前端开发人员肯定有一个常用的重置CSS文件并知道如何使用它们。他们是盲目的在做还是知道为什么这么做呢？原因是不同的浏览器对一些元素有不同的默认样式，如果你不处理，在不同的浏览器下会存在必要的风险，或者更有戏剧性的性发生。你可能会用Normalize来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗体的标题）。在这一方面，无法做每一个复位重置。它也确实有些超过一个重置，它处理了你永远都不用考虑的怪癖，像HTML的audio元素不一致或line-height不一致。

10. 请谈一下你对网页标准和标准制定机构重要性的理解。

网页标准和标准制定机构都是为了能让web发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种BUG、安全问题，最终提高网站易用性。（无标准答案-.-）

11.为什么利用多个域名来存储网站资源会更有效？

CDN缓存更方便，突破浏览器并发限制，节约cookie带宽，节约主域名的连接数，优化页面响应速度，防止不必要的安全问题。

12 怎样实现三栏布局，两边宽度固定，中间自适应？

圣杯布局，双飞翼布局（因为涉及很多代码 贴个链接写的很详细）

。。。

未完待续。。。(๑•ᴗ•๑)

转载于:https://juejin.im/post/5ca8b0036fb9a05e6538ab79