列表、表格与媒体元素

1.无序列表及其应用

　　语法：

　　<ul>

　　<li>第一项</li>

　　<li>第二项</li>

　　<li>第三项</li>

　　</ul>

　　遵循W3c的标准<ul>标签里只能嵌套<li>标签,不能嵌套其他标签。

　　<li>标签里可以嵌套任何标签。

2.无序列表的特征

　　（1）没有顺序，每一个<li>独占一行（块元素）

　　（2）默认<li>标签项前面都有一个实心小圆点

　　（3）一般用于无序类型的列表，如导航，侧边栏新闻，有规律的图文组合模块

3.有序列表及其应用

　　语法：

　　<ol>

　　　　<li>第一项</li>

　　　　<li>第二项</li>

　　　　<li>第三项</li>

　　</ol>

4.有序列表的特征

　　（1）有顺序，每一个<li>独占一行（块元素）

　　（2）默认<li>标签项前面都有顺序标记

　　（3）一般用于排序类型列表，如试卷问卷选项等

　　定义列表及其应用

　　　　语法：

　　　　<dl>

　　　　　　<dt>标题一</dt>

　　　　　　<dd>第一项</dd>

　　　　　　<dd>第二项</dd>

　　　　　　<dt>标题二</dt>

　　　　　　<dd>第一项</dd>

　　　　</dl>

　　定义列表的特征如下

　　　　（1）没有顺序，每个<dt>标签，<dd>标签独占一行（块元素

　　　　（2）默认没有标记

　　　　（3）一般用于（一个标题下有一个或多个类表项）

5.表格的基本结构

　　1 单元格

　　单元格是表格的最小单位，一个或多个单元格纵横排列组策划那个表格

　　2 行

　　一个或多个单元格横向堆叠成了行

　　3 列

　　由于表格单元格宽度必须一致，因此单元格纵向排列形成了列

　　语法

　　<table>

　　　　<tr>

　　　　　　<th>第一个单元格内容</th>

　　　　　　<th>第二个单元格内容</th>

　　　　</tr>

　　　　<tr>

　　　　　　<td>第一个单元格内容</td>

　　　　　　<td.第二个单元格内容</td>

　　　　</tr>

　　</table>

6.表格的跨行和跨列

　　表格跨列        

　　语法        

　　<table>

　　　　<tr>        

　　　　　　<td colspan="所跨的列数">单元格内容</td>        

　　　　</tr>       

　　</table>

表格的跨行

　　<table>

　　　　<tr>

　　　　　　<td rospan="所跨的行数">单元格内容</td>

　　　　</tr>

　　</table>

7.经验：

　　1 在需要合并的第一个单元格设置跨行或跨列属性，如colspan=“3”。

　　2 删除被合并的其他单元格，及把某个单元格看成多个单元格合并后的单元格

　　3 跨行和跨列后并不改变表格特点，同行的总高度一致，同列的总宽度一致。因此，表格中的各个单元格宽度或高度互相有影响结构相对稳定，但缺点是不能灵活的进行布局控制

8.视频元素

　　1.video 元素的语法

　　<voieo src="视频路径" controls="controls"></video>

　　只能接收一种格式

　　source 元素解决这一问题，source元素嵌套在video，并且可以出现多次 每一次source元素对应一种格式视频

　　在video中指定controls属性可以在页面上以默认的方式进行播放控制。如果不加这个属性视频就不能直接播放 

　　还有一种方法在voieo元素设置另一个属性autoplay

9.音频元素

　　audio 基本元素

　　<audio  src="音频路径"controls="controls"></video

　　controls属性用于提供播放暂停和音量控键，

10.页面布局

　　HTML结构元素

　　header 标题的头部区域内容

　　footer 标记脚部区域的内容（用于整个页面或页面的一块区域）

　　section WEB页面中的一块独立区域

　　aticle  独立的文章内容

　　aside   相关内容或应用（常用于侧边栏）

　　nav    导航类辅助内容

11.<iframe>框架

　　主要作用使页面中的部分内容用框架实现，一般用于页面引用站外的页面内容，使比较方便、灵活。

　　语法：

　　<iframe src="引用页面地址"name="框架标识名"...></iframe>

　　<iframe>属性使用

　　（1）<iframe name="mainframe" src=""...../>

　　（2）<a href="......"tiget="mainframe">下面显示第二行</a>