JavaWeb02——基础标签及样式（黑马视频笔记）
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>: 定义表格的 “表头单元格”
效果展示：
<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>
整体代码：
<!--正文、盒子，表格--><!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>效果：
