新增的元素

section元素

section 元素表示页面中的一个内容块，比如章节、页眉、页脚或者页面中的其他部分。

<section>...</section>

article元素

表示页面中的一块与上下文不相关的独立内容。

<article>.....</article>

aside元素

aside元素article元素的内容之外的、与article元素的内容相关的辅助信息。

<aside>...</aside>

header元素

header元素表示页面中一个内容区块或者整个页面的标题。

<header>...</header>

footer元素

footer元素表示整个页面或者页面中一个内容区块的脚注。

<footer>...</footer>

nav元素

nav元素表示页面中导航链接的部分。

<nav>...</nav>

figure元素

figure元素表示一段独立的流内容，一般表示文档主题流内容中的一个独立单元。
使用figcaption元素为figure元素组添加标题。

    <figure>
      <figcaption>标题</figcaption>
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporis cum
        ipsum vel consequatur, totam iure porro quo asperiores laboriosam cumque
        culpa tempora architecto blanditiis laborum veniam natus qui inventore
        perferendis.
      </p>
    </figure>

main元素

main元素表示网页中的主要内容。

<main>...</main>

新增其他元素

video元素

video元素用于定义视频，比如电影片段或者其他视频流。

<video src="movie.ogg" controls="controls">video元素</video>

audio元素

audio元素用于定义音频，比如音乐或其他音频流。

<audio src="audio.wav">audio元素</audio>

embed元素

embed元素用来插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3等。

<embed src="horse.wav">

mark元素

mark元素主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。mark元素的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。

<mark>mark</mark>

progress元素

progress元素表示运行中的进程，可以使用progress元素来显示JS中耗费时间函数的进程。

<progress>progress</progress>

meter元素

meter元素表示度量衡，仅用于已知最大值和最小值的度量。

<meter value="10" min="1" max="20"></meter>

time元素

time元素用于表示日期或者时间

<time>2026年1月2日14:07:33</time>

ruby元素

ruby元素表示ruby注释（中文注音或字符）

    <h1>汉字注音示例</h1>
    
    <!-- 单个汉字 -->
    <p>我喜欢<ruby>学<rt>xué</rt></ruby>习</p>
    
    <!-- 多个汉字 -->
    <p>
        <ruby>
            北 <rp>(</rp><rt>Běi</rt><rp>)</rp>
            京 <rp>(</rp><rt>jīng</rt><rp>)</rp>
        </ruby>是中国的首都
    </p>
    
    <!-- 日语假名注音 -->
    <p>
        日语：<ruby>漢<rp>(</rp><rt>かん</rt><rp>)</rp></ruby>
        <ruby>字<rp>(</rp><rt>じ</rt><rp>)</rp></ruby>
    </p>
    
    <!-- 多音字 -->
    <p>
        <ruby>重<rt>zhòng</rt></ruby>要 vs 
        <ruby>重<rt>chóng</rt></ruby>复
    </p>

canvas元素

canvas元素表示图形，比如图表和其他图像。

<canvas id="my-canvas" width="200" height="200"></canvas>

details元素

details元素表示用户要求得到并且可以得到的细节信息。

    <details>
      <summary>HTML5</summary>
      This document teaches you everything you have to learn about HTML5.
    </details>

datalist元素

datalist元素表示可选数据的列表，与input元素配合使用，可以制作出输入值的下拉列表。

    <input list="browsers" />
    <datalist id="browsers">
      <option value="Chrome"></option>
      <option value="Firefox"></option>
      <option value="Safari"></option>
      <option value="Edge"></option>
      <option value="Opera"></option>
    </datalist>

datagrid元素

datagrid元素表示可选数据的列表，它以树型列表的形式显示。未被广泛使用

output元素

output元素表示计算或者用户操作的结果，通常与表单结合使用

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
      <input type="range" id="a" value="50" /> +
      <input type="number" id="b" value="25" /> =
      <output name="result" for="a b">75</output>
</form>

source元素

source元素为媒介元素(比如<video>和<audio>)定义媒介资源。指定多个媒体资源，让浏览器选择最合适的格式。

