### 题目重述
在当前 `sx3_1_video.html` 页面中，已有三列布局结构与一个视频播放器。现要求：
1. **新增一个视频文件** `<source src="./videos/相机调试.mp4" type="video/mp4">`；
2. 保持视频尺寸不变（宽500px，高300px）；
3. 视频排列美观，建议使用网格或纵向排布；
4. 保留原有结构与样式；
5. 提升整体视觉效果，如添加标题、说明文字等。
---
### 给出答案（答案为带注释的代码块）
```html
<
!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF
-8">
<meta name="viewport" content="width=device
-width, initial
-scale=1">
<title>我的录像</title>
<
!-- 引入实训指定样式表
-->
<link href="./css/sx3_1.css" rel="stylesheet">
</head>
<
!-- 设置页面唯一ID，便于CSS针对性控制样式
-->
<body id="video">
<
!-- 页面头部
-->
<header>
<div id="top">
<h1>我的测试录像</h1>
</div>
</header>
<
!-- 导航区域：使用无序列表实现横向菜单
-->
<nav>
<ul class="clearfix">
<
!-- 每个菜单项设置独立类名，方便后期添加背景图标
-->
<li class="photo"><a href="./sx3_1_photo.html" target="_blank">我的照片</a></li>
<li class="video"><a href="./sx3_1_video.html" target="_blank">我的录像</a></li>
<li class="
blog"><a href="./sx3_1_
blog.html" target="_blank">我的实验</a></li>
</ul>
</nav>
<
!-- 主体内容区域：包含左栏、主内容、右栏
-->
<section>
<
!-- 左侧导向栏
-->
<aside class="aside aside
-left">
<h3>网页导向</h3>
<a href="#">个人档案</a><br>
<a href="#">分类标签</a>
</aside>
<
!-- 主内容区
-->
<div class="main">
<h2>钻削测试录像</h2>
<p>这里展示一个简单的钻削过程。</p>
<
!-- 第一个视频：钻削测试
-->
<div style="text
-align
: center; margin
: 20px 0;">
<h3>钻削测试过程</h3>
<video width="500" height="300" controls>
<source src="./videos/钻削测试.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
</div>
<
!-- 第二个视频：相机调试
-->
<div style="text
-align
: center; margin
: 20px 0;">
<h3>相机调试过程</h3>
<video width="500" height="300" controls>
<source src="./videos/相机调试.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
<p style="font
-size
: 0.9em; color
: #555; margin
-top
: 5px;">分辨率：1920×1080，帧率：30fps</p>
</div>
</div>
<
!-- 右侧更新记录栏
-->
<aside class="aside aside
-right">
<h3>更新记录</h3>
<a href="#">2009年1月19日</a><br>
<a href="#">2009年1月15日</a><br>
<a href="#">2009年1月13日</a><br>
<a href="#">2009年1月7日</a><br>
<a href="#">2008年</a>
</aside>
</section>
<
!-- 页脚信息
-->
<footer>
<a href="mailto
:1113622361@qq.com">请你留言</a>
<span>更新日期
: 1999年1月19日</span>
</footer>
</body>
</html>
```
---
### 代码解析
1. **新增视频容器**
使用 `<div>` 包裹第二个 `<video>`，并设置居中样式 `text
-align
: center`，保持美观。
2. **统一视频尺寸**
两个视频均为 `width="500"` 和 `height="300"`，确保大小一致。
3. **添加标题与说明**
- 每个视频上方增加 `<h3>` 标题；
- 下方添加简短说明（如分辨率），提升专业感。
4. **间距美化**
使用 `margin
: 20px 0` 控制视频上下间距，避免拥挤。
5. **回退提示**
每个 `<video>` 内保留“您的浏览器不支持 video 标签”提示，增强兼容性。
6. **内联样式控制**
使用 `style=""` 快速实现局部样式，不影响整体CSS结构（也可抽离到CSS文件）。
---
### 知识点
#### 1. `<video>` 标签嵌套 `<source>`
通过`<source>`可添加多个视频源，浏览器自动选择
第一个支持的格式。
#### 2. 视频尺寸控制
使用`width`和`height`属性固定播放器大小，避免布局跳动。
#### 3. 内容居中技巧
`text
-align
: center` 对块级元素无效，但对其内部内容（如`<video>`）有效，常用于图文居中。
这是我的第一个Blog
扫一扫
1627
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
