前端网页学习 Day50(表格表单音视频形变浏览器适配)

本文链接：https://blog.csdn.net/sql121407/article/details/82890037

前端网页学习(html)DAY50今日内容:表格表单音频视频形变浏览器适配表格表格tableth:代表表头tr: 代表表格中的行td:代表表格中的单元格表格基本语法<table border="1" cellspacing="0" rules="all" cellpadding="10"> <caption align="botto

摘要由CSDN通过智能技术生成

前端网页学习(html)

DAY50

今日内容:

表格

表单

音频视频

形变

浏览器适配

表格

表格

table

th:代表表头

tr: 代表表格中的行

td:代表表格中的单元格

表格基本语法

<table border="1" cellspacing="0" rules="all" cellpadding="10">
    <caption align="bottom">表格标题</caption>
    <tr>
        <th width="1%">表头</th>
        <th width="3%">表头</th>
        <th width="6%">表头</th>
    </tr>
    <tr>
        <td colspan="2">单元格</td>
        <td rowspan="2">单元格</td>
    </tr>
    <tr>
        <td>单元格</td>
        <td>单元格</td>
    </tr>
</table>

表格常用属性

table
	border:<integer> #表格外边框以及单元格外边框
	cellpadding:<integer> #单元格内边距
	cellspacing:<integer> #单元格之间的间距,最小为0
	rules:row | cols | groups | all #边框规则

td
    rowspan:<integer> #合并行
   	colspan:<integer> #合并列
    width:<integer>% #列宽占比
        
caption
    align:top | bottom #标题方位

垂直居中

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>垂直居中</title>
	<style type="text/css">
		.sup {
			width: 200px;
			height: 200px;
			background-color: red;
			/*可以控制内容/子级垂直排列方式*/
			display: table-cell;
			/*设置垂直排列方式*/
			vertical-align: middle;
		}
		.sub {
			width: 100px;
			/*height: 100px;*/
			background-color: orange;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<div class="sup">
		<div class="sub">多行文本多行文本多行文本多行文本多行文本</div>
	</div>
</body>
</html>

表单

表单:form

作用:将前台用户数据通过get或post请求方式提交给后台,并在新页面标签中接收后台响应

请求方式:

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

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

基本结构

action:提交的后台接口(请求的服务器指定路径)

method:请求方式(get | post)

<form action="" method="get">
    <label>输入框</label><input type="text" />
    <button type="submit">
		提交        
    </button>
</form>

input常用类型

text password hidden radio checkbox reset submit

文本框

<input type="text" name="user" placeholder="请输入用户名" size="10" maxlength="15" />

密文框

<input type="password" name="pwd" placeholder="请输入密码"  maxlength="12" />

单选框

<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女

复选框

<input type="checkbox" name="hobby" value="basketball"> 篮球
<input type="checkbox" name="hobby" value="football"> 足球
<input type="checkbox" name="hobby" value="ping-pong" checked> 乒乓球 
<input type="checkbox" name="hobby" value="baseball"> 棒球

下拉选项

<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 name="content"></textarea>
<textarea name="content" cols="30" rows="10"></textarea>

按钮

<!--提交按钮-->
<input type="submit" value="提交">
<button>提交</button>
<button type="submit">提交</button>

<!--重置按钮-->
<input type="reset" value="重置">
<button type="reset">重置</button>

<!--普通按钮-->
<input type="button" value="按钮">
<button type="button">按钮</button>

伪类

<style type="text/css">
    .box{
        width: 200px;
        height: 0;
        background-color: red;
        transition: .5s;
    }

    .uesr:hover + .box {
        height: 200px;
    }

</style>
<form action="">
    <input type="text" class="uesr" />
    <div class="box"></div>
</form>

音频视频

音频

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>音频</title>
</head>
<body>
	<audio src="media/juhua.mp3" autoplay controls loop preload="auto">当前浏览器不支持audio,该文本便会显示</audio>
</body>
</html>

视频

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>视频</title>
</head>
<body>
	<video width="672" height="378" controls poster="img/poster.png">
		<source src="media/HTML5的前世今生.mp4" type="video/mp4"></source>
		当前浏览器不支持video直接播放
	</video>
</body>
</html>

形变

形变: transform: rotateX | rotateY | rotateZ

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>形变</title>
	<style type="text/css">
		div {
			width: 150px;
			height: 150px;
			background-color: red;
			margin: 10px auto;
			transition: 3s;
		}
		/*旋转形变:旋转的是角度 deg*/
		.d1:hover {
			/*transform: rotateX(3600deg);*/
			/*transform: rotateY(3600deg);*/
			/*transform: rotateZ(3600deg);*/
			transform: rotateX(3600deg) rotateY(3600deg) rotateZ(3600deg);
		}
		/*偏移形变:偏移的是距离 px*/
		.d2:hover {
			/*transform: translateX(200px);*/
			/*transform: translateY(200px);*/
			transform: translateX(200px) translateY(200px);
		}
		/*缩放形变:缩放的是比例*/
		.d3:hover {
			transform: scale(2, 0.5);
		}
		.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>

浏览器适配

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>浏览器适配</title>
	<style type="text/css">
		.box {
		    width: 200px;
		    height: 200px;
		    border-radius: 50%;
			font: 900 80px/200px 'STSong';
			text-align: center;

		    /*径向渐变*/
		    /*background-image: radial-gradient(red, yellow, green);*/
		    background-image: -webkit-radial-gradient(left, red, yellow, green);

		    /*倒影*/
		    /*below | above | left | right*/
		    -webkit-box-reflect: below 2px;
		}
	</style>
</head>
<body>
	<!-- -o- Opera -->
	<!-- -ms- IE -->
	<!-- -moz- FireFox -->
	<!-- -webkit- Safari Chrome 国内主流浏览器 Android内置浏览器 -->
	<div class="box">123</div>
</body>
</html>