HTML03：列表、表格标签和媒体元素

列表标签

无序列表、有序列表、自定义列表

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
    <title>我的网页</title>

</head>

<body>

<h1>列表标签</h1>

<!--列表标签-->
<!--
ul：无序列表
ol：有序列表
dl：自定义列表
-->
<h2>无序列表</h2>

<ul>
    <li>Java</li>
    <li>Python</li>
    <li>PHP</li>
    <li>Go</li>
    <li>C/C++</li>
</ul>

<h2>有序列表</h2>

<ol>
    <li>Java</li>
    <li>Python</li>
    <li>PHP</li>
    <li>Go</li>
    <li>C/C++</li>
</ol>

<!--自定义列表-->
<!--
dt：列表标题
dd：列表内容
-->
<h2>自定义列表</h2>

<dl>
    <dt>编程语言</dt>

    <dd>Java</dd>
    <dd>Python</dd>
    <dd>PHP</dd>
    <dd>Go</dd>
    <dd>C/C++</dd>
</dl>

</body>

</html>

表格标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
    <title>我的网页</title>

</head>

<body>

<h1>表格标签</h1>

<!--表格标签-->
<!--
边框线：border
-->
<table border="1px">

    <!--行：tr；列：td-->
    <tr>
        <!--跨列：colspan，值为要合并的列数-->
        <!--居中显示：align="center"-->
        <td colspan="2" align="center">编程语言</td>
    </tr>
    <tr>
        <td>Java</td>
        <td>编译型语言</td>
    </tr>
    <tr>
        <td>Python</td>
        <td>解释型语言</td>
    </tr>
    <tr>
        <!--跨行：rowspan，值为要合并的列数-->
        <td rowspan="2">C/C++</td>
        <td>编译型语言</td>
    </tr>
    <tr>
        <td>编译型语言</td>
    </tr>
</table>

</body>

</html>

媒体元素

视频和音频

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
    <title>我的网页</title>

</head>

<body>

<h1>媒体元素</h1>

<h2>视频</h2>

<!--视频-->
<!--
src：视频路径
controls：显示控件
autoplay：自动播放
-->
<video src="./名侦探柯南.mp4" controls autoplay></video>

<h2>音频</h2>

<!--音频-->
<!--
src：音频路径
controls：显示控件
autoplay：自动播放
-->
<audio src="./夜、萤火虫和你.mp3" controls autoplay></audio>

</body>

</html>
posted @ 2022-03-16 22:30  振袖秋枫问红叶  阅读(51)  评论(0)    收藏  举报