【学习笔记】HTML基础：列表、表格与媒体元素

一、列表是信息资源的一种展现形式，它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能够快速的获取相应的信息。

　　1.无需列表

　　<ul>

　　　　<li>第一项</li>

　　　　<li>第二项</li>

　　　　<li>第三项</li>

　　</ul>

tips:遵循W3C标准，<ul>标签中只能嵌套<li>标签，不能嵌套其他标签；

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

　　无需列表的特性：

　　　　1.没有顺序，每个<li>标签独占一行；

　　　　2.默认<li>标签项前面有一个实心小圆点（使用list-style:none或list-style-type:none去掉标记）

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

　　2.有序列表

　　<ol>

　　　　<li>第一项</li>

　　　　<li>第二项</li>

　　　　<li>第三项</li>

　　</ol>

　　有序列表的特性：

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

　　　　2.默认<li>标签项前面有顺序标记；

　　　　3.一般用于排序类型的列表，如试卷、问卷选项等。

　　3.定义列表：定义列表是一种很特殊的列表形式，它是标题及列表项的结合

　　<dl>

　　　　<dt>标题一</dt>

　　　　<dd>第一项</dd>

　　　　<dd>第二项</dd>

　　　　<dt>标题二</dt>

　　　　<dd>第一项</dd>

　　</dl>

　　定义列表的特性：

　　　　1.没有顺序，每个<dt>、<dd>标签独占一行

　　　　2.默认没有标记

　　　　3.一般用于（一个标题下有一个或多个列表项）*n的情况

tips：

　　1.无需列表中的没想都是平级的，没有级别之分，并且列表中的内容一般都是相对简单的标题性质的网页内容。

有序列表会依据列表想的顺序进行显示。

　　2.无需列表比有序列表应用得更加广泛，有序列表ol-li一般用于显示带有顺序编号的特定场合

　　3.定义列表一般适用于带有标题和标题解释性内容的场合。

二、表格（块元素）初衷用于显示表格数据

　　简单通用、结构稳定。

　　基本结构：单元格、行、列。

　　1.语法：

<table>

　　<tr>

　　　　<th>第一个单元格的表格标题</th>

　　　　<th>第一个单元格的表格标题</th>

　　　　<th>第一个单元格的表格标题</th>

　　</tr>

　　<tr>

　　　　<td></td>

　　　　<td></td>

　　　　<td></td>

　　</tr>

　　<tr>

　　　　<td></td>

　　　　<td></td>

　　　　<td></td>

　　</tr>

</table>

　　2.表格的跨行：rowspan="所跨的行数";

　　3.表格的跨列：colspan="所跨的列数";

三、媒体元素

　　1.视频元素

　　　　video元素的基本语法：<video src="视频路径" controls="controls">如果浏览器不支持video元素，提示：您的浏览器不支持video标签</video>

　　<video controls autoplay>以默认方式自动播放loop循环播放

　　　　<source src="*.webm"/>

　　　　<source src="*.ogg"/>

　　　　<source src="*.mp4"/>

　　</video>

　　2.音频元素

　　　　audio元素的基本语法：<audio src="音频路径" controls="controls"></audio>

　　<audio controls>

　　　　<source src="*.ogg"/>

　　　　<source src="*.mp3"/>

　　　　<source src="*.wav"/>

　　</audio>

四、HTML5的结构元素

　　1.header：标记头部区域的内容

　　2.footer：标记脚部区域的内容

　　3.section：Web页面中的一块独立区域

　　4.article：独立的文章内容

　　5.aside：相关内容或应用（侧边栏）

　　6.nav：导航类辅助内容

五、<iframe>内联框架：使页面中的部分内容用框架实现，一般用于在页面中引用站外的页面内容，使用方便、灵活。

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

　　*<iframe>属性的应用

　　1.在被打开的框架上加上name属性

　　<iframe name="mainFrame" src="subFrame.html"/>

　　2.在超链接上设置target目标窗口为希望显示的框架窗口名

　　<a href="subFrame.html" target="mainFrame">文字或者图片</a>