Published on

HTML 基础知识

Authors
  • avatar
    Name
    游戏人生
    Twitter

DOM

  • 档对象模型，包括文档、节点和元素
  • 所有元素都是节点，节点包括注释和文本等
  • 常用dom操作，getElementById、querySelector、appendChild等

BOM

浏览器对象模型，提供了很多用于访问浏览器的对象，核心是window。包括以下对象：

  • location 获取或设置浏览器的地址相关信息
  • navigator 用于访问用户浏览器的信息
  • history 提供了操作浏览器会话历史的API
  • screen 获取当前窗口的屏幕属性
  • frames 获取当前窗口中的所有 iframe 元素

事件模型

浏览器事件模型中的过程主要分为三个阶段：捕获阶段、目标阶段、冒泡阶段。相关API包括：

  • addEventListener 添加事件监听
  • removeEventListener 移除事件监听
  • AbortController 控制器对象，可以终止Web请求或者用于移除事件监听
  • preventDefault 阻止默认事件
  • stopPropagation 阻止冒泡

AbortController 使用实例（已经abort的请求是不能重复调用）

<body>
  <button id='fetchMsg'>发送请求</button>
  <button id='abortFetch'>废弃请求</button>
</body>

<script>
  const controller = new AbortController();   // 新建一个 AbortController 实例
  let signal = controller.signal;    // signal 是AbortController 实例的属性

  const fetchBtn = document.getElementById('fetchMsg');
  const abortBtn = document.getElementById('abortFetch');

  fetchBtn.addEventListener('click', fetchContent);

  abortBtn.addEventListener('click', function () {
      controller.abort();  // 调用abort方法
  })

  function fetchContent() {
    fetch(url, {signal}).then(function(res) {
      //...
    }).catch(function(e) {
      console.error(e);
    })
  }
</script>

事件委托

事件委托也称之为事件代理，是JavaScript中常用绑定事件的常用技巧。即把原本需要绑定在子元素的响应事件委托给父元素，让父元素担当事件监听的职务。原理是DOM元素的事件冒泡。

HTML标签

link

用于加载外部链接的元素，通常用于加载 CSS 和 favicon 文件，通过设置 ref = ‘preload’、ref = ‘prefetch’，配合 as 属性可以加载其他类型的文件。

<link rel="preload" href="myFont.woff2" as="font"
  type="font/woff2" crossorigin="anonymous">

script

  • 无属性

解析到标签，立刻pending，同时下载执行。在渲染该 script 标签之下的文档元素之前，不等待后续载入的文档元素，读到就加载并执行。

  • defer

解析到标签，开始异步下载，继续往后进行文档元素的加载，dom加载完成之后开始执行js。即所有元素解析完成之后，DOMContentLoaded 事件触发之前执行。

  • async

解析到标签，开始异步下载，下载完成之后立刻执行并且阻塞dom元素的继续绘制，执行完成之后，再继续向下加载dom。

  • crossOrigin

默认值 anonymous，设置了 crossorigin 就相当于开启了 CORS 校验。设置为 use-credentials 可以跨域携带cookie。

  • referrerpolicy

设置在获取脚本时可以携带的 Referer 信息，默认只有 HTTPS 会发送 Referer 信息。

  • integrity

允许比对接收到的资源和指定的加密签名以及验证资源完整性。

HTML5

新增语义化标签

header、footer、section、video、audio等

video

可以直接使用 src 指定资源，也可以在 source 子元素中使用 src 指定资源。当存在多个 source 元素时，默认取第一个能加载成功的资源。 相关开源资源 video.js

相关属性

  • controls 属性用于控制播放工具栏
  • crossorigin 属性用于控制跨域，与script 一致
  • loop 是否循环播放
  • muted 是否静音
  • poster 视频封面海报，不设置默认取视频的第一帧
  • preload 预加载，none 不预加载，metadata 进预加载没提元数据，auto 预加载整个视频，如果存在autoplay，则会忽略preload属性

支持监听的事件

  • loadeddata 加载数据完成时触发
  • onloadstart 加载内容开始时触发
  • pause 暂停操作
  • play 开始播放
  • seeking 重新定位媒体播放的位置完成后触发，表示定位已经结束
  • ended 播放完成触发

audio

用法和相关属性与 video 相似。其他属性：

  • duration 音频文件的长度
  • currentTime 当前播放时间点

相关开源资源 Howler.js

canvas

canvas 生成的是位图，默认宽高 300px * 150px。通过 canvas element 的 getContext(“2d”) 获取上下文。

常用方法

  • getContext 获取上下文（参数’2d’或’webgl’）
  • beginPath 用于创建一个新的路径
  • moveTo 移动到新的坐标点，不创建路径
  • lineTo 划线到指定坐标点
  • stroke 绘制路径的边框
  • rect 绘制矩形
  • fillRect 绘制填充矩形
  • clearRect 清除指定矩形区域内的像素内容
  • drawImage 渲染图片
  • toDataURL 将画布内容转为DataURL
  • …