属性	用途	示例
srcset	图片URL集合	srcset=“img.jpg,img-2x.jpg 2x”
sizes	图片显示尺寸	sizes=“(max-width:600px)100vw,50vw”
media	媒体查询条件	media=“(min-width:768px)”
type	MIME类型	type=“image/webp”,type=“video/mp4”
src	媒体文件URL	src=“audio.mp3”

                <picture>
                    <!-- WebP 格式（现代浏览器优先） -->
                    <source srcset="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=600&fit=crop&fm=webp" 
                            type="image/webp">
                    <!-- 高清大图（大屏幕） -->
                    <source media="(min-width: 1200px)" 
                            srcset="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200&h=800&fit=crop"
                            type="image/jpeg">
                    <!-- 中等图片（平板） -->
                    <source media="(min-width: 768px)" 
                            srcset="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=600&fit=crop"
                            type="image/jpeg">
                    <!-- 小图片（手机） -->
                    <source media="(max-width: 767px)" 
                            srcset="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=300&fit=crop"
                            type="image/jpeg">
                    <!-- 后备图片 -->
                    <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=600&fit=crop" 
                         alt="高山风景" 
                         style="width:100%; height:auto;">
                </picture>

dialog元素

dialog元素用于创建模态框和非模态框。

    <dialog id="myDialog">
      <h2>对话框标题</h2>
      <p>对话框内容...</p>
      <button onclick="this.closest('dialog').close()">关闭</button>
    </dialog>

    <button onclick="document.getElementById('myDialog').showModal()">
      打开对话框
    </button>

input元素的类型

• email 表示必须输入e-mail地址的文本输入框。
• url 表示必须输入URL地址的文本输入框。
• number 表示必须输入数字的文本输入框。
• range 表示必须输入一定范围内数字值的文本输入框。

全局属性

contentEditable

该属性的主要功能是允许用户编辑元素中的内容，所以该元素必须是可以获得鼠标焦点的元素，而且在点击鼠标后要向用户提供一个插入符号，提示用户该元素中的内容允许编辑。

    <div>
        <ul contenteditable="true">
            <li>
                列表A
            </li>
            <li>
                列表B
            </li>
            <li>
                列表C
            </li>
            <li>
                列表D
            </li>
        </ul>
    </div>

在编辑完元素中的内容后，只能把该元素的innerHTML内容保存。因为改变元素内容后该元素的innerHTML内容也会随着改变。

designMode

用来指定整个页面是否可编辑，当页面可编辑时，页面中任何支持contentEditable属性的元素都变成可编辑状态。designMode属性只能在Javascript脚本中被编辑修改。该属性有两个值on和off。当该属性值被指为on时表示可编辑，为off时，页面不可编辑。

document.designMode = "on"

hidden

通知浏览器不渲染该元素，使该元素处于不可见状态。但是元素中的内容还是被浏览器所创建的。取消后元素变为可见状态，同时元素中的内容也即时显示出来。hidden属性是一个布尔值的属性，当设为true时，元素处于不可见状态，当设为false时，元素处于可见状态。

    <div hidden>
        div hidden
    </div>
     <div>
        div not hidden
    </div>

spellcheck

spellcheck属性是Html5针对input type='text’与textarea这两个输入框提供的一个新的属性，它的功能对用户输入的文本内容进行拼写和语法检查。

    <textarea spellcheck="false"></textarea>
    <textarea spellcheck="true"></textarea>

tabindex

当不断敲击Tab键让窗口或者页面中的控件获得焦点。
当把元素的tabindex值设为负数（通常是-1）按下Tab键时该元素就不能获得焦点。

新增的事件

元素或对象	事件	触发时机
window对象body元素	beforeprint	即将开始打印之前触发
	afterprint	打印完毕时触发
	resize	浏览器窗口大小发生改变时触发
	error	页面加载出错时触发
	offline	页面变为离线状态时触发
	online	页面变为在线状态时触发
	pageshow	页面加载时触发，类似load事件，区别在于load事件在页面第一次加载时触发，而pageshow事件在每一次加载时触发，即从 网页缓存中读取页面时只触发pageshow事件，不触发load事件
	beforeunload	当前页面被关闭时触发
	hashchange	当页面URL地址字符串中的哈希部分（#后面的部分）发生改变时触发
