在现代网页设计中，吸引用户注意力的方法有很多种，比如使用Flash播放器、背景音乐或者自定义的网页动画。这些元素可以让用户对网站或博客产生兴趣，从而提高用户参与度。本文将介绍如何在HTML代码中使用媒体元素，并结合基本的CSS进行样式设计。
首先，来看HTML5中的音频和视频标签。这些标签允许在网页中嵌入音频和视频内容，从而增强用户体验。以下是一些基本的步骤和代码示例，帮助理解如何在HTML中使用这些标签。
HTML5音频标签（Audio Tag）：
音频标签用于在网页中嵌入音频文件。它以<audio>开始，以</audio>结束。需要为音频文件指定一个源文件路径，这可以通过在<source>标签中指定文件路径来实现。
视频标签用于在网页中嵌入视频文件。它以<video>开始，以</video>结束。与音频标签类似，需要为视频文件指定一个源文件路径。此外，视频标签还允许设置视频的宽度和高度。
基本HTML结构：
在HTML中，每个页面都应该包含一些基本标签，如<html>、<head>、<title>和<body>。这些标签不仅是必须的，而且对于浏览器的良好响应也非常重要。
代码注释：
对于一个好的程序员或设计师来说，编写代码时添加注释是一个好习惯。在HTML中，注释是通过<!-- 这是一条简单注释 -->来实现的，这些注释在浏览器中是不可见的。
示例代码：
以下是一个包含音频和视频标签的HTML页面示例：
<html>
<head>
<style>
table, th, td {
border: 2px solid black;
}
</style>
<title>HTML5音频标签</title>
</head>
<body>
<h1>这是一个简单的音频标签</h1>
<table>
<tr>
<th>歌曲名称</th>
<th>播放</th>
</tr>
<tr>
<td>歌曲1</td>
<td>
<audio width="320" height="240" controls>
<source src="C:\Users\miracle\Desktop\CODE SNIPPETS\TEST.mp3" type="audio/ogg">
"AUDIO TAG NOT SUPPORTED"
</audio>
</td>
</tr>
</table>
</body>
</html>
在上述代码中，使用了<style>标签来定义HTML文档的样式。同样，也可以通过CSS文件来实现这些样式。
连接HTML和CSS：
要将HTML文档与CSS文件连接，可以在<head>标签中使用<link>标签。以下是一个示例：
<html>
<head>
<link rel="stylesheet" type="text/css" href="C:\Users\miracle\Desktop\CODE SNIPPETS\stylesheet.css">
<title>HTML5音频和视频标签</title>
</head>
<body>
<h1>这是一个简单的音频和视频标签</h1>
<table>
<tr>
<th>歌曲名称</th>
<th>播放</th>
</tr>
<tr>
<td>歌曲1</td>
<td><audio controls>
<source src="C:\Users\miracle\Desktop\CODE SNIPPETS\TEST.mp3" type="audio/ogg">
"AUDIO TAG NOT SUPPORTED"
</audio>
</td>
</tr>
<tr>
<td>视频1</td>
<td><video width="320" height="240" controls>
<source src="C:\Users\miracle\Downloads\New folder\ee\BIRTHDAY WISH.mp4" type="audio/ogg">
"VIDEO TAG NOT SUPPORTED"
</video>
</td>
</tr>
</table>
</body>
</html>
table, th, td {
border: 2px solid black;
}
audio {
border: 5px solid blue;
background-color: red;
}
video {
border: 2px solid yellow;
background-color: red;
}