web前端必备考题 - - - HTML篇

Posted 2021-06-18 苏苏写bug日记

前端面试题 - - - html篇

目录

• 前端面试题 - - - HTML篇
• • HTML

HTML

• Doctype的作用？
  答：是document type的缩写这个声明处在文档的最前面他不是html标签主要作用是告诉浏览器的解析器用哪种html规范解析页面
• 标准模式和怪异模式的区别
  答：标准模式是严格按照W3C的标准进行解析，怪异模式是指浏览器按照自己的方式进行解析 一个浏览器一种解析样式
• 行内元素/块级元素/空元素都有哪些
  行内元素：a元素 b元素（粗体）span元素
  img。 input元素select表格标签strong（粗体强调）label表格标签cite（引用）code（计算机代码）
  块级元素：div ul ol有序列表 dl定义列表table表格form 表单 h1一级标题p段落pre预格式化
  空元素：br hr img input link meta
• 介绍一下你对浏览器内核的理解？

答：主要分为渲染引擎和js引擎
渲染引擎：主要负责获取页面上的html 和css然后加载到页面上
js引擎：主要负责解析和执行javascript代码来实现一些网页的动态效果

• 常用的浏览器内核有哪些？

主流浏览器	内核
Google chrome	Webkit/Blink
IE	Trident
Firefox	Gecko
Opera	先是Presto 然后是Webkit 然后Blink
Safari	Webkit

• 浏览器是怎么对HTMl5离线储存资源进行管理和加载？
  答：在有线的情况下，浏览器发现html有manifest属性他会请求manifest文件如果第一次访问app那么浏览器会根据manifest文件的对应内容下载相应的资源并进行离线储存，如果已经访问过app了并下载了相应的资源，他会对比新的manifest文件和旧的manifest文件，如果文件没有发生改变，就不会有新的反应，如果不一样会重新下载资源并进行离线储存
  在无线情况下：浏览器会直接使用访问离线资源
• 描述一下cookies/sessionStorage和localStorage的区别?

SessionStorage LocalStorage Cookie 这三者都可以被用来在浏览器端储存数据，而且都是字符串类型的键值对。SessionStorage 和 LocalStorage属于WebStorage。创建他们的目的便于访问客户端存储数据。Cookite是服务器发送到用户浏览器并保存在浏览器上的一块数据，他会在浏览器下一次发送请求时被携带并发送到服务器上。比较经典的，他可以用来确定两次请求是否来自同一个浏览器，从而确和保持用户的登录状态

• HTML5新特性有哪些？如何处理HTML5新标签的兼容性问题？如何区分HTML和HTML5？

  新特性：

1、绘画canvas

2、用于媒介播放的video和audio元素

3、本地离线储存localStorage长期储存数据，浏览器关闭后数据不会丢失

4、sessionStorage的数据在浏览器关闭后自动删除

5、语义化更好的内容元素 比如 article ，footer， header，nav ，section

6、表单控件 calender ，date ，time，email，url ，search

7 、新的技术webworker, websocket, Geolocation

解决兼容形问题

1、 把一HTML中的标签的CSS属性display设置为block
2、IE6/7/8支持通过document方法产生的标签，利用这一特性让这些浏览器支持HTML5标签
3、使用静态资源的html5shiv包

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

区分html和html5

html没有语义化标签html5有
html不具备绘画功能

• 简述一下你对HTML语义化的理解

就是用正确的标签做正确的事，html语义化让页面的内容结构化，可读性提高，结构清晰，便于浏览器和搜索引擎的查找，利于SEO，便于对阅读源代码的的人更容易的将网站分块。

• HTML5离线缓存怎么使用，工作原理能不能解释一下？

在用户没有联网的情况下，还可以正常的访问网页，当用户连接上网络后，更新缓存文件

原理：html5离线储存是基于一个新建的.appcache文件的缓存机制的（不是储存技术），通过这个文件上的解析清单离线储存资源，这些资源就像cookie一样被缓存下来了，在之后没有网络的情况下，浏览器会通过离线储存的数据进行页面解析

使用使用

页面头部像下面一样加入一个manifest的属性；
在cache.manifest文件的编写离线存储的资源
在离线状态时，操作window.applicationCache进行需求实现

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

1、link属于xhtml里的标签而@import是CSS的提供的方法link可以加载很多其他的东西而@import只能加载CSS
2、加载顺序的差别，当一个页面加载的时候link引入的css会被同时加载。而@import则需要所有的文件需要全部被下载后才会加载
3、兼容性差别 @inport是css2.1提出的所以IE5以上才会被识别 link没有兼容性问题
4、dom控制是的差别，使用javascript去控制dom对象时只能控制link标签，@inport不是dom控制的

• Iframe有哪些缺点?

1、Iframe会堵塞页面的onload事件
2、Iframe和主页面共享连接池，er浏览器对相同域的连接有限制，回影响页面的并行加载
3、iframe框架结构很迷惑，如果嵌套多个iframe页面会出现多个滚动条，用户体验差
4、代码复杂不容被搜索引擎搜到
5、兼容性差 很多手机设备无法完全加载框架
6、会增加页面服务器的http请求

• Label的作用是什么?怎么用?

Label的标签可以让用户点击文字区域，自动聚焦到input框
input设置id属性 label设置for值 for属性的值是id属性的值

• HTML5的form如何关闭自动完成功能?

1、在IE的Internet选项里的内容–自动完成里面的设置
2、设置form表单里的autocomplete设置为“on”或者“off”来控制开关
3、设置输入框（input）里的autocomplete的值为“on”或者“off”来开启或者关闭完成自动完成功能

• 如何实现浏览器内多个标签之间的通信?

1 、第一种——调用localStorage
2 、第二种——调用cookie+setInterval()
参考文献：https://blog.csdn.net/meijory/article/details/76358570

• 页面可见性有哪些用途?(visibility API)

页面可见性： 就是对于用户来说，页面是显示还是隐藏, 所谓显示的页面，就是我们正在看的页面；隐藏的页面，就是我们没有看的页面。 因为，我们一次可以打开好多标签页面来回切换着，始终只有一个页面在我们眼前，其他页面就是隐藏的，还有一种就是…，(把浏览器最小化，所有的页面就都不可见了)。
API 很简单，document.hidden 就返回一个布尔值，如果是true, 表示页面可见，false 则表示，页面隐藏。 不同页面之间来回切换，触发visibilitychange事件。 还有一个document.visibilityState, 表示页面所处的状态，取值：visible, hidden 等四个。

document.addEventListener("visibilitychange", function(){
    if(document.hidden){
        document.title ="hidden";
    }else {
        document.title = "visibile";
    }
})

• 参考文献: https://www.cnblogs.com/king18181753985/p/6510315.html