HTML基础复习第二章

unit2 列表、表格和媒体元素

1、列表

1.1、无序列表

<ul type="circle">
   <li>范冰冰演藏族女孩</li>
   <li>撞死两个人后自拍</li>
   <li>诗隆甜蜜出游</li>
   <li>一线城市楼市退烧</li>

       </ul>

1.2、有序列表

<ol type="i">
   <li>范冰冰演藏族女孩</li>
   <li>撞死两个人后自拍</li>
   <li>诗隆甜蜜出游</li>
   <li>一线城市楼市退烧</li>

       </ol>

1.3、定义列表

<dl>
       <dt>热搜</dt>
   <dd>范冰冰演藏族女孩</dd>
   <dd>撞死两个人后自拍</dd>
   <dd>诗隆甜蜜出游</dd>
   <dd>一线城市楼市退烧</dd>
  <dt>蔬菜</dt>
       <dd>油麦菜</dd>
       <dd>菠菜</dd>
       <dd>白菜</dd>
       </dl>

2、表格

<table border="2">

       <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>

2.1、为什么使用表格

1、简单通用
2、结构稳定

2.2、基本结构

1、单元格
2、行
3、列

2.3、属性

border

colspan

跨列合并
一般写在<td>标签中

rowspan

跨行合并
一般写在<td>标签中

2.4、表格布局

caption<表格标题>
th<加粗并居中>
thead<页眉>
tbody<数据主体>
tfoot<页脚>

2.5、表格的高级标签

1.表格居中 align="center"
2.表格宽度 width="300px"或 width="60%"

• 3.表格高级标签 thead tbody tfoot 好处：响应加载的的顺序 thead tfoot tbody

4.设置行的背景色 style="background-color:颜色"

3、媒体元素

1、
<video src="video/video.mp4" controls>你的浏览器不支持此播放格式</video>
2、
<video controls>
<source src="video/video.webm"type="video/webm"/>
<source src="video/video.mp4"type="video/mp4"/>
你的浏览器不支持此播放格式
</video>
<source>标签可有可无

3.1 视频标签 video

视频格式

• Ogg

• MP4

• WebM

属性

• 1、src

要播放的视频的 URL

• 2、controls

如果出现该属性，则向用户显示控件，比如播放按钮。

• 3、autoplay

如果出现该属性，则视频在就绪后马上播放。

3.2 音频标签 audio

音频格式

• Ogg

• MP3

• Wav

属性

• 1、src

要播放的音频的 URL。

• 2、controls

如果出现该属性，则向用户显示控件，比如播放按钮

• 3、autoplay

如果出现该属性，则音频在就绪后马上播放