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

大标 2022年3月16日22:53:18
评论
25

列表标签

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

<!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>
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin
大标
  • 本文由 发表于 2022年3月16日22:53:18
  • 转载请务必保留本文链接:https://www.tanhuibiao.com/script/html-css/5297.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: