列表、表格、媒体元素

最新推荐文章于 2025-09-25 08:00:00 发布

原创最新推荐文章于 2025-09-25 08:00:00 发布 · 295 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#列表、表格

HTML5 专栏收录该内容

6 篇文章

订阅专栏

一、列表

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

HTML5中的列表有3种：无序列表，有序列表，定义列表。

无序列表：

<ul>
    <li>内容。。。</li>
    <li></li>
    <li></li>
    <li></li>
</ul>

注释：ul里面可以加上type属性，ul标签只能嵌套li标签，但是li标签里面可以嵌套任意标签。默认li前面带有实心黑圆点，li标签独占一行，一般用于导航，侧边栏新闻等。

有序列表：

<ol>
    <li>内容，默认是数字1....</li>
    <li></li>
    <li></li>
    <li></li>
</ol>

注释：默认的li标签前面有顺序，每个li都独占一行，一般用于排序列表，试卷，问卷等。

定义列表：

<dl>
    <dt>列表项</dt>
    <dd>列表项的内容</dd>
    <dd></dd>
    <dd></dd>
</dl>

注释：dl是声明定义列表，dt是声明列表项，dd是项的内容。dt,dd都是独占一行。

二、表格

表格特点：简单通用，结构稳定。

基本语法组成：单元格，行，列。

语法：

<table border="1">
        <tr>    <!--tr代表行数，th是单元格标题，字体加粗显示-->
            <th>总页面流量</th>
            <th>共计来访</th>
            <th>会员</th>
            <th>游客</th>
        </tr>
        <tr>
            <td>123478</td>
            <td>839544</td>
            <td>739594</td>
            <td>403835</td>
        </tr>
        <tr>
            <td>123478</td>
            <td>839544</td>
            <td>739594</td>
            <td>403835</td>
        </tr>
        <tr>
            <td>123478</td>
            <td>839544</td>
            <td>739594</td>
            <td>403835</td>
        </tr>
      <tr>
          <td>平均每人浏览</td>
          <td colspan="3" align="center">1.0</td>
      </tr>
    </table>

注释：table是声明表格标签，border是边框属性，tr是行标签，th是单元格标题，td是单元格

表格的跨行、跨列：

<td colsapn ="所跨的列数">跨几列，数字就写几</td>


<td rowspan ="所跨的行数">跨几行，数字就是几</td>

三、媒体元素

<video controls>
        <source src="video/video.mp4"  type="video/video"/>
        <source src="video/video.webm" type="video/video"/>
        你的浏览器不支持video视屏播放
</video>

注释：src是视屏路径，controls是控制播放属性

<audio controls>
    <source src="music/music.mp3"/>
    <source src="music/music.ogg"/>
    你的浏览器不支持播放音频
</audio>