前端面试题之HTML/HTML5

HTML部分

(1) 谈谈你对Web标准的理解。
WEB标准不是某一个标准,而是一系列标准的组合。
网页主要由三部分组成;
1>结构(Structure)结构化标准语言包括XHTML和XML
2>表现(Presentation)表现保准语言主要包括css
3>行为(Behavior)行为标准主要包括对象模型(如 W3C DOM),ECMAScript并且要求这三部分分离。这些标准大部分由W3C起草和发布,也有一些是其他标准组织制定的标准,比如ECMA(European Computer Manufactures Associatio )的ECMAScript标准。
以上3点相互分离有哪些优点呢?
(1)易于维护:只 需要更改css文件,就可以改变整站的样式
(2)页面相应快:HTML文档体积变小,响应的时间短
(3)可访问性:语义化的HTML(结构和表现相互分离的HTML)编写的网页文件,更加容易被屏幕阅读器识别。
(4)设备的兼容性:不同的样式表可以让网页在不同的设备上呈现不同的样式
(5)搜索引擎:语义化的HTML能更容易被搜索引擎解析,,提升排名


(2) 浏览器标准模式和怪异模式之间的区别是什么?
总的来说就是盒子模型 渲染模式的不同
盒模型
在怪异模式下,盒模型为IE盒模型
height =border-top+padding-top+content+padding-bottom+border-bottom;
width=border-left+padding-left+content+padding-right+border-right
而标准的盒模型
height=content;
width=content;
图片元素的垂直对齐方式
对于inline元素和table-cell元素,标准模式下vertical-align属性默认取值为baseline,在怪异模式下,table单元格中的图片的vertical-align属性的默认值为bottom,因此在图片的底部会有像素的空间

元素中的字体
css中,对于font的属性都是可以继承的,怪异模式下,对于table元素,字体的某些元素不会从body等其他封装元素中继承得到,特别是font-size属性
内联元素的尺寸
标准模式下,non-replace inline元素无法自定义大小,怪异模式下,定义这些元素的width ,height属性可以影响这些元素显示 的尺寸。
元素的百分比高度
在css中对于元素的百分比高度的规定如下:百分比为元素 包含块的高度,不可以为负值,如果包含块的高度没有显示的给出,该值等同于auto,所以百分比的高度必须在元素有高度声明的情况下使用。
当一个元素使用百分比高度 的时候,标准模式下,高度取决于内容的变化,怪异模式下,百分比高度被正确的使用。
元素溢出的处理
标准模式下,overflow取默认值visible,在怪异模式下,该溢出会被当作扩展box来对待,即元素的大小由其内容决定,溢出不会裁剪,元素框自动的调整,包含溢出内容。


(3)标签上的title与alt属性的区别是什么?
alt:当图片不显示的时候用文字替代
title:为该属性提供信息


(4):你如何对网站的文件和资源进行优化?
1> 尽可能减少http请求的次数,将css,js图片各自合并
2> 将css放在页面的最上面
3> 将js放在页面的最下面
4>避免在css中使用表达式
5>将css,js都放在外部文件中
6> 减少DNS查询
7>最小化css,js减少文件的体积
8>避免重定向
9>移除重复的脚本
10>配置实体的标签ETag
11>使用AJAX缓存,让网站内容分批加载,局部更新
12> 使用CDN托管,降低通信的距离
13>添加Expire/Cache-Control头
14>启用Gzip压缩文件
详情请看:http://blog.csdn.net/carrie_zzz/article/details/78824289


(5):什么是语义化的HTML?
根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅 的代码的同时让浏览器的爬虫和及其很好的解析(直观的认识标签)


(6):超级链接有哪些常见的表现形式?
普通超链接,语法:<a href="" target="">文本
下载链接,即目标文档为下载资源,语法如:联系我们
空连接,用于返回页面的顶部,语法如下:...
链接到js以实现特定的功能语法如下: <!DOCTYPE html> <meta charset=”UTF-8”>


(18):除了音频和视频,HTML5 还支持其他什么新的媒体元素
< embed> 作为对外部应对容器
为媒介规定外部文本轨道


(19):HTML5 有哪些不同类型的存储,区别是什么?
HTML5 能够本地存储数据,在之前都是使用 cookies 使用的。HTML5 提供了下面两种本地存储方案:
localStorage 用于持久化的本地存储,数据永远不会过期,关闭浏览器也不会丢失。 sessionStorage 同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储


(20):HTML5 标准提供了哪些新的 API?
Media api
History api


(21):HTML5引入什么新的表单属性?
Datalist
Datatime
Output
Keygen
Date
Month
Week
Time
Number
Range
Email
Url


