HTML5

HTML5是对HTML标准的第5次修订

HTML是超文本标记语言的简称，是为【网页创建和其它可在网页浏览器中所看到信息】而设计的一种标记性语言。

H5优点：

跨平台使用
将互联网语义化，更好地被人类与机器所理解
降低了对浏览器的依赖，更好地支持各种媒体地嵌入

一些专业术语：

www : world wide web 环球信息网，是基于超文本相互链接而成的全球性系统。管理着所有可通过互联网访问的、相互链接的资源。
internet : 互联网是由网络与网络串连成的庞大的网络、这些网络以一组通用的协议相连。万维网是互联网所能提供的服务之一。
W3C : 万维网联盟是web领域最具权威、最有影响力的国际中立性技术标准机构。
HTTP : 超文本传输协议。提供访问超文本信息的功能。
URL ： URL是世界通用的给万维网上所有资源定位的定位系统。
DNS : 域名系统。用户的IP地址与主机名相互转换的分布式数据库。

DOM介绍

DOM（Document Object Model，文档对象模型）是浏览器将 HTML/XML 文档解析为结构化对象的一种方式，允许程序（如 JavaScript）动态访问和操作页面内容。以下是详细解释：

一、DOM 的本质

核心概念：
- 树形结构：HTML 文档被解析为由节点（Node）构成的树形结构，每个元素、属性、文本都是树的节点。
- 编程接口：DOM 提供一组 API，允许开发者通过代码增删改查页面元素。
DOM 与 HTML 的关系：
- HTML 是静态源码 ：开发者编写的 .html 文件。
- DOM 是动态对象 ：浏览器解析 HTML 后生成的内存中的对象模型，会随用户操作或脚本动态变化。

二、DOM 的层级结构

DOM 分为多个层级标准：

Core DOM：
- 适用于所有结构化文档（如 XML、HTML）。
- 定义基础节点类型：Element（元素）、Attr（属性）、Text（文本）等。
HTML DOM：
- 针对 HTML 的扩展，提供更便捷的接口。
- 例如：document.getElementById()、element.innerHTML 等方法。
其他扩展：
- SVG DOM：操作 SVG 图形的接口。
- CSSOM（CSS 对象模型）：操作 CSS 样式。

三、DOM 树的结构示例

DOM 是 Web 开发的核心，理解其原理和操作方法是构建动态页面的基础。以简单 HTML 为例：

html 复制代码

<html>
  <head>
    <title>页面标题</title>
  </head>
  <body>
    <h1 id="header">Hello</h1>
    <p class="text">示例段落</p>
  </body>
</html>

对应的 DOM 树结构：

xml 复制代码

document
├─ <html>
   ├─ <head>
   │   └─ <title>
   │       └─ "页面标题"（文本节点）
   └─ <body>
       ├─ <h1 id="header">
       │   └─ "Hello"（文本节点）
       └─ <p class="text">
           └─ "示例段落"（文本节点）

四、通过 JavaScript 操作 DOM 的常见方法：

1. 访问元素

javascript 复制代码

const header = document.getElementById("header");
const texts = document.getElementsByClassName("text");
const paragraphs = document.getElementsByTagName("p");
 const element = document.querySelector("#header"); // 单个元素
const elements = document.querySelectorAll(".text"); // 所有匹配元素

2. 修改内容与属性

javascript 复制代码

element.textContent = "新内容"; // 安全（不解析 HTML）
element.innerHTML = "<strong>加粗</strong>"; // 解析 HTML（需防 XSS 攻击）

element.setAttribute("class", "new-class"); // 设置属性
const value = element.getAttribute("id"); // 获取属性

3. 增删元素、插入元素、事件监听

javascript 复制代码

const newDiv = document.createElement("div");
newDiv.textContent = "新创建的 div";

parentElement.appendChild(newDiv); // 末尾插入
parentElement.insertBefore(newDiv, referenceElement); // 指定位置插入

parentElement.removeChild(elementToRemove);

button.addEventListener("click", () => {
console.log("按钮被点击！");
});

五、DOM 与 BOM 的区别

DOM：操作文档内容（HTML/XML）。
BOM （Browser Object Model）：操作浏览器窗口，如：
- window：代表浏览器窗口。
- navigator：浏览器信息（如用户代理）。
- location：当前页面 URL。
- history：浏览历史记录。

六、DOM 性能优化

