根据给定的文件信息,我们可以将内容拆解并归纳为几个关键的知识点:
### 一、Web标准与浏览器兼容性
#### 对Web标准的理解
- **标准**:指的是一系列由W3C(World Wide Web Consortium)组织制定的技术规范,如HTML、CSS和JavaScript的标准。
- **兼容性**:指的是不同浏览器对这些标准的支持程度。
#### 浏览器内核差异
- 主流浏览器通常使用不同的渲染引擎(内核):Chrome和Edge使用Blink,Firefox使用Gecko,Safari使用WebKit,而Internet Explorer则使用Trident。
- 这些内核在解析HTML、CSS和执行JavaScript时可能存在细微差别,导致显示效果不一致。
#### 兼容性与hack
- **兼容性问题**:由于浏览器间存在的差异,开发者可能需要使用特定的技术来确保网站能在各种浏览器下正常工作。
- **hack**:针对特定浏览器的代码修改,例如使用`*html`选择器仅针对IE6应用样式。
#### CSS基本功
- **布局**:包括但不限于浮动(float)、定位(position)、网格(grid)、弹性盒子(flexbox)等。
- **盒子模型**:分为IE模型(content + padding + border = width/height)和标准模型(content = width/height)。
- **选择器优先级**:!important > id选择器 > 类选择器 > 标签选择器 > 通用选择器,同优先级的选择器遵循后出现者优先的原则。
### 二、JavaScript核心概念
#### 数据类型
- 原始类型:数字、字符串、布尔值、null、undefined、symbol。
- 复杂类型:对象、数组。
#### 面向对象
- **封装**:将数据和操作数据的方法包装在一起。
- **继承**:子类继承父类的属性和方法。
- **多态**:同一接口或方法名可以有不同的实现。
#### 闭包
- 闭包是指有权访问另一个函数作用域中的变量的函数。
- 它可以使得外部函数的局部变量在外部函数执行完毕后仍然存活。
#### 模块化
- 使用ES6的`import`和`export`语法来实现模块的导入导出功能。
- 提高代码的可维护性和复用性。
### 三、前端进阶技术
#### Node.js
- 一种基于Chrome V8引擎的JavaScript运行环境。
- 可以用来开发服务器端应用程序。
#### AJAX
- Asynchronous JavaScript and XML,即异步JavaScript和XML。
- 用于创建快速动态网页的技术,可以在后台与服务器交换数据而不重新加载整个网页。
### 四、浏览器存储
#### Cookie的弊端
- **数量和长度限制**:每个域名下的cookie数量有限制(如IE6限20个,IE7及以上限50个),每个cookie的长度不得超过4KB。
- **安全性问题**:如果cookie被拦截,所有session信息都可能泄露。
- **无法保存某些状态**:例如防止重复提交表单的计数器不适合存储在客户端。
#### 浏览器本地存储
- **sessionStorage**:会话级别的存储,当关闭浏览器窗口或标签页时,数据将被清除。
- **localStorage**:持久化存储,除非主动删除或用户清除浏览器数据,否则数据会一直存在。
- 与Cookie相比,本地存储具有更大的存储容量,并且不会随HTTP请求自动发送到服务器,从而减少了网络传输的数据量。
### 五、CSS进阶
#### display:none 和 visibility:hidden 的区别
- `display:none`:元素不会在页面布局中占据任何空间。
- `visibility:hidden`:元素依然占据空间,但不可见。
#### link 和 @import 的区别
- **加载时机**:`<link>`标签会在文档加载时立即加载CSS文件,而`@import`则是在文档解析完成后才加载。
- **兼容性**:`<link>`在所有现代浏览器中都能很好地工作,而`@import`在IE5以上版本才被支持。
- **权重**:`<link>`方式的CSS规则通常具有更高的权重。
#### position: absolute 与 position: fixed 的区别
- **绝对定位(absolute)**:相对于最近的非static定位祖先元素定位,如果没有这样的祖先,则相对于body。
- **固定定位(fixed)**:相对于浏览器窗口定位,不会随着滚动条的移动而移动。
#### CSS盒子模型
- **内容(content)**:元素的实际内容区域。
- **填充(padding)**:内容与边框之间的空间。
- **边框(border)**:包围内容和填充的线。
- **边界(margin)**:边框与相邻元素之间的空间。
#### CSS选择器
- **ID选择器**:以`#`开头,如`#header`。
- **类选择器**:以`.`开头,如`.main`。
- **标签选择器**:直接使用标签名,如`div`。
- **相邻选择器**:两个标签之间使用`+`符号连接,表示前一个标签后面紧跟的同级标签,如`h1 + p`。
### 六、CSS3新特性
- **新增伪类**:`:nth-child(n)`、`:not(selector)`等,用于更灵活地选择元素。
以上是对给定文件信息中的知识点进行了详细的解释和补充,希望能够帮助读者更好地理解和掌握前端领域的相关知识。