HTML5 有哪些更新？

  • 语义化标签

    • header:定义文档的页眉（头部）
    • nav:定义导航链接部分
    • footer:定义文档或节的页脚（底部）
    • article:定义文章内容
    • section:定义文档中节（section、区段）
    • aside:定义其所处内容之外的内容（侧边）

  • 媒体标签

    • audio：音频

      1
      <audio src="" controls autoplay loop="true"></audio>
      • 属性
        • controls 控制面板
        • autoplay 自动播放
        • loop='true’循环播放

    • video：视频

      1
      <video src="" poster="imgs/aa/jpg" controls></video>
      • 属性：
        • poster：指定视频还没有完全下载完毕或用户还没有点击播放前显示的封面。默认显示当前视频文件的第一帧画面，poster 也可以自己指定。
        • controls 控制面板
        • width
        • height

    • source 标签：因为浏览器对视频格式支持程度不一样，为了能够兼容不同的浏览器，可以通过 source 来制定视频源。

      1
      2
      3
      4
      <video>
       	<source src='aa.flv' type='video/flv'></source>
       	<source src='aa.mp4' type='video/mp4'></source>
      </video>

  • 表单

    • 表单类型

      • email:能够验证当前输入的邮箱地址是否合法
      • url:验证 URL
      • number:只能输入数字，其他输入不了，而且自带上下增大减小箭头，max 属性可以设置最大值，min 可以设置最小值，value 为默认值
      • search:输入框后面会给提供一个小叉号，可以删除输入的内容，更加人性化
      • range:可以提供给一个范围，其中可设置 min 和 max 以及 value，其中 value 属性可以设置为默认值。
      • color:颜色拾取器
      • time:时分秒
      • data:日期选择年月日
      • datatime:时间和日期（目前只有 Safari 支持）
      • datatime-local：日期时间控件
      • week:周控件
      • month:月控件

    • 表单属性：

      • placeholder:提示信息
      • autofocus:自动获取焦点
      • autocomplete='on’或者 autocomplete='off’使用这个属性需要有两个前提：
        • 表单必须提交过
        • 必须有 name 属性
      • required:要求输入框不能为空，必须有值才能提交
      • pattern=""里面写入想要的正则模式
      • multiple:可以选择多个文件或多个邮箱
      • form=" form 表单的 ID"

    • 表单事件：

      • oninput:每当 input 里面输入的内容发生改变的时候都会触发这个事件
      • oninvalid:当验证不通过时触发该事件

    • 进度条、度量器

      • progress 标签：用来表示任务的进度（IE、Safari 不支持），max 用来表示任务的进度，value 表示已完成多少

      • meter 属性：用来显示剩余容量或剩余库存（IE、Safari 不支持）

        • high/low：规定被视作高/低的范围
        • max/min：规定最大/小值
        • value：规定当前度量值

        设置规则：min < low < high < max

  • DOM 查询操作

    • document.querySelector()
    • document.querySelectorAll()

  • Web 存储：

    • localStorage:没有时间限制的数据存储
    • sessionStorage:针对一个 session 的数据存储

  • 其他

    • 拖放：拖放是一种常见的特性，即抓取对象以后拖到另一个位置。设置元素可拖放：

      1
      <img draggable="true" />

    • 画布（canvas ）： canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

      1
      <canvas id="myCanvas" width="200" height="100"></canvas>

    • SVG：SVG 指可伸缩矢量图形，用于定义用于网络的基于矢量的图形，使用 XML 格式定义图形，图像在放大或改变尺寸的情况下其图形质量不会有损失，它是万维网联盟的标准

    • 地理定位：Geolocation（地理定位）用于定位用户的位置。

  • （1）新增语义化标签：nav、header、footer、aside、section、article （2）音频、视频标签：audio、video （3）数据存储：localStorage、sessionStorage （4）canvas（画布）、Geolocation（地理定位）、websocket（通信协议） （5）input 标签新增属性：placeholder、autocomplete、autofocus、required （6）history API：go、forward、back、pushstate

src 和 href 的区别

src 和 href 都是用来引入外部资源的

  • src 表示对资源的引用，它指向的内容会嵌套到标签所在的位置，src 会将其指向的资源下载并应用到文档中，如请求 js 脚本。当浏览器解析到该元素时，会停止对其他资源的下载和处理，直到该资源加载、编译、执行完毕，所以 js 脚本一般会放在页面底部。
  • href 表示超文本引用，它指向一些网络资源，建立其和当前元素或文档的链接关系。当浏览器识别到它指向的文件时，就会并行下载资源，不会停止对当前文档的处理，常用在 a、link 等标签上。

对 HTML 语义化的理解

语义化就是根据内容的结构化选择适合的标签，通俗来讲就是用正确的标签做正确的事情，其优点如下：

  • 对机器友好，带有语义的文字表现力更加丰富，更适合搜索引擎的爬虫爬取有效信息，有利于 SEO，除此之外，语义类还支持读屏软件，可根据文章自动生成目录。
  • 对开发者友好，使用语义类标签增强可读性，结构更加清晰，开发者能清晰地看出网页的结构，便于团队的开发和维护。
  • 常见的语义化标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<header></header>
头部
<section></section>
区块
<nav></nav>
导航
<main></main>
主要区域
<article></article>
主要内容
<aside></aside>
侧边栏
<footer></footer>
底部