减少 DOM 操作：
- 频繁修改 DOM 会导致重排（Reflow）和重绘（Repaint），影响性能。
- 优化方法：批量修改（如使用 DocumentFragment）或离线操作。

事件委托：

利用事件冒泡，将事件监听绑定到父元素，而非多个子元素。

javascript 复制代码

document.getElementById("list").addEventListener("click", (e) => {
  if (e.target.tagName === "LI") {
    console.log("点击了列表项：", e.target.textContent);
  }
});

七、DOM 的现代应用

虚拟 DOM（如 React、Vue）：
- 在内存中维护轻量级的 DOM 副本，通过对比差异最小化真实 DOM 操作。
Shadow DOM：
- 用于 Web Components，创建封装的 DOM 子树（如自定义组件），避免样式冲突。

八、常见问题

为什么 DOM 操作慢 ？

浏览器渲染引擎（如 WebKit）需要重新计算布局和样式，频繁操作会阻塞主线程。
XSS 攻击与 DOM ？

通过 innerHTML 插入未验证的内容可能导致脚本注入，需使用 textContent 或转义处理。

H5结构

html 复制代码

<!DOCTYPE html>   <!-- 这是H5文件的申明方式，便于浏览器理解HTML版本,正确解析 --!>
    <html>
        <head>     <!-- 页面不显示该区域内容，用于引入资源,设置与定义,seo优化等 --!>
            <meta />    <!-- 在h5文档中模拟 HTTP 协议的响应头报文，很重要，被搜索引擎用于检索网页，用于原始声明>
            <script src = "main.js" />  <!-- 引入脚本文件 --!>
            <link rel = "stylesheet" type = "text/css" href = 'style.css' />    <!-- 定义文档与外部资源的关系、引入 css 样式文件、图片等 --!>
        </head>
        
        <body>     <!-- 用于显示页面的内容 --!>
            <header />   <!--显示页面的头部区域,标题版权等--!>
            
            <nav />      <!--代表页面的导航区域!-->
            
            <article>    <!--代表页面的文章区域/主要内容--!>
            
            <section />  <!-- 段落、某一节、部分 --!>
            
            </article>
            
            <aside />    <!-- 页面的侧边栏--!>
            
            <footer />   <!-- 页脚区域、页面的底部区域-->
        
        </body>
    
    </html>

网站的SEO优化

SEO（Search Engine Optimization，搜索引擎优化）是通过技术、内容和策略优化，提升网站在搜索引擎自然（非付费）搜索结果中的排名，从而获得更多目标流量的方法。以下是 SEO 的全面解析：

一、SEO 的核心目标

提升排名：让目标关键词在搜索结果中更靠前（如进入 Google 或百度首页）。
增加流量：通过高排名吸引更多用户点击访问。
精准触达：匹配用户搜索意图，吸引有潜在需求的用户。

二、搜索引擎如何工作？

SEO 优化的前提是理解搜索引擎的基本流程：

爬取（Crawling）
搜索引擎蜘蛛（Spider）遍历互联网，抓取网页内容。
索引（Indexing）
将抓取的页面存储到数据库，分析内容、关键词、链接等。
排名（Ranking）
根据算法（如 Google 的 PageRank）评估页面质量，决定搜索结果排序。

三、SEO 的主要类型

1. 技术 SEO（Technical SEO）

优化网站基础架构，确保搜索引擎能高效抓取和索引：

网站速度：压缩图片、启用缓存（如 CDN）、减少重定向。
移动友好：响应式设计，适配手机端（Google 优先索引移动版）。
结构化数据：使用 Schema 标记，增强搜索结果展示（如评分、价格）。
Robots.txt 和 Sitemap：控制爬虫访问路径，提交站点地图。
HTTPS 安全协议：提升网站可信度（Google 将其作为排名因素）。

2. 内容 SEO（On-Page SEO）

优化页面内容，匹配用户搜索意图：

关键词研究 ：使用工具（Google Keyword Planner、Ahrefs）挖掘高价值关键词。
- 示例：主关键词"健身教程"，长尾词"新手居家健身教程"。

标题（Title）与描述（Meta Description） ：包含关键词，吸引点击。

html 复制代码

<title>新手居家健身教程 | 30天塑形计划 - 健康网</title>
<meta name="description" content="零基础新手居家健身指南，每日30分钟，30天高效塑形，免费跟练视频...">

