前端面试【整理更新中】:HTML常见题目(带答案)

2018-12-07 admin

一、HTML常见题目 01、Doctype作用?严格模式与混杂模式如何区分?它们有何意义? 02、 HTML5 为什么只需要写 !DOCTYPE HTML? 03、行内元素有哪些?块级元素有哪些?空(void)元素有那些? 04、页面导入样式时,使用link和@import有什么区别? 05、介绍一下你对浏览器内核的理解? 06、 iframe框架有那些优缺点? 07、 HTML5有哪些新特性,移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5? 08、请描述一下 cookies,sessionStorage 和 localStorage 的区别? 09、简述一下你对HTML语义化的理解? 10、HTML5的离线储存怎么使用,工作原理能不能解释一下? 11、 title与h1的区别、b与strong的区别、i与em的区别?12、 元素的alt和title有什么异同?01、Doctype作用?标准模式与兼容模式各有什么区别?


01、Doctype作用?标准模式与兼容模式各有什么区别?

* !DOCTYPE声明位于位于HTML文档中的第一行,处于html 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
* 标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

02、HTML5 为什么只需要写 !DOCTYPE HTML?

* HTML5 不基于 SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行);而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。

03、行内元素有哪些?块级元素有哪些?空(void)元素有那些?

* 行内元素:a span img input select 
* 块级元素:div ul ol li dl dt dd h1 p
* 空元素:<br> <hr> <link> <meta>

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

* 相同的地方,都是外部引用CSS方式,
* 区别:
* link是xhtml标签,除了加载css外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS
* link引用CSS时候,页面载入时同时加载;@import需要在页面完全加载以后加载,而且@import被引用的CSS会等到引用它的CSS文件被加载完才加载
* link是xhtml标签,无兼容问题;@import是在css2.1提出来的,低版本的浏览器不支持
* link支持使用javascript控制去改变样式,而@import不支持
* link方式的样式的权重高于@import的权重
* import在html使用时候需要<style type="text/css">标签

05、介绍一下你对浏览器内核的理解? 常见的浏览器内核有哪些?

* 主要分成两部分:渲染引擎(Layout Engine或Rendering Engine)和JS引擎。
* 渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。
* JS引擎:解析和执行javascript来实现网页的动态效果。
* Ie(Ie内核) 火狐(Gecko) 谷歌(webkit,Blink) opera(Presto),Safari(wbkit)

06、 iframe框架有那些优缺点?

* 优点:

    * iframe能够原封不动的把嵌入的网页展现出来。
    * 如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷。
    * 网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用。
    * 如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决。
* 缺点:

    * 搜索引擎的爬虫程序无法解读这种页面
    * 框架结构中出现各种滚动条
    * 使用框架结构时,保证设置正确的导航链接。
    * iframe页面会增加服务器的http请求
* *iframe会阻塞主页面的Onload事件;
*     *搜索引擎的检索程序无法解读这种页面,不利于SEO;
*     *iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。
*     使用iframe之前需要考虑这两个缺点。如果需要使用iframe,最好是通过javascript
*     动态给iframe添加src属性值,这样可以绕开以上两个问题。

07、 HTML5有哪些新特性,移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5

* 新增加了图像、位置、存储、多任务等功能。
* 新增元素:

    * canvas
    * 用于媒介回放的video和audio元素
    * 本地离线存储。localStorage长期存储数据,浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除
    * 语意化更好的内容元素,比如 article footer header nav section
    * 位置API:Geolocation
    * 表单控件,calendar date time email url search
    * 新的技术:web worker(web worker是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行) web socket
    * 拖放API:drag、drop
* 移除的元素:

    * 纯表现的元素:basefont big center font s strike tt u
    * 性能较差元素:frame frameset noframes
* 区分:

    * DOCTYPE声明的方式是区分重要因素
    * 根据新增加的结构、功能来区分

08、请描述一下 cookies,sessionStorage 和 localStorage 的区别?

* 共同点:都是保存在浏览器端,且是同源的。
* 区别:

1\. cookies是为了标识用户身份而存储在用户本地终端上的数据,始终在同源http请求中携带,即cookies在浏览器和服务器间来回传递,而sessionstorage和localstorage不会自动把数据发给服务器,仅在本地保存。
2\. 存储大小的限制不同。cookie保存的数据很小,不能超过4k,而sessionstorage和localstorage保存的数据大,可达到5M。
3\. 数据的有效期不同。cookie在设置的cookie过期时间之前一直有效,即使窗口或者浏览器关闭。sessionstorage仅在浏览器窗口关闭之前有效。localstorage始终有效,窗口和浏览器关闭也一直保存,用作长久数据保存。
4\. 作用域不同。cookie在所有的同源窗口都是共享;sessionstorage不在不同的浏览器共享,即使同一页面;localstorage在所有同源窗口都是共享

