html面试题

论坛 期权论坛 编程之家     
选择匿名的用户   2021-5-29 15:37   41   0

1.你知道哪些布局

table布局,position布局,浮动布局,栅格布局,flex弹性盒子布局

table布局: 优点:不需要使用任何CSS配合就可搭建正题布局;兼容性强,所有浏览器都支持该元素; 缺点:任意单元格的布局属性改变将引起整个表格的回流,耗费性能;各个浏览器对table基础属性实现不同,样式有差异;难以适应复杂业务需求;

position布局: 优点:利用position的五个属性(static、relative、absolute、fixed、sticky)改变元素在文档流中的位置,使用灵活; 缺点:当为元素设置定位时,往往还涉及到为父元素设置定位,额外增加了复杂度;元素脱离文档流后可能引起父元素高度塌陷,需要对父级元素做处理;对于sticky在部分版本浏览器不支持,截止发文,在支付宝小程序也不支持sticky属性。

浮动布局: 优点:可以自由改变元素在同级元素之间的排列顺序; 缺点:需要做清除浮动等后续工作,否则会造成父级元素高度塌陷、影响其他元素布局等问题;。 样式有差异;难以适应复杂业务需求;

栅格布局: 优点:个人认为它是table布局的改良版,它跟table布局一样,都引入二维空间行列的概念。栅格布局使用百分比为单位,没有基础样式,避免了table的缺点; 缺点:原生的栅格布局浏览器对其支持性并不好,反而是集成了栅格布局的bootStrap框架兼容性做的更好,因此大多用的都是bootStrap作为布局工具。

flex布局: 优点:移动端布局神器,在不使用任何UI框架的情况下可以快速形成布局;一整套的属性可以达到解决大多数布局问题; 缺点:属于CSS3引入的属性,仅适用于IE9以上,低版本需要兼容处理;同时,需要掌握繁琐的属性设置;flex属性占用了css的display属性,在部分场景下需要设置特定display属性时,只能另寻它法。

2.h5有哪些新特性

1、语义化更好的标签如section、article、header、nav、footer main aside

2、多媒体元素audio和video

3、绘图功能canvas和SVG两种绘图方法

4、地理位置信息、移动端事件处理

5、客户端存储localStorage 和sectionStorage

6、动画优化的requestAnimationFrame

7、WebWorker开辟一个独立同时运行的线程,减少渲染时间

8、WebSocket请求,类似于HTTP协议,用于跨域通信

3.Canvas和SVG有什么区别?

  • svg绘制出来的每一个图形的元素都是独立的DOM节点,能够方便的绑定事件或用来修改。canvas输出的是一整幅画布
  • svg输出的图形是矢量图形,后期可以修改参数来自由放大缩小,不会失真和锯齿。而canvas输出标量画布,就像一张图片一样,放大会失真或者锯齿

4.px与 em与 rem和vh,vw的区别?

px是绝对像素值,大部分元素可以设置,如果没有设置会继承父元素的像素值

em是相对单位。参考物是父元素的font-size,默认字体大小是16px,它是以当前元素的父级元素的基值来设置的

rem是相对单位。参考物是相对于根元素,它是根据HTML元素的像素基值为1rem,常用于解决PC端与移动端的自适应。例:设置根元素html的font-size:12px,1rem就是12px

vw:css3新单位,viewpoint's width的缩写,视窗宽度,1vw等于window.innerWidth的1%。

vh:css3新单位,viewpoint's height的缩写,视窗高度,1vh等window.innerHeight的1%。

5.<img>titlealt有什么区别

  • title通常当鼠标滑动到元素上的时候显示
  • alt<img>的特有属性,是图片内容的等价描述,用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性,除了纯装饰图片外都必须设置有意义的值,搜索引擎会重点分析

6.简述src 与href的区别?

src用于替换当前元素。而href则是建立当前元素与外界资源的联系。

src指向外部资源,指向的内容将会下载并嵌入到当前标签的位置,在请求src资源时会将其下载并应用到文档内。例如iframe img script标签等。

当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将资源加载、编译、执行完毕才会去处理其他元素。这也是为什么要将script放于底部的原因。

href标签指向网络资源的所在位置,建立当前元素和外部资源的链接。并且下载该资源时浏览器会并行下载并且不会停止对当前文档的处理。所以推荐css实例link方式加载。

7.html语义化

  • 语义化:指使用恰当语义的 html 标签,如 header 标签 代表头部,article 标签代表正文等

  • 好处:增强了可读性、有利于SEO优化

8.script 标签中 defer 和 async 的区别?

  • defer:script 被异步加载后并不会立刻执行,而是等待文档被解析完毕后执行。
  • async:脚本加载完毕后立即执行

分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP