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

一、表格

一、表格的基本结构

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

盒子阴影

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

时间: 2024-10-19 07:20:47

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

HTML之表格和表单

1. 表格和表单的区别:表格多用于页面布局,创建页面的排版样式.表单多用于传输数据获取信息,如:input输入框,单选.多选.下拉选择框. 2. 表格:table. a. 基本样式如下: <table> <caption> table test </caption> <tr> <td rowspan="2">1</td> <td>2</td> </tr> <table/&g

第3天:CSS浮动、定位、表格、表单总结

今天学的是浮动.定位.表格.表单等内容,这些是CSS中最容易混淆的知识,有许多小技巧在写代码过程中需要注意.下面是主要知识点: 一.float浮动1.块元素在一行显示2.内联元素支持宽高3.默认内容撑开宽度4.脱离文档流5.提升层级半层二.clear清除浮动1.加高(扩展性不好)给浮动元素的父级设置同样的高度2.给父级加浮动(页面中所有元素都要加浮动,margin左右失效)3.inline-block(margin左右auto失效)4.空标签加浮动(div )(任何用到的地方都要加).clear

css011 表格和表单的格式化

css011 表格和表单的格式化 一.    让表格专司其职    Html中创建一个三行三列的表格 <table> <caption align="bottom"> table 1:cosmofarmer.com's indoor mower roundup </caption> <colgroup> <col id="brand"></col> <col id="price&

DOM之表格与表单基础分享

我是沐晴,好久不见.马上要放假啦,也是比较的忙. 今天来谈谈表格和表单的基本知识.前期的写的都是比较基础的知识,后期会慢慢增加实例.一起来学习吧. 先看表格,DOM中提供了一些属性,便于我们获取表单节点:tBodies tHead  tFoot  rows(行)  cells(列)(带S的都是获取的是一组元素) var oTab = document.getElementById('tab'); oTab.tBodies[0].rows[1].cells[0] //获取第二行的第一个 注意,写表

【2016.11.27】表格和表单练习

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> table{border-collapse:collapse;} span{color:#f00;} </style> <title>表格和表单</title> </head> <body>

html+css学习笔记 5[表格、表单]

表格 -- 默认样式重置 表格标签:     table 表格     thead 表格头     tbody 表格主体     tfoot 表格尾     tr 表格行     th 元素定义表头     td 元素定义表格单元 表格样式重置 table{border-collapse:collapse;} 单元格间隙合并 th,td{padding:0;}重置单元格默认填充   单元格合并 rowspan  属性规定单元格可横跨的行数.     <td rowspan="2"

HTML1118,表格与表单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

表格和表单的学习知识

刚开始接触java 学习基础知识表格和表单的做法,下面写今天所学知识 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>&l

HTML基础(表格与表单)

1.3.表格与表单 1.3.1.表格 <table></table> 表格 width:宽度.可以用像素或百分比表示.常用960像素. border:边框.常用值0. cellpadding:内容跟单元格边框的边距.常用值0. cellspacing:单元格之间的间距.常用值0. align:对齐方式. bgcolor:背景色. background:背景图片. <tr></tr> 行 align:一行的内容的水平对齐方式 valign:一行的内容的垂直对齐