任何元素	mousewheel	当用户鼠标指针悬停在元素上并滚动鼠标滚轮时触发
任何容器元素	scroll	当元素滚动条被滚动时触发
input元素textarea元素	input	当用户修改文本框中内容时触发，input事件与change事件的区别为input事件在元素尚未失去焦点时已触发，change事件只在元素失去焦点时触发
form元素	reset	当用户按下表单元素中type类型为reset的input元素或者js脚本代码中执行表单对象的reset方法时触发

只监听一次事件

<input type="button" value="点击我" id="button" />
    <script>
      const btn = document.getElementById("button");
      btn.addEventListener(
        "click",
        (e) => {
          console.log("btn");
        },
        {
          once: true,
        }
      );
    </script>

文件API

FileList对象与file对象

FileList 对象表示用户选择的文件列表。

<input type="file" id="imageUpload" accept="image/*" multiple>
<div id="preview"></div>

<script>
document.getElementById('imageUpload').addEventListener('change', function(e) {
  const fileList = e.target.files;
  const preview = document.getElementById('preview');
  preview.innerHTML = '';
  
  if (!fileList.length) {
    preview.innerHTML = '<p>未选择文件</p>';
    return;
  }
  
  // 限制最多处理5个文件
  const filesToProcess = Array.from(fileList).slice(0, 5);
  
  filesToProcess.forEach(file => {
    // 验证文件类型
    if (!file.type.startsWith('image/')) {
      console.warn(`${file.name} 不是图片文件`);
      return;
    }
    
    // 验证文件大小（限制2MB）
    const maxSize = 2 * 1024 * 1024; // 2MB
    if (file.size > maxSize) {
      console.warn(`${file.name} 文件太大`);
      return;
    }
    
    // 创建文件预览
    const reader = new FileReader();
    reader.onload = function(e) {
      const div = document.createElement('div');
      div.className = 'file-item';
      div.innerHTML = `
        <img src="${e.target.result}" height="100">
        <div>
          <p>名称: ${file.name}</p>
          <p>大小: ${(file.size / 1024).toFixed(2)} KB</p>
          <p>类型: ${file.type}</p>
        </div>
      `;
      preview.appendChild(div);
    };
    reader.readAsDataURL(file);
  });
});
</script>

ArrayBuffer与ArrayBufferView对象

ArrayBuffer对象代表一个固定长度的用于装载数据的缓冲区。不能直接对ArrayBuffer对象中的内容进行操作。
需要使用ArrayBufferView对象将缓存区中的数据转换为各种数值类型的数组。

ArrayBuffer

ArrayBuffer对象代表一个存储固定长度的二进制数据的缓存区，不能直接存取ArrayBuffer缓存区中的内容，必须通过ArrayBufferView对象来读写ArrayBuffer缓存区中的内容。

const buffer = new ArrayBuffer(32)

ArrayBufferView

通过ArrayBufferView对象以一种准确的格式来表示ArrayBuffer缓存区中的数据。
一般不直接使用ArrayBufferView对象，而是使用继承ArrayBufferView类的子类的实例对象来存取ArrayBuffer缓存区中的数据。

类型	字节长度	描述
Int8Array	1	8位整数数组
Uint8Array	1	8位无符号整数数组
Uint8ClampedArray	1	8位无符号整数数组
Int16Array	2	16位整数数组
Uint16Array	2	16位无符号整数数组
Int32Array	4	32位整数数组
Uint32Array	4	32位无符号整数数组
Float32Array	4	32位IEEE浮点数数组
Float64Array	8	64位IEEE浮点数数组

在创建一个ArrayBufferView对象时，除了需要指定该对象所要引用的ArrayBuffer缓存区外，可以使用如下所示的两个可选参数：

