HTML 笔记 —— 列表，和快手大佬的技术面谈
[](
)表格
<!--
表格 table
行 tr
列 td
一个 table 里面有三个 tr,说明表格有三行
一个 tr 里面有四个 td,说明一行里面有四列
-->
<table>
<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>
[](
)给列表加上边框
<table border="lpx">
<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>
[](
)跨列
<table border="lpx">
<tr>
<td colspan="4">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>
第一行第一列的内容 1-1 占了第一行的四列
[](
)跨行
<table border="lpx">
<tr>
<td colspan="4">1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<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>
</table>
第二行第一列的内容 2-1 独自占据同一列的两行
[](
)媒体元素
[](
)视频
<!--video 视频
src 里面写相对路径
controls 的作用是让视频在页面上可以播放,如果不加 controls,那么页面是一片空白
autoplay 视频自动播放,但是部分浏览器为了安全考虑,要求用户互动后才开始播放视频
因此可以在 autoplay 后面加上属性 muted 来让视频立即播放
-->
<video src="../resources/video/练习 1.mp4" controls autoplay muted></video>
[](
)音频
<!--audio 音频
src:资源路径
controls : 控制条
autoplay:自动播放
-->
<audio src="../resources/audio/掌声.wav" controls></audio>
[](
)页面结构分析
<!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 内联框架
iframe 内联框架，在一个网页里面嵌套另一个网页
举例，B 站分享视频时候的嵌入代码就是用的内联框架 iframe
< iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"
scrolling=“no” border=“0” frameborder=“no” framespacing=“0” allowfullscreen=“true”>
在 idea 中运行一下试试看
[](
)通过 iframe 内联框架打开之前编写的网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
还未添加个人签名 2021.03.18 加入
还未添加个人简介
评论