陈占占
陈占占
Published on 2018-03-28 / 21 Visits
0
0

第二章 列表、表格与媒体元素

列表:

列表就是信息资源的一种展示形式。

列表的分类:无序列表、有序列表、定义列表

无序列表语法:

<ul>

<li>内容</li>

</ul>

无序列表的特性

没有顺序,每个<li>标签独占一行(块元素)

默认<li>标签项前面有个实心小圆点

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

有序列表语法:

<ol>

<li>内容</li>

</ol>

有序列表的特性

有顺序,每个<li>标签独占一行(块元素)

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

一般用于排序类型的列表,如试卷、问卷选项等

定义列表语法:

<dl>(声明定义列表)

<dt></dt>(声明列表项)

<dd></dd>(声明列表内容)

</dl>

定义列表的特性

没有顺序,每个<dt>标签、<dd>标签独占一行(块元素)

默认没有标记

一般用于一个标题下有一个或多个列表项的情况

表格:

跨列:colspan="横向跨的单元格数"

跨行:rowspan="纵向跨的单元格数"

表格语法:

<table>(表格标签)

<tr>(行标签)

<td></td>(单元格标签)

<td></td>

</tr>

<tr>

<td></td>

<td></td>

</tr>

</table>

表格的跨列

<table>(表格标签)

<tr>(行标签)

<td (rowspan)colspan="n"(所跨的列数)></td>(单元格标签)

<td></td>

</tr>

<tr>

<td></td>

<td></td>

</tr>

</table>

媒体元素:

视频元素(video)、音频元素(audio)

-----------------------------------------

视频元素(video):

<!--controls(video播放视频) autoplay(自动播放) controls(提供播放、暂停和音量的控件)-->

<video controls="controls">

<source src="video/video.webm" type="video/webm"/>

<source src="video/video.mp4" type="video/mp4"/>

</video>

音频元素(audio):

<!--controls(提供播放、暂停和音量的控件)-->

<audio controls="controls">

<source src="video/music.mp3" type="audio/mp3"/>

<source src="video/music.ogg" type="audio/ogg"/>

</audio>

----------------------------------------

HTML5的结构元素:(header、section、article、nav、aside、footer)

<!--article(独立的文章内容) aside(相关内容或应用-常用于侧边栏) nav()导航类辅助内容-->

<header>

<h1>网页头部</h1>

</header>

<section>

<h1>网页主体部分</h1>

</section>

<footer>

<h1>网页底部</h1>

</footer>


Comment