9月9日HTML上午表单元素2（框架、样式表）
五、框架
1.frameset是双标签框架集，如果使用框架集，当前页面不能有body。
frameset属性：①cols代表左右拆分。cols=“300，*”表示左边框架宽300，右边宽剩余的宽度。*代表剩余。
②rows代表上下拆分。rows=“300，*”表示上边框架高300，下边框架高剩余的高度。
③frameborder边框，有边框就设置为1（ frameborder="1"），没有边框就设置为（ frameborder="0"）。
④<frame />属性有a：src 边框要显示的页面的地址；b： scrolling滚动条，有滚动条就设置成yes（scrolling="yes"），没有滚动条就设置成 no（scrolling="no"）。
<frameset cols="300,#"> <frame src="样式1.css" /> <frame src="样式2.css" /> </frameset>
2.iframe 可以嵌在普通页面里面，其属性中的src表示框架里面要显示的页面的地址。
src的属性：①width框架的宽度
②height页面的高度
③frameborder边框，有边框就设置为1（ frameborder="1"），没有边框就设置为（ frameborder="0"）。
④scrolling 滚动条，有滚动条就设置成yes（scrolling="yes"），没有滚动条就设置成no（scrolling="no"）。
如果嵌入的页面src属性中设置成“width=0 height=0”，则嵌入的页面就看不到了，但是实际上是存在的。
3.其它
①<marquee> 双标签，表示滚动效果。<marquee>滚动字条</marquee>。<marquee>属性有<marquee direction="right">表示从左向右滚动，同样的right可以换成right、up、down，分别表示从右到左、从下到上、从上到下滚动。加入图片，图片也可以和字体一样滚动。
<marquee direction="up">
<img src="插入的图片" />
</marquee>
②<mark></mark>做标记，<mark>字体</mark>，中间的“字体”就被做了标记，颜色变成了黄色。<mark>元素中颜色不可以更改。
③<hr/>做分割线。网页上出现一条分割线。
④ 页面嵌入视频，嵌入视频的方法：a.找到要嵌入的视频
b.视频左下方点击分享
c.复制HTML代码 复制flash 复制通用代码
d.把复制的代码粘贴在页面里面
样式表
样式表的作用：样式表的作用是配合标签对网页进行美化，标签把内容放到页面里面，然后样式去操作标签，是网页更加漂亮。样式表分为内联、内嵌、外部三种。
一、内联：样式写在标签里面，<div style=""></div>。可以具体到每个代码，但是每个控制代码都要写上。优点：控制精确 缺点：代码重用性差。
二、内嵌：嵌在页面里面，一般嵌在<head>里面。
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> 样式 </style> </head>
样式表里面的注释语法为/*样式*/。缺点：控制不精确 优点：代码重用性好。
三、外部：样式表在网页的外部，有一个单独的文件。如果网页的所有控制的样式都是写在另一个文件里面的，则另一个文件就成为外部样式表。使用时要把外部样式表引入到网页文件里。引入方法为：引入：网页文件空白处点击右键-CSS样式表-附加样式表。缺点：控制没有内联的精确 优点：代码重用性最好（一个外部样式表可以用在n个网页上）。
一般样式表不要写内联的，代码太多、太乱，除非有特殊情况要写。后期主要用外部的。其中，内联优先级最高。
四、选择器
选择器就是样式表用来选取元素的。
1.标签选择器 根据标签名选择元素。
<style type="text/css"> div{ background:#C93} </style> </head> <body> <div>123</div> <div>456</div> <span>789</span>
div{ background:#C93}表示找到的标签是<div>123</div>和 <div>456</div>。只有这两行显示颜色#C93
2.class选择器 class称为类，选取一类的元素。class每个元素的属性都有。
<style type="text/css"> div{ background:#C93} .a{ background:#F00} </style> </head> <body> <div class="a">123</div> <div>456</div> <span class="a">789</span>
class=“a”表示两行都为a类，class选择器根据class名就把这两行归为a类。<div class="a">123</div>和<span class="a">789</span>两行颜色成为了颜色#F00。 .a=class a，。
3.id选择器 用来精确控制，对要选择的元素命名唯一的id，id选择器找到这个元素（通过id来寻找）主要是内嵌和外联中使用。class每个元素的属性都有。通过id选择器寻找元素只能找到一个元素，因为id是唯一的。id选择器的符号是#。例如下列代码， <div id="d">456</div>的id=d，寻找时#d。
<style type="text/css"> div{ background:#C93} .a{ background:#F00} #d{ background:#3CF} </style> </head> <body> <div class="a">123</div> <div id="d">456</div> <span class="a">789</span>
4.复合选择器
①逗号并列选择器，用逗号隔开表示是并列的。下列代码同时选择了div和span。
<style type="text/css"> div,span{ background:#09F} </style> </head> <body> <div class="a">123</div> <div id="d">456</div> <span class="a">789</span>
②空格后代 下列代码表示找到的是4行<li>中的数字。
#list li{ background:#999} </style> </head> <body> <ul id="list"> <li>11</li> <li>22</li> <li>33</li> <li>44</li> <ul>
③点筛选
div.s代表筛选 <div class="s">22222</div>
<div>11111</div> <div class="s">22222</div> <div>33333</div>
筛选优先等级为 id（优先级高），clss（优先级其次），标签（优先级最低）。