DOCTYPE（文档类型）的作用

DOCTYPE 是 HTML5 中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器以什么样的文档类型定义来解析文档，不同的渲染模式会影响浏览器对 CSS 甚至 JS 脚本的解析，它必须声明在 HTML 的第一行。

浏览器渲染页面的模式分为两种（可通过 document.compatMode 获取）

  • CSS1Compat:标准模式，默认模式，浏览器使用 W3C 的标准解析渲染页面，在标准模式下，浏览器以其支持的最高标准呈现页面。
  • BackCompat：**怪异模式，**浏览器使用 自己的怪异模式解析页面。在怪异模式中，页面以一种较为宽松的向后兼容的方式显示。

script 标签中的 defer 和 async

如果没有 defer 和 async 属性，浏览器会立即加载并执行相应的脚本，不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。

​ image-20230713083346457

注：蓝色代表 js 脚本网络加载时间，红色代表 js 脚本执行时间，绿色代表 html 解析。

defer 和 async 都是异步加载外部 js 文件的，他们都不会阻塞页面的解析，区别如下：

  • 执行顺序:多个带有 async 属性的标签，不能保证加载顺序，多个带有 defer 属性的标签，按其在文档中出现的顺序进行加载和执行。
  • 脚本是否并行执行：
    • async 属性：表示后续文档的加载和执行与 js 脚本的加载和执行是并行进行的，即异步执行。
    • defer 属性：表示后续文档和 js 脚本加载（不执行）是并行进行的，即异步执行，js 脚本需要等到文档所有元素加载完毕才能执行，DOMContentLoaded 事件触发执行之前。

Web Worker

Web Worker 是在 Web 浏览器中运行后台线程的机制，它允许在主线程之外执行长时间运行的计算和处理复杂任务，以避免阻塞用户界面的情况。Web Worker 能够并行执行任务，独立于主线程。下面是 Web Work 的一些特点：

  • 独立于主线程：Web Worker 在后台运行，不会阻塞主进程的操作，这意味着可以在 Web Worker 中进行密集型或耗时的任务，而不会影响用户界面的响应性能。
  • 无法访问 DOM：Web Worker 在独立线程中执行，因此无法直接访问或操作页面的 DOM 元素。这样可以确保线程不会与主线程发生冲突或竞争条件。
  • 通过消息传递进行通信：主线程和 Web Worker 之间的通信是通过消息传递来实现的。主线程和 Web Worker 可以互相发送信息，并通过事件处理程序接收和处理收到的信息。
  • 适用于耗时任务：Web Worker 特别适合于执行那些需要大量计算或涉及大量数据处理的任务，如：图像处理、大数据集操作、复杂算法等。

使用 Web Worker 的基本流程：

  1. 在主线程中创建一个新的 Web Worker 实例：

    1
    var worker = new Worker("worker.js");

  2. 在 Web Worker 脚本文件（worker.js）中编写后台任务的代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    //worker.js
    //接收主线程消息的事件处理程序
    self.onmessage = function (event) {
      var data = event.data;
      //执行后台任务
      //处理data数据
      //发送结果给主线程
      self.postMessage(result);
    };

  3. 通过 postMessage()方法将消息发送到 Web Worker，并通过 onmessage 事件处理程序接收来的 Web Worker 的消息。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    //主线程

    //发送消息给Web Worker
    worker.postMessage(data);

    //接收Web Worker的消息
    worker.onmessage = function (event) {
      var result = event.data;
      //处理Web Worker返回的结果
    };

    //结束Web Worker的运行
    worker.terminate();

    总结：Web Worker 提供了一种在 Web 浏览器中执行后台任务的方法，可以提高用户界面的响应性能，特别适用于执行耗时任务。然而，由于 Web Worker 无法直接访问 dom，因此在使用 Web Worker 时需要注意并发加载和处理数据的方式，以及主线程之间的消息传递。

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

  • 行内元素：a b span img input select strong
  • 块级元素：div ul ol dl dt dd h1 h2 h3 h4 h5 h6 p
  • 空元素，即没有内容的元素，空元素是在开始标签中关闭的，也就是空元素没有闭合标签：
    • 常见的有：<br>、<hr>、<img>、<input>、<link>、<meta>；
    • 鲜见的有：<area>、<base>、<col>、<colgroup>、<command>、<embed>、<keygen>、<param>、<source>、<track>、<wbr>。

title 和 h1 的区别、b 和 strong 的区别、i 和 em 的区别

  • title 没有明确意义只表示是个标题，h1 表示层次明确的标题，对抓取页面信息有很大的影响.
  • strong 有语义，是祈祷加重语气的效果，而 b 标签没有，b 标签只是一个简单的加粗标签，b 标签之间的字符都设置为粗体，strong 标签加强字符的语气都是通过粗体来实现的，而搜索引擎更侧重 strong 标签。
  • i 内容展示斜体，em 表示强调是一个文本。

iframe 标签

在 HTML 中，标签用于在页面中嵌入另一个 HTML 文档或外部网页。通过使用该标签，可以在当前页面显示其他网页或加载外部资源。

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

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

head 标签用于定义文档的头部，它是所有头部元素的容器，用于定义页面的相关数据和外部资源，描述了文档的各种属性和信息，包括文档的标题、在 web 中的位置以及其他文档的关系，不会直接在浏览器中展示给用户。

下面标签可用在 head 部分：,,,