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

前端网页学习(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 #标题方位



垂直居中


<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>
    

音频 视频

音频


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


<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>

浏览器适配


<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>
	
	
	
	
	<div class="box">123div>
body>
html>

以上为本次学习内容

你可能感兴趣的:(前端网页学习 Day50(表格 表单 音视频 形变 浏览器适配))