码迷,mamicode.com
首页 > Web开发 > 详细

HTML表格和表单以及一些布局所需的用法

时间:2018-09-28 16:29:44      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:三方   指定   range   的区别   控制   标题   不能   radio   常用类   

一、表格

一、表格的基本结构

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格的基本结构</title>
        
</head>
<body>
    <table>
        <caption></caption>
        <thead>
            <tr>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
            </tr>
        </tfoot>
    </table>
</body>
</html>
表格的基本结构

二、表格的常用属性

table
-- border: <integer>:表格外框及单元格外框
-- cellpadding: <integer>:单元格的内边距
-- cellspacing: <integer>:单元格之间的间距,最小为0
-- rules:rows、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">
        table {
            width: 600px;
            height: 400px;
            /*border: 1px solid #333;*/
        }
        td, th {
            /*border: 1px solid #333;*/
        }
    </style>
</head>
<body>
    <!-- table: display: table -->
    <!-- th,td: dispaly: table-cell -->

    <!-- tr: 代表表格中的行 -->
    <!-- td: 代表表格中的单元格 -->

    <!-- 表格的特点 -->
    <!-- 1.表头垂直水平居中 -->
    <!-- 2.单元格垂直居中 -->
    <!-- 3.cellspacing控制单元格之间的间距 -->
    <!-- 4.table的显示特性:内容不超过规定宽高,采用规定的宽高,当内容显示区域的宽高超过规定宽高,表格的宽高由内容显示区域决定 -->
    <!-- 5.rules:边框规则,设置后会合并边框(cellspacing失效): groups rows cols all -->
    <!-- 6.cellpadding:cell的padding设置,对内容进行格式化布局 -->
    <!--  -->
    <!-- 7.cell的width可以规定列宽占比 -->
    <!-- 8.colspan:合并列 -->
    <!-- 9.rowspan:合并行 -->
    <table border="1" cellspacing="0" rules="all" cellpadding="10">
        <caption align="bottom">表格标题</caption>
        <!-- <thead> -->
            <tr>
                <th width="1%">表头</th>
                <th width="3%">表头</th>
                <th width="6%">表头</th>
            </tr>
        <!-- </thead> -->
        <!-- <tbody> -->
            <tr>
                <td colspan="2">单元格</td>
                <!-- <td>单元格</td> -->
                <td rowspan="2">单元格</td>
            </tr>
        <!-- </tbody> -->
        <!-- <tfoot> -->
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <!-- <td>单元格</td> -->
            </tr>
        <!-- </tfoot> -->
    </table>
</body>
</html>
跟以上属性有关的表格演示

三、如何通过表格中的table-cell特点实现水平垂直居中。

技术分享图片
</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中</title>
    <style>
        .sup {
            width: 200px;
            height: 200px;
            display: table-cell;
            vertical-align: middle;
        }
        .sub {
            width: 100px;
            height: 100px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="sub">
        <div class="sup"></div>
    </div>
</body>
</html>
table-cell实现水平垂直居中

二、表单

一、基本结构

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单基本结构</title>
</head>
<body>
    <form>
    <label>输入框</label><input type="text" />    
    <button type="submit">提交</button>
    </form>
</body>
</html>
表单基本结构

二、from标签简介

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

请求方式get与post的区别:

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

  post:将数据以数据包方式提交给祸胎,速度较慢,但安全性高并且没有数据大小限制

了解:前后台交换数据的依据为:表单元素的name与value,name为key,value为value;form标签中action为提交的后台接口(请求的服务器指定路径),method为请求方式。

三、表单常用标签类型

1、input常用类型

text、password、hidden、radio、checkbox、reset、submit

2、文本框

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

3、密文框

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

4、单选框

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

5、多选框

<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"> 棒球

6、下拉选项框

<!--单选-->
<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>

7、多行文本输入

<textarea name="content"></textarea>
<textarea name="content" cols="30" rows="10"></textarea>

8、几种常用的按钮

<!--提交按钮-->
<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>

9、全局属性

<!-- 全局属性设置 -->
<!-- required:value不能为空 -->
<!-----pattern:正则-----------> <input type="text" name="usr" required /> <input type="text" name="name" pattern="\d" />

10、伪类

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类</title>
    <style type="text/css">
    /*获取焦点*/
        .box {
            width: 200px;
            height: 0;
            background-color: red;
            /*display: none;*/
            transition: .5s;
        }
        
        .usr:focus + .box {
            /*display: block;*/
            height: 200px;
        }
    </style>
</head>
<body>
    <form action="" >
        <div class="box"></div>
    </form>
</body>
</html>
获取焦点

三、布局所需的方式

一、音频与视频的插入

 1、音频

- 应用

```html
<audio id="ad" src="media/juhua.mp3" autoplay controls loop>如果浏览器不支持H5新标签audio,此段话将被显示出来</audio>
```

- 属性

| 属性 | 值 | 描述 |
| -------- | ------------------ | -------- |
| autoplay | autoplay | 自动播放 |
| controls | controls | 音频控件 |
| loop | loop | 循环播放 |
| muted | muted | 静音 |
| preload | auto metadata none | 预加载 |
| src | URL | 音频源 |

2、视频

- 应用

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

- 属性

| 属性 | 值 | 描述 |
| -------- | ------------------ | -------- |
| width | pixels | 宽度 |
| height | pixels | 高度 |
| controls | controls | 视频控件 |
| autoplay | autoplay | 自动播放 |
| loop | loop | 循环播放 |
| muted | muted | 静音 |
| poster | URL | 图像占位 |
| src | URL | 视频源 |
| preload | auto metadata none | 预加载 |

| 属性 | 值 | 描述 |
| ---- | --------- | -------- |
| src | URL | 视频源 |
| type | MIME_type | MIME类型 |

二、形变

技术分享图片
<!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>
形变演示

三、简单的浏览器适配

浏览器适配了解如下:

- -o-:Opera浏览器
- -ms-:IE浏览器
- -moz-:Firefox浏览器
- -webkit-:Chrome、Safari、Android浏览器

```css
径向渐变
.box {
width: 200px;
height: 200px;
border-radius: 50%;
background-image: -webkit-radial-gradient(red, yellow);
}

倒影
-webkit-box-reflect: below | above | left | right;

技术分享图片
<!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>
简单了解浏览器适配

四、字体图标与盒子阴影

字体图标

技术分享图片
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>字体图标</title>
    <!-- 使用第三方库 -->
    <!-- <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
    <!-- <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"> -->
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
    <style type="text/css">
        .i1 {
            /*font-size: 30px;*/
            color: orange;
        }
    </style>
</head>
<body>
    <i class="i1 fa fa-spinner fa-4x fa-spin"></i>
</body>
</html>
使用第三方库font-awesome-4.7.0

盒子阴影

技术分享图片
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>盒子阴影</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 350px auto;
            /*盒子阴影*/
            /*x轴偏移 y轴偏移 虚化长度 阴影宽度 阴影颜色*/
            /*多个值之间用,隔开*/
            box-shadow: -310px 0 30px 0px yellow, 310px 0 30px -10px green, 0 -310px 30px -10px orange, 0 310px 30px -10px blue; 
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
盒子阴影

 

HTML表格和表单以及一些布局所需的用法

标签:三方   指定   range   的区别   控制   标题   不能   radio   常用类   

原文地址:https://www.cnblogs.com/ageliu/p/9718927.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!