• byteOffset：为一个无符号长整型数值，代表数组所开始引用的位置与ArrayBuffer缓存区的第一个字节之间的偏离值，单位为字节；属性值必须为数组中单个元素的字节长度的倍数，不指定该参数值时ArrayBufferView对象从ArrayBuffer缓存区的第一个字节开始引用。
• length：参数值为一个无符号长整型数值，代表数组中元素的个数，不指定该参数时脚本程序将根据缓存区长度（以字节为单位）、ArrayBufferView对象所开始引用的位置与每个元素的字节长度自动计算出元素个数。

DataView对象

DataView 也继承了ArrayBuffer并 提供了直接存取ArrayBuffer缓存区中数据的一些方法。

const view = new DataView(buffer,byteOffset,byteLength)

• getInt8：用于得到指定位置处的一个8位整数。

const int8Value = dateView.getInt8(byteOffset)

• setInt8：用于设定指定位置处的一个8位整数的数值。

dataView.setInt8(byteOffset,value);

• getUint8：用于得到指定位置处的一个8位无符号型整数。

Blob对象

HTML5中，新增一个Blob对象，代表原始二级制数据，file对象也继承了该对象。
Blob对象有两个属性，size属性表示一个Blob对象的字节长度，type属性表示Blob的MIME类型，如果是未知类型则返回一个空字符串。

创建Blob对象

const blob = new Blob();

Blob构造函数中的第一个参数为一个数组，其中可以存放任意数量个以下类型的对象，这些对象中所携带的数据将被依次追加到Blob对象中。

• ArrayBuffer对象
• ArrayBufferView对象
• Blob对象
• String对象

      const blob = new Blob(["1234" + "5678"]);
      const shorts = new Uint16Array(buffer, 512, 128);
      const blob1 = new Blob([blob, shorts]);
      const bytes = new Uint8Array(buffer,shorts.byteOffset + shorts.byteLength)
      const blob2 = new Blob([blob,blob1,bytes])
      const blob3 = new Blob([buffer,blob,blob1,blob2,bytes])
      console.log(blob,'blob')
      console.log(shorts,'shorts')
      console.log(blob1,'blob1')
      console.log(blob2,'blob2')
      console.log(blob3,'blob3')

创建及下载二进制文件

    <textarea id="textarea" placeholder="请输入文本"></textarea>
    <br />
    <button onclick="download()">创建并下载二级制文件</button>
    <script>
      const download = e =>{
        const text = document.getElementById('textarea').value;
        const blob = new Blob([text])
       const url =  window.URL.createObjectURL(blob)
        console.log(blob,url,16);
        const a =  document.createElement('a')
        a.href = url;
        a.download = 'test.txt';
        a.click()
      }
    </script>

FileReader对象

FileReader对象主要是用来把文件读入内存，并且读取文件中的数据。

FileReader对象的方法

方法名	参数	描述
readAsBinaryString	Blob对象或继承了Blob对象的file对象	将Blob对象或文件中的数据读取为二进制字符串
readAsText	Blob对象或继承了Blob对象的file对象，【encoding】	将Blob对象或文件中数据读取为文本数据
readAsDataURL	Blob对象或继承了Blob对象的file对象	将Blob对象或文件中的数据读取为DataURL
readAsArrayBuffer	Blob对象继承了Blob对象的file对象	将Blob对象或文件中数据读取为ArrayBuffer对象
abort	none	中断读取操作

FileReader对象的事件

事件	描述
onabort	数据读取中断时触发
onerror	数据读取出错时触发
onloadstart	数据开始读取时触发
onprogress	数据读取中
onload	数据读取成功完成时触发
onloadend	数据读取完成时触发，无论成功或者失败

案例

