HTML 面试知识点总结

289 阅读5分钟

1. 行内元素

常见的行内元素有:a b span img strong sub sup button input label select textarea

2. 块级元素

常见的块级元素有:div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p 

3. 行内元素与块级元素区别

1)、行内元素

①:和其它元素在一行上

②:不能设置宽高,宽度只与内容有关

③:对marginpadding设置左右方向有效,而上下无效,


2)、块级元素

①:独占一行

②:可以设置宽高 宽度默认是它容器的100%

③:设置marginpadding都有效

④:可以容纳行元素和其他块元素。

行元素设置上下padding情况:

4. 页面导入样式时,使用 link 和 @import 有什么区别?

1)从属关系区别。 @import 是 CSS 提供的语法规则,只有导入样式表的作用;link 是 HTML 提供的标签,不仅
可以加载 CSS 文件,还可以定义 RSS、rel 连接属性、引入网站图标等。

(2)加载顺序区别。加载页面时,link 标签引入的 CSS 被同时加载;@import 引入的 CSS 将在页面加载完毕后被
加载。

(3)兼容性区别。@import 是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别;link 标签作为 HTML 元素,不存
在兼容性问题。

(4)DOM 可控性区别。可以通过 JS 操作 DOM ,插入 link 标签来改变样式;由于 DOM 方法是基于文档的,无法使
用 @import 的方式插入样式。

5. 对浏览器内核的理解?

 主要分成两个部分:渲染引擎 和 JS引擎。
  
 渲染引擎:负责取得网页的内容(html,xml和图像等),整理讯息(例如假如css),以及计算网页的显示方式,然后输出
 到显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不同。所有网页浏览器、电子
 邮件客户端以及它需要编辑、显示网络内容的应用程序都需要内核。

 JS引擎:解析和执行JavaScript来实现网页的动态效果。
 
 五大主流浏览器四大内核
 
 1、IE浏览器(Internet explorer)2、火狐浏览器(Firefox)3、谷歌浏览器(Chrome)4、苹果浏览器(Safar
 i5、欧朋浏览器(Opera)
 
 常见浏览器内核:WebKit(Safari)、
 	      Trident(IE)、
              Blink(Google)、
              Gecko(Firefox)
 
 https://www.cnblogs.com/moon-lee/p/12359183.html

6 主流浏览器内核私有属性 css 前缀?

 mozilla 内核 (firefox,flock 等)    -moz
 webkit  内核 (safari,chrome 等)   -webkit
 opera   内核 (opera 浏览器)        -o
 trident 内核 (ie 浏览器)           -ms

7. 渲染过程中遇到 JS 文件怎么处理?(浏览器解析过程)

 JavaScript 的加载、解析与执行会阻塞文档的解析,也就是说,在构建 DOM 时,HTML 解析器若遇到了JavaScript,
 那么它会暂停文档的解析,将控制权移交给 JavaScript 引擎,等 JavaScript 引擎运行完毕,浏览器再从中断的地
 方恢复继续解析文档。

 也就是说,如果你想首屏渲染的越快,就越不应该在首屏就加载 JS 文件,这也是都建议将 script 标签放在 body 
 标签底部的原因。当然在当下,并不是说 script 标签必须放在底部,因为你可以给 script 标签添加 defer 或者 
 async 属性。

8. 浅谈 defer 和 async 的区别( www.pianshen.com/article/210…

总结:
deferasync的作用:
传统方式下,在文档中遇到script标签,会先加载js脚本,后面的文档加载会先停止
如果在script脚本中插入deferasync,可以使得js脚本与文档加载异步进行
区别:      在于脚本加载完成后何时运行
defer 是在浏览器渲染完成之后执行js代码;并且按照加载的顺序执行代码
async 是在加载完成后立即执行;特点是乱序执行,因为每个js代码的加载时间不同

9. HTML5 有哪些新特性

 新增的有:
 
 绘画 canvas;
 用于媒介回放的 videoaudio 元素;
 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
 sessionStorage 的数据在浏览器关闭后自动删除;
 语意化更好的内容元素,比如 articlefooterheadernavsection;
 表单控件,calendar、date、time、email、url、search;
 新的技术 webworker, websocket;
 新的文档属性 document.visibilityState

10. b 与 strong 的区别和 i 与 em 的区别?

从页面显示效果来看,被 <b> 和 <strong> 包围的文字将会被加粗,而被 <i> 和 <em> 包围的文字将以斜体的形式
呈现。

 但是 <b> <i> 是自然样式标签。
 分别表示无意义的加粗,无意义的斜体,表现样式为 { font-weight: bolder},仅仅表示「这
 里应该用粗体显示」或者「这里应该用斜体显示」,此两个标签在 HTML4.01 中并不被推荐使用。

 而 <em> 和 <strong> 是语义样式标签。 
 <em> 表示一般的强调文本,而 <strong> 表示比 <em> 语义更强的强调文本。
 使用阅读设备阅读网页时:<strong> 会重读,而 <b> 是展示强调内容。

11. 浅谈session,cookie,sessionStorage,localStorage的区别及应用场景

www.cnblogs.com/cencenyue/p…

12.Label 的作用是什么?是怎么用的?

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

 <label for="Name">Number:</label>
 <input type=“text“ name="Name" id="Name"/>

来源 | github.com/CavsZhouyou…