第二章
列表.表格与媒体元素预习笔记
单词:
table:桌子,表格.目录
video:磁带录像.录像
audio:听觉的,声音的
section:部分,部门,件
article:物品,文章 论文
aside:旁边
一:
1: 什么是列表:就是信息资源的一种展示形式,它可以是信息结构化和条理化;并以列表的形式显示出来;以便浏览者更快捷的获取相应的信息;
注意:从图中可以发现都是用列表来显示的信息.有的列表前有序号,有的就没有.
2:HTML5中列表分为三类:
1>无序列表:
定义:
由<ul>标签和<li>标签组成,使用<ul>标签作为无序列表的声明;使用<li>标签作为每个列表项的起始 ,
语法:
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
代码举例:
< body>
<h3>热搜</h3>
<ul>
<li>范冰冰演藏族女孩</li>
<li>撞死俩人后自拍</li>
<li>诗隆甜蜜出游</li>
<li>一线城市楼市退烧</li>
</ul>
****1>遵循W3C标准,<ul>标签的里面只能嵌套<li>标签,不能嵌套其他标签.
2><li>标签里可以嵌套任何标签.
特征:
1>没有顺序,每个<li>标签独占一行(块元素);
2>默认<>标签前面有个实心的小圆点;
3>一般用于无序类型的列表,如导航,侧边栏新闻,有规律的图文组合模块等;
2>有序列表
定义:
有序列表由<ol>标签和<li>标签组成,使用<li>标签作为有序列表的声明,使用<li>标签作为每个列表项的起始,有序列表嵌套同无序列表一样,只能<ol>标签里嵌套<>标签.
语法:
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
代码举例:
< body>
<h3>热搜</h3>
<ol>
<li>范冰冰演藏族女孩</li>
<li>撞死俩人后自拍</li>
<li>诗隆甜蜜出游</li>
<li>一线城市楼市退烧</li>
</ol>
特征:
1>有顺序.每个<li>标签独占一行(块元素);
2>默认<>标签项的前面有顺序标记
3>一般用于排序类型的列表,如试卷,问卷选项
3>定义列表
定义:
是一种特殊的列表形式,它是标题及列表的结合.语法相对与无序和有序列表不太一样,它使用<dl>标签作为列表的开始,使用<dt>标签作为每个列表项的起始,而对于每个列表项的起始.而对于每个列表项的定义则使用<dd>标签来完成.
语法:
<dl>
<dl>标题一</dt>
<dd>第一项</dd>
<dd>第二项</dd>
<dt>标题二</dt>
<dd>第一项</dd>
</dl>
代码举例:
<body>
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>桃子</dd>
<dd>梨子</dd>
<dt>蔬菜</dt>
<dd>白菜</dd>
<dd>黄瓜</dd>
<dd>西红柿</dd>
</dl>
</body>
特征:
1>没有顺序,每个<>标签,<>标签独占一行(块元素);
2>默认没有标记
3>一般用于(一个标题下有一个或者多个列表项)*n的情况下;
技巧注意事项
1>无序列表中的每项都是平级的,没有级别之分,并且列表中的内容一般都是相对简单的标题性质的网页内容,有序列表会依据列表项的顺序进行显示,
2>在实际的网页应用中,无序列表比有序列表的应用的更加广泛,有序列表ol-li -一般用于显示带有顺序编号的特定场合
3>定义列表一般用于带有标题和标题性解释内容的场合
二 :表格:
1:表格是块状元素;发明该标签的初衷是显示表格数据,
2:为什么使用表格
1>简单通用
2>结构稳定
3:表格的基本结构
1>单元格
2>行
3>列
表格的基本语法:
<table>
<tr>
<th>第一个单元格的内容</th>
<th>第二个单元格的内容</th>
. ...
</tr>.
<td>第一个单元格的内容</td>
<td>第二个单元格的内容</td>
.....
</tr>
</table>
代码举例:
<body>
<table border ="2">
<tr>
<th>1行1列的标题</th>
<th>1行2列的标题</th>
<th>1行3列的标题</th>
</tr>
<tr>
<td>1行1列的单元格</td>
<td>1行2列的单元格</td>
<td>1行3列的单元格</td>
</tr>
<tr>
<td>2行1列的单元格</td>
<td>2行2列的单元格</td>
<td>2行3列的单元格</td>
</tr>
</table>
</body>
创建表格的步骤:
1>创建表格标签<table>....</table>
2>在表格标签<table>....</table> 里创建行标签<tr>....</tr> ,可以有多行,
3>在第一行标签里<tr>...</tr>里创建单元格标签<th>....</th>.用于创建表格标题
4>在行标签内<tr>.....</tr>里创建单元格标签<td>....</td>,可以 有多个单元格
为了显示表格,一般还需要设置<table>标签的border边框属性,指定边框的宽度
三 :
表格的跨行和跨行
(1)表格的跨行:
定义:指单元格在垂直方向上的合并;
语法:
<table >
<tr>
<td rowspan ="所跨的行数">单元格内容</td>
</tr>
</table>
代码举例:
<body> <table border ="1"> <tr>
<td rowspan ="2"张三</td>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>96</td>
</tr>
<td rowspan ="2"李四</td>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>96</td>
</tr>
<table>
</baby>
(2):表格的跨列:
定义:单元格的横向合并;
语法:
<table >
<tr>
<td rowspan ="所跨的列数">单元格内容</td>
</tr>
</table>
代码举例:
<body>
<table border ="1">
<tr>
<td colspan ="2"学生成绩</td>
</tr>
<tr>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>96</td>
</tr>
</table>
</baby>
经验
跨行和跨列以后,并不改变表格的特点;同行的总高度一致,同列的总宽度一致,因此,表格中的各单元的宽度或者高度互相影响,结构相对稳定,但缺点是不能灵活地进行布局控制;
四:媒体元素:
1>video元素的基本语法:
<video src ="视频路径"controls ="controls"></video>
代码举例:
<baby>
<video controls>
<source src ="video/video.webm"/>
<source src ="video/video.mp4"/>
你的浏览器不支持video标签
</video>
</boby>
2>音频元素
语法:
<audio src ="音频路径"controls ="controls"></video>
<audio src ="音频路径"controls ="controls">你的浏览器不支持audio标签</video>
代码举例:
<body>
<audio controls>
<source src ="mucic/music.mp3"/>
<source src ="mucic/music.ogg"/>
</audio>
</baby>
五 :HTML5结构元素:
header:标题头部的区域的内容
footer:表及脚部区域的内容
section:Web页面中的一块独立区域
article:独立的文章内容
aside:相关内容或应用
nav:导航类辅助内容
代码举例:
<!DOCTYPE html>
<html>
<head lang ="en">
<meta charset =UTF_8>
<title>网页邮箱页面布局</title>
<!-style>
<style>
header,section,footer{
height:200px;
border:1px solic red;
}
</style>
</head>
</baby>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体部分</h2>
</section>
<footer>
<h2>网页底部</h2>
</footer>
</body>
</html>
六:<iframe>框架
语法:
<iframe src ="应用页面地址"name ="框架标识名"...></iframe>
属性的使用:
属性包括:name width height
<iframe name ="mainFrame"src ="subframe/the_second.html"/>
<a href ="subframe/the_second.htm"target =mainFrame">下边显示第二页</a>
总结
1>掌握表格的基本使用方法:
(1)<table> <tr> <td>创建表格
2>媒体元素共有的属性:
(!):src(链接地址)
(2):controls(控制播放控件)
3>可以让媒体元素在不同的浏览器下都支持播放的元素(source)
4>语义化结构元素:header section article nav aside footer
5>常用的框架技术<iframe>内敛框架
6>配合使用<a>标签的target属性及<iframe>标签的属性,可以实现窗口间的关联