<label>请选择一个文件</label>
    <input type="file" id="file" />
    <input type="button" value="读取图像" onclick="readURL()" />
    <input type="button" value="读取二进制数据" onclick="readBinary()" />
    <input type="button" value="读取文本文件" onclick="readText()" />
    <div name="result" id="result"></div>
    <script>
      const domFile = document.getElementById("file");
      const domResult = document.getElementById("result");
      function readURL() {
        read("readAsDataURL");
      }
      function readBinary() {
        read("readAsBinaryString");
      }
      function read(eventName) {
        domResult.innerHTML = "";
        const [file] = domFile.files;
        const reader = new FileReader();
        reader[eventName](file);
        reader.onload = (e) => {
          domResult.innerHTML = `<img src='${e.target.result}' height='200'  width='200' />`;
        };
      }
      function readText() {
        read("readAsText");
      }
    </script>

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>fileReader对象的事件先后顺序</title>
</head>

<p>
<label>请选择一个图像文件：</label>
<input type="file" id="file" />
<input type="button" value="显示图像" onclick="readFile()" />
</p>
<div name="result" id="result">
<!-- 这里用来显示读取结果 -->
</div>
<script language=javascript>
var result=document.getElementById("result");
var input=document.getElementById("input");
if(typeof FileReader=='undefined')
{
    result.innerHTML = "<p class='warn'>抱歉，你的浏览器不支持 FileReader</p>";
    input.setAttribute( 'disabled','disabled' );
}
function readFile()
{
    var file = document.getElementById("file").files[0];
    var reader = new FileReader();
    reader.onload = function(e)
    {
        result.innerHTML = '<img src="'+this.result+'" alt=""/>'
        alert("load");
    }
    reader.onprogress = function(e)
    {
        alert("progress");
    }
    reader.onabort = function(e)
    {
        alert("abort");
    }
    reader.onerror = function(e)
    {
        alert("error");
    }
    reader.onloadstart = function(e)
    {
        alert("loadstart");
    }
    reader.onloadend = function(e)
    {
        alert("loadend");
    }
    reader.readAsDataURL(file);
}
</script>

本地存储

Cookie

Cookie 是服务器发送到用户浏览器并保存在本地的一小块数据（通常不超过 4KB）。浏览器会存储这些 Cookie，并在后续向同一服务器发起请求时自动携带它们。

Cookie结构

name=value; expires=date; path=/; domain=.example.com; Secure; HttpOnly; SameSite=Strict

• name：Cookie名称（区分大小写）

• value：Cookie值（URL编码存储）

  • GMT 格式：Thu, 18 Dec 2025 12:00:00 GMT
  • 不设置：会话 Cookie（浏览器关闭时删除）
  • 设置为过去时间：立即删除

• expires：过期时间

• max-age：存活时间（秒）

  • 优先级高于 expires
  • max-age=3600（1小时）
  • max-age=0：立即删除
  • max-age=-1：立即删除

• domain：作用域

  • 指定 Cookie 有效的域名
  • 子域名自动包含：.example.com 对所有子域名有效
  • 精确匹配：www.example.com 只对该域名有效

