7.1 CSS链接的美化
通过对网页中元素、布局和色彩的合理设计，可以使网页达到较好的视觉效果。网页中常用超链接、列表和表格等网页元素，所以，对这些元素进行美化，可以大大提高网站的质量。尤其是多媒体元素的加入，使网页更加丰富多彩。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
/* 第七章利用CSS和多媒体美化页面 */
/* 7.1 CSS链接的美化 */
/* 7.1.1.文字链接的美化 */
a{
margin: 10px;
}
a:link{
font-size: 30px;
}
a:hover{
font-size: 20px;
}
a:active{
font-size: 10px;
}
/* 7.1.2.按钮链接的美化 */
/* 7.1.3背景链接的美化 */
/* 7.2 CSS列表的美化 */
/* 7.2.1.列表项类型（list-style-type） */
/* 7.2.2.列表项图像（list-style-image） */
/* 7.2.3.列表项位置（list-style-position） */
/* 7.2.4.复合列表样式（list-style） */
/* 7.2.5.利用背景图像实现列表项标记 */
/* 7.3 CSS表格的美化 */
/* 7.3.1.border-collapse */
/* 7.3.2..border-spacing */
/* 7.3.3.caption-side */
/* 7.3.4.empty-cells */
/* 7.4 多媒体的添加与美化 */
/* 7.4.1.<embed>标签的使用 */
/* 7.4.2.<bgsound>标签的使用 */
/* 7.4.3.HTML5新增的多媒体标签 */
/* 7.4.3.1.<audio>标签 */
/* 7.4.3.2.<video>标签 */
/* 7.5 综合案例——海洋旅游胜地 */
</style>
</head>
<body>
<a>链接1</a>
<a>链接2</a>
<a>链接3</a>
<a>链接4</a>
</body>
</html>
7.1.1.文字链接的美化
在前面的章节中，已经学习了超链接的简单知识。知道超链接是一种允许其他网页或站点之间进行连接的元素，各个网页链接在一起后，才能真正构成一个网站。但是默认的链接样式往往达不到设计者的要求，所以可以通过对超链接的CSS样式设置，来达到理想的视觉效果。
<!--示例7.2程序-->
<! DOCTYPE html>
<html>
<head>
<meta charset =" utf-8"/>
<title>示例 7.2</title>
<style type="text/css" >
#menu{
text-align:center;
}/*div内的元素水平居中*/
a{
font-size:20px;
font-weight:700;
text-decoration :none;
background-color:lightcyan;
color:red; margin:5px;
padding:10px 15px;
border-radius:30px;
}
a:link ,a:visited{ /*链接未被访问以及访问过后*/
background-color: lightgrey;
color: aqua;
}
a:hover{ /*鼠标悬停链接*/
background-color: brown;
color: white;
}
a:active{ /*链接活动*/
font-weight:700px;
color: lawngreen;
}
</style>
</head>
<body>
<div id=" menu">
<h2>服务中心菜单栏</h2>
<a href="#" target="_blank">加入我们</a>
<a href="#" target="_blank">媒体报道</a>
<a href="#" target="_blank">官方博客</a>
<a href="#" target="_blank">帮助中心</a>
</div>
</body>
</html>
<!--示例7.3程序-->
<! DOCTYPE html>
<html>
<head>
<meta charset =" utf-8"/>
<title>示例 7.3</title>
<style type="text/css" >
#menu{
text-align:center;
}/*div内的元素水平居中*/
a{
font-size:20px;
font-weight:700;
text-decoration :none;
background-color:lightcyan;
color:red; margin:5px;
padding:10px 15px;
border-radius:30px;
}
a:link ,a:visited{ /*链接未被访问以及访问过后*/
/* background-color: lightgrey; */
background-image: url(img/menu_1.jpg);
color: aqua;
}
a:hover{ /*鼠标悬停链接*/
/* background-color: brown; */
background-image: url(img/menu_2.jpg);
color: white;
}
a:active{ /*链接活动*/
font-weight:700px;
color: lawngreen;
}
</style>
</head>
<body>
<div id=" menu">
<h2>服务中心菜单栏</h2>
<a href="#" target="_blank">加入我们</a>
<a href="#" target="_blank">媒体报道</a>
<a href="#" target="_blank">官方博客</a>
<a href="#" target="_blank">帮助中心</a>
</div>
</body>
</html>
7.2 CSS列表的美化
在CSS 样式中，主用是通过 list-style-type、list-style-image 和 list-style-position 这3个属性改变列表修饰符的类型，常用的 CSS 列表属性见表7-1。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
/* 第七章利用CSS和多媒体美化页面 */
/* 7.1 CSS链接的美化 */
/* 7.1.1.文字链接的美化 */
/*a{
margin: 10px;
}
a:link{
font-size: 30px;
}
a:hover{
font-size: 20px;
}
a:active{
font-size: 10px;
}*/
/* 7.1.2.按钮链接的美化 */
/* 7.1.3背景链接的美化 */
/* 7.2 CSS列表的美化 */
/* 7.2.1.列表项类型（list-style-type） */
.chanpin{
list-style-type: square;
}
.houduan{
list-style-type: circle;
}
.qianduan{
list-style-type: decimal;
}
/* 7.2.2.列表项图像(list-style-image) */
/* .chanpin{
list-style-image: url(img/list1.jpg);
list-style-position: outside;
}
.houduan{
list-style-image: url(img/list2.jpg);
list-style-position: inside;
}
.qianduan{
list-style-image: url(img/list3.jpg);
list-style-position: inside;
}*/
/* 7.2.3.列表项位置(list-style-position） */
/* li{
width: 100px;
border: 2px solid #000000;
}
.chanpin{
list-style-image: url(img/list1.jpg);
list-style-position: outside;
}
.houduan{
list-style-image: url(img/list2.jpg);
list-style-position: inside;
}
.qianduan{
list-style-image: url(img/list3.jpg);
list-style-position: inside;
} */
/* 7.2.4.复合列表样式（list-style） */
/* li{
width: 100px;
border: 2px solid #000000;
}
.chanpin{
list-style:square url(img/list1.jpg) outside;
}
.houduan{
list-style:circle url(img/list2.jpg) inside;
}
.qianduan{
list-style:decimal url(img/list3.jpg) inside;
}
.qianduan li{
padding-left: 20px;
} */
/* 7.2.5.利用背景图像实现列表项标记 */
/* 7.3 CSS表格的美化 */
/* 7.3.1.border-collapse */
/* 7.3.2..border-spacing */
/* 7.3.3.caption-side */
/* 7.3.4.empty-cells */
</style>
</head>
<body>
<!-- <a>链接1</a> -->
<!-- <a>链接2</a> -->
<!-- <a>链接3</a> -->
<!-- <a>链接4</a> -->
<div>
<h3>产品经理助理</h3>
<ol class="chanpin">
<li>小明</li>
<li>小李</li>
</ol>
</div>
<div>
<h3>后端开发工程师</h3>
<ol class="houduan">
<li>小宇</li>
<li>小华</li>
</ol>
</div>
<div>
<h3>前端开发工程师</h3>
<ol class="qianduan">
<li>小渔</li>
<li>小青</li>
</ol>
</div>
<!-- 7.4 多媒体的添加与美化 -->
<!-- 7.4.1.<embed>标签的使用 -->
<!-- <h1>阳春三月</h1>
<embed src="media/阳春三月.swf"></embed>
<h1>第五空间</h1>
<embed src="media/第五空间.mp4"></embed>
<h1> 听！是谁在唱歌</h1>
<embed src="media/听!是谁在唱歌.mp3"></embed> -->
<!-- -- 7.4.2.<bgsound>标签的使用 -->
<!--7.4.3.HTML5新增的多媒体标签
7.4.3.1.<audio>标签
<h1>audio</h1>
<audio src="media/铃铛.wav" controls="controls"></audio>
7.4.3.2.<video>标签 -->
<!-- <h1>video</h1>
<video src="media/第五空间.mp4" controls="controls"></video> -->
<!-- 7.5 综合案例——海洋旅游胜地 -->
</body>
</html>
7.2.1.列表项类型（list-style-type）
此属性用来设置或检索对象的列表项所使用的标记类型。若list-style-image 属性值为 none示时，此性将发生作用。常用的list-style-type属性i见表7-2。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
/* 第七章利用CSS和多媒体美化页面 */
/* 7.1 CSS链接的美化 */
/* 7.1.1.文字链接的美化 */
/*a{
margin: 10px;
}
a:link{
font-size: 30px;
}
a:hover{
font-size: 20px;
}
a:active{
font-size: 10px;
}*/
/* 7.1.2.按钮链接的美化 */
/* 7.1.3背景链接的美化 */
/* 7.2 CSS列表的美化 */
/* 7.2.1.列表项类型（list-style-type） */
/* .chanpin{
list-style-type: square;
}
.houduan{
list-style-type: circle;
}
.qianduan{
list-style-type: decimal;
} */
/* 7.2.2.列表项图像(list-style-image) */
.chanpin{
list-style-image: url(img/list1.jpg);
list-style-position: outside;
}
.houduan{
list-style-image: url(img/list2.jpg);
list-style-position: inside;
}
.qianduan{
list-style-image: url(img/list3.jpg);
list-style-position: inside;
}
/* 7.2.3.列表项位置(list-style-position） */
/* li{
width: 100px;
border: 2px solid #000000;
}
.chanpin{
list-style-image: url(img/list1.jpg);
list-style-position: outside;
}
.houduan{
list-style-image: url(img/list2.jpg);
list-style-position: inside;
}
.qianduan{
list-style-image: url(img/list3.jpg);
list-style-position: inside;
} */
/* 7.2.4.复合列表样式（list-style） */
/* li{
width: 100px;
border: 2px solid #000000;
}
.chanpin{
list-style:square url(img/list1.jpg) outside;
}
.houduan{
list-style:circle url(img/list2.jpg) inside;
}
.qianduan{
list-style:decimal url(img/list3.jpg) inside;
}
.qianduan li{
padding-left: 20px;
} */
/* 7.2.5.利用背景图像实现列表项标记 */
/* 7.3 CSS表格的美化 */
/* 7.3.1.border-collapse */
/* 7.3.2..border-spacing */
/* 7.3.3.caption-side */
/* 7.3.4.empty-cells */
</style>
</head>
<body>
<!-- <a>链接1</a> -->
<!-- <a>链接2</a> -->
<!-- <a>链接3</a> -->
<!-- <a>链接4</a> -->
<div>
<h3>产品经理助理</h3>
<ol class="chanpin">
<li>小明</li>
<li>小李</li>
</ol>
</div>
<div>
<h3>后端开发工程师</h3>
<ol class="houduan">
<li>小宇</li>
<li>小华</li>
</ol>
</div>
<div>
<h3>前端开发工程师</h3>
<ol class="qianduan">
<li>小渔</li>
<li>小青</li>
</ol>
</div>
<!-- 7.4 多媒体的添加与美化 -->
<!-- 7.4.1.<embed>标签的使用 -->
<!-- <h1>阳春三月</h1>
<embed src="media/阳春三月.swf"></embed>
<h1>第五空间</h1>
<embed src="media/第五空间.mp4"></embed>
<h1> 听！是谁在唱歌</h1>
<embed src="media/听!是谁在唱歌.mp3"></embed> -->
<!-- -- 7.4.2.<bgsound>标签的使用 -->
<!--7.4.3.HTML5新增的多媒体标签
7.4.3.1.<audio>标签
<h1>audio</h1>
<audio src="media/铃铛.wav" controls="controls"></audio>
7.4.3.2.<video>标签 -->
<!-- <h1>video</h1>
<video src="media/第五空间.mp4" controls="controls"></video> -->
<!-- 7.5 综合案例——海洋旅游胜地 -->
</body>
</html>
7.2.2.列表项图像（list-style-image）
此属性用来设置或检索对象的列表项标记的图像。常用的list-style-image 属性值见表7-3。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
/* 第七章利用CSS和多媒体美化页面 */
/* 7.1 CSS链接的美化 */
/* 7.1.1.文字链接的美化 */
/*a{
margin: 10px;
}
a:link{
font-size: 30px;
}
a:hover{
font-size: 20px;
}
a:active{
font-size: 10px;
}*/
/* 7.1.2.按钮链接的美化 */
/* 7.1.3背景链接的美化 */
/* 7.2 CSS列表的美化 */
/* 7.2.1.列表项类型（list-style-type） */
/* .chanpin{
list-style-type: square;
}
.houduan{
list-style-type: circle;
}
.qianduan{
list-style-type: decimal;
} */
/* 7.2.2.列表项图像(list-style-image) */
/* .chanpin{
list-style-image: url(img/list1.jpg);
list-style-position: outside;
}
.houduan{
list-style-image: url(img/list2.jpg);
list-style-position: inside;
}
.qianduan{
list-style-image: url(img/list3.jpg);
list-style-position: inside;
} */
/* 7.2.3.列表项位置(list-style-position） */
li{
width: 100px;
border: 2px solid #000000;
}
.chanpin{
list-style-image: url(img/list1.jpg);
list-style-position: outside;
}
.houduan{
list-style-image: url(img/list2.jpg);
list-style-position: inside;
}
.qianduan{
list-style-image: url(img/list3.jpg);
list-style-position: inside;
}
/* 7.2.4.复合列表样式（list-style） */
/* li{
width: 100px;
border: 2px solid #000000;
}
.chanpin{
list-style:square url(img/list1.jpg) outside;
}
.houduan{
list-style:circle url(img/list2.jpg) inside;
}
.qianduan{
list-style:decimal url(img/list3.jpg) inside;
}
.qianduan li{
padding-left: 20px;
} */
/* 7.2.5.利用背景图像实现列表项标记 */
/* 7.3 CSS表格的美化 */
/* 7.3.1.border-collapse */
/* 7.3.2..border-spacing */
/* 7.3.3.caption-side */
/* 7.3.4.empty-cells */
</style>
</head>
<body>
<!-- <a>链接1</a> -->
<!-- <a>链接2</a> -->
<!-- <a>链接3</a> -->
<!-- <a>链接4</a> -->
<div>
<h3>产品经理助理</h3>
<ol class="chanpin">
<li>小明</li>
<li>小李</li>
</ol>
</div>
<div>
<h3>后端开发工程师</h3>
<ol class="houduan">
<li>小宇</li>
<li>小华</li>
</ol>
</div>
<div>
<h3>前端开发工程师</h3>
<ol class="qianduan">
<li>小渔</li>
<li>小青</li>
</ol>
</div>
<!-- 7.4 多媒体的添加与美化 -->
<!-- 7.4.1.<embed>标签的使用 -->
<!-- <h1>阳春三月</h1>
<embed src="media/阳春三月.swf"></embed>
<h1>第五空间</h1>
<embed src="media/第五空间.mp4"></embed>
<h1> 听！是谁在唱歌</h1>
<embed src="media/听!是谁在唱歌.mp3"></embed> -->
<!-- -- 7.4.2.<bgsound>标签的使用 -->
<!--7.4.3.HTML5新增的多媒体标签
7.4.3.1.<audio>标签
<h1>audio</h1>
<audio src="media/铃铛.wav" controls="controls"></audio>
7.4.3.2.<video>标签 -->
<!-- <h1>video</h1>
<video src="media/第五空间.mp4" controls="controls"></video> -->
<!-- 7.5 综合案例——海洋旅游胜地 -->
</body>
</html>
7.2.3.列表项位置（list-style-position）
此属性用来设置对象的列表项标记相对于列表项内容的位置。常用的list-style-position属性值见表 7-4。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
/* 第七章利用CSS和多媒体美化页面 */
/* 7.1 CSS链接的美化 */
/* 7.1.1.文字链接的美化 */
/*a{
margin: 10px;
}
a:link{
font-size: 30px;
}
a:hover{
font-size: 20px;
}
a:active{
font-size: 10px;
}*/
/* 7.1.2.按钮链接的美化 */
/* 7.1.3背景链接的美化 */
/* 7.2 CSS列表的美化 */
/* 7.2.1.列表项类型（list-style-type） */
/* .chanpin{
list-style-type: square;
}
.houduan{
list-style-type: circle;
}
.qianduan{
list-style-type: decimal;
} */
/* 7.2.2.列表项图像(list-style-image) */
/* .chanpin{
list-style-image: url(img/list1.jpg);
list-style-position: outside;
}
.houduan{
list-style-image: url(img/list2.jpg);
list-style-position: inside;
}
.qianduan{
list-style-image: url(img/list3.jpg);
list-style-position: inside;
} */
/* 7.2.3.列表项位置(list-style-position） */
/* li{
width: 100px;
border: 2px solid #000000;
}
.chanpin{
list-style-image: url(img/list1.jpg);
list-style-position: outside;
}
.houduan{
list-style-image: url(img/list2.jpg);
list-style-position: inside;
}
.qianduan{
list-style-image: url(img/list3.jpg);
list-style-position: inside;
}
*/
/* 7.2.4.复合列表样式（list-style） */
li{
width: 100px;
border: 2px solid #000000;
}
.chanpin{
list-style:square url(img/list1.jpg) outside;
}
.houduan{
list-style:circle url(img/list2.jpg) inside;
}
.qianduan{
list-style:decimal url(img/list3.jpg) inside;
}
.qianduan li{
padding-left: 20px;
}
/* 7.2.5.利用背景图像实现列表项标记 */
/* 7.3 CSS表格的美化 */
/* 7.3.1.border-collapse */
/* 7.3.2..border-spacing */
/* 7.3.3.caption-side */
/* 7.3.4.empty-cells */
</style>
</head>
<body>
<!-- <a>链接1</a> -->
<!-- <a>链接2</a> -->
<!-- <a>链接3</a> -->
<!-- <a>链接4</a> -->
<div>
<h3>产品经理助理</h3>
<ol class="chanpin">
<li>小明</li>
<li>小李</li>
</ol>
</div>
<div>
<h3>后端开发工程师</h3>
<ol class="houduan">
<li>小宇</li>
<li>小华</li>
</ol>
</div>
<div>
<h3>前端开发工程师</h3>
<ol class="qianduan">
<li>小渔</li>
<li>小青</li>
</ol>
</div>
<!-- 7.4 多媒体的添加与美化 -->
<!-- 7.4.1.<embed>标签的使用 -->
<!-- <h1>阳春三月</h1>
<embed src="media/阳春三月.swf"></embed>
<h1>第五空间</h1>
<embed src="media/第五空间.mp4"></embed>
<h1> 听！是谁在唱歌</h1>
<embed src="media/听!是谁在唱歌.mp3"></embed> -->
<!-- -- 7.4.2.<bgsound>标签的使用 -->
<!--7.4.3.HTML5新增的多媒体标签
7.4.3.1.<audio>标签
<h1>audio</h1>
<audio src="media/铃铛.wav" controls="controls"></audio>
7.4.3.2.<video>标签 -->
<!-- <h1>video</h1>
<video src="media/第五空间.mp4" controls="controls"></video> -->
<!-- 7.5 综合案例——海洋旅游胜地 -->
</body>
</html>
7.2.4.复合列表样式（list-style）
这个属性是设定列表项样式的一个快捷的综合写法。用这个属性可以同时设置列表项类型属性(list-style-type)，列表项图片属性(list-style-image)和列表项位置属性(list- style-position )。
语法:list-style: list-style-type | list-style-position | list-style-image
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>示例7.8</title>
<style type="text/css">
li{
list-style-type: none;
background: url(img/list4.jpg)no-repeat;
padding-left: 30px;
padding-bottom: 10px;
}
</style>
</head>
<body>
<h3>快递公司</h3>
<ol>
<li>顺丰快递</li>
<li>圆通快递</li>
<li>邮政快递</li>
</ol>
</body>
</html>
7.2.5.利用背景图像实现列表项标记
虽然使用list-style-image属性很容易实现设置列表项图像的目的，但这个属性不能够精确控制图像替换的项目符号距离文字的位置。因此，可以利用background-image加以实现
<!--示例7.9程序-->
<! DOCTYPE html>
<html>
<head>
<meta charset =" utf-8" />
<title>示例7.9</title>
<style type="text/css">
table{
border-collapse:collapse;
}
table, td, th{
border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>课程</th><th>学分</th><th>考试形式</th>
</tr>
<tr>
<td>SQL 数据库技术</td><td>4.0</td><td>笔试</td>
</tr>
<tr>
<td>PHP 程序设计</td><td>6. 0</td><td>机考</td>
</tr>
</table>
</body>
</html>
7.3 CSS表格的美化
常用网页的布局形式是DIV+CSS，但并不是所有的布局都是如此，必要时，表格的使用对零散内容的汇总分类更为便利。所以，尽管在前面的章节中已经学习了表格的基本用法，但是设计者需要利用CSS设置表格样式的多样化，进而美化表格的外观。常用的CSS表格属性见表7-5。
<!--示例 7.10 程序-->
<! DOCTYPE html>
<html>
<head>
<meta charset=" utf-8" />
<title>示例 7.10</title>
<style type="text/css">
.one{
border-collapse:separate; border-spacing:10px;
}
.two{
border-collapse:separate; border-spacing:10px 30px;
}
table,td{
border:1px solid black;
}
</style>
</head>
<body>
<table class="one">
<tr>
<td>大数据</td><td>物联网</td>
</tr>
<tr>
<td>云计算</td><td>人工智能</td>
</tr>
</table>
<br>
</body>
</html>
<table class=" two">
<tr>
<td>大数据</td><td>物联网</td>
</tr>
<tr>
<td>云计算</td><td>人工智能</td>
</tr>
</table>
7.3.1.border-collapse
border-collapse border-collapse属性设置表格的边框是否被合并为一个单一的边框，还是按照标准的 HTML 中那样分开显示。
语法:border-collapse: separate | collapse | inherit
参数:separate是默认值，边框分开不合并，不会忽略border-spacing 和empty-cells 属性。collapse边框合并，如果相邻，则共用一个边框，会忽略border-spacing 和 empty-cells属性。Inherit是从父元素继承值。
<!--示例7.11 程序-->
<! DOCTYPE html>
<html>
<head>
<meta charset=" utf-8" />
<title>示例 7.11</title>
<style type ="text/css">
.cap{
caption-side:bottom;
}
table,th,td{
border:1px solid black;
}
</style>
</head>
<body>
<table class="cap">
<caption><h2>值班表</h2></caption>
<tr>
<th>时间</th>
<th>值日生</th>
</tr>
<tr>
<td>08:00-12:00</td><td>张红敏</td>
</tr>
<tr>
<td>14:00-17:00</td><td>李凯全</td>
</tr>
<tr>
<td>19:00-22:00</td><td>曾天艺</td>
</tr>
</table>
</body>
</html>
7.3.2..border-spacing
border-spacing border-spacing属性作用等同于标签属性cellspacing，即当表格边框独立时(border-col- lapse 属性等于separate)，相邻单元格边框之间的横向和纵向的间距。
语法:border-spacing: length
参数:length由数字和单位组成的长度值，不允许负值。如果提供全部两个length值时，第一个作用于横向间距，第二个作用于纵向间距。如果只提供一个length值时，这个值将同时作用于横向和纵向上的间距。
<!-- 7.4.1.<embed>标签的使用 -->
<h1>阳春三月</h1>
<embed src="media/阳春三月.swf"></embed>
<h1>第五空间</h1>
<embed src="media/第五空间.mp4"></embed>
<h1> 听！是谁在唱歌</h1>
<embed src="media/听!是谁在唱歌.mp3"></embed>
7.3.3.caption-side
caption-side属性设置或检索表格标题在表格的哪一边，此属性必须和表格的caption标签同时使用。
语法:caption-side: top | right | bottom | left
参数:top是默认值，指定标题在表格上边。right指定标题在表格右边。bottom 指定标题在表格下边。left指定标题在表格左边。
<center>
<h2>童话镇</h2>
<embed src="media/童话镇.mp3"></embed>
</center>
7.3.4.empty-cells
empty-cells属性设置或检索当表格的单元格无内容时，是否显示该单元格的边框。只有当表格边框独立时(即border-collapse属性等于separate)此属性才起作用。
语法:empty-cells: show I hide
参数:show是默认值，指定当表格的单元格无内容时，显示该单元格的边框。hide 指定当表格的单元格无内容时，隐藏该单元格的边框。
<h1>audio</h1>
<audio src="media/铃铛.wav" controls="controls"></audio>
7.4 多媒体的添加与美化
对于很多网站而言，经常会涉及到一些动画或者是视频、音频之类的内容，设计得合理，这些元素就能够很好地突出主题，如此，网页浏览者在视觉和听觉上都会有空间联系和层次丰富的感觉，从而产生愉悦的感受。 早期的网页大多是由文字或者图像构成的，由于多媒体技术的发展，音乐、动画、视频等媒体的应用越来越广泛。音乐网站、电影站、播客等融合多媒体技术的网站越来越多。 本节将简单介绍<embed>、<bgsound>、<audio>、<video>标签在网页中的应用。
<h1>video</h1>
<video src="media/第五空间.mp4" controls="controls"></video>
7.4.1.<embed>标签的使用
利用<embed>标签可以在网页中插人各种类型的多媒体文件，如WMV、MP3、AVI、 MP4、SWF、MOV、RMVB等。但是在使用<embed>标签之前，需要安装相应的插件，否则多媒体文件不能正常播放。常用的embed属性见表7-6。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>旅游海洋胜地</title>
<style type="text/css">
body{
background-image: url(img/bg-0.jpg);
}
.all{
margin: 0px auto;
width: 700px;
height: 600px;
background-image: url(img/bg.jpg)
}
.top{
width: 700px;
height: 100px;
background-image: url(img/top.jpg);
}
.menu{
width: 700px;
height: 60px;
text-align: center;
}
.left,.right{
width: 350px;
height: 440px;
float: left;
}
a{
font-size: 13px;
font-weight: 700;
text-decoration: none;
background-color: lightcyan;
color: red;
margin: 20px;
padding: 10px 15px;
border-radius: 10px;
}
a:link,a:visited{
box-shadow: 6px 6px 10px black;
}
a:hover{
font-size: 14px;
}
a:active{
font-size: 13px;
box-shadow: -5px -5px 10px black;
}
h3{
color: brown;
}
ol{
list-style-image: url(img/list2.jpg);
list-style-type: upper-alpha;
}
table{
border-collapse: separate;
border-spacing: 20px;
}
p{
text-indent: 2em;
line-height: 22px;
font-weight: 700;
color: brown;
}
</style>
</head>
<body>
<div class="all">
<div class="top"></div>
<div class="menu">
<br>
<a href="#" target="_blank">交通路况</a>
<a href="#" target="_blank">娱乐设施</a>
<a href="#" target="_blank">美食特产</a>
<a href="#" target="_blank">历史文化</a>
<a href="#" target="_blank">注意事项</a>
</div>
<div class="left">
<h3>新闻动态</h3>
<ol>
<li>英比奥山顶景区</li>
<li>新加坡空中缆车</li>
<li>天际线斜坡滑车</li>
<li>圣淘沙名胜世界</li>
<li>海洋馆和水上探索乐园</li>
</ol>
<video src="media/movie.ogg" width="320px" height="250px" controls="controls"></video>
</div>
<div class="right">
<table>
<tr>
<td><img src="img/table1.jpg"/></td>
<td><img src="img/table2.jpg"/></td>
</tr>
<tr>
<td><img src="img/table3.jpg"/></td>
<td><img src="img/table4.jpg"/></td>
</tr>
</table>
<p>这里不过是个平凡的小岛，岛上居民过着简单质朴的生活。当新加坡*正式收回这个小岛时，决定将它改造成一个休闲度假的胜地</p>
<br><br><br>
<audio src="media/铃铛.mp3" controls="controls" loop="loop"></audio>
</div>
</div>
</body>
</html>
7.4.2.<bgsound>标签的使用
<bgsound>是IE 浏览器中设置网页背景音乐的元素，利用它可以将音乐文件嵌人到网页中又不占页面空间，可以播放的声音文件格式包括WAV、AU、MIDI、MP3等。 <bgsound>标签参数设置不多，常用的 bgsound 属性见表 7-7。
7.4.3.HTML5新增的多媒体标签
HTML5新增的多媒体标签 以前大多数音频、视频是通过插件(例如 Flash)来播放的，然而并非所有的浏览器都拥有同样的插件。 HTML5 新增了audio 和 video 元素，分别用来插入声音和视频。至于格式，只要使用支持HTML5 的浏览器就可以了，不需要使用其他的任何插件。和标签的属性大致相同，见表 7-8。
7.4.3.1.<audio>标签
<audio>标签定义声音，比如音乐或其他音频流，此标签默认是隐藏的。
7.4.3.2.<video>标签
<video>标签定义视频，例如电影片段或其他视频流。<video>标签在页面中嵌入视频的代码格式和<audio>标签的使用相似。