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

奋怒的少年猪猪

已于 2023-09-06 11:05:36 修改

阅读量32

点赞数

分类专栏： HTML5基础和CSS基础文章标签： html5

于 2023-05-30 08:50:00 首次发布

本文链接：https://blog.csdn.net/ddd_22/article/details/130940658

版权

HTML5基础和CSS基础专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、列表

无序列表

<!--描述：块元素-无序列表 
<ul></ul>声明无序列表，<li></li>展示列表里的内容
默认:黑色实心小圆点-->       
        <ul>
            <li>第一行</li>
            <li>第二行</li>
            <li>第三行</li>
        </ul>

在这里插入图片描述

有序列表

<!--描述：块元素-有序列表
<ol></ol>声明有序列表，<li></li>展示列表里的内容
默认:数字123-->
         <h3>有序列表</h3>
        <ol>
            <li>第一行</li>
            <li>第二行</li>
            <li>第三行</li>
        </ol>

在这里插入图片描述

定义列表

<!--
描述：块元素-定义列表
<dl></dl>声明定义列表,<dt></dt>(标题)<dd></dd>(内容)可以多个-->   
        <dl>
            <dt>定义列表的标题一</dt>
            <dt>定义列表的标题二</dt>
            <dd>定义列表的内容一</dd>
            <dd>定义列表的内容二</dd>
            <dd>定义列表的内容三</dd>
        </dl>

二、表格

<!--描述：表格
<table></table>定义表格,<tr></tr>定义行，<td></td>单元格
rowspan="所跨的行数"，上下合并
colspan="所跨的列数"，左右合并 -->
        <table border="1" width="50%">
            <caption>表格的标题</caption>
            <tr>
                <th>单元格里的标题一</th>
                <th>单元格里的标题二</th>
                <th>单元格里的标题三</th>
            </tr>
            <tr>
                <td>一个单元格</td>
                <td>二个单元格</td>
                <td><img src="#" alt="三个单元格"/></td>
            </tr>
            <tr>
                <td>一个单元格</td>
                <td>二个单元格</td>
                <td><a href="#">三个单元格</a></td>
            </tr>
            <tr>
                <td rowspan="2">一个单元格</td>
                <td>二个单元格</td>
                <td>三个单元格</td>
            </tr>
            <tr>
                <td colspan="2">二个单元格</td>
            </tr>
        </table>

三、媒体元素

音频

<!--描述：<audio></audio>音频，已淘汰
controls:提供播放、暂停和音量的控件,html5支持true和false，true直接写，没有则不能播放
loop:循环播放
<source></source>或者<source/>:浏览器应该选择它所支持的文件-->
    <h3>音频</h3>
        <audio  controls loop>
        <source src="音乐路径"/>
    </audio>

在这里插入图片描述

主流浏览器支持的音频格式

在这里插入图片描述

视频

在这里插入图片描述

<!--描述：<video></video>视频，已淘汰
controls:提供播放、暂停和音量的控件,html5支持true和false，true直接写，没有则不能播放
autoplay:自动播放
<source></source>或者<source/>:浏览器应该选择它所支持的文件-->
    <h3>视频</h3>
        <video controls autoplay>
        <source src="video/vedio.avi"/>
        <source src="video/vedio.mp4"/>
        <source src="video/vedio.webm"/>
    </video>

主流浏览器支持的视频格式

在这里插入图片描述

四、页面布局

HTML5的结构元素

在这里插入图片描述

五、内联框架(已淘汰)

<h1>音乐排行榜</h1>
<ol>
<li><a href="#">潇洒走一回</a><img src="img/pic1.png"/></li>
<li><a href="#">偏偏喜欢你</a><img src="img/pic1.png"/></li>
<li><a href="#">酒干倘卖无</a><img src="img/pic1.png"/></li>
<li><a href="#">不说再见</a><img src="img/pic1.png"/></li>
<li><a href="#">舍不得你</a><img src="img/pic1.png"/></li>
<li><a href="#">请跟我来</a><img src="img/pic1.png"/></li>
</ol>
<!--描述：行内元素-内联框架(已淘汰):在网页中显示另一个网页
        <iframe>属性（实现页面间的相互跳转）
        ①在被打开的框架上加name属性
    ②在超链接上设置target目标窗口属性为希望显示的框架窗口名
-->
<a href="列表.html" target="abc">列表</a>
<iframe  name="abc" src="内联框架.html" width="500px" height="500px">
</iframe>