内容质量：提供原创、深度、可读性强的信息（如教程、评测、案例）。
内部链接：合理链接相关页面（如文章中添加"饮食搭配"的链接）。

3. 外链建设（Off-Page SEO）

通过外部网站提升自身权威性：

高质量外链：获取权威网站（如行业媒体、教育机构）的推荐链接。
社交媒体传播：内容在社交平台分享，间接提升搜索权重。
品牌提及（Brand Mention）：即使无链接，品牌名被多次提及也可提升可信度。

4. 本地 SEO（Local SEO）

针对本地商户的优化：

Google 我的商家（Google My Business）：完善商家信息（地址、电话、营业时间）。
本地关键词：如"北京朝阳区咖啡厅推荐"。
在线评价：鼓励用户留下好评（高评分提升本地排名）。

四、SEO 工具推荐

工具	用途
Google Analytics	分析流量来源、用户行为
Google Search Console	监控索引状态、关键词表现
Ahrefs/SEMrush	关键词研究、外链分析、竞品跟踪
Screaming Frog	技术SEO检测（死链、重复内容）
Yoast SEO	WordPress 站内SEO优化插件

五、SEO 的常见误区

堆砌关键词：过度重复关键词会被判定为"作弊"，导致降权。
忽视用户体验：内容低质或弹窗过多会提高跳出率，影响排名。
忽略移动端：移动端体验差直接导致排名下降。
追求快速排名：黑帽SEO（如购买外链、隐藏文本）可能导致网站被惩罚。

六、SEO 与 SEM 的区别

	SEO	SEM（搜索引擎营销）
流量类型	自然流量（免费）	付费广告（如 Google Ads）
见效速度	慢（需持续优化，3-6个月起效）	快（立即展示）
长期成本	低（维护成本为主）	高（需持续投放广告）

七、SEO 的未来趋势

AI 与语义搜索：搜索引擎更注重内容语义（如回答用户问题，而非单纯匹配关键词）。
语音搜索优化：针对自然语言提问（如"附近的健身房在哪里？"）优化内容。
E-A-T 原则：Google 强调内容专业性（Expertise）、权威性（Authority）、可信度（Trustworthiness）。

八、如何开始 SEO 优化？

诊断网站：使用工具分析现有问题（速度、死链、关键词覆盖）。
制定策略：选择目标关键词，规划内容和技术优化步骤。
持续监测：定期跟踪排名、流量变化，调整优化方向。

🔗 `<link>` 标签详解

✅ 作用：

<link> 标签用于定义文档与外部资源之间的关系，最常见的用途是引入外部 CSS 样式表 。它通常放在 <head> 标签内。

📌 基本语法：

ini 复制代码

html
复制编辑
<link rel="stylesheet" href="style.css">

🧠 常见用途：

用途	示例
引入 CSS	`<link rel="stylesheet" href="style.css">`
设置网站图标	`<link rel="icon" href="favicon.ico" type="image/x-icon">`
使用网页字体	`<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">`
引入 RSS Feed	`<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml">`

🔧 常用属性：

属性名	描述
`rel`	描述与目标资源的关系，如 `stylesheet`、`icon`、`alternate` 等
`href`	目标资源的 URL（即链接地址）
`type`	MIME 类型，如 `text/css`、`image/x-icon`、`application/rss+xml` 等
`media`	适用的媒体类型（如 `screen`、`print`、`all`）
`sizes`	图标尺寸，常用于 `<link rel="icon">`

在 HTML 中，`<meta>` 元素用于定义网页的元数据（metadata），这些数据不会直接显示在页面上，但会为浏览器、搜索引擎和其他网络服务提供关键信息。以下是 `<meta>` 元素的全面解析：

一、`<meta>` 元素的核心作用

描述页面信息
提供字符编码、页面描述、关键词、作者等信息。
控制浏览器行为
如设置视口（viewport）、页面刷新/重定向、兼容性模式等。
辅助搜索引擎优化（SEO）
通过元标签提升网页在搜索结果中的展示效果。

二、`<meta>` 元素的基本语法

html 复制代码

<meta 属性名="属性值" 内容>

无闭合标签 ：<meta> 是空元素，无需闭合（如 <meta ...>）。
常用属性 ：
- charset：定义文档字符编码。
- name + content：定义元数据名称及其内容。
- http-equiv：模拟 HTTP 头部的功能（如缓存控制、重定向）。

三、常见的 `<meta>` 标签类型及用途

