HTML

一、常见的浏览器默认事件

form 的 submit 事件
回车键提交表单
a 标签的 click 事件
移动端双指缩放 touchmove 事件

二、事件捕获与冒泡机制

当用户点击页面元素时，事件会经历三个阶段：

捕获阶段（Capture Phase）：从 window → document → ... → 目标元素的父级
目标阶段（Target Phase）：到达实际被点击的元素
冒泡阶段（Bubble Phase）：从目标元素父级 → ... → document → window

假设有以下 HTML 结构：

html

<div class="grandparent">
  <div class="parent">
    <div class="child">点击我</div>
  </div>
</div>

我们给三个元素都添加事件监听：

javascript

const elements = document.querySelectorAll('.grandparent, .parent, .child');

// （第三个参数默认为false，监听器在冒泡阶段被触发）

// 捕获阶段监听（第三个参数为true）
elements.forEach(el => {
  el.addEventListener('click', () => {
    console.log(`捕获阶段: ${el.className}`);
  }, true);
});

// 冒泡阶段监听（第三个参数为false）
elements.forEach(el => {
  el.addEventListener('click', () => {
    console.log(`冒泡阶段: ${el.className}`);
  }, false);
});

当点击最内层的 child 时，控制台会按以下顺序输出：

捕获阶段: grandparent
捕获阶段: parent
捕获阶段: child
冒泡阶段: child
冒泡阶段: parent
冒泡阶段: grandparent

三、HTML5语义化

指的是使用具有明确含义的HTML标签如 (<header>, <nav>, <footer>, <article>等)来构建网页结构，而不是仅依赖通用标签<div>, <span>等，这些语义化标签能够清晰描述其内容的作用，使代码更易读、更符合内容逻辑。

优点

提升可访问性 屏幕阅读器等辅助工具能根据语义标签准确解读页面结构，帮助视障用户理解内容。
利于SEO 搜索引擎会优先解析语义化标签中的内容，精确抓取关键信息，提升网页排名。
提升代码可维护性 开发者能直观理解页面结构，减少沟通成本，便于团队协作和后期维护。
增强代码可读性 使HTML结构更清晰，例如用<article>来表示文章主体，比一堆<div>更易理解。

语义化标签和<div>在样式上没有区别，都是块级元素。核心区别在于语义而非表现。

如何平衡语义化和过度设计?

遵循内容优先原则：根据内容的实际意义选择标签。例如仅装饰性的元素可用<div>，而核心区块用<section>或者<article>。

四、HTML5新特性

HTML5带来了很多新特性，主要目的是为了更好地构建现代Web应用。

一、语义化标签

二、表单增强

1. 新的输入类型：

email：用于输入电子邮件地址，浏览器会自动进行简单的格式验证。
url：用于输入 URL。
number：用于输入数值，通常会显示上下箭头按钮。
range：滑动条，用于输入一定范围内的数值。
date, time, datetime-local, month, week：提供原生的日期和时间选择器。
search：搜索框，样式可能与普通文本框不同（有一个清空按钮）。
tel：用于输入电话号码。
color：颜色选择器。

2. 新的表单属性：

placeholder：输入框的提示文本。
required：标记字段为必填项。
autofocus：页面加载时自动聚焦到该输入框。
pattern：使用正则表达式自定义验证规则。
min, max, step：对 number, date, range等类型进行范围限制。

三、媒体元素

HTML5 原生支持音频和视频，不再需要Flash等插件。

核心标签：

<audio>：用于嵌入音频文件。
<video>：用于嵌入视频文件。

用法示例：

html

<video controls width="400" poster="poster.jpg">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    您的浏览器不支持 HTML5 视频标签。
</video>

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    您的浏览器不支持音频元素。
</audio>

为什么要提供多个<source>标签？

不同浏览器对不同格式的支持不同，通过提供多个<source>标签可以确保在不同浏览器上都能正常播放。
不同用户可能使用不同的设备或浏览器，提供多个格式可以增加播放的兼容性。

四、canvas 元素

提供了一块画布，可以通过js动态绘制图形、图表、游戏动画等。

canvas和svg有什么区别？

canvas是位图，通过js绘制，性能高。
svg是矢量图，使用XML来描述图形，缩放不会失真。每个图形都是DOM元素。

五、Web存储

为了解决Cookie存储容量小(4KB)和每次请求都会携带的问题，HTML5提供了两种新的客户端存储机制：

localStorage：永久存储，除非手动删除，否则数据不会过期。
sessionStorage：会话级存储，页面关闭后数据会被清除。存储大小通常为5MB。

localStorage、sessionStorage和cookie的区别？

特性	localStorage	sessionStorage	cookie
生命周期	永久，除非手动删除	仅当前会话有效	可以设置过期时间
存储大小	~5MB	~5MB	~4KB
与服务器交互	仅在客户端	仅在客户端	每次携带在HTTP头中

六、地理定位

HTML5提供了 navigator.geolocation API 来获取用户的地理位置信息。

用法示例：

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
        function(position) { // 成功回调
            console.log("纬度: " + position.coords.latitude);
            console.log("经度: " + position.coords.longitude);
        },
        function(error) { // 失败回调
            console.log("错误代码: " + error.code);
        }
    );
} else {
    console.log("该浏览器不支持地理定位。");
}

注意

用户需要授权才能获取地理位置信息。
不同浏览器对地理定位的支持程度不同，某些浏览器可能不支持或需要用户手动开启。

七、Web Workers

Web Worker 是运行在后台的Javascript，独立于其他脚本，不会影响页面的性能。可以执行耗时任务而不阻塞页面的其他操作。

用法

// 主线程 main.js
var worker = new Worker('task.js'); // 创建 worker
worker.postMessage('开始计算'); // 向 worker 发送消息
worker.onmessage = function(event) { // 接收来自 worker 的消息
    console.log('计算结果: ' + event.data);
};

// worker 线程 (task.js)
self.onmessage = function(event) {
    // 执行一些复杂的计算
    var result = heavyCalculation();
    self.postMessage(result); // 将结果发送回主线程
};

Web Worker 中能操作 DOM 吗？

不能。Web Worker 运行在全局上下文（self）中，与主线程完全隔离，无法访问 DOM、window和 document对象。通信只能通过 postMessage方法

HTML ​

一、常见的浏览器默认事件 ​

二、事件捕获与冒泡机制 ​

三、HTML5语义化 ​

如何平衡语义化和过度设计? ​

四、HTML5新特性 ​

一、语义化标签 ​

二、表单增强 ​

1. 新的输入类型： ​

2. 新的表单属性： ​

三、媒体元素 ​

四、canvas 元素 ​

五、Web存储 ​

六、地理定位 ​

七、Web Workers ​