### BAT前端面试题知识点详解 #### 一、Doctype作用及模式区分 1. **Doctype的作用**: - Doctype声明通常位于HTML文档的最前面,在`<html>`标签之前,用来告知浏览器的解析器应该用何种文档类型规范来解析此文档。 - 例如,`<!DOCTYPE html>`用于HTML5文档,它告诉浏览器遵循最新的HTML5标准来解析文档。 2. **严格模式与混杂模式的区别**: - **严格模式**:在这种模式下,页面的布局和JavaScript的运行都是按照当前浏览器支持的最高标准进行的。这有助于确保网页在不同浏览器中的表现一致性。 - **混杂模式**:混杂模式则以一种较为宽松且向后兼容的方式来显示页面,模拟老式浏览器的行为以避免页面因某些旧的标准而不正常显示。 - 如果文档中缺少Doctype声明或者声明格式不正确,则浏览器可能会进入混杂模式。 3. **意义**: - 正确使用Doctype声明可以确保页面按照预期的方式呈现,避免因浏览器解析模式的不同而导致的显示问题。 #### 二、行内元素与块级元素 1. **行内元素**:主要包括`a`、`b`、`span`、`img`、`input`、`select`、`strong`等。这些元素的特点是不会独占一行,可以与其他行内元素在同一行显示。 2. **块级元素**:如`div`、`ul`、`ol`、`li`、`dl`、`dt`、`dd`、`h1`到`h6`、`p`等。这些元素通常会独占一行,并且可以包含其他行内元素或块级元素。 #### 三、Link与@import的区别 1. **语法区别**: - `link`是XHTML标签的一部分,用于在文档中引入外部资源,如CSS文件。 - `@import`是CSS提供的一种导入其他样式表的方式,只能用于导入样式。 2. **加载时机**: - 使用`link`引入的CSS会在页面加载时同步加载,即页面渲染过程中就会加载CSS。 - 使用`@import`导入的CSS则是在页面完全加载完毕后才加载,这可能会导致页面在CSS加载前有一段时间显示不完全。 3. **兼容性差异**: - `@import`仅在IE5以上的浏览器中有效。 - `link`作为XHTML标签,具有良好的兼容性,适用于所有现代浏览器。 4. **权重区别**: - 一般情况下,通过`link`引入的CSS样式权重高于通过`@import`引入的样式。 #### 四、浏览器内核 1. **IE浏览器**:使用Trident内核。 2. **Mozilla Firefox**:使用Gecko内核。 3. **Google Chrome**:使用Blink内核,它是基于WebKit的一个分支。 4. **Opera**:早期版本使用Presto内核,但在较新版本中转为了Blink内核。 #### 五、HTML5的新特性与兼容性处理 1. **新特性**:HTML5增加了许多新功能,如`canvas`用于绘制图形,`video`和`audio`用于媒体播放,`localStorage`用于本地数据存储,语义化的标签如`article`、`footer`等,以及新的表单控件如日期选择器、邮箱输入框等。 2. **兼容性处理**:对于HTML5的新标签,可以在旧版浏览器中使用polyfills来实现兼容,或者使用JavaScript检测浏览器是否支持这些新特性,如果不支持,则采用备用方案。 #### 六、语义化的重要性 1. **定义**:HTML语义化是指使用适当的HTML标签来构建页面内容,使得内容具有明确的意义。 2. **优点**: - 提高了浏览器、搜索引擎解析的准确性。 - 即使没有CSS样式,也能保持良好的可读性和结构清晰度。 - 有利于SEO优化。 - 方便代码维护和阅读。 #### 七、HTML5离线存储 1. **方式**:HTML5提供了两种主要的离线存储机制:`localStorage`用于长期存储数据,即使浏览器关闭后数据也不会丢失;`sessionStorage`则在浏览器关闭后自动删除数据。 #### 八、iframe的缺点 1. **阻塞事件**:iframe可能会影响主页面的`onload`事件。 2. **连接限制**:iframe与主页面共享连接池,这可能会限制页面的并发加载能力。 #### 九、Cookies、SessionStorage与LocalStorage的区别 1. **Cookies**:存储在客户端,随HTTP请求发送到服务器,可用于身份验证。 2. **SessionStorage**:存储在客户端,仅在一个会话周期内有效。 3. **LocalStorage**:存储在客户端,数据持久化,即使关闭浏览器后数据依然存在。 #### 十、CSS选择器及其优先级 1. **选择器类型**: - ID选择器(`#myid`) - 类选择器(`.myclassname`) - 标签选择器(`div`, `h1`, `p`) - 相邻兄弟选择器(`h1 + p`) - 子元素选择器(`ul > li`) - 后代选择器(`li a`) - 通用选择器(`*`) - 属性选择器(`a[rel="external"]`) 2. **可继承的属性**:`font-size`, `font-family`, `color`, `line-height`, `text-align`, `letter-spacing`, `word-spacing`, `white-space`, `vertical-align`, `list-style`等。 3. **不可继承的属性**:`border`, `padding`, `margin`, `width`, `height`等。 4. **优先级计算**: - `!important`拥有最高的优先级。 - ID选择器优先级高于类选择器。 - 类选择器优先级高于标签选择器。 - 标签选择器优先级高于通用选择器。 - 在相同优先级的情况下,样式定义距离目标元素更近的优先级更高。 - 最后加载的样式表具有更高的优先级。 #### 十一、CSS3新增伪类 1. **伪类**:如`:not()`, `:nth-child()`, `:nth-last-child()`, `:nth-of-type()`, `:nth-last-of-type()`, `:first-of-type`, `:last-of-type`, `:only-of-type`, `:empty`, `:target`, `:enabled`, `:disabled`, `:checked`, `:indeterminate`, `:valid`, `:invalid`, `:in-range`, `:out-of-range`, `:required`, `:optional`, `:read-only`, `:read-write`, `:placeholder-shown`, `:autofill`, `:autofilled`, `:fullscreen`, `:picture-in-picture`, `:default`, `:hover`, `:focus`, `:active`, `:visited`, `:link`等。 2. **用途**:这些伪类主要用于根据元素的状态或者位置来进行样式设置。
剩余20页未读,继续阅读
- 粉丝: 1
- 资源: 4
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 料带自动上料机含bom和3D图纸和工程图机械结构设计图纸和其它技术资料和技术方案非常好100%好用.zip
- 使用Java多线程和同步机制实现生产者-消费者模式.zip
- 端子排自动切割设备含bom工程图机械结构设计图纸和其它技术资料和技术方案非常好100%好用.zip
- Python爬虫入门实例:利用requests和BeautifulSoup抓取网页标题
- HBase常用的Shell命令
- Linux下Oracle 11g的完整安装与配置指南
- MySQL多平台安装教程:Windows、macOS与Linux
- 新年快乐,喜庆html
- 单片机综合实验储物箱重庆邮电大学
- Screenshot_20241224_205242_com.tencent.tmgp.sgame.jpg
- html css网页制作成品.docx
- Selenium-ECShop项目文档
- 实验报告,重庆邮电大学,单片机,大作业
- 汽车防撞梁总成装配台3D图纸和工程图机械结构设计图纸和其它技术资料和技术方案非常好100%好用.zip
- Java平台Maven项目管理和构建工具的安装与配置
- 重庆邮电大学所有实验单片机,大作业,串口,双机编程,程序文件