第二章笔记
表格 列表 媒体元素
笔记
1:列表:
无序列表:
语法:
<ul> <li>女装/男装/内衣</li> <li>鞋靴/箱包/配件</li> <li>童装/玩具/孕产</li> </ul>
特点:
1>
1>没有顺序,每个<li>标签独占一行(块元素);
2>默认<>标签前面有个实心的小圆点;
3>一般用于无序类型的列表,如导航,侧边栏新闻,有规律的图文组合模块等;
2:有序列表:
语法:
<ol> <li>李强</li> <li>李强1</li> <li>李强2</li> </ol>
特征:
特征:
1>有顺序.每个<li>标签独占一行(块元素);
2>默认<>标签项的前面有顺序标记
3>一般用于排序类型的列表,如试卷,问卷选项
3>定义列表:
语法:
<dl> <dt>标题一</dt> <dd>标题一的内容</dd> <dd>标题一的内容</dd> <dt>标题二</dt> <dd>标题二的内容</dd> <dd>标题二的内容</dd> </dl>
1>没有顺序,每个<>标签,<>标签独占一行(块元素);
2>默认没有标记
3>一般用于(一个标题下有一个或者多个列表项)*n的情况下;
技巧注意事项
1>无序列表中的每项都是平级的,没有级别之分,并且列表中的内容一般都是相对简单的标题性质的网页内容,有序列表会依据列表项的顺序进行显示,
2>在实际的网页应用中,无序列表比有序列表的应用的更加广泛,有序列表ol-li -一般用于显示带有顺序编号的特定场合
3>定义列表一般用于带有标题和标题性解释内容的场合
3:表格的基本结构
1>单元格
2>行
3>列
表格的基本语法:
<table>
<tr>
<th>第一个单元格的内容</th>
<th>第二个单元格的内容</th>
. ...
</tr>.
<td>第一个单元格的内容</td>
<td>第二个单元格的内容</td>
.....
</tr>
</table>
4: 表格的跨行和跨行
(1)表格的跨行:
定义:指单元格在垂直方向上的合并;
语法:
<table >
<tr>
<td rowspan ="所跨的行数">单元格内容</td>
</tr>
</table>
(2):表格的跨列:
定义:单元格的横向合并;
语法:
<table >
<tr>
<td rowspan ="所跨的列数">单元格内容</td>
</tr>
</table>
经验
跨行和跨列以后,并不改变表格的特点;同行的总高度一致,同列的总宽度一致,因此,表格中的各单元的宽度或者高度互相影响,结构相对稳定,但缺点是不能灵活地进行布局控制;
5:媒体元素:
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>
6:HTML5结构元素:
header:标题头部的区域的内容
footer:表及脚部区域的内容
section:Web页面中的一块独立区域
article:独立的文章内容
aside:相关内容或应用
nav:导航类辅助内容
总结
1>掌握表格的基本使用方法:
(1)<table> <tr> <td>创建表格
2>媒体元素共有的属性:
(!):src(链接地址)
(2):controls(控制播放控件)
3>可以让媒体元素在不同的浏览器下都支持播放的元素(source)
4>语义化结构元素:header section article nav aside footer
5>常用的框架技术<iframe>内敛框架
6>配合使用<a>标签的target属性及<iframe>标签的属性,可以实现窗口间的关联