(22):什么是HTML5?
HTML5是最新的html标准,它主要目标是提供所有内容而不需要任何额外的插件


(23):没有,html5还会工作吗?
不会,浏览器不能识别它是HTML文档;


(24):哪些浏览器支持HTML5?
所有浏览器都支持


(25):HTML5的页面结构

代表HTML的头部数据

(26):HTML5中的datalist是什么?
HTML5中的Datalist元素有助于提供文本框自动完成特性


(27):HTML5中什么是输出元素?
Output当你需要输出值的时候就是输出元素


(28):什么是SVG?
SVG代表可缩放矢量图形(和canvas差不多)


(29):iframe有哪些缺点?
iframe会阻塞主页面的Onload事件
iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载
使用iframe之前需要考虑这两个缺点。如果需要使用iframe,最好是通过javascript
动态的给iframe添加src属性值,这样可以绕开以上的两个问题。


(30):请描述一下cookies,sessionStorage和localStorage的区别?
cookie在浏览器和服务器间来回的传递。sessionStorage和localStorage不会
sessionStorage和localStorage的存储空间很大
sessionStorage和localStorage 有更加丰富易用的接口
sessionStorage和localStorage个子独立的存储空间


(31)HTML5的离线存储?
localStorage长期存储数据,浏览器关闭后数据不会丢失;
sessionStorage数据在浏览器关闭后自动的删除


(32):HTML5应用程序缓存和浏览器缓存有什么区别?
应用程序缓存是HTML5的重要特性之一。提供了离线使用的功能,让应用程序可以获取本地的网站内容。例如HTML CSS,图片以及javaScript。这个特性可以提高网站的性能,它的实现借助于manifest文件



与传统的浏览器缓存相比。他不强制用户访问的网站内容被缓存。


(33):如何实现浏览器内多个 标签页之间的通信?(阿里)
调用localstorage,cookies等本地存储方式:
1>localstorage在一个标签页里被添加,修改,删除时,都会触发一个storage事件,通过在另一个标签页里面监听storage事件,即可获得localstorage存储的值,实现不同标签页的值。
2>使用cookie+setInterval将要传递的信息存储在cookie中 ,每隔一定的时间读取cookie信息,即可随时获取要传递的信息。


(34):webSocket如何兼容低浏览器?(阿里)
ActiveX HTMLFile (IE) 、 基于 multipart 编码发送 XHR 、 基于长轮询的 XHR


(35):为什么HTML5里面我们不需要DTD(Document Type Definition文档类型定义)?
在 HTML 4.01 中, 声明引用 DTD,因为 HTML 4.01 基于 SGML(Standard for General Markup Language 通用标记语言标准;)。 DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。 HTML5 不基于 SGML,所以不需要引用 DTD,因此没有声明DTD


(36):Canvas和SVG图形之间的区别是什么?
Canvas:
依赖分辨率
弱的文本渲染能力
能够以.png或.jpq格式保存结果图像
最适合图像密集型的游戏,其中的许多对象会被频繁重绘。
SVG:
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序(比如谷歌地图)
复杂度高会减慢渲染的速度(任何过度使用DOM的应用都不快)
不适合游戏应用


(37):HTML5应用缓存是什么?
常用于实现用户的离线浏览。如果网络连接不可用,页面应该来自浏览器缓存,离线应用缓存可以帮助你达到这个目的。 应用缓存可以帮助你指定哪些文件需要缓存,哪些不需要。


(38):简要描述HTML5 中的本地存储
很多时候我们会存储用户本地信息到电脑上,例如:比方说用户有一个填充了一半的长表格,然后突然网络连接断开了,这样用户希望你能存储这些信息到本地,当网络恢复的时候,他想获取这些信息然后发送到服务器进行存储。 现代浏览器拥有的存储被叫做“Local Storage”,用于存储这些信息。


(39):什么是Web Worker?为什么我们需要他们?
(模拟会执行上百万次的繁重代码):
function text(){
for(var i=0;i<1000000;i++){
x=x+i;
}
}

如果上述代码在HTML按钮点击以后执行,这种执行是同步的,即,浏览器必须等到此执行完毕之后才能进行其他操作。因为此操作耗时较长,那么这个操作会导致浏览器冻结并且没有响应,而且屏幕还会出现异常信息。 如果可以将这些繁重的代码移动到Javascript文件中,并采用异步的方式运行,就可以解决这个问题。这就是webworker的作用。Web Worker用于异步执行JavaScript文件,提高浏览器的敏捷度。

你可能感兴趣的:(前端面试题集,面试合集(有讲解))