解决模糊问题（通过css设置显示内容为canvas宽高的一半）

var ctx = canvas.getContext('2d');
ctx.translate(0.5, 0.5);

svg

生成的是矢量图，可自由缩放，由标签组成，可在标签上绑定事件。 常用的标签包括：text、path、g、rect、circle、foreignObject等。width、height 属性定义 svg 的宽高，viewBox 设置画布中展示的内容大小。

history

用于操作浏览器在标签页访问的会话历史记录。hisotry 对象无法复写，且历史记录存在上限。

支持的方法

  • go 前进刷新，go(-1) 后退并刷新原页面
  • back 后退不刷新原页面，back(-1)
  • forward 前进
  • pushState 无刷新地向当前history插入一条历史记录
  • replaceState 直接替换当前历史记录

popstate 浏览器点击前进或后退时触发的事件。pushState 和 replaceState 不会触发该事件。

Geolocation

navigator 的 geolocation 对象主要用来获取位置信息，包含一系列相关位置操作方法，需要选择IE9及以上的浏览器。主要包含三个方法：

  • getCurrentPosition(successCb, errorCb, positionOptions) 获取当前地址信息（请求一次）
  • watchPosition(successCallback, errorCallback, positionOptions) 监视当前地理位置（请求多次）
  • clearWatch(watchId) 清除监视功能

successCallBack 会返回一个对象参数 coords，包含以下信息：

  • coords.latitude 十进制数的纬度
  • coords.longitude 十进制数的经度
  • coords.accuracy 所提供的以米为单位的经度和纬度估计的精确度
  • coords.altitude 海拔，海平面以上以米计
  • coords.altitudeAccuracy 所提供的以米为单位的高度估计的精确度
  • coords.heading 宿主设备当前移动的角度方向，相对于正北方向顺时针计算
  • coords.speed 以米每秒为单位的设备的当前对地速度

errorCallback 接受错误对象作为参数，包含code属性、message信息。

code 属性：

  • 当属性值为1时，用户不允许地理定位（拒绝授权），“Permission denied”
  • 当属性值为2时，无法获取当前位置，“Position unavailable”
  • 当属性值为3时，操作超时，“Timeout”

message 属性

属性值是一个字符串，包含了错误信息，这个错误信息在我们开发和调试时非常有用 positionOptions 是一个可选属性的列表，说明如下：

  • enableHighAccuracy 启用高精确度模式，这个参数通知浏览器启用HTML5
  • Geolocation 服务的高精确度模式，默认值为false
  • timeout 超时限制，单位毫秒，如果在该时间内未获取到地理位置信息，则返回错误
  • maximumAge 表示浏览器重新计算位置的时间间隔，单位毫秒，默认为零，这意味着浏览器每次请求都必须重新计算位置

本地缓存

LocalStorage

持久化存储，不手动删除或者清除浏览器缓存会一直存在。存储空间可以达到5MB，以 key – value 字符串的形式存储。 提供的方法：

  • setItem(key, value) 将数据以键值对的形式存到 LocalStorage 中
  • getItem(key) 获取 LocalStorage 中键值为 key 的数据
  • removeItem(key) 删除 LocalStorage 中键值为 key 条目
  • clear() 清空 LocalStorage 中的数据
  • key(number) 获取 LocalStorage 数据列表中指定索引的 key 值

cookie

由服务端返回 Set-Cookie 的 header 设置，在前端也可以通过 document.cookie 设置。每个 cookie 都是一个键值对数据。

cookie的存储空间位4KB，可以通过 max-age 或者 expires 设置其过期时间。

document.cookie = "name = tom"

document.cookie 也可以用于获取 cookie 数据，但是无法访问带有 HttpOnly 的 cookie。

属性含义
NameCookie的名称
Value对应名称的值
DomainCookie的域名
PathCookie生效的路径
Expires过期时间，过了这个时间后Cookie失效
Max-age生效时间，表示Cookie在多长时间后失效
SizeCookie的长度，为name和value的长度和
HttpOnly防止通过JavaScript访问Cookie
Secure只在HTTPS协议的情况下才会将Cookie传到后端
SameSite是否允许跨站请求时发送Cookie
Partitioned第三方Cookie分区
Priority优先级

Cookie 生命周期

Cookie是有生命周期的，在设置Cookie值时，可以同时设置有效期。当超过了这个有效期之后，Cookie便会失效，前端请求时，不会携带过期的Cookie。

Cookie的有效期有三种类型：

  • Session 如果Cookie的有效期为Session，一般关闭会话时，Cookie便会失效
  • Expires 过期时间，是一个确定的日期时间，当浏览器的当前时间超过这个时间，Cookie便会失效
  • Max-age 表示Cookie的存活时间，以秒作为单位

注意

上述的生命周期都是服务端指定的。如果设置了Expires，则是把服务器时间和浏览器本地时间相比较，如果时间不同步，配置就会出现问题。而Max-age设置的是秒数，始终是浏览器本地时间自己相比较，不会出现时间不同步的问题。

