2017.9.21 HTML学习总结---多媒体播放系统设计
1.题目：整个页面被划分三个子窗口，上面窗口为页面功能提示区，
下左部分为不同类型播放的功能选项，下右部分为播放系统显示播放信息窗口.
（1）网页设计框架：
<html> <head> <title>多媒体播放系统</title> </head> <frameset rows="80",*"> <frame src="ch02_top.html"name="top" scorlling="no"> <frameset cols="140,*"> <frame src="ch02_7_left.html" name="left" scorlling="no"> <frame src="ch02_7_right.html" name="right" scorlling="no"> </frameset> </frameset> </html>
(2)最上方的显示标题
<html> <head><title>页面标题</title> </head>
<body> <center><h1>多媒体播放系统</h1></center></body>
</html>
（3）左边的显示操作菜单
<html> <head><titile>菜单页面</title> </head> <body><br><br><br><br> <p><a href="imgTag.html" target="right">图象显示</a></p> <p><a href="viwTag.html" target="right">视频播放</a></p>
<p><a href="soundTag.html" target="right">音乐播放</a></p>
</body> </html>
(4)右边显示标题
<html>
<head><title>信息显示页面</title></head>
<body background=“imge/2.jpg”></body>
</html>
(5)图像显示页面
<html> <head><title>插入图象</title></head>
<body>
小鸭！<img src="image/xy.git" alt="小鸭" width="200" height="100"align="left">
</body> </html>
(6)音乐播放界面
<html>
<head><title>音乐无限</title></head>
<body><br> <br>
<h2 align="center">笔记</h2>
<img align=“left” src="image/周笔畅.jpg" width="200" height="200" alt="歌手.周笔畅">
<bgsound src="image/笔记.mp3" loop="1">
</body>
</html>
(7)视频播放页面
<html> <head><title>插入视频</title></head>
<body>
backkom熊<br><br>
<img dynsrc="image/Backkom.wvm" loop="3">
</body>
</html>
2.CSS样式表的定义与使用
2.1 CSS由三个基本部分----对象，属性，值组成。在这其中“对象”是最重要的有个专门的名称-------选择器
它的基本语法是：selector{属性：属性值；属性：属性值.........}
说明：样式表的定义实际就是定义CSS选择器，由于CSS选择器有3种类型，决定其值定义方式也是有三种
·css的选择器分为以下三种：
（1）标记选择器：通过HTML标签定义选择器
基本语法：引用样式的对象{标签属性：属性值；标签属性：属性值........}
例如：
/*在<h1></h1>和<h2></h2>标签内的文本居中显示，并采用蓝色字体的样式表*/
h1,h2{text-align:center;color:blue;} //定义标记h1，h2的选择器
<h1>中国</h1> //使用选择器，在页面中以标题1的字体居中、蓝色字体显示
<h2>北京天安门</h2> ////使用选择器，在页面中以标题2的字体居中、蓝色字体显示
（2）类别选择器：使用class定义选择器；
* 注明：若要为同一元素创建不同的样式或为不同元素创建相同的样式，可以使用css类选择器，css类有两种格式，定义时在各自类的名称前加一个点号。
例如：基本语法：标签名，类名{标签属性：属性值；标签属性：属性值；.....}
格式一：
/*
两个不同的段落，若要使一个段落向右对齐，一个段落居中对齐，则先定义两个类别选择器
*/
p.center{text-align:center;}
p.right{text-align:right;}
然后在不同的段落里，只要在html标记里加入上面定义的类
<p class="right">这个段落向右看齐</p>
<p class="center">这个段落居中看齐</p>
例如：.类名{标签属性：属性值；标签属性：属性值..........}
该格式的类使所有class属性值为该类名的标签都遵守该类所定义的样式
.text{font-family:宋体;color:red} //定义类别选择器
<p class="text">段落文本</p> //p标记引用类别选择器text
<h1 class="text">标题文本</h1> //h1标记引用类别选择器text
该定义功能：在pp标签对上分别使用text类使标签对中的文本字体为宋体，颜色为红色
（3）ID选择器：使用id定义选择器；
·属性是希望要设置的属性，并且每个属性都有一个值，属性和值被冒号分开，属性之间用分号间隔，并有花括号包括
基本语法:#id 名称{标签属性：属性值；标签属性：属性值......}
例如：
注意：使用该样式表时，需要将该样式的网页内容前加一个id=“id名称”。
#sample{font-family:宋体;font-size:60pt} //首先定义id选择器
<p id=sample>段落标记文本</p> //使用id选择器，使标签内的文本以sample样式显示
2.2 样式表的使用
在HTML中使用css有四种方式：行内式、内嵌式、链接式、导入式。
（1）行内式：不需要定义选择器，利用style属性直接为元素设置样式，只对当前的标签起作用
例如：
<p style="color:#0000FF";font-size:20px;text-decoration:underline;> 正文内容1</p>
（2）内嵌式：利用<style></style>标签对，将样式表定义在headhead标签对之间，内嵌式样表的作用范围是整个HTML文档；
例如：
<html>
<head>
<title>页面标题</title>
<style type="text/css">
p{color:#0000FF;text-decoration:underline;font-weight:bold;font-size:25px;}
.info{font-size:12px;color:red;}
//定义两个选择器：标签选择器p和类选择器
</style>
</head>
<body>
<p>这是第一行内容......</p>
<p class="info">这是第二行正文内容......</p>
<!--使用选择器：第一行，标签选择器使用；第二行，类选择器使用 -->
</body>
</html>
