列表 表格 媒体元素学习笔记
行内元素和块元素
-
块元素
- 无论内容多少，该元素独占一行
- （p、h1-h6…）
-
行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一行
- （a、strong、em…）
-
块元素间的呈现有明显的间距，行元素间的呈现会较为紧凑
列表标签
-
什么是列表
- 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷的获得相应信息
-
列表的分类
- 无序列表
- 有序列表
- 自定义列表
无序列表
<!---无序列表
unorder list 简写成 ul
应用范围：导航，侧边栏
-->
<ul>
<li>Java</li>
<li>Python</li>
<li>运维</li>
<li>前端</li>
<li>C/c++</li>
</ul>
有序列表
- Java
- Python
- 运维
- 前端
- C/c++
<!---有序列表
order list 简写成 order list
应用范围：试卷，问答
-->
<ol>
<li>Java</li>
<li>Python</li>
<li>运维</li>
<li>前端</li>
<li>C/c++</li>
</ol>
自定义列表
-
学科列表
- Java
- Python
- 运维
- 前端
- C/c++
<dt> 位置</dt>
<dd> 西安</dd>
<dd> 重庆</dd>
<dd> 新疆</dd>
<img src="" alt="">
<!--自定义列表
dl:标签 ( defintion list 简写成 dl)
dt：列表名称 (defintion title)
dd 列表内容 (defintion description -- 准确的说是定义术描述的意思)
-->
<!---->
<hr>
<dl>
<dt> 学科列表</dt>
<dd> Java</dd>
<dd> Python</dd>
<dd> 运维</dd>
<dd> 前端</dd>
<dd> C/c++</dd>
<dt> 位置</dt>
<dd> 西安</dd>
<dd> 重庆</dd>
<dd> 新疆</dd>
<img src="" alt="">
</dl>
表格标签
打印基本表格
- 为什么使用表格
- 简单通用
- 结构稳定
- 基本结构
- 单元格
- 行
- 列
- 跨行
- 跨列
- 如图是一个三行三列的表格
- 实现跨行跨列操作
<td rowspan="3">2-1</td> 跨行
<td colspan="3">1-1</td> 跨列
测试样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签学习</title>
</head>
<body>
<table border="1px">
<tr>
<!--colspan 跨列-->
<td colspan="6">1-1</td>
</tr>
<tr>
<!--rowspan跨行-->
<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>
</table>
</body>
</html>
媒体标签
- 视频元素：video
- 音频元素：audio
- 关键词学习
- autoplay 自动播放
- controls 控制器 要有控制器才有播放按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素学习</title>
</head>
<body>
<!--音频和视频
src：资源路径
controls：控制条
autoplay ：自动播放
-->
<video src="../resources/video/xxx.mp4" controls autoplay></video>
<audio src="../resources/audio/xxx.mp3" controls autoplay></audio>
</body>
</html>
