前端知识点总结（一）

前端HTML，css(一)总结

1.浏览器页面由那三层构成，分别是什么，作用是什么？

 构成：结构层，表示层，行为层。
 分别是：HTML,CSS,JavaScript。
 作用：HTML实现结构页面，css实现页面样式，JavaScript实现一些客户端的功能与业务。

2.html5的优点和缺点

优点：a:网络标准统一，html5本身是有W3C推荐出来的。
b: 多设备，跨平台
c: 即时更新
d:可以很好的代替Flash和Silverlight.
e涉及网站的抓取和索引的时候，对SEO很友好。
缺点：a:许多特性个浏览器支持程度不一样
b：浏览器兼容性差

3.Doctype 作用？严格模式与混杂模式如何区分？有何意义？

答：（1）声明位于文档最前面，处于标签之前，告诉浏览器和解析器用什么文档类型规范来解析这个文档。
（2）严格模式的排版和js运作模式是以该浏览器支持的最高标准。
（3）在混杂模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以方式站点无法工作。
doctype不存在或格式不正确会导致文档以混杂模式呈现。

4.html5有哪些新特性，移除了哪些元素？

答：按优先级定义为结构性元素，块级元素，行内语义性元素，和交互性元素四大类。
结构性：
section：用于区域的文章描述
header:页面主题的头部
footer:页面主题底部
nav:专门用于菜单导航，链接导航的元素
article:用于表现一片文章的主题内容。
块级元素主要完成页面的结构划分
aside:用于表达侧栏，摘要，插入的引用等作为补充主题。
figure：对多个元素进行组合并展示。
dialog:该元素包含dt和dd这俩个组合元素。
行内语义性主要完成页面的具体内容的引用和描述
meter:表示特定范围内的数值，可用于工资，数量，百分比
time:表示时间值
progress:用于表示进度条，可通过max，min step 进行属性控制
video: 视频元素，
audio：音频元素。

交互性元素主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种
事件的基础
details:用来表示一段具体的内容
datagrid:用来控制客户端数据显示，可以由动态脚本及时更新
menu：主要用于交互菜单
command:用来处理命令按钮。

5，浏览器的内核？

  IE：trident内核
  Firefox:gecko内核
  Safari:webkit内核
  Opera:Bink内核
  Chrome:Blink（基于webkit）

6.说说你对 HTML5 认识?（是什么,为什么）

参考答案：
是什么：
HTML5 指的是包括 HTML 、 CSS 和 JavaScript 在内的一套技术组合。它希望能够
减少网页浏览器对于需要插件的丰富性网络应用服务（ Plug-in-Based Rich
Internet Application ， RIA ），例如： AdobeFlash 、 Microsoft Silverlight 与 Oracle
JavaFX 的需求，并且提供更多能有效加强网络应用的标准集。HTML5 是 HTML 最
新版本，2014 年 10 月由万维网联盟（ W3C ）完成标准制定。目标是替换 1999 年
所制定的 HTML 4.01 和 XHTML 1.0 标准，以期能在互联网应用迅速发展的时候，
使网络标准达到匹配当代的网络需求。
为什么：
HTML4 陈旧不能满足日益发展的互联网需要，特别是移动互联网。为了增强浏
览器功能 Flash 被广泛使用，但安全与稳定堪忧，不适合在移动端使用（耗电、
触摸、不开放）。
HTML5 增强了浏览器的原生功能，符合 HTML5 规范的浏览器功能将更加强大，
减少了 Web 应用对插件的依赖，让用户体验更好，让开发更加方便，另外 W3C 从
推出 HTML4.0 到 5.0 之间共经历了 17 年， HTML 的变化很小，这并不符合一个
好产品的演进规则。

7.对 WEB 标准以及 W3C 的理解与认识?

参考答案：
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链 css 和 js 脚
本、结构行为表现的分离、
文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备
所访问、更少的代码和组件,容易维护，提高网站易用性。

8.网页使用最多的图片格式？

JPEG,GIF,PNG,最流行的是jpeg,可以把文件压缩到最小。

9…请你描述一下 cookies，sessionStorage 和 localStorage 的区别?

答：sessionStorage 和 localStorage 是 HTML5 Web Storage API 提供的，可以方便的
在 web 请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。
cookie 会发送到服务器端，其与两个不会

cookie:每个域名存储量比较小（各浏览器不同大致4k）
所有域名的存储量都有限制，
会随请求发送到服务器
LocalStroage:
但永久存储
单个域名存储量比较大
总体数量无限制
sessionStorage
只在session内有效
存储量更大

10.link和@import的区别？

  答：着都是外部引用css的方式，
     区别 1：link是xhtml标签，除了加载css外，还可以定义rss其他事物，@import属于css范畴，只能加载css
     区别2:link引用css时，在页面载入时同时加载，@import需要网页完全加载完以后加载
     区别3：link支持使用JavaScript控制Dom去改变样式，@import不支持。

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

参考答案
主要分成两部分：渲染引擎(layout engineer 或 Rendering Engine) 和 JS 引擎。
渲染引擎：负责取得网页的内容（HTML、 XML 、图像等等）、整理讯息（例如
加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览
器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有
网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需
要内核。
JS 引擎则：解析和执行 javascript 来实现网页的动态效果。
最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核
就倾向于只指渲染引擎

12…Label 的作用是什么，是怎么用的？

参考答案
label 标签来定义表单控制间的关系 , 当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

13.实现不使用 border 画出 1px 高的线，在不同浏览器的 标准模式与怪异模式下都能保持一致的效果？

参考答案