面试题一:HTML

时间:2021-2-20 作者:admin

01. src 和 href 的区别

href 是超文本引用,它是指向资源的位置,建立与目标文件的联系;src 目的是把资源下载到页面中;浏览器解析 href 不会阻塞对文档的处理(这就是官方建议使用 link 引入而不是 @ import 的原因),src 会阻塞对文档的处理。

02. script 标签为什么要放在 body 标签的底部(defer、async)

因为浏览器在渲染html的时候是从上到下执行的,当遇到js文件的时候就会停止当前页面的渲染,转而去下载js文件,如果将script标签放在头部,在文件很大的情况下将导致首屏加载时间延长,影响用户体验。解决办法:

  1. 将script标签放在body的底部
  2. 通过defer、async属性将js文件转为异步下载

defer和async的区别:首先都是实现js文件的异步下载,不阻塞页面的渲染,区别就是defer必须等到整个文档渲染完成后才执行,而async在下载完成后,会暂停html的解析,转去执行js。(图示如下)

03. DOCTYPE 标签

DOCTYPE声明于文档最前面,告诉浏览器以何种方式来渲染页面。
HTML5中的声明方式如下:

<!DOCTYPE html>

04.阻止事件冒泡&取消默认行为

  1. 阻止事件冒泡
    • w3c:e.stopPropagation()
    • ie9以下:e.cancelBubble = true
  2. 取消默认行为
    • w3c:e.preventDefault()
    • ie:e.returnValue = false
  3. return false
    • js:取消默认行为
    • jQuery:阻止冒泡 + 取消默认行为
  4. vue方法(修饰符)
    • 阻止事件冒泡:@click.stop
    • 取消默认行为:@click.prevent

05.H5新特性

  1. 新增语义化标签:nav、header、footer、aside、section、article
  2. 音频、视频标签:audio、video
  3. 数据存储:localStoragesessionStorage
  4. canvas(画布)、Geolocation(地理定位)、websocket(通信协议)
  5. input标签新增属性:placeholder、autocomplete、autofocus、required
  6. history API
    • go、forward、back、pushstate
    • 应用:vue编程式导航的灵感来源;vue-router的history模式。
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。