前端面试题复习（1）-html

mandarava
58 阅读8分钟

src和href的区别

都是用来引用外部资源的

  1. src对资源的引用，将资源下载并嵌入到文档中。
    1. js：解析到js脚本会停止其他的下载和处理
  2. href：表示超文本引用，指向一些网络资源，建立和当前元素或本文档的链接关系。文件会并行下载，不会停止对文档的处理
    1. a、link;

html语义化

语义化：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。

优点：

  • 对机器友好，带有语义的文字表现力丰富，适合爬虫爬取，利于SEO。
  • 语义类支持读屏软件，根据文章可以生成目录
  • 语义标签增强可读性，可以清晰看出网络结构

常见的语义化标签

header 头部
nav 导航栏
section 区块
main 主要区域
article 主要内容
aside 侧边栏
footer 底部

DOCTYPE（文档类型）

是一种HTML5中标准通用标记语言的文档类型声明、 目的是告诉浏览器的解析器应该以什么样的文档类型定义来解析文档 必须声明在文档第一行

浏览器渲染页面的两种模式：

  1. 标准模式（CSS1Compat）：标准模式，默认模式，浏览器使用W3C的标准解析渲染页面。在标准模式中，浏览器以其支持的**最高标准（W3C）**呈现页面
    1. <!doctype html>写了就会进入标准模式，不写就会进入混杂模式
  2. 怪异模式（BackCompat）：混杂模式，浏览器使用自己的怪异模式解析渲染页面，在怪异模式中，页面以一种向后兼容的方式显示

script标签中defer和async的区别

defer和async都是异步加载资源文件、不阻塞页面解析。 defer是先并行加载js文件，html解析完在执行js脚本 async是并行加载js文件后，阻断html解析，立即执行js

具体区别如下： 执行顺序：多个async，不能保证加载顺序；多个defer，按照加载顺序执行。 脚本是否并行执行：async属性，表示后续文档的加载和执行与js脚本的加载和执行是并行进行的，即异步执行；defer属性，加载后续文档的过程和js脚本的加载（仅加载不执行）是并行进行的（异步），js脚本在文档解析后才执行，DOMContentLoaded事件触发执行之前。

meta标签

meta标签由name和content属性定义，用来描述网页文档的属性。网页作者、网页描述、关键词等。支持自定义name。

  • charset，编码类型 <meta charset="UTF-8">
  • keywords 关键词<meta name="keywords" content="关键词">
  • description 页面描述 <meta name="description" content="描述内容">
  • refresh 页面重定向和刷新 <meta http-equiv="refresh" content="0;url=">
  • viewport 适配移动端，可以控制视口的大小和比例：
    • content参数：
      • width viewport
      • height viewport
      • initial-scale 初识缩放比例
      • maximum-scale 最大缩放比例
      • minimum-scale 最小缩放比例
      • user-scaleable 是否允许用户缩放
  • 搜索引擎方式 <meta name="robots" content="index,follow">
    • content参数：
      • all 文档将被检索，且页面上的链接可以被查询
      • none 文档将不被检索，页面上链接不可以被查询
      • index 文档将被检索
      • follow 页面上的链接可以被查询
      • noindex 文件将不被检索
      • nofollow 页面上的链接不可以被查询

HTML5有哪些更新

新增的标签

  1. 语义化标签 nav header footer aside section article
  2. 媒体标签 audio video
  3. 表单 input标签新增的属性 placeholder autocomplete autofocus required
  4. 进度条、度量器
  5. DOM查询操作
  6. Web存储 localstorage sessionstorage
  7. 其他
    1. 拖放 drag
    2. 画布 canvas
    3. SVG
    4. 地理定位 Geolocation
    5. 通信协议 websocket
    6. history API

移除的标签

  1. 纯表现的标签：basefont，big，center，font，s，strike，tt，u
  2. 对可用性产生负面影响的标签：frame，frameset，noframes

img的srcset属性的作用

不同屏幕密度，image会加载不同的图片

<img src="image-128.png"
   srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w"
   sizes="(max-width: 360px) 340px, 128px" />

srcset 指定图片地址和对应的质量。sizes用来设置图片的尺寸零界点，对于srcset的w单位，可以理解成图片质量。如果可视区小于这个质量的值，就可以使用。浏览器会自动选择一个最小的图片

sizes 就是指默认显示128px，如果视区宽度大于360px，则显示340px。

行内元素有哪些？块级元素有哪些？空元素有哪些？

行内元素：a b span img input select strong