• path：路径限制

  • 指定 Cookie 有效的 URL 路径
  • /admin：只对 /admin/* 路径有效
  • /：对整个域名有效（默认）

• Secure：安全标记

  • 仅通过 HTTPS 传输
  • 防止中间人攻击

• HttpOnly：HTTP 限制

  • 禁止 JavaScript 访问（Document.cookie）
  • 有效防止 XSS 攻击窃取 Cookie

• SameSite：跨站限制

  • Strict：严格模式，完全禁止跨站携带
  • Lax：宽松模式，GET 请求允许跨站
  • None：允许跨站（必须配合 Secure 使用）

• Priority：优先级（Chrome）

  • Low：低优先级
  • Medium：中优先级（默认）
  • High：高优先级

工作原理

客户端请求 → 服务器响应（Set-Cookie） → 浏览器存储 → 后续请求自动携带

WebStorage

sessionStorage

将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。

localStorage

将数据保存在客户端本地的硬件设备（通常指硬盘，也可以是其它硬件设备）中，即时浏览器关闭了，而localStorage为永久保存。

// 存储字符串数据
sessionStorage.setItem('username', '张三');
localStorage.setItem('theme', 'dark');

// 存储非字符串会自动转为字符串
sessionStorage.setItem('count', 42); // 存储为 "42"
localStorage.setItem('user', JSON.stringify({ name: '张三', age: 25 }));

// 获取字符串数据
const username = sessionStorage.getItem('username'); // "张三"
const theme = localStorage.getItem('theme'); // "dark"

// 获取不存在的键
const notExist = sessionStorage.getItem('not-exist'); // null

// 获取并解析JSON
const userStr = localStorage.getItem('user');
const user = userStr ? JSON.parse(userStr) : null;

// 删除单个键值对
sessionStorage.removeItem('username');
localStorage.removeItem('theme');

// 删除不存在的键不会报错
sessionStorage.removeItem('not-exist'); // 静默失败

// 清空当前域下的所有存储
sessionStorage.clear();
localStorage.clear();

// 注意：只清除当前域的数据，不会影响其他域名

// 监听存储变化（localStorage 独有）
window.addEventListener('storage', (event) => {
  console.log('存储发生变化:', {
    key: event.key,           // 变化的键
    oldValue: event.oldValue, // 旧值
    newValue: event.newValue, // 新值
    url: event.url,           // 触发变化的页面URL
    storageArea: event.storageArea // 变化的存储区域
  });
});

• 监听存储变化（localStorage 独有）
• 仅在另一个标签页修改时触发
• 当前标签页的修改不会触发
• sessionStorage 不支持此事件

indexDB

indexDB是一个事物型数据库系统，类似于基于SQL的RDBMS，但它使用Javascript对象存储数据，支持结构化数据、二进制大对象（Blob）等。

连接数据库

indexDB连接数据库

• indexDB.open(dbName,dbVersion)
• dbName：数据库名称
• dbVersion：无符号长整型数值，代表数据库版本号
• 返回值：IDBOpenDBRequest对象，代表一个请求连接数据库的请求对象

监听数据库连接的请求对象的onsuccess与onerror事件来定义数据库连接成功时与失败时所需执行的事件处理函数。

dbConnect.onsuccess = e => {
	// e.target.result为一个IDBDatabase对象，代表连接成功的数据库对象
	idb = e.target.result;
}

关闭数据库连接

idb.close();

当数据库被关闭后，不能继续执行任何对数据库进行的操作，否则浏览器抛出InvalidStateError异常，代表数据连接被关闭。

数据库的版本更新

在使用indexDB数据时，所有对数据的操作都在一个事务内部执行。事务分为三种：只读事务、读写事务、版本更新事务。
对于创建对象仓库与索引的操作，我们只能在版本更新事务内部进行，因为indexDB API 中不允许数据库的数据仓库（相当于关系型数据库中的数据表）在同一个版本中发生变化，所以当我们创建或删除数据仓库时，必须使用新的版本号来更新数据库的版本，以避免重复修改数据库结构。

// 数据库版本更新
dbConnect.onupgradeneeded = e => {
	idb = e.target.result
	const tx = e.target.transaction
	const newVersion = e.newVersion
	const oldVersion = e.oldVersion
}

创建对象仓库

当连接数据库时发现指定的版本号大于数据当前版本号时触发该事件，当事件被触发时一个数据库的版本更新事务已经被开启，同时数据库的版本号已经被自动更新完毕。

creatObjectStore方法使用两个参数

• 第一个参数值为一个字符串，代表对象仓库名。
• 第二个参数为Javascript对象
  • keyPath属性值用于指定对象仓库中的每条记录使用哪个属性值来作为该记录的主键值，一条记录的主键为数据仓库中该记录的唯一标识符，在一个对象仓库中，只能有一个主键，但是主键可以是重复，相当于关系型数据库中数据表的id字段为数据库的主键，多条记录的id字段值可以重复，除非将主键指定为唯一主键。
  • autoIncrement属性值为true，相当于在关系型数据库中将主键指定为自增主键，如果添加数据记录时不指定主键值，则在数据库仓库内部将自动指定该主键值为既存的最大主键值+1。false时就必须显示的指定主键值。
• 返回值，返回一个IDBObjectStore对象，该对象代表被创建成功的对象仓库。

idb.createObjectStore(name,{keyPath:'id',autoIncrement:true})

创建索引