1. 基础元数据

字符编码声明 （必须放在 <head> 顶部）：
html 复制代码
```
<meta charset="UTF-8">
```

页面描述 （影响 SEO 和搜索结果展示）：

html 复制代码

<meta name="description" content="这是一个关于前端开发的教程网站...">

关键词 （早期 SEO 重要，现代搜索引擎权重降低）：
html 复制代码
```
<meta name="keywords" content="HTML, CSS, JavaScript, 前端开发">
```
作者信息 ：
html 复制代码
```
<meta name="author" content="张三">
```

2. 控制浏览器行为

视口设置 （适配移动端，响应式设计必备）：
html 复制代码
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
- width=device-width：视口宽度与设备宽度一致。
- initial-scale=1.0：初始缩放比例为 1。

页面刷新/重定向 （慎用，可能影响用户体验）：

html 复制代码

<!-- 5秒后跳转到指定URL -->
<meta http-equiv="refresh" content="5; url=https://example.com">

兼容性模式 （强制 IE 使用最新渲染引擎）：
html 复制代码
```
<meta http-equiv="X-UA-Compatible" content="IE=edge">
```

3. SEO 优化相关

禁止搜索引擎索引 ：
html 复制代码
```
<meta name="robots" content="noindex, nofollow">
```
- noindex：禁止索引当前页面。
- nofollow：禁止跟踪页面上的链接。

html 复制代码

<meta name="copyright" content="版权所有 © 2023 示例公司">

生成式 AI 内容标记 （针对 AI 爬虫）：
html 复制代码
```
<meta name="ai_generator" content="ChatGPT">
```

4. 社交媒体优化

Open Graph 协议 （Facebook、LinkedIn 等分享时显示富媒体卡片）：

html 复制代码

<meta property="og:title" content="页面标题">
<meta property="og:description" content="页面描述">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">

Twitter Cards （Twitter 分享优化）：

html 复制代码

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@username">
<meta name="twitter:title" content="页面标题">
<meta name="twitter:description" content="页面描述">
<meta name="twitter:image" content="https://example.com/image.jpg">

四、`<meta>` 标签的注意事项

避免重复或冲突
同一页面中不要重复定义相同的元数据（如多个 description）。
合理控制长度
- description 建议 150-160 字符，过长会被搜索引擎截断。
- keywords 建议不超过 10 个关键词，避免堆砌。
移动端适配必选
缺少 viewport 设置可能导致移动端布局错乱。
谨慎使用重定向
自动跳转可能被搜索引擎视为"诱导跳转"而惩罚。

五、示例：完整的 `<meta>` 标签集合

html 复制代码

<head>
  <!-- 基础元数据 -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="一个专注于前端开发技术的教程网站">
  <meta name="keywords" content="HTML, CSS, JavaScript, 前端框架">
  <meta name="author" content="李四">

  <!-- 社交媒体优化 -->
  <!-- Open Graph -->
  <meta property="og:title" content="前端开发教程 | 示例网">
  <meta property="og:image" content="https://example.com/og-image.png">
  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image">

  <!-- 浏览器兼容性 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>

六、高级应用

主题颜色设置 （浏览器地址栏颜色）：
html 复制代码
```
<meta name="theme-color" content="#4285f4">
```

PWA 应用支持 ：

html 复制代码

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

重要内容 H5所有的元素

块级元素(占据一整行)：

1、标题元素 : h1 / -> h6 /

2、段落元素 : p /

3、ul、ol、dl : 列表: 无序、有序、自定义 dl

dt /dt

dd /dd

/dl

4、 div容器

5、 table

内联元素 :

1、图像元素 : img / 属性:src=>指明图片位置 alt/title(兼容性更强)=>图片显示失败时显示的文本。

2、a元素 : a / 属性href => 外部网址链接

3、span元素

4、video元素:放视频

5、audio元素:播放音乐

vido/audio 均要配合source元素来引入视频/音频文件

