1.普通标签
1.1 视频标签
·视频标签:<video>
·标签属性：
src: 规定视频播放的url
controls: 显示播放控件
**width、height:**设置播放器的宽度和高度
1.2 音频标签
·标签：<audio>
·标签属性：
**src:**音乐的url
**controls:**显示播放控件
1.3 空占位符
在html中无论输入多少空格,只会显示1个空格，因此可以用空格占位符 " "
·未使用空格占位符,连续输入3个空格：你 好！
·使用空格占位符,连续3个空格：你 好！
2.盒子模型
2.1 什么是盒子模型？
页面中的所有标签，都可以看成一个盒子，由盒子将页面中的元素包含在一个矩形区域中，通过盒子的视角更方便进行页面布局。
2.2 盒子模型的组成
·content: 内容区域 ·padding: 内边距
·border: 边框 **·margin:**外边区域
2.3 布局标签
实际上，这些盒子属性是用来修饰一些布局标签的，常见的布局标签有 <span>、<div>
<span>: 一行可以显示多个 span标签,height和width 是默认由内容撑开的,不可设置
效果：
<div>: 一行 只能有1个div标签，宽度默认为父元素的宽度，高度由内容撑开,可以设置宽和高
效果：
3.表格标签
3.1 标签及说明
·<table>: 定义表格整体，可以包括多个<tr>
·属性：
·border: 表的边框宽
·width: 表宽 (style中)
·cellspacing: 单元之间的空间(已经不用了，用border-spacing)(style中)·<tr>: 定义表格的 "行" ，可以包括多个td/th
·<td>: 定义表格的 "普通内容单元格"
·<th>: 定义表格的 "表头单元格"
效果展示：
html<table border="5px" style="width: 400px;border-spacing: 0px; text-align: center;"> <tr> <th>姓名</th> <th>学号</th> <th>班级</th> </tr> <tr> <td>张三</td> <td>a123</td> <td>a班</td> </tr> <tr> <td>李四</td> <td>b124</td> <td>b班</td> </tr> </table>
整体代码：
html
<!--正文、盒子，表格-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a1{text-indent: 10px; }
.a2{text-indent: 15px;}
.a3{text-indent: 40px;}
.div1{
width: 400px;
height: 300px;
box-sizing: border-box; /*如果这里没写，那么上面的高和宽指定的是content的，但是这里写了border，这里指的是border以内的大小*/
background-color:antiquewhite;
padding: 10px; /*设置内边距大小*/
border: 5px solid burlywood; /*设置边框的大小及颜色*/
margin: 30px; /*设置外边距*/
}
b{
color: blue;
}
</style>
</head>
<body>
<h1>1.正文部分</h1>
<h2>1.1 视频标签</h2>
<p style="text-indent: 10px;">·视频标签:<b>video</b></p>
<p style="text-indent: 15px;">·标签属性：</p>
<p style="text-indent: 40px;">src:规定视频播放的url</p>
<p style="text-indent: 40px;">controls:显示播放控件</p>
<p style="text-indent: 40px;">width、height:设置播放器的宽度和高度</p>
<video src="xxxx" controls="true" width="600px">反诈视频</video>
<h2>1.2 音频标签</h2>
<p class="a1">·标签：<b>audio</b></p>
<p class="a2">·标签属性：</p>
<p class="a3">src:音乐的url</p>
<p class="a3">controls:显示播放控件</p>
<audio src="xxxx" controls="true"> </audio>
<h2>1.3 空占位符</h2>
<p class="a1">在html中无论输入多少空格,只会显示1个空格，因此可以用空格占位符 <b>"& nbsp"</b></p>
<p class="a2">·未使用空格占位符,连续输入3个空格:你 好！</p>
<p class="a2">·使用空格占位符,连续3个空格:你 好！</p>
<hr>
<h1>2.盒子模型</h1>
<h2>2.1 什么是盒子模型？</h2>
<p class="a2">页面中的所有标签，都可以看成一个盒子，由盒子将页面中的元素包含在一个矩形区域中，通过盒子的视角更方便进行页面布局。</p>
<h2>2.2 盒子模型的组成</h2>
<div class="div1">
<img src="E:\java\java_web\img\box.png" width="350px" height="200px" style="text-align: center;">
<b>·content:</b>内容区域
<b>·padding:</b>内边距<br>
<b>·border:</b>边框
<b>·margin:</b>外边区域
</div>
<h2>2.3 布局标签</h2>
<p class="a1">实际上，这些盒子属性是用来修饰一些布局标签的，常见的布局标签有 <b>《span》</b>、<b>《div》</b></p>
<p class="a2"><b style="color: blue;">《span》:</b> 一行可以显示多个span标签,height和width是默认由内容撑开的,不可设置</p>
<span style="margin-left: 100px;">效果：</span>
<span>span1</span> <span>span2</span>
<p class="a2"><b style="color: blue;">《div》:</b> 一行只能有1个div标签,宽度默认为父元素的宽度，高度由内容撑开,可以设置宽和高</p>
<span style="margin-left: 100px;">div盒子模型的效果见上盒子模型的组成部分</span>
<hr>
<h1>3.表格标签</h1>
<h2>3.1 标签及说明</h2>
<p class="a1"><b>·table:</b> 定义表格整体，可以包括多个<b>tr</b></p>
<p class="a3">·属性：</p>
<div style="margin-left: 80px;">
·border: 表的边框宽度<br>
·style中：<br>
·width: 表宽<br>
·cellspacing: 单元之间的空间(已经不用了，用border-spacing)
</div>
<p class="a1"><b>·tr:</b> 定义表格的 "行"，可以包括多个<b>td/th</b></p>
<p class="a1"><b>·td:</b> 定义表格的 "普通内容单元格"</p>
<p class="a1"><b>·th:</b> 定义表格的 "表头单元格"</p>
<p class="a1">效果展示：</p>
<table border="5px" style="width: 400px;border-spacing: 0px; text-align: center;">
<tr>
<th>姓名</th>
<th>学号</th>
<th>班级</th>
</tr>
<tr>
<td>张三</td>
<td>a123</td>
<td>a班</td>
</tr>
<tr>
<td>李四</td>
<td>b124</td>
<td>b班</td>
</tr>
</table>
</body>
</html>效果：
