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 部分:,,,