html 复制代码

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta name ="keyword" content = " 多媒体类元素元素示例">
            <meta name = "description" content = " 多媒体类元素元素示例">
            <meta name = "author" content = "吴永琦">
            <meta http-equiv="Content-Language" content = "zh-CN">
        </head>

        <body>
            <header>
                <h2>
                    多媒体类元素元素示例
                </h2>
                <h3>
                    作者 ： 吴永琦
                </h3>
            </header>

            <nav>
                <button>1</button>
                <button>2</button>
                <button>3</button>
            </nav>

            <aside>
                <button>4</button>
                <button>5</button>
                <button>6</button>
            </aside>

            <article>
                <section>
                    <p>江南MV</p>
                    <video controls="controls" width="500" height="500">
                        <source src="./video/江南MV.mp4" type = "video/mp4">
                    </video>
                </section>

                <section>
                    <p>爱你没差</p>
                    <audio controls>
                        <source src ="./audio/爱你没差.mp3"  type = "audio/mp3">
                    </audio>
                </section>
            </article>

           

            <footer>
                日期:2025-4-6
            </footer>
        </body>
    </html>

table元素

html 复制代码

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta name ="keyword" content = "表单元素示例">
            <meta name = "description" content = "表单元素的演示示例">
            <meta name = "author" content = "吴永琦">
            <meta http-equiv="Content-Language" content = "zh-CN">
        </head>

        <body>
            <header>
                <h2>
                    表单元素示例
                </h2>
                <h3>
                    作者 ： 吴永琦
                </h3>
            </header>

            <nav>
                <button>1</button>
                <button>2</button>
                <button>3</button>
            </nav>

            <aside>
                <button>4</button>
                <button>5</button>
                <button>6</button>
            </aside>

            <article>
                <section>
                    <table width = "500" border = "2">  <!--表元素-->
                        <caption> <!--表标题元素-->
                            核算检测登记表
                        </caption>
                        <tr>   <!--表行元素-->
                            <th>  <!--表头块元素-->
                                检测人
                            </th>

                            <th>
                                日期
                            </th>

                            <th>
                                医院
                            </th>

                        </tr>

                        <tr>
                            <td>
                                张三
                            </td>

                            <td>
                                2020年8月3日
                            </td>

                            <td>
                                北京市人民医院
                            </td>
                            
                        </tr>

                        <tr>
                            <td>
                                李四
                            </td>

                            <td>
                                2020年8月10日
                            </td>

                            <td>
                                北京市人民医院
                            </td>
                            
                        </tr>
                        <tr>

                            <td>
                                王五
                            </td>

                            <td>
                                2020年8月9日
                            </td>

                            <td>
                                南京市人民医院
                            </td>
                            
                        </tr>
                    </table>
                </section>
            </article>

            <footer>
                日期:2025-4-6
            </footer>
        </body>
    </html>

charset设置的编码详解

字符编码是将字符映射为计算机可识别二进制数据的方式，常见的编码方案如下：

一、基础编码

ASCII（1963）
- 7位编码，共128个字符（0-127），包含英文、数字、基础符号及控制字符。
- 局限性：仅支持英文，无法表示其他语言字符。
扩展ASCII（8位编码）
- 如 ISO 8859 系列 （Latin-1到Latin-16）：
  - ISO-8859-1（Latin-1）：支持西欧语言（法语、西班牙语等）。
  - ISO-8859-5：支持西里尔字母（俄语）。
- 每个编码覆盖特定语言区域，但互不兼容。

二、Unicode 编码

Unicode 是覆盖全球字符的统一标准，包含超过14万个字符，主要编码方式有：

UTF-8（变长，1-4字节）
- 兼容 ASCII，英文占1字节，中文占3字节。
- 互联网主流编码（HTML、JSON、XML等默认使用）。
UTF-16（变长，2或4字节）
- 定长2字节（BMP字符）或4字节（扩展字符）。
- 用于系统内部（如Windows API、Java/C#字符串）。
UTF-32（定长，4字节）
- 每个字符固定4字节，空间效率低，但处理方便。
- 多用于文本处理工具或内存操作。

三、地区性编码

中文编码
- GB2312（1980）：简体中文基础编码（6763个汉字）。
- GBK（1995）：扩展GB2312，支持繁体及生僻字（21886字）。
- GB18030（2000）：兼容GBK，支持少数民族文字及Unicode。
- Big5：繁体中文（台湾、香港地区常用）。
日文编码
- Shift_JIS：微软日文系统常用。
- EUC-JP：Unix系统常用。
韩文编码
- EUC-KR：韩文字符编码标准。

四、其他编码

Windows代码页
- 如 CP1252 （西欧语言）、CP936（简体中文GBK）。
历史编码
- EBCDIC：IBM大型机专用编码。
- KOI8-R：俄语旧编码。
传输编码
- Base64：将二进制转为ASCII文本，用于邮件或HTTP传输。

