HTML面试题总结

时间  2019-11-10
标签 html 面试 总结 栏目 HTML 繁體版
原文   原文链接

HTML

  1. Doctype做用？严格模式与混杂模式如何区分？它们有何意义?
  2. HTML5 为何只须要写 <!DOCTYPE HTML>？
  3. 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
    • 行内元素(行内元素默认不会重新行开始，而块级元素会新起一行):b,big,i,small,tt;abbr,acronym,cite,code,dfn,em,kbd,strong,samp,var;a,bdo,br,img,map,object,q,script,span,sub,sup;button,input,label,select,textarea
    • 块儿元素：h5：figcaption,article,figure,aside,output,footer,audio,section,canvas,header,hgroup,video;address,blockquote,dd,div,dl,fieldset,form,h1,h3,h6,hr,noscript,ol,p,pre,table,tfoot,ul。
    • 空(void)元素(没有内容的元素)：br，hr，input,img,link,meta；area,base,col,command,embed,keygen,param,source,track,wbr
  4. 页面导入样式时，使用link和@import有什么区别
    • link属于xhtml标签，除了家在css外，还能用于定义rss定义rel链接属性等做用；@import是css提供的，只能用于加载css；
    • 页面被加载时，link会同时被加载，@import引用的css会等到页面加载完再加载；
    • @import是css2.1提出，ie5以上，link是xhtml标签，无兼容问题。
  5. 介绍一下你对浏览器内核的理解？答案
    • 主要氛围两部分：渲染引擎(Render Engine)和JS引擎
    • 渲染引擎(Render Engine)：负责取得网页的内容(html,xml和图像等)，整理讯息(例如假如css)，以及计算网页的显示方式，而后输出到显示器或打印机。浏览器的内核的不一样对于网页的语法解释会有不一样，因此渲染的效果也不一样。全部网页浏览器、电子邮件客户端以及它须要编辑、显示网络内容的应用程序都须要内核。
    • JS引擎：解析和执行JavaScript来实现网页的动态效果。
  6. 常见的浏览器内核有哪些？
    • Trident内核：IE，360，搜过浏览器；
    • Gecko内核：Netscape6及以上版本
    • Presto内核：Opera
    • Blink内核：Opera
    • Webkit内核：Safari，Chrome
  7. html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？h5标签
    • 新特性：图像，位置，存储，多任务等，例如canvas,video,audio,localStorage，sessionStorage.
    • 语意化更好的内容元素：article,footer,header,nav,section
    • 表单：calendar，date，time，email，url，search
    • 新技术：Websockt，Webworker，Geolocation
  8. 简述一下你对HTML语义化的理解？ 答案
    • 根据内容的结构化，选择合适的标签，便于开发者阅读和写出更优雅的代码，让浏览器的爬虫和机器很好地解析。
    • 在没有css的状况下，页面也能够呈现出很好地内容结构、代码结构
    • 有利于SEO：有利于爬虫抓取更多的有效信息:爬虫依赖于标签来肯定上下文和各关键字的权重；
    • 方便其余设备解析(屏幕阅读器，盲人阅读器，移动设备)以意义的方式来渲染网页
    • 便于团队开发和维护，语义化更具可读性
  9. HTML5的离线储存怎么使用，工做原理能不能解释一下？
  10. 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
    • 在线状况下，浏览器发现html头部manifest属性，会请求manifest文件，若是是第一次，浏览器根据文件内容下载对应的资源而且进行离线缓存，若是已经访问过app而且资源文件已经离线存储。浏览器使用离线资源加载页面，而后浏览器对比新旧manifest文件，若是改变，从新下载文件中的资源并进行离线缓存。离线时间直接使用离线存储的资源
  11. 请描述一下 cookies，sessionStorage 和 localStorage 的区别？
  • localStorage是h5标准中新加入的技术 答案
