HTML----列表、表格和媒体元素

最新推荐文章于 2024-06-12 08:14:53 发布

LouieA

最新推荐文章于 2024-06-12 08:14:53 发布

阅读量52

点赞数

分类专栏： HTML 文章标签： html 媒体前端

本文链接：https://blog.csdn.net/xry12354/article/details/129964010

版权

HTML 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

HTML----列表、表格和媒体元素

列表

什么是列表

列表是信息资源的一种展现形式。它可以使信息结构化和条理化，并以列表的形式展现出来，以便浏览者能更快的获得相应的信息。

列表的分类

无序列表

定义

无序列表是一个没有特定顺序的列表项的集合，也称为项目列表。在无序列表中，各个列表之间属于并列关系，没有先后顺序之分，它们之间以一个项目符号来标记。每个项之间是以实心小圆点点区分的。

#语法结构
<ul>
    <li></li>
    <li></li>
</ul>

无序列表的特性

没有顺序，每个<li>标签独占一行（块元素）
默认<li>标签项前面有个实心小圆点
一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块

有序列表

定义

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序来排列定义。

#语法结构
<ol>
    <li></li>
    <li></li>
</ol>

有序列表的特性

有顺序，每个<li>标签独占一行（块元素）
默认<li>标签项前面有顺序标记
一般用于排序类型的列表，如试卷、问卷选项等

定义列表

定义

是名词和描述的关系，简单来说可以把他比作是总分结构

#语法结构
<dl>
    <dt>总</dt>
    <dd>分</dd>
    
</dl>

示例

<dl>
    <dt>水果</dt>
    <dd>葡萄</dd>
    <dd>苹果</dd>
    <dd>梨</dd>
</dl>

定义列表的特性

没有顺序，每个<dt>标签，<dd>标签独占一行（块元素）
默认没有标记
一般用于一个标题下有一个或多个列表项的情况

列表对比

类型	说明	项目符号
无序列表	以<ul>标签来实现以<li>标签表示列表项	无序列表中的每项都是平级的，没有级别之分，并且列表中的内容一般都是相对简单的标题性质的网页内容
有序列表	以<ol>标签来实现以<li>标签表示列表项	有序列表ol-li一般用于显示带有顺序编号的特定场合
定义列表	以<dl>标签来实现以<li>标签定义列表项以<dd>标签定义内容	定义列表一般适用于带有标题和标题解释性内容的场合

示例

<!DOCTYPE html>
<html>
<head>
    <title>无序列表</title>
</head>
<body>
    <!-- 无序列表 -->
    <!-- 快捷键 ul>li*需要的列表数 -->
    <ul>
        <li>元宵佳节</li>
        <li>花开中国</li>
        <li>感受春天</li>
        <li>茅台立春酒</li>
    </ul>
    <!-- 有序列表 -->
    <!-- 快捷键ol>li*需要的列表数 -->
    <ol>
        <li>元宵佳节</li>
        <li>花开中国</li>
        <li>感受春天</li>
        <li>茅台立春酒</li>
    </ol>
    <!-- 定义列表 -->
    <!-- 快捷键dl>dd*需要的列表数 -->
    <dl>
        <dt>水果</dt>
        <dd>菠萝</dd>
        <dd>梨</dd>
        <dd>草莓</dd>
    </dl>
</body>

</html>

表格

为什么使用表格

简单通用
结构稳定

基本结构

单元格
行
列

基本语法

<table>
    <tr>
         <td>第一个单元格的内容</td>
         <td>第二个单元格的内容</td>
            ...
    </tr>
    <tr>
    	<td>第一个单元格</td>
        <td>第二个单元格</td>
        ...
    </tr>
</table>

表格的跨列

<table>
    <tr>
        #n表示跨的列数和行数
    	<td colspan = "n">(跨列)单元格内容</td>
    </tr>
    <tr>
    	<td rowspan = "n">(跨行)单元格内容</td>
    </tr>
</table>

媒体元素

分类

视频元素

video

语法

<video src = "视频路径" controls></video>
# controls表示提供播放、暂停和音量的控件

自动播放属性

autoplay

<video autoplay>
	<source src = "视频路径" type = "设置视频类型"/>
</video>

音频元素

audio

语法

<audio src = "音频路径" controls></audio>
# 和视频一样，controls负责提供播放、暂停和音量控件

不同浏览器支持的视频和音频格式

HTML5的结构元素

元素名	描述
header	标题头部区域的内容（用于页面或页面中的一块区域）
footer	标记脚底区域的内容（用于整个页面或页面的一块区域）
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助内容

结构元素布局

<iframe>内联框架

作用

使用方法

1. 在被打开的框架上加name属性
<iframe name = "mainFrame" src = "框架路径"/>
2. 在来链接上设置target目标窗口属性为希望显示的框架窗口名
<a href = "框架路径" target = "mainFrame">下边显示第二页</a>

示例

<!DOCTYPE html>
<html>
    <head>
        <title>表格</title>
    </head>
    <body>
        <!-- tr 表示行 td表示单元格 -->
        <table border="1">
            <tr>
                <td colspan="2">学生成绩</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
            </tr>

        </table>
        <!-- 媒体元素 controls 播放控件（播放按钮等） muted autoplay-->
        <video src="" controls muted autoplay></video>
        <!-- 控件 controls mute autoplay -->
        <audio src="" controls muted autoplay loop></audio>
        <!-- 内联框架 把其他的内容引用到自己的也米娜里 -->
        <a href="https://www.bilibili.com/" target="myIframe">B站</a>
        <iframe src="http://www.taobao.com", height="500", width="1100" name = "myIframe" conntrol muted autoplay>淘宝引入</iframe>

    </body>
</html>