块级元素：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p

空元素：

  1. 常见：br hr img link meta input
  2. 少见：area base col colgroup command embed keygen param source track wbr

web worker

‌Web Worker 是 HTML5 提供的浏览器多线程技术，允许在独立线程中执行 JavaScript 代码，避免主线程阻塞，从而提升 Web 应用的性能和响应速度‌。

HTML5的离线储存怎么使用，原理

离线储存是指在用户没有网时，更新用户机器上的缓存文件 原理：HTML5的离线储存是基于一个新建的.appcache文件的缓存机制（不是存储技术），通过这个文件上的解析清单离线缓存，

使用方式：

  1. 创建一个和html同名的manifest文件，然后在页面头部加入manifest属性；
    1. <html lang="en" manifest="index.manifest">
  2. 在文件中，写需要缓存的资源 
       CACHE MANIFEST
   #v0.11
   CACHE:  // 需要离线缓存的资源列表
   js/app.js
   css/style.css
   NETWORK: // 在线的情况下才能访问，cache中也有的话，优先cache，
   resourse/logo.png
   FALLBACK: // 第一个资源访问失败，访问第二个
   /index.html /offline.html
  3. 离线状态时，操作window.applicationCache进行离线操作。

浏览器如何对HTML5的离线储存资源进行管理和加载

在线：发现有manifest标记，第一次访问会下载资源并离线存储；第二次访问会对比新的与旧的，没发生改变不做任何操作，如果改变了就重新下载并存储。 离线：直接使用离线缓存

title VS h1、b VS strong、i VS em

strong标签有语义，b标签没有；strong利于页面抓取 title只是明确的标题，h1层次更加明确，利于页面抓取 i 展示为斜体，em表示强调的文本

iframe 有哪些优点和缺点

优点：

  • 加载速度较慢的内容
  • 脚本并行下载
  • 实现跨子域通信 缺点
  • iframe 阻塞主页面的onload事件
  • 无法被一些搜索引擎识别
  • 会产生很多页面，不容易管理

label作用、使用方法

关联表单控件和描述的关系 方法1:

<label for="mobile">Number:</label>
<input type="text" id="mobile"/>

方法2:

<label>Date:<input type="text"/></label>

canvas 和 svg的区别

canvas

<body>
  <canvas width="500" height="500">浏览器不支持canvas</canvas>
  <script>
    var canvas = document.querySelector('canvas');
    // 绘图环境
    var ctx = canvas.getContext('2d');
    function img() {
      var imgObj = new Image();
      imgObj.src = "./img.jpg";
      imgObj.onload = function () {
        ctx.drawImage(imgObj, 100,100,300,300);
      }
    }
  </script>
</body>

svg

可缩放矢量图形，放大缩小不会失真的图形

区别

canvas 画出来的是位图会失真；svg是矢量图不会失真

canvas的图不会出现在dom中，svg会

canvas类似于动画，每次图形的改变都是先清除原来的图形，然后画新的；svg可以直接js操作

canvas依赖分辨率，svg不依赖

canvas最适合图像密集型游戏；svg不适合

head标签有什么作用，其中什么标签必不可少

描述文档信息、属性等； 可用标签部分：<base> <link> <meta> <script> <style> <title> <title> 是必需元素

浏览器乱码的原因，解决方案

产生原因：编码方式不一样，网页不能检测编码所以会乱码 解决方案：使用软件编码HTML网页内容；程序内容转码；浏览器设置

渐进增强与优雅降级之间的区别

渐进增强：先做低版本的，然后再慢慢提升体验 优雅降级：往回看，处于安全地带

html drag API

  • dragstart：开始拖放被拖放元素时触发，主体时被拖放元素
  • drag：正在拖放时触发，主体时被拖放元素
  • dragenter：进入某元素时触发，主体时目标元素
  • dragover：某元素内移动时触发，主体时目标元素
  • dragleave：移出目标时触发，主体时目标元素
  • drop：目标元素完全接受，主体时目标元素
  • dropend：拖放结束时触发，主体时被拖放元素

渐进式渲染

渐进式渲染用于提高页面性能，以尽快呈现页面的技术。

  • 图片懒加载：页面上的图片不会一次性全部加载。
  • 分层次渲染，只包含少量的css、js和内容，可以使用延迟加载脚本DOMContentLoaded/load事件加载其他资源和内容
  • 异步加载HTML片段----当页面通过后台渲染时，把HTML拆分，通过异步请求，分块发送给浏览器。
avatar
文章
阅读
粉丝