当前位置：首页 > news >正文

HTML5

news 来源：原创 2025/8/25 3:29:16

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>  <article>  </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

代码解读

复制代码
 <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

代码解读

复制代码

六、高级应用

主题颜色设置（浏览器地址栏颜色）：
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是超文本标记语言的简称，是为【网页创建和其它可在网页浏览器中所看到信息】而设计的一种标记性语言。

一些专业术语：

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>` 元素