基于HTML5的微格教学视频标注系统的设计与实现
基于HTML5的微课程资源管理系统的设计与实现的开题报告
基于HTML5的微课程资源管理系统的设计与实现的开题报告一、选题背景及意义随着移动互联网的迅猛发展，教育行业也逐渐开始转型，将传统的面授模式向在线教育领域迁移，微课程是其中一种十分重要的方式。
微课程具有短小精悍、易传播、易消化等特点，成为广大学生和教师提高学习与教学效率的重要工具。
而微课程的制作、管理与分享是微课程平台的核心，需要一个高效的微课程资源管理系统来实现。
目前已有一些微课程平台可以提供微课程资源管理功能，但这些平台常常存在学习体验差、流量占用高、使用复杂等问题。
因此，设计一个高效、易用、体验良好的微课程资源管理系统非常有必要。
本研究旨在基于HTML5技术，结合云计算、大数据等技术，设计和开发一个微课程资源管理系统，能够实现微课程的制作、管理及分享等功能，提高教育资源的利用效率，为广大学生和教师提供优质的在线教育服务。
二、主要研究内容本研究的主要研究内容包括：1.微课程资源管理系统的需求分析和功能设计2.微课程资源管理系统的技术架构设计3.微课程制作工具的开发与实现4.微课程资源管理系统的开发与实现5.微课程资源管理系统的测试与优化三、研究方法本研究采用设计与实现相结合的方法，首先进行微课程资源管理系统的需求分析和功能设计，确定系统的功能模块和流程；然后进行系统的技术架构设计，确定技术选型并进行技术实现；接着进行微课程制作工具的开发，实现微课程的创作；最后进行微课程资源管理系统的开发与实现，对系统进行测试与优化。
四、研究预期成果1.基于HTML5的微课程资源管理系统，能够高效地实现微课程的制作、管理和分享等功能，提高教育资源的利用效率。
2.微课程制作工具，能够使教师们轻松地制作微课程，提高教师的教学效率。
3.本研究所设计与实现的微课程资源管理系统，能够为广大学生和教师提供更好的在线教育服务，促进在线教育的发展。
五、研究进度安排1.文献调研和需求分析（1周）2.技术选型和技术架构设计（2周）3.微课程制作工具开发和实现（3周）4.微课程资源管理系统开发和实现（5周）5.系统测试和优化（2周）6.论文写作和答辩准备（2周）六、参考文献1.王智威, 王力, 刘胜, 等. 基于HTML5技术的视频会议系统的设计与实现[J]. 通信学报, 2020, 41(2): 77-85.2.张怡. 大数据在在线教育中的应用研究[J]. 现代信息技术, 2020(4): 63-68.3.费玉杰, 郭明锋. 云计算技术在在线教育中的应用[J]. 科技导报, 2020(3): 75-83.。
基于HTML5的微格教学实训平台关键技术研究
基于HTML5的微格教学实训平台关键技术研究
卓皓;黄键;吴雅双
【期刊名称】《黑河学院学报》
【年(卷),期】2018(9)2
【摘要】微格教学实训平台是针对教师培养的微型教学模式,通过HTML5技术的融入,可以显著提升微格教学平台的实践效果.从实践应用的角度对微格教学实训平台的基本概念进行解读,并对微格教学实训平台的设计与实现方式进行研究,进而通过HTML5技术实现与移动智能终端的对接、优化在线视频的"字幕"标注、轻量化的视频逻辑标注、评价主体多元化的数字化环境四个维度,对基于HTML5的微格教学实训平台关键技术进行研究.
【总页数】2页(P215-216)
【作者】卓皓;黄键;吴雅双
【作者单位】福建幼儿师范高等专科学校现代教育技术中心,福建福州 350007;福建幼儿师范高等专科学校现代教育技术中心,福建福州 350007;福建幼儿师范高等专科学校现代教育技术中心,福建福州 350007
【正文语种】中文
【中图分类】TP311
【相关文献】
1.基于HTML5的微格教学视频标注系统的设计与实现 [J], 黄予;莫永华;何良泉;伍艳兰
2.基于HTML5的实时交互式虚拟教室关键技术研究及实现 [J], 徐爱春
3.基于HTML5的手机端记事本设计r基于HTML5的手机端记事本设计 [J], 张淑红
4.基于HTML5的DCS远程实时监控关键技术研究及应用 [J], 张文建; 李昊夫
5.基于BIM技术的土木工程数字化实训平台系统架构及关键技术研究 [J], 沈新福;梁庆庆;蒋国富
因版权原因，仅展示原文概要，查看原文内容请购买。
html 5教学大纲
html 5教学大纲HTML5教学大纲HTML5是一种用于构建和呈现Web页面的标记语言，它是HTML的最新版本，也是Web开发领域中最重要的技术之一。
本文将探讨HTML5教学的大纲，以帮助初学者了解HTML5的核心概念和应用。
一、HTML5简介1.1 HTML5的定义和发展历程1.2 HTML5与之前的HTML版本的区别1.3 HTML5的优势和应用领域二、HTML5基础知识2.1 HTML5文档结构2.2 HTML5元素和标签2.3 HTML5语义化标签的应用2.4 HTML5表单和输入类型2.5 HTML5媒体元素和音视频的嵌入2.6 HTML5图形和画布三、HTML5高级特性3.1 HTML5本地存储和离线应用3.2 HTML5地理定位和地图应用3.3 HTML5Web Worker和多线程编程3.4 HTML5 WebSocket和实时通信3.5 HTML5动画和过渡效果3.6 HTML5响应式设计和移动端适配四、HTML5与CSS3的结合应用4.1 CSS3选择器和样式规则4.2 CSS3盒模型和布局4.3 CSS3过渡和动画效果4.4 CSS3响应式设计和媒体查询4.5 CSS3渐变和阴影效果4.6 CSS3字体和排版五、HTML5与JavaScript的交互5.1 JavaScript基础知识回顾5.2 HTML5与JavaScript的结合应用5.3 HTML5新的JavaScript API5.4 HTML5与AJAX的数据交互5.5 HTML5与第三方JavaScript库的整合六、HTML5最佳实践和开发工具6.1 HTML5代码规范和最佳实践6.2 HTML5开发工具和调试技巧6.3 HTML5性能优化和前端工程化6.4 HTML5跨浏览器兼容性处理6.5 HTML5安全性和防御措施七、HTML5应用案例分析7.1 HTML5移动应用开发7.2 HTML5游戏开发7.3 HTML5视频和音频应用7.4 HTML5图表和数据可视化7.5 HTML5电子商务和社交媒体应用八、HTML5的未来发展方向8.1 HTML5与云计算和大数据的结合8.2 HTML5与人工智能和机器学习的应用8.3 HTML5在物联网和智能设备中的应用8.4 HTML5与虚拟现实和增强现实的结合8.5 HTML5在Web开发中的创新和突破总结：HTML5作为Web开发的核心技术，具有广泛的应用领域和无限的发展潜力。
HTML5视频媒体标签video的使用方法及完整参数说明详解
HTML5视频媒体标签video的使⽤⽅法及完整参数说明详解这篇⽂章主要介绍了HTML5视频媒体标签video的使⽤⽅法及完整参数说明详解,需要的朋友可以参考下简介video 是 HTML5 的⼀个视频媒体标签，其作⽤是在⽹页中嵌⼊指定的视频，video 标签的代码结构及参数如下。
<videocontrolsautoplaylooppreload="auto"poster="img/popup-img.png"webkit-playsinline="true"playsinline="true"x5-video-player-type="h5"x5-video-player-fullscreen="true"x-webkit-airplay="allow"x5-video-orientation="portraint"style="object-fit:fill"><source src="video.mp4" type="video/mp4"><source src="video.ogg" type="video/ogg; codecs=dirac, speex"><p>你的浏览器不⽀持 <code>video</code> 标签.</p></video>参数说明controls - 显⽰标准的 HTML5 视频/⾳频播放器控制条、控制按钮。
autoplay - 让⽂件⾃动播放。
loop - 让⽂件循环播放。
preload - 属性是⽤来缓存⼤体积⽂件的。
基于HTML5的在线学习系统的设计与实现
基于HTML5的在线学习系统的设计与实现作者：李兆翠来源：《科技风》2018年第36期摘要：在线课程学习网站的发展迅速，吸引了广大用户。
基于HTML5的在线学习系统经过需求分析、设计、编程等过程实现，它将文字、图片、音频、视频、课件、动画等教学资源融合在一起，配合在线留言、论坛等互动学习活动让在线学习功能更加丰富。
丰富的知识内容的呈现形式和互动学习活动更加吸引学习者参与到在线学习中，享受学习的乐趣，提高学习效率。
关键词：HTML5；在线学习；需求分析；在线测试目前在线课程学习网站的发展也是非常的迅速，它的出现吸引大量用户，满足了用户的移动学习要求。
随着流媒体技术的发展，通过多媒体技术将文字、图片、音频、视频、课件、动画等教学资源融合在一起让学习内容表现更加生动，同时配合在线留言、论坛等互动学习活动让在线学习功能更加丰富。
[1]用户不仅可以浏览文档，观看教学视频、教学课件，还可以进行在线练习、在线考试。
在线课程学习网站为广大用户们提供了十分便利的条件。
1 HTML5优势网站的建设大部分采用B/S 架构，压力聚集在服务器端，这就需要平衡客户端和服务器端的压力。
通过HTML5与JavaScript相结合使用将底层的大多数逻辑处理转移到客户端，服务器端只提供少量逻辑处理和数据接口，解决 B/S 架构服务器压力问题。
[2]HTML5具有动画特性、多媒体特性，可实现文字、图片、表格、音频、视频、色彩的有机结合。
HTML5新增的标签能直接支持视频、音频等多媒体元素的在线呈现，可以替代部分Flash和Silverlight能够实现的功能，并且具有更好的处理效率。
[3]同时配合CSS3支持字体嵌入、版面排版以及动画功能，让HTML5在线课程的学习内容的表现形式变得更加丰富，能极大吸引学习者的注意，增强学习效果。
同时HTML5还具有较好的学习交互、支持跨平台学习、离线学习等特性。
2 系统需求分析通过对教师、学生进行走访，结合传统课堂教学和网络教学，形成系统需求分析。
html5 video 标签的用法
HTML5 的`<video>` 标签用于在网页上嵌入视频内容。
它有一些常用的属性，可以用来控制视频的播放行为。
下面是 `<video>` 标签的基本语法：```html<video [属性列表]></video>```常用的属性包括：1. `src`：指定视频文件的路径。
可以是一个相对路径或绝对路径，也可以是一个网络链接。
例如：`<video src="movie.mp4"></video>`2. `width` 和 `height`：指定视频播放器的宽度和高度。
例如：`<video width="320" height="240"></video>`3. `controls`：显示视频播放器的控制面板，包括播放、暂停、音量调节等按钮。
例如：`<video controls></video>`4. `autoplay`：自动播放视频，不需要用户点击播放按钮。
例如：`<video autoplay></video>`5. `loop`：循环播放视频。
例如：`<video loop></video>`6. `muted`：默认静音视频。
例如：`<videomuted></video>`7. `poster`：指定视频的封面图像，在视频加载完成之前显示。
例如：`<video poster="poster.jpg"></video>`除了上述属性，还有其他一些属性可以用于更高级的控制，例如：* `preload`：指定视频是预先加载还是按需加载。
可选值包括"none"（不预加载）、"metadata"（只加载视频的元数据）、"auto"（自动加载整个视频）。
基于HTML5的微格教学视频标注系统的设计与实现-精选教育文档
基于HTML5的微格教学视频标注系统的设计与实现一、问题的提出微格教学经过二十多年的发展，经历了兴盛、沉寂、理性认识几个阶段，[1]现已成为培养师范生教学技能的常规方法。
微格教学的重要地位促成了其数字化教学环境的日渐成熟，表现为存储数字化、传输网络化、环境多媒体化、管理信息化等。
[2]然而，环境的数字化未能形成其评价主体多元化机制，未能真正挖掘微格教学视频的内在潜力。
国内的VAT在理论和开发实践层面都做了一定的工作。
[6][7][8][9][10]就目前的VAT来看，应用于微格教学中仍有许多地方亟待完善：首先，现行的VAT只有时间点标注或者单纯的时间片标注，反思渠道偏少；其次，现行的VAT中的标注信息框与视频播放分离致使信息输出滞阻。
这种信息输入过程顺畅但输出过程可能会被阻隔的现象，我们称之为“信息的准双向流动”。
该现象一旦形成，教学反思共享就会受到影响。
此外，现行的VAT仅仅提供个人接口，学习者之间无法开展协作反思。
教学实践中的协作反思可以为学习者提供感情支援，消除主体的反思偏差，促进师范生的教学反思走向深化。
[11]应用于微格教学的VAT不应把协作反思的功能模块拒之门外。
国外对视频标注研究相对成熟，已开发了许多工具，如：VideoAnt、Videotraces、VoiceThread、VideoPaper Builder、iMovie、Video Analysis Tool、Viddler、VAST 等。
[12]其中少量工具支持在线功能，部分还需另付费。
有些工具即使免费也会有诸多掣肘。
此外，具有协作功能的工具偏少，Viddler、VoiceThread和Video Analysis Tool是其中之三，仅Viddler 免费，但语言问题仍是大部分学习者短期内无法超越的障碍。
总体来看，国外的标注工具已从“单机”到“在线”转变、从个人反思向协作反思升级、[13]从运用Flash平台开发到运用HTML5实现的更替， [14]以适应不同用户的多重需求。
HTML5程序设计《html5程序设计》课程实验教学大纲1.2 实验大纲
《html5程序设计》课程实验教学大纲课程名称：html5程序设计英文名称：HTML5 programming课程编号：实验课性质：非独立设课课程负责人：汪彩霞开放实验项目数：2大纲主撰人：汪彩霞大纲审核人：一、学时、学分课程总学时：32 实验学时：16课程总学分：2 实验学分：1二、适用专业及年级软件工程专业三、实验教学目的与基本要求通过本课程的学习使得学生熟练地运用新一代web标准HTML5的核心技术进行Web 应用程序设计，使用框架技术进行基于Web的企业级应用程序开发；培养良好的程序设计风格、编程和调试技巧；培养学生搜集资料、阅读资料和利用资料的能力；培养学生的基于HTML5的Web应用开发的设计思维。
2、基本要求结合专业培养目标，提出本课程要达到的目标。
这些目标包括：1、知识与技能目标：通过本课程的学习，使学生能够迅速理解和掌握新一代web 标准HTML5所涵盖的核心技术，熟练掌握Javascript基本语法和常用类库的使用；熟练掌握CSS3的基本语法及应用；熟练掌握HTML5 的canvas、geolocation、communication、websocket、forms、webworkers、storage 等api 的使用；掌握Jquery库的使用。
2、过程与方法目标：通过本课程的学习使得学生熟练地运用新一代web标准HTML5的核心技术进行Web应用程序设计，使用框架技术进行基于Web的企业级应用程序开发；培养良好的程序设计风格、编程和调试技巧；培养学生搜集资料、阅读资料和利用资料的能力；培养学生的基于HTML5的Web应用开发的设计思维。
3、情感、态度与价值观发展目标：通过本课程的学习培养学生的基于HTML5的web应用开发能力；培养学生的团队协作精神；培养学生的学习的主动性和独立性；培养学生提出问题、分析问题和解决问题的能力。
四、主要仪器设备及消耗品1、主要仪器设备电脑、手机、HBuilder2、消耗品无六、考核方式作为期末考核的一部分。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
video …
LablID
切片标注信息表
标注内容 开始时间 结束时间 标注类型 …
videoLabl
videoLabl
StartTime EndTime
…
Content
Type
由于运用视频字幕承载反思信息，标注信息的呈 现必须确保有一个时间段， 否则字幕将一闪而过，用 户就无法辨识标注的文字内容。 因此，视频标注数据 表中包含了开始与结束时间字段。 实践证明，“开始时 间”与“结束时间”的时间差设为 3 秒较为适中。
可持续发展 （Sustainability）
要为视频案例提供准确的、 及时 的反馈
基于上述问题，我们将以微格教学的切实需求为 出发点，引入 HTML5 技术解决具体问题，以“点”（时 间点）、“片”（逻辑切片）为标注对象，构建促进师生互 动、生生互动的协作环境。
二、系统的设计与实现
（一）开发环境 本系统的开发工具采用时下流行的 MyEclipse8.5。 利用它可以对数据库和 J2EE 进行开发、发布，对应用 程序服务器进行高效整合。 MyEclipse8.5 是功能丰富
三、MVAS 的特色
与其他系统相比，MVAS 具有自己的特色， 主要 体现在如下几个方面：
（一）引入 HTML5 可以与移动智能终端对接 HTML5 是用于取代 1999 年所制定的 HTML4.01 和 XHTML1.0 标 准 的 HTML 新 版 本 。 2013 年 5 月 HTML5.1 草 案 正 式 公 布 ， 作 为 新 一 代 Web 规 范 ， HTML5 初步形成。 虽然它仍处于完善阶段，但它对多 媒体的支持以及对移动终端的兼容使其发展空间巨 大。 2010 年 YouTube 发布了基于 HTML5 的视频播放 器 ；2011 年 ，Adobe 停 止 为 移 动 设 备 开 发 Flash 播 放 器；Strategy Analytics 调查显示， 到 2013 年全球将拥 有 超 过 10 亿 部 支 持 HTML5 技 术 的 手 机 ；2013 年 5 月视频标注工具 VideoANT 正式公布 HTML5 版本。 [16] 这预示着 HTML5 不再是概念标准。 在未来的网络世 界中，Flash 将逐渐淡出人们的视线， 而 HTML5 则将 会为大多数用户提供真正的“全方位网络浏览体验”。 <Video>标签对视频的原生支持无疑是 HTML5
67
电化教育研究
标注。 系统还要提供一个公共信息交流的平台，允许
教师、学生、管理员对公共的问题进行讨论和交流。 整
个系统结构如图 1 所示。
（三） 数据库设计
数据库设计是建立数据库及其应用系统的技术，
是信息系统设计和开发中的核心技术。 为了支持相关
程序运行，数据库设计就变得较复杂且重要起来。 在
数据库设计环节，实体之间的联系和关系模式中的数
国内的 VAT 在理论和开发实践层面都做了一定 的工作。 就 [6][7][8][9][10] 目前的 VAT 来看，应用于微格教学 中仍有许多地方亟待完善：首先，现行的 VAT 只有时 间点标注或者单纯的时间片标注， 反思渠道偏少；其 次， 现行的 VAT 中的标注信息框与视频播放分离致 使信息输出滞阻。 这种信息输入过程顺畅但输出过程
<Video id="... " autoplay> <source src="…">//视频路径
… </Video> HTML5 本 质 上 是 为 Javascript 与 CSS 提 供 了 一 个更宽广的舞台，他们的完美结合可以把一些服务器 的业务划分给客户端，减轻服务器压力的同时提高用 户的浏览质量。 需要承认的是，由于 HTML5 依然处在 完善阶段，部分浏览器并未完全支持，但是在它巨大 的发展空间面前，此类问题将迎刃而解。 （二）优化的在线视频“字幕”标注 Web2.0 的强大交互功能使用户不仅是网站内容 的浏览者，还是内容的创建者。 用户不仅可以与文字、 图片互动，还可以与视频形成“对话”。 对本系统而言， 用户与视频进行“对话”就是添加视频标注。 由于教师 和学生角色的不同，对他们进行时间点标注的渠道也 进行了区别，目的是凸显教师角色“点”标注的重要 性。 教师可以对教学视频任意一个时间点进行分析评 论。 当该标注点被点击时，视频便回溯到对应的时间 点上播放，如图 2 所示。 学生通过输入框输入标注内 容提交后， 标注将以字幕形式呈现在视频播放区域 中，如图 3。
协作 （Collaboration)
视频案例库中， 教师之间不受时 空限制地分享教学经验
作品展示
教师可以对视频进行编辑、 标注
（Presentation of Work） 和分享给他人
满足教师特定需求
反思的视频对象由教师选择，且该
（Addressing Specific Needs） 视频应限定在他们的实践领域内
[作者简介] 黄予（1979—），男，广西南宁人。 讲师，主要从事教育技术学理论与实验研究。 E-mail：hy261@。 DOI:10.13811/ki.eer.2014.04.011
一、问题的提出
微格教学经过二十多年的发展， 经历了兴盛、沉 寂 、理 性 认 识 几 个 阶 段 ，[1]现 已 成 为 培 养 师 范 生 教 学 技 能的常规方法。 微格教学的重要地位促成了其数字化 教学环境的日渐成熟，表现为存储数字化、传输网络 化、环境多媒体化、管理信息化等。 [2]然而，环境的数字 化未能形成其评价主体多元化机制，未能真正挖掘微 格教学视频的内在潜力。
电化教育研究 ［文章编号］1003-1553（2014）04-0066-06
环境建设与资源开发
基于 ＨＴＭＬ５ 的微格教学视频 标注系统的设计与实现
黄 予， 莫永华， 何良泉， 伍艳兰
（广西师范学院 计算机与信息工程学院， 广西 南宁 530023）
[摘 要] 视频标注工具（Video Annotation Tool，VAT）在师范生教学技能培训中的作用日益凸显。 但是，国内外现行
（二）系统的总体设计
图 1 系统结构图（笔者注：本文中“碎片”等同于切片） 本系统包括三类用户， 即系统管理员、 教师、学
生。 系统管理员用户可以进行如下操作：系统初始化、 设置系统功能开关、导出相关数据、管理用户权限及 信息、删除教学视频、删除标注或切片标注、查询信 息。 教师用户可以进行如下操作：上传、下载和删除教 学视频、添加和删除视频标注、生成视频切片、添加和 删除切片标注、分享标注或者切片、评价教学视频。 学 生用户可以进行如下操作：上传、下载教学视频和删 除自己上传的教学视频、添加和删除视频标注、生成 视频切片、添加和删除切片标注、分享标注或者切片
基金项目：本文系全国大学生创新项目“基于 Web 视频标注系统的设计与实现”（项目编号：201210603009）；广西新世纪 2010 年教 改工程项目“NVIVO 在师范生教学技能培训中的应用研究”（项目编号：2010JGB047）；广西教师教育学科教 学 团 队 “现 代 教 育 技 术 教学团队”（项目编号：桂教师范〔2011〕84 号）
数据库设计先采用 PowerDesigner 进行数据库建 模，运用 MySQL5.5 作为数据库实施工具。 MySQL 数 据库是一种关系型数据库， 它的突出特点是体积小， 操作灵活、快速。 它支持标准的 SQL 语法，最主要的 是它源码开放、成本低。 MySQL 搭配 Apache 可组成 良好的开发环境。
次的认同感。 能为师范生开发视频案例库，供他们通 过网络反复播放微格教学视频似乎就成了解决问题 的关键。 但是利用“大单元”的未经细化分解的视频开 展教学反思，不具针对性，“教育家应采用科学家分析 微分子的方法来作为理解复杂现象的手段”。 Web2.0 使网络视频“可看可写”，也使浏览者摆脱束缚成了网 络视频编辑者中的一员。 这样的技术背景为基于 Web 的 VAT 的成长提供养分， 也为教师挖掘微格教学视 频的内在潜力提供了契机。 研究表明，VAT 可以帮助 教师有效地分析与反思教学，[4] 深刻地理解课堂教学 中学与教的过程。 [5]
的 VAT 辅助于微格教学，在功能与语言环境上有诸多不尽人意的地方。为此，我们设计开发了新型微格教学视频标注系
统（Microteaching Video Annotation System，MVAS）。 该系统采用 HTML5 作为前台技术，运用 Java+MySQL 作为后台技术
框架，以“点”（时间点）、“片”（逻辑切片）为标注对象，把微格教学的反思与评价环节从微观到中观再到宏观层面渐进演
66
2014 年第 4 期（总第 252 期）
可能会被阻隔的现象，我们称之为“信息的准双向流 动”。 该现象一旦形成，教学反思共享就会受到影响。 此外，现行的 VAT 仅仅提供个人接口，学习者之间无 法开展协作反思。 教学实践中的协作反思可以为学习 者提供感情支援，消除主体的反思偏差，促进师范生 的教学反思走向深化。[11]应用于微格教学的 VAT 不应 把协作反思的功能模块拒之门外。
据依赖、数据表的存储都需要反复推敲。 本系统中包
含多个数据表，限于篇幅现仅列出视频标注表和切片
标注信息表，详见表 ID 切片文字内容 开始时间 结束时间 … … clipLablID clipLablContent startTime endTime …
表3 … 标注 ID