HTML5四：列表、表格、媒体元素

最新推荐文章于 2024-10-29 14:54:04 发布

嘵奇

最新推荐文章于 2024-10-29 14:54:04 发布

阅读量116

点赞数

分类专栏： # CSS 文章标签： html

本文链接：https://blog.csdn.net/qq479850581/article/details/108628912

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

列表

什么是列表

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息
列表的分类
无序列表
有序列表
定义列表

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--有序列表-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>C++</li>
    <li>C</li>
</ol>
<!--无序列表-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>C++</li>
    <li>C</li>
</ul>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
-->
<dl>
    <dt>名称</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>C++</dd>
    <dd>C</dd>
</dl>
</body>
</html>

表格

为什么使用表格
简单通用
结构稳定
基本结构
单元格
行
列
跨行
跨列
代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--表格table
行：tr
列：td
-->
<table border="1px">
    <tr>
        <td>1--3</td>
        <td>1--2</td>
        <td>1--2</td>
    </tr>
    <tr>
        <td>2--1</td>
        <td>2--2</td>
        <td>2--3</td>
    </tr>
    <tr>
        <td>3--1</td>
        <td>3--2</td>
        <td>3--3</td>
    </tr>
</table>
<table border="1px">
<!--    跨列：colspan-->
    <tr>
        <td colspan="3">1-1</td>
    </tr>
    <tr>
<!--        跨行：rowspan-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>
<table border="1px">
    <tr>
        <td colspan="3">学生成绩</td>
    </tr>
    <tr>
        <td rowspan="2">小明</td>
        <td>语文</td>
        <td>50</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>60</td>
    </tr>
    <tr>
        <td rowspan="2">小强</td>
        <td>语文</td>
        <td>80</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>60</td>
    </tr>
</table>
</body>
</html>

媒体元素

视频和音频

视频元素：video
音频元素：audio
代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
<!--视频
src:路径
controls:控制条
autoplay:自动播放-->
<video src="../resources/video/test.mp4" controls autoplay></video>
<!--音频-->
<audio src="../resources/audio/test.mp3" controls autoplay></audio>
</body>
</html>

页面结构分析

在这里插入图片描述
代码演示;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构</title>
</head>
<body>
<header>
    <h2>头</h2>
</header>
<section>
    <h2>网页主体</h2>
</section>
<footer>
    <h2>网页脚</h2>
</footer>
</body>
</html>

iframe内联框架

在这里插入图片描述
代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<!--
src:地址
w-h：宽度-高度
-->
<iframe src="" name="hello" frameborder="0" width="800px" height="600px"></iframe>
<a href="html02.html" target="hello">点击跳转</a>
</body>
</html>