sessionStorage

sessionStorage 是HTML5新增的一个临时会话存储对象，用于临时保存同一窗口(或标签页)的数据，当关闭当前窗口或浏览器时会自动删除所存储内容。 特点

  • 数据时效性 页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话，直到关闭对应浏览器标签或窗口才会清除
  • 页面共享 在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文
  • 独立性 打开多个相同的 URL 的 Tabs 页面，会创建各自的 sessionStorage
  • 存储方式 采用key、value的方式。value的值必须为字符串类型
  • 存储限制 不同浏览器限制不同，主流浏览器限制是5MB

属性与方法

sessionStorage 与 localStorage 的属性方法基本一致。

IndexedDB

IndexedDB是在浏览器端实现的一种事务性数据库，以文件的形式存储在用户本地。 只要本地磁盘空间足够，就可以一直存储。清除浏览器缓存时，不会清除数据，只能手动删除数据库。

特点

  • 键值对储存 即JavaScript对象
  • 异步 避免同步引起阻塞
  • 支持事务
  • 支持索引
  • 同源限制 按域名隔离，跟localStorage相同
  • 储存空间大 可以达到250M
  • 支持二进制储存 支持 ArrayBuffer 和 Blob 对象

核心接口

  • 数据库 IDBDatabase 对象
  • 对象仓库 IDBObjectStore 对象
  • 索引 IDBIndex 对象
  • 事务 IDBTransaction 对象
  • 操作请求 IDBRequest 对象
  • 指针 IDBCursor 对象
  • 主键集合 IDBKeyRange 对象

打开/新建数据库 open

const request = window.indexedDB.open(databaseName, version);

open 返回一个 IDBRequest 对象，又三个事件：

success

request.onsuccess = function (event) {
  // 数据库打开成功
  db = request.result;
  // db = event.target.result; 也能拿到
};

error

request.onerror = function (event) {
  // 打开报错
};

upgradeneeded

表示升级数据库，即传递的版本参数大于目前浏览器里该名字的数据库的版本参数

request.onupgradeneeded = function (event) {
  db = event.target.result;
}

以上一个事件同时存在时，会先执行 upgradeneeded 事件。

表结构的操作都是在 onupgradeneeded 事件里执行。

request.onupgradeneeded = function(event) {
  db = event.target.result;
  var objectStore;
  if (!db.objectStoreNames.contains('class')) {
    objectStore = db.createObjectStore('class', {
      keyPath: 'id'
    });
  }
}

自增主键

objectStore2 = db.createObjectStore(
  'class2',
  { autoIncrement: true }
);

建完表建索引

objectStore.createIndex('name', 'name', { unique: true });

关闭和删除数据库

db.close();
window.indexedDB.deleteDatabase(dbName);

CRUD 操作 API

add 插入一条数据

function add(class) {
  var request = db.transaction(['class'], 'readwrite') // 新建事务，readwrite, readonly(默认), versionchange 
    .objectStore('class') // 拿到IDBObjectStore 对象
    .add({  // 插入记录
      id: class.id,
      name: class.name
    });
  request.onsuccess = function(event) {
    console.log('数据写入成功');
  }
  request.onerror = function(event) {
    console.log('数据写入失败');
  }
  request.onabort = function(event) {
    console.log('事务回滚');
  }
}

get 读取一条数据

var transaction = db.transaction(['class']);
var objectStore = transaction.objectStore('class');
var request = objectStore.get(1); // 传主键

openCursor 游标，读取所有记录

objectStore.openCursor().onsuccess
// 也可以在索引上打开 objectStore.index("id").openCursor()

// 可以传入参数作为游标的范围
objectStore.openCursor(IDBKeyRange.only(1))

// IDBKeyRange上还有lowerBound( )、upperBound( )、bound( )方法
IDBKeyRange.bound(1, 10, false, true) //范围是[1, 10)

// openCursor 第二个参数表示方向，可取值 next，nextunique，prev，prevunique
objectStore.openCursor(null, "prev")

put 更新记录

var request = objectStore.put({id: 10, name: '高二六班'});

delete 删除记录

var request = objectStore.delete(1); // 主键

clear 清空记录

var request = objectStore.clear();

其他

DOCTYPE

用于告诉浏览器以什么方式渲染文档，不声明的话默认使用怪异模式。页面添加 DOCTYPE，那么就等同于开启了标准模式

  • BackCompat 怪异模式，浏览器使用自己的怪异模式解析渲染页面
  • CSS1Compat 标准模式，浏览器使用W3C的标准解析渲染页面

怪异模式使用比较旧的 IE5 排版方式，盒模型包含了 padding 和 border DOCTYPE取值

  • html5
<!DOCTYPE html>
  • HTML 4.01 Strict

该DTD包含所，有的HTML元素和属性，但不含展示性的和弃用元素(比如 font)，不允许框架集(Framesets)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • HTML 4.01 Transitional

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • HTML 4.01 Frameset

该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

空元素

空元素包含：br、img、hr、input、link、meta等。