列表、表格、视频音乐播放、页面布局

最新推荐文章于 2023-12-09 16:12:19 发布

永不被定义

最新推荐文章于 2023-12-09 16:12:19 发布

阅读量234

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_51526948/article/details/125173768

版权

列表基本内容

无序列表：

ul声明一个无序列表

li列表项（li是块元素每个<li>标签独占一行在无序列表中，默认<li>标签项前面有个实心小圆点）

代码如下

<body>
    <h3>热搜</h3>
    <!-- ul声明无序列表 -->
    <ul>
       <li>范冰冰演藏族女孩</li>
        <li>撞死两人后自拍</li>
        <li>诗隆甜蜜出游</li>
        <li>一线城市楼市退烧</li>
        <li>哈哈哈哈哈啊哈哈</li>
    </ul>
</body>

运行效果图如下

有序列表：

ol声明一个有序列表

li列表项（在有序列表中，默认<li>标签项前面有顺序标记）

代码如下

<body>
    <h3>热搜</h3>
    <ol>
        <li>范冰冰演藏族女孩</li>
        <li>撞死两人后自拍</li>
        <li>诗隆甜蜜出游</li>
        <li>一线城市楼市退烧</li>
        <li>哈哈哈哈哈啊哈哈</li>
    </ol>
</body>

运行效果图如下

定义列表：

dl声明一个定义列表，一般用于一个标题下有一个或多个列表项的情况

<dt>和<dd>标签独占一行（块元素），dt一般是定义标题,dd一般是定义内容

代码如下

<body>
    <dl>
        <dt>水果</dt>
        <dd>苹果</dd>
        <dd>香蕉</dd>
        <dd>桃子</dd>
        <dd>橙子</dd>
        <dt>蔬菜</dt>
        <dd>黄瓜</dd>
        <dd>番茄</dd>
        <dd>菠菜</dd>
        <dd>茄子</dd>
    </dl>
</body>

运行效果如下

表格的基本内容

表格的基本形式

table声明一个表格，border表格的边框宽度，标签<tr>表示表格中的列，标签<td>表示表格中的行。

代码如下

    <table border="1">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
    </table>

运行效果如下

表格行列标签的属性：

表格的跨行：使用colspan对列标签进行跨行操作

表格的跨列：使用rowspan对行标签进行跨列操作

代码如下


    <table border="1">
        <tr>
            <!-- 表格的跨行 -->
            <td colspan="4">1+2+3+4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
    </table>

    <table border="1">
        <tr>
            <!-- 表格的跨列 -->
            <td rowspan="2">1+5</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
    </table>

运行效果如下

视频音乐播放的基本内容

视频播放:

video声明一个视频播放，由src传入视频链接，controls控制播放，也可以使用autoplay实现自动播放，loop实现循环播放。

音频播放：

audio声明一个音乐播放，其他同视频播放。

代码实现


    <video src="D:/huashan/qianduan/video/video.mp4" controls></video>

    <audio src="D:/huashan/qianduan/music/music.mp3" controls></audio>

运行效果如下

页面布局基本内容

页面主要分为三个部分

header页面头部

section页面主体

article部分

footer页面尾部

代码如下

<body>
    <header>
        <h2>网页的头部</h2>
    </header>
    <section>
        <h2>网页的主体</h2>
    </section>
    <article>
        <h2>部分</h2>
    </article>
    <footer>
        <h2>网页的尾部</h2>
    </footer>
</body>


修饰代码放在head中：
    <style>
        header,section,article,footer{
            border: 1px solid red;
            background-color: rgb(0, 255, 47);
        }
        header{
            height: 100px;
        }
        section{
            height: 400px;
        }
        footer{
            height: 200px;
        }
    </style>

为了方便看出效果对各部分做了修饰

运行效果如下