HTML学习-表格、视频和音频、页面结构、iframe内联架构 2022-1-18

表格

优点:简单通用、结构稳定
基本结构:

  • 单元格
  • 跨行
  • 跨列

cellpadding:文字与表格之间的距离
cellspacing:单元格和单元格之间的距离,一般设置为0
align:center

表格标签可以总体分为两部分

表格标题 表格主题 第一行表格也可以自动加粗居中,可以使用标签:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--
表格:table
表格:border
行:tr  row
列:td
-->
<table border="1px">
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述
colspan:跨列
4代表跨几列

<tr>
        <!--colspan:跨列-->
        <td colspan="4">1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>

在这里插入图片描述

<tr>
        <!--colspan:跨列-->
        <td colspan="4">1-1</td>
        
    </tr>

在这里插入图片描述

colspan:跨行

2代表跨几行

<tr>
        <!--colspan:跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>

在这里插入图片描述
现在存在表格不齐问题,最后一个3-4已经被挤出去,所以需要把3-4格子去除

<tr>
        <!--colspan:跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>

在这里插入图片描述
练习:
在这里插入图片描述
提示:这个表格居中使用的代码

<td colspan="3" align="center">学生成绩</td>

视频和音频

视频元素:video

在资源文件里面创建一个存放视频的文件夹
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
<!--视频和音频
src:资源路径
controls:控制开关(出现对播放视频的进度条、音量的控制)
-->
<!--autoplay:自动播放-->
<video src="../resourse/video/1.mp4" controls autoplay></video>
</body>
</html>
controls控制开关所展示的效果

在这里插入图片描述

但是在我的电脑中出现一个问题,就是直接使用 autoplay是不可以自动播放的,所以有另外一种解决办法。

<video muted src="" autoplay loop></video>
在我的代码中就更改为
<video muted src="../resourse/video/1.mp4" controls autoplay loop></video>

因此改为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
<!--视频和音频
src:资源路径
controls:控制开关(出现对播放视频的进度条、音量的控制)
-->
<!--autoplay:自动播放-->

<video muted src="../resourse/video/1.mp4" controls autoplay loop></video>
<!--<video muted src="" autoplay loop></video>-->

<!--音频

-->
</body>
</html>

音频元素:audio

在资源文件里面创建一个存放音频的文件夹
在这里插入图片描述
音频目前没有实现自动播放功能,后期继续补充

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
<!--视频和音频
src:资源路径
controls:控制开关(出现对播放视频的进度条、音量的控制)
-->
<!--autoplay:自动播放-->

<audio src="../resourse/audio/1.mp3" controls></audio>

</body>
</html>

在这里插入图片描述

页面结构分析

header:标题头部区域的内容(用于页面或月面重的一块区域)
footer:标记脚部区域的内容(用于整个页面或页面的一块区域)
section:Web页面中的一块独立区域
article:独立的文章内容
aside:相关内容或应用(常用语侧边栏)
nav:导航类辅助内容

<!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>
<iframe src="//player.bilibili.com/player.html?aid=461774290&bvid=BV1DL411H7SV&cid=375181480&page=1"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
使用iframe

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架学习</title>
</head>
<body>
    <iframe src="https://www.hao123.com/" frameborder="0" height="800" width="1000"></iframe>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架学习</title>
</head>
<body>
<!--iframe内联框架
src:地址
w-h:高度宽度
-->
<iframe src="" name="hello" frameborder="0" height="800" width="1000"></iframe>
<a href="1.我的第一个网页.html" target="hello">点击跳转</a>

</body>
</html>

在这里插入图片描述

列表

有序列表

无需列表
自定义列表
![在这里插入图片描述](https://img-blog.csdnimg.cn/3d3b191dcffb4cf4b75976c79719db44.png)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值