表格
优点:简单通用、结构稳定
基本结构:
- 单元格
- 行
- 列
- 跨行
- 跨列
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>
列表
有序列表