行内元素和块元素
行内元素和块元素
- 块元素
- 无论内容多少，该元素独占一行
- （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>
自定义列表
学科列表JavaPython运维前端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>
