DAY50-前端入门-表格、表单、视频音频、形变、盒子阴影

一、表格

概念

表格由 table标签来定义。每个表格均有若干行（由 tr 标签定义），每行被分割为若干单元格（由 td 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1" cellspacing="0" rules="all">
		<tr>
			<th>表头</th>
			<th>表头</th>
			<th>表头</th>
		</tr>
		<tr>
			<td>单元格</td>
			<td>单元格</td>
			<td>单元格</td>
		</tr>
		<tr>
			<td>单元格</td>
			<td>单元格</td>
			<td>单元格</td>
		</tr>
	</table>

表格的特点

1.表头垂直水平居中
2.单元格垂直居中
3.cellspacing：控制单元格间距
4.table的显示特性：内容不超过规定宽高，采用规定的宽高，当内容显示区域的宽高超过规定宽高，表格的宽高由内容显示区域决定
5.rules：边宽规则，设置后会合并边框
6.cellpaddingL:cell的padding设置，对内容进行
7.cell的width可以规定列宽占比
8.colspan：合并列
9.rowspan：合并行

利用表格特性做到垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>	</title>
	<style>	
		.sup{
			 200px;
			height: 200px;
			background-color: red;
			/*控制子级垂直排列方式*/
			display: table-cell;
			/*设置垂直排列方式*/
			vertical-align: middle;
		}
		.sub{
			 100px;
			height: 100px;
			background-color: orange;
		}
	</style>
</head>
<body>
	<div class="sup">
		<div class="sub">	</div>
	</div>
</body>
</html>

二、表单

概念

表单用于收集用户输入。将前台用户数据通过get或post请求方式提交给后台,并在新页面标签中接收后台相应

请求方式:method=get/post

get:将数据以url链接拼接方式提交给后台,速度快,但安全性低,且有数据大小限制

post:将数据以数据包方式提交给后台,速度较慢,但安全性高,且无数据大小限制

语法

<form action="请求的服务器指定路径" method="请求方式">
    <!-- 提交给后台的就是表单元素的name=value -->
</form>

常用表单元素

input 元素

input 元素是最重要的表单元素。根据不同的 type 属性。元素有很多形态

text：明文输入框

<input type="text" name="" placeholder="默认显示" size="文字大小" maxlength="最大限制">

password：密文输入框,输入的内容变成了星号

<input type="password" name="" placeholder="默认显示" maxlength="最大限制">

radio：单选框

<input type="radio" name="" value="" checked(默认选中)>

checkbox：复选框

<input type="checkbox" name="" value=""checked(默认选中)>

reset：重置按钮

<input type="reset" value="自定义重置" />

submit：提交按钮

<input type="submit" value="请求">

button：普通按钮

<input type="button" value="普通按钮" onclick="alert('你丫真帅')">

select 元素（下拉列表）

单选下拉框:name由select设置,value由option提供,selected默认项

<select name="major">
		    <option value="computer">计算机</option>
		    <option value="archaeology">考古学</option>
		    <option value="medicine" selected(默认选中)>医学</option>
		    <option value="Architecture">建筑学</option>
		    <option value="Biology">生物学</option>
</select>

多选下拉框

<select name="major" multiple>
		    <option value="computer">计算机</option>
		    <option value="archaeology">考古学</option>
		    <option value="medicine">医学</option>
		    <option value="Architecture">建筑学</option>
		    <option value="Biology">生物学</option>
</select>

textarea 元素

textarea 元素定义多行输入字段

<textarea name="content" cols="列" rows="行"></textarea>

全局设置

required：value不能为空

三、音频

语法

<audio src="media/juhua.mp3" autoplay controls loop preload="auto">当前浏览器不支持audio,该文本便会显示
</audio>

属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	规定视频输出应该被静音。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的音频的 URL。

四、视频

语法

<video width="672" height="378" controls poster="img/poster.png">
		<source src="media/HTML5的前世今生.mp4" type="video/mp4"></source>
		当前浏览器不支持video直接播放
</video>

属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当视频结束时重新开始播放。
muted	muted	规定视频输出应该被静音。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的视频的 URL。
eight	pixels	设置视频播放器的高度。
width	pixels	设置视频播放器的宽度。
poster	URL	规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。

五、形变

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			150px;
			height: 150px;
			background-color: red;
			margin: 10px auto;
			transition: 3s;
		}
		/*旋转形变*/
		.d1:hover{
			/*transform: rotateX(3600deg);
			transform: rotateY(3600deg);
			transform: rotateZ(3600deg);*/
		}
		/*偏移变形*/
		.d2:hover{
			transform: translateX(200px);
			transform: translateY(200px);
			transform: translateZ(200px);
		}
		/*缩放形变*/
		.d3:hover{
			transform: scale(2);
			transform: scale(2,1);
		}
		/*混合缩放*/
		.d4:hover{
			/*transform: translateX(200px) rotateZ(3600deg);*/
			transform: rotateZ(3600deg) translateX(200px) ;
		}
	</style>
</head>
<body>
	<div class="d1"></div>
	<div class="d2"></div>
	<div class="d3"></div>
	<div class="d4"></div>

</body>
</html>

六、盒子阴影

向盒子添加一个或多个阴影。多个用逗号隔开

语法

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
spread	可选。阴影的尺寸。
blur	可选。模糊距离。
color	可选。阴影的颜色。请参阅 CSS 颜色值。
inset	可选。将外部阴影 (outset) 改为内部阴影。