五、编码选择建议

优先使用 UTF-8：兼容性强，跨语言支持完善。
处理旧文件：需根据地区选择对应编码（如GBK、Big5）。
避免乱码：确保文件保存、传输、解析时编码一致。

新媒体元素详解

HTML 的 <video> 和 <audio> 元素用于在网页中嵌入和控制多媒体内容（视频和音频）。以下是它们的详细解析，涵盖基本用法、属性、方法、事件及实际应用。通过合理使用 <video> 和 <audio> 元素，结合 JavaScript 控制，可以创建高度定制化的多媒体体验。注意平衡功能与性能，确保跨平台兼容性和无障碍访问。示例：

一、`<video>` 元素

1. 基础语法

html 复制代码

<video controls width="600" poster="thumbnail.jpg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  您的浏览器不支持视频播放。
</video>

controls：显示默认播放控件（播放/暂停、音量、全屏等）。
width/height：设置视频显示尺寸（建议只设置一个以保持比例）。
poster：视频加载前显示的封面图。
<source>：提供多个视频源格式，浏览器选择第一个支持的格式。
后备内容 ：若浏览器不支持 <video>，显示内部文本或备用内容。

2. 关键属性

属性	说明
`autoplay`	自动播放（注意：多数浏览器会限制自动播放，需结合 `muted` 使用）
`muted`	静音播放
`loop`	循环播放
`preload`	预加载策略：`auto`（全部加载）、`metadata`（仅元数据）、`none`（不加载）
`playsinline`	在移动端内联播放（避免全屏播放）

3. JavaScript 控制方法

通过获取视频对象调用方法：

javascript 复制代码

const video = document.querySelector('video');

video.play();    // 播放
video.pause();   // 暂停
video.load();    // 重新加载
video.canPlayType('video/mp4'); // 检查是否支持某格式

4. 常用事件

javascript 复制代码

video.addEventListener('play', () => console.log('视频开始播放'));
video.addEventListener('ended', () => console.log('视频播放结束'));
video.addEventListener('timeupdate', () => {
  console.log('当前播放时间：', video.currentTime);
});
video.addEventListener('error', (e) => {
  console.error('视频加载错误：', video.error.message);
});

5. 格式兼容性

建议提供多个格式覆盖所有浏览器：

MP4 (H.264)：广泛支持（Chrome、Safari、Edge）。
WebM：开源格式（Chrome、Firefox、Edge）。
Ogg：旧版 Firefox 支持。

二、`<audio>` 元素

1. 基础语法

html 复制代码

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

用法与 <video> 类似，但无 width、height、poster 属性。

2. 关键属性

属性	说明
`autoplay`	自动播放（同样受浏览器策略限制）
`loop`	循环播放
`preload`	预加载策略（同 `<video>`）

3. JavaScript 控制

方法与 <video> 一致：

javascript 复制代码

const audio = document.querySelector('audio');
audio.play();  // 播放
audio.pause(); // 暂停

三、通用功能与技巧

1. 自定义播放控件

隐藏默认控件，通过 HTML + CSS + JavaScript 自定义：

html 复制代码

<video id="myVideo" src="video.mp4"></video>
<div class="custom-controls">
  <button onclick="togglePlay()">▶️</button>
  <input type="range" id="seekBar" min="0" max="100" step="1">
</div>

<script>
function togglePlay() {
  const video = document.getElementById('myVideo');
  video.paused ? video.play() : video.pause();
}
</script>

2. 响应式设计

通过 CSS 确保视频适配容器：

css 复制代码

video {
  max-width: 100%;
  height: auto;
}

3. 字幕与轨道

为视频添加字幕（WebVTT 格式）：

html 复制代码

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles-en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="subtitles-zh.vtt" kind="subtitles" srclang="zh" label="中文">
</video>

4. 性能优化

懒加载 ：使用 loading="lazy" 或 Intersection Observer API 延迟加载。
预加载关键帧 ：设置 preload="metadata" 减少初始加载时间。

四、兼容性与最佳实践

1. 浏览器兼容性

<video>：所有现代浏览器支持 MP4，但需注意旧版浏览器（如 IE9 以下不支持）。
<audio>：MP3 格式广泛支持，Ogg 适用于 Firefox 旧版本。

2. 移动端适配

自动播放限制：iOS 和 Android 通常禁止自动播放，需用户主动触发。
内联播放 ：iOS 默认全屏播放，需添加 playsinline 属性。

