HTML面试题

Posted 2020-12-11 spoem

一、html元素分类及其特点

　　1.行内元素

　　　　在一行内显示，水平方向排列。有默认高度（当前浏览器默认字体的高度），没有默认宽度，元素的大小由包裹内容决定，且不能设置宽高和内外边距。元素内部不能包含块级元素。

　　2.块级元素

　　　　独占一行，垂直方向排列。可以设置宽高，默认宽度是父元素的100%。可以包含行内元素和块级元素，但是h系列标签和p标签和dt标签不能包含块级元素（原因：不符合XHTML嵌套规则）

 　　3.行内块元素

　　　　兼具行内元素和块级元素的特点，可以设置宽高，在一行内显示，没有默认宽度

　　4.举例

　　　　行内元素：big、small、sub、sup、strong、u、span

　　　　块级元素：div、p、h1~h6、table、ul、li、ol、header、section、aside、footer

　　　　行内块元素：img、input、select、textarea、button

二、浏览器的内核有哪些，你对内核的理解

　　IE: trident内核、Firefox：gecko内核、Safari:webkit内核、Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核、Chrome:Blink(基于webkit，Google与Opera Software共同开发)

　　理解：主要分成两个部分：渲染引擎(Render Engine)和JS引擎。

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

　　　　JS引擎：解析和执行javascript来实现网页的动态效果。

　　最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向与只指渲染引擎。

三、你能描述一下渐进增强和优雅降级之间的不同吗?

　　

//渐进增强
.transition{
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;  
}
//优雅降级
.transition{ 
　　     transition: all .5s;
　　  -o-transition: all .5s;
  　-moz-transition: all .5s;
 -webkit-transition: all .5s;
}

　　渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。（从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面添加无害于基础浏览器的额外样式和功能。当浏览器支持时，它们会自动地呈现出来并发挥作用。）

　　优雅降级（graceful degradation）：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。（Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了，为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。）

　　区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的、能够起作用的版本开始，并不断扩充，以适应未来环境的需要。

四、为什么利用多个域名来存储网站资源会更有效？

　　CDN缓存更方便，突破浏览器并发限制，节约cookie带宽，节约主域名的连接数，优化页面响应速度，防止不必要的安全问题。

五、img标签上title属性与alt属性的区别是什么？

　　alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户等。

　　title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。

六、iframe的优缺点？

　　优点：

　　　　a. 解决加载缓慢的第三方内容如图标和广告等的加载问题

　　　　b. iframe无刷新文件上传

　　　　c. iframe跨域通信

　　缺点：

　　　　a. iframe会阻塞主页面的Onload事件

　　　　b. 无法被一些搜索引擎索引到

　　　　c. 页面会增加服务器的http请求

　　　　d. 会产生很多页面，不容易管理。

 七、H5的新特性你了解哪些？

　　HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
　　拖拽释放(Drag and drop) API
　　语义化更好的内容标签（header,nav,footer,aside,article,section）
　　音频、视频API(audio,video)
　　画布(Canvas) API
　　地理(Geolocation) API
　　本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后自动删除
　　表单控件，calendar、date、time、email、url、search
　　新的技术webworker, websocket, Geolocation

　　h5新标签兼容：
　　IE8/IE7/IE6支持通过document.createElement方法产生的标签，
　　可以利用这一特性让这些浏览器支持HTML5新标签，
　　当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
  　　<!--[if lt IE 9]>
  　　<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
  　　<![endif]-->

八、请描述一下cookies，sessionStorage和localStorage的区别？

  　　相同点：都会在浏览器端保存，有大小和同源限制。 
  　　不同点： 
  　　　　1、cookie会随请求发送到服务器，作为会话表示，服务器可修改cookie。web storage不会随请求发送到服务器。 
 　　　　 2、cookie有path的概念，子路径可以访问父路径的cookie，父路径不可以访问子路径的cookie。 
  　　　　3、有效期： cookie在设置的有效期内有效，默认为浏览器关闭消失。sessionStorage在会话窗口关闭后失效，localStorage长期有效，需主动删除。 
  　　　　4、sessionStorage不能共享，localStorage在同源文档之间可以共享，cookie在同源且符合path规则的文档之间可以共享。 
  　　　　5、localStorage的修改会触发其他文档的update事件。 
 　　　　 6、cookie有secure属性要求HTTPS传输。 
  　　　　7、浏览器不能保存超过300个cookie，单个服务器不能超过20个，每个cookie不能超过4k。webStorage可以支持5M的存储。

九、meta viewport是做什么的？怎么用？

• 移动端浏览器通常都在一个比屏幕更宽的虚拟窗口中渲染页面，这个虚拟窗口就是viewport，目的是正常展示没有做移动端适配的网页，可以让他们完整的展现给用户。我们有时用移动设备访问桌面版网页就会看到一个横向滚动条，这里可显示区域的宽度就是viewport的宽度。
• <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。当然maximum-scale=1.0, user-scalable=0不是必需的，是否允许用户手动播放根据网站的需求来定，但把width设为width-device基本是必须的，这样能保证不会出现横向滚动条。

• meta viewport 的6个属性：

width	设置layout viewport 的宽度，为一个正整数，或字符串”width-device”
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置layout viewport 的高度，这个属性并不重要，很少使用
user-scalable	是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许

 十、a标签中 active hover link visited 正确的设置顺序是什么?

　　　a:link 、a:visited 、a:hover 、a:active

十一、重排（reflow）与重绘（repaint）

　　（1）浏览器从下载文档到显示页面的过程是个复杂的过程，这里包含了重绘和重排

　　（2）重绘是一个元素外观的改变所触发的浏览器行为（例如改变visibility，outline，background等属性），浏览器会根据元素的新

属性重新绘制，是元素呈现新的外观。

　　（3）重排时更明显的一种改变，可以理解为渲染树需要重新计算。常见的触发重排的操作：

 　　　　a.DOM元素的几何属性变化

　　　　 b.DOM树的结构变化（例如节点的增减、移动）

 　　　　c.获取某些属性（例如offsetTop，offsetLeft，offsetHeight，offsetWidth，clientWidth，clientHeight等）

 　　　　d.改变元素的一些样式（例如调整浏览器窗口大小）

　　（4）重绘不会带来重新布局，并不一定伴随着重排。

　　（5）在实践中，应该尽量减少重排次数和缩小重排的影响范围。有以下几种方法：

 　　　　a.将多次改变样式属性的操作合并成一次操作

　　　　 b.将需要多次重排的元素，position属性设为absolute或fixed，使其脱离文档流，这样它的变化就不会影响到其他元素

 　　　　c.在内存中多次操作节点，完成后再添加到文档中去

 　　　　d.如果要对一个元素进行复杂的操作，可以将其display属性设置为none使其隐藏，待操作完成后再显示

 　　　　e.在需要经常获取那些引起浏览器重排的属性值时，要缓存到变量

十二、简述一下你对HTML语义化的理解

　　（1）HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；
　　（2）即使在没有样式CSS的情况下也能以一种文档格式显示，并且是容易阅读的；
　　（3）搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，有利于SEO；
　　（4）使阅读源代码的人更容易将网站分块，便于阅读、维护和理解。