特性 Cookie localStorage sessionStorage
数据的生命周期 能够设置失效时间，默认是关闭浏览器后失效 除非清除缓存不然永久保存 仅在当前会话下有效，关闭页面或浏览器会被清除
存放数据大小 4K左右 通常为5MB 通常为5MB
与服务器端通讯 每次都会携带在http头中，使用cookie保存过多数据会带来性能问题 仅在客户端中保存，不参与服务器通讯 仅在客户端中保存，不参与服务器通讯
易用性 须要开发人员本身封装，原生的Cookie借口不友好 原生接口能够接受，亦能够再次封装来更好的支持Object和Array  
  1. iframe有那些缺点？
    • 连接
    • 优势
      1. iframe可以原封不动地把嵌入的网页展示出来
      2. 若是有多个网页调用iframe，只须要修改iframe的内容，就能够实现对调用iframe的每个页面内容的更改，方便快捷
      3. 网页若是为了统一风格，头部和版本都是同样的，就能够写成一个页面，用iframe来嵌套，能够增长代码的可重用性。
      4. 若是遇到加载缓慢的第三方内容，如图标和广告等，能够用iframe来解决。
    • 缺点
      1. 会产生不少页面，不容易管理
      2. 在几个框架中都出现上下、左右滚动条时，这些滚动条除了会挤占已经很是有限的页面空间外，还会分散访问者的注意力。
      3. 使用框架结构时，必须保证正确设置全部的导航连接，不然会给访问者带来很大的麻烦。好比被连接的页面出如今导航框架内，这种状况下会致使连接死循环。
      4. 不少的移动设备（PDA手机）没法彻底显示框架，设备兼容性差。
      5. iframe框架页面会增长服务器的http请求，对于大型网站是不可取的。
    • 如今基本上都是用Ajax来代替iframe，iframe已渐渐退出了前端开发。
  2. Label的做用是什么？是怎么用的？（加 for 或 包裹）
    • 元素定义标注（标记）。 label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。若是您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。
  3. HTML5的form如何关闭自动完成功能？
    • <form autocomplete="on|off">
  4. 如何实现浏览器内多个标签页之间的通讯? (阿里)
    • cookie
      1. 客户端和服务器端都会请求服务器，性能降低
      2. 存储限制4kb
      3. 页面的cookie是共享的
    • storage:只在客户端使用，不会请求服务器处理，存储量比较大，只能存储字符串，非字符串会被转成字符串
      1. sessionStorage：临时性的，页面打开有关闭则没有，数据不共享
      2. localStorage：永久性的存储，数据共享
      3. api：clear()，getItem,key(index),removeItem (name),setItem(name,value)
  5. webSocket如何兼容低浏览器？(阿里)
    • (WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通讯(full-duplex)。在浏览器中经过http仅能实现单向的通讯,comet能够必定程度上模拟双向通讯,但效率较低,并须要服务器有较好的支持; flash中的socket和xmlsocket能够实现真正的双向通讯,经过 flex ajax bridge,能够在javascript中使用这两项功能. 能够预见,若是websocket一旦在浏览器中获得实现,将会替代上面两项技术,获得普遍的使用.) WebSocket是目前"惟一"的一个浏览器下的Socket的标准, 它是经过浏览器内部提供的API来实现访问的. 低版本的浏览器没有WebSocket这个标准, 就意味这些浏览器不容许用户经过它们来实现Socket通信. 解决兼容性的办法就是准备一套Ajax + Server-side Script的后备方案. 好比Ajax + PHP Socket. 其余方案:Adobe Flash Socket 、ActiveX HTMLFile (IE) 、基于 multipart 编码 发送 XHR 、基于长轮询的 XHR. 做者： 熠熠生阳 连接：http://www.imooc.com/article/details/id/10377 来源：慕课网 本文原创发布于慕课网 ，转载请注明出处，谢谢合做！
  6. 页面可见性（Page Visibility）API 能够有哪些用途？
  7. 如何在页面上实现一个圆形的可点击区域？
    • map+Area/svg，boder-radius,js 19.实现不使用 border 画出1px高的线，在不一样浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。 <div style="height:1px;overflow:hidden;background:black"></div>
  8. 网页验证码是干吗的，是为了解决什么安全问题？
    • 减小非正常的请求，保护用户权益，例如暴力破解用户密码，脚本登录，频繁使用涉及后台性能平静的功能。
  9. tite与h1的区别、b与strong的区别、i与em的区别？

CSS

  1. 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不一样的？javascript

    • 标准css盒子的宽度指的是内容区content的宽度，IE css盒子模型的宽指的是内容区宽+填充宽+边界宽。

  2. CSS选择符有哪些？哪些属性能够继承？博客css

    • 类选择器，id选择器，伪类选择器，属性选择器，类型选择器
    • 是否能够继承
    • 全部元素能够继承：visibility和cursor
    • 内联元素能够继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
    • 终端块状元素可继承：text-indent和text-align。
    • 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image
    • 不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。

  3. CSS优先级算法如何计算？html

    • 第一等：内联样式，权值为1000
    • 第二等：表明ID选择器，权值100
    • 第三等：类，伪类，属性选择器，权值10
    • 第四等：类型选择器和伪元素选择器，权值为1
    • 通用选择器，子选择器，相邻同胞选择器权值为0

  4. CSS3新增伪类有那些？前端

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程