3. 无障碍访问

键盘控制：确保自定义控件可通过键盘操作（如空格键播放/暂停）。
ARIA 标签 ：为控件添加 aria-label 描述。

五、常见问题与解决

视频无法播放
- 检查格式兼容性，提供多格式源文件。
- 确保服务器正确配置 MIME 类型（如 .mp4 对应 video/mp4）。
自动播放失败
- 添加 muted 属性，并在用户交互后触发播放：
  javascript 复制代码
```
document.addEventListener('click', () => video.play());
```
全屏播放问题
- 使用 requestFullscreen() 方法手动控制：
  javascript 复制代码
```
video.requestFullscreen();
```

六、示例：完整的多媒体播放器

html 复制代码

<video id="player" width="800" controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="zh" label="中文">
</video>

<div class="controls">
  <button onclick="togglePlay()">播放/暂停</button>
  <input type="range" id="volume" min="0" max="1" step="0.1" value="1" onchange="setVolume(this.value)">
</div>

<script>
const video = document.getElementById('player');

function togglePlay() {
  video.paused ? video.play() : video.pause();
}

function setVolume(value) {
  video.volume = value;
}
</script>

HTML5是对HTML标准的第5次修订

HTML是超文本标记语言的简称，是为【网页创建和其它可在网页浏览器中所看到信息】而设计的一种标记性语言。

H5优点：

一些专业术语：

DOM介绍

一、DOM 的本质

二、DOM 的层级结构

三、DOM 树的结构示例

四、通过 JavaScript 操作 DOM 的常见方法：

1. 访问元素

2. 修改内容与属性

3. 增删元素、插入元素、事件监听

五、DOM 与 BOM 的区别

六、DOM 性能优化

七、DOM 的现代应用

八、常见问题

H5结构

网站的SEO优化

一、SEO 的核心目标

二、搜索引擎如何工作？

三、SEO 的主要类型

1. 技术 SEO（Technical SEO）

2. 内容 SEO（On-Page SEO）

3. 外链建设（Off-Page SEO）

4. 本地 SEO（Local SEO）

四、SEO 工具推荐

五、SEO 的常见误区

六、SEO 与 SEM 的区别

七、SEO 的未来趋势

八、如何开始 SEO 优化？

🔗 <link> 标签详解

✅ 作用：

📌 基本语法：

🧠 常见用途：

🔧 常用属性：

在 HTML 中，<meta> 元素 用于定义网页的元数据（metadata），这些数据不会直接显示在页面上，但会为浏览器、搜索引擎和其他网络服务提供关键信息。以下是 <meta> 元素的全面解析：

一、<meta> 元素的核心作用

二、<meta> 元素的基本语法

三、常见的 <meta> 标签类型及用途

1. 基础元数据

2. 控制浏览器行为

3. SEO 优化相关

4. 社交媒体优化

四、<meta> 标签的注意事项

五、示例：完整的 <meta> 标签集合

六、高级应用

重要内容 H5所有的元素

table元素

charset设置的编码详解

字符编码是将字符映射为计算机可识别二进制数据的方式，常见的编码方案如下：

一、基础编码

二、Unicode 编码

三、地区性编码

四、其他编码

五、编码选择建议

新媒体元素详解

一、<video> 元素

1. 基础语法

2. 关键属性

3. JavaScript 控制方法

4. 常用事件

5. 格式兼容性

二、<audio> 元素

1. 基础语法

2. 关键属性

3. JavaScript 控制

三、通用功能与技巧

1. 自定义播放控件

2. 响应式设计

3. 字幕与轨道

4. 性能优化

四、兼容性与最佳实践

1. 浏览器兼容性

2. 移动端适配

3. 无障碍访问

五、常见问题与解决

六、示例：完整的多媒体播放器

🔗 `<link>` 标签详解

在 HTML 中，`<meta>` 元素用于定义网页的元数据（metadata），这些数据不会直接显示在页面上，但会为浏览器、搜索引擎和其他网络服务提供关键信息。以下是 `<meta>` 元素的全面解析：

一、`<meta>` 元素的核心作用

二、`<meta>` 元素的基本语法

三、常见的 `<meta>` 标签类型及用途

四、`<meta>` 标签的注意事项

五、示例：完整的 `<meta>` 标签集合

一、`<video>` 元素

二、`<audio>` 元素