09、简述一下你对HTML语义化的理解?

* 去掉或丢失样式的时候能够让页面呈现出清晰的结构。
* 有利于SEO和搜索引擎建立良好沟通,有助于爬虫抓取更多的信息,爬虫依赖于标签来确定上下文和各个关键字的权重。
* 方便其它设备解析。
* 便于团队开发和维护,语义化根据可读性

10、HTML5的离线储存怎么使用,工作原理能不能解释一下?

* 在线情况下,浏览器发现HTML头部有manifest属性,它会请求manifest文件,如果是第一次访问,那么浏览器就会根据manifest文件的内容下载相应的资源,并进行离线存储。如果已经访问过并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面。然后浏览器会对比新的manifest文件与旧的manifest文件,如果文件没有发生改变,就不会做任何操作,如果文件改变了,那么就会重新下载文件中的资源,并且进行离线存储。例如,
* 在页面头部加入manifest属性
* <html manifest='cache.manifest'>
* 在cache.manifest文件中编写离线存储的资源
* 

CACHE MANIFEST#v0.11CACHE: js/app.jscss/style.cssNETWORK: Resourse/logo.pngFALLBACK: //offline.html

  1. title与h1的区别、b与strong的区别、i与em的区别?

    • title属性没有明确意义,只表示标题;h1表示层次明确的标题,对页面信息的抓取也有很大的影响
    • strong标明重点内容,语气加强含义;b是无意义的视觉表示
    • em表示强调文本;i是斜体,是无意义的视觉表示
    • 视觉样式标签:b i u s
    • 语义样式标签:strong em ins del code
  2. 元素的alt和title有什么异同?

    • 在alt和title同时设置的时候,alt作为图片的替代文字出现,title是图片的解释文字。

原文链接:https://segmentfault.com/a/1190000017287859

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-47515.html

文章标题:前端面试【整理更新中】:HTML常见题目(带答案)

相关文章
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
破解前端面试(80% 应聘者不及格系列):从 闭包说起
不起眼的开始 招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候,我经常会提供下面这段代码,然后让候选人分析它实际运行的结...
2017-06-02
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
HTML5凭什么可以代替Flash
本世纪初,全球网络建设仍处于早期阶段,发达国家网民刚刚在从窄带向宽带网络过渡。由于网络带宽、PC运算速度等因素限制,早期的网站基本以静态文字和图片内容为主。但随着宽带网络在全球范围快速普及,网民对内容的需求也不断变化。死板的文字加图片的网站...
2015-11-12
前端交流QQ群
我们建立了一个前端交流QQ群供大家交流,有什么问题都可以在群里提问,欢迎你的加入,也希望我们大家能够在群里互帮互助,同时也能学到东西。 我们相信,前端有你更精彩! 为了让更多的小伙伴加入我们,欢迎大家转发扩散! 长按以上二维码加入我们 ...
2016-04-01
HTML5究竟会火到什么地步
这已经是第N次,HTML5火热了起来,这次的火热是否可以延续? H5的最大优势就是可以在网页上直接调试和修改,而且更重要的是,它几乎不用考虑用户的机型与适配性问题。智能手机主要被分裂为两大系统:Android和iOS,一个做应用的团队,怎么...
2015-11-12
2014年最流行前端开发框架对比评测
如今,各种开发框架层出不穷,各有千秋。哪些是去年较受开发者关注的呢?前不久,云适配根据Github上的流行程度整理了2014年最受欢迎的6个前端开发框架,并进行对比说明,希望帮助有需要的朋友选择合适自己的前端框架。 1. Bootstrap...
2015-11-12
HTML5这次的火热是否又是昙花一现?
即使你不是技术控,你也应该感受到过去一年时间身边发生的HTML5事件,去年由微信朋友圈引爆的《围住神经猫》以及之后一系列的小游戏,都证明了HTML5的营销价值。 HTML5已经出来很多年了,HTML5是一个基于浏览器的协作标准,可以让各种不...
2015-11-12
jQuery中DOM树操作之使用反向插入方法实例分析
本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用...
2015-11-13
回到顶部