一.table标签

　　作用:定义html表格.一个table标签元素至少包含 thead(表头),tbody(表主题),还可以有tfoot(表底部)

　　html表格游table元素及一个或者多个tr,th,td元素组成.

　　tr元素定义表格行,th元素定义表头,td元素定义单元格.

　　此外,表格还可以进行列和行的合并(类似于Excel表格中的合并单元格)

　　rowspan:合并行(竖着合并),例如合并A1:A3这3行合并为一个单元格

　　colspan:合并列(横着合并),例如合并A1:E1这5列合并为一个横着的长单元格

小练习:利用html的table标签创建下面的表格.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>table小练习</title>

</head>

<body>

  <!-- <div>

     <span>与行内元素展示的标签<span>

     <span>与行内元素展示的标签<span>

     <img src="./homesmall.png" alt="金融量化分析" style="width:200px;height:200px">

     <img src="./homesmall2.png" alt="人工智能实战"  style="width: 200px;height: 200px">

 </div> -->

  <p>

      <table border="1" cellspacing="0">

            <!-- 表格头部信息(标题) -->

            <thead>

                <tr>

                  <th colspan="3">

                    table的一些属性

                  </th>

                </tr>

            </thead>

            <!-- 表格主题 -->

            <tbody>

              <tr>

                <td>属性</td>

                <td>值</td>

                <td>描述</td>

              </tr>

              <tr>

                <td>border</td>

                <td>pixels</td>

                <td>定义表格的宽度.</td>

              </tr>

              <tr>

                <td>cellspacing</td>

                <td>pixels%</td>

                <td>规定单元格之间的间隔.</td>

              </tr>

              <tr>

                <td>summary</td>

                <td>text</td>

                <td>表格摘要信息(不会显示在浏览器上)</td>

              </tr>

            </tbody>

            <tfoot>

              <tr>

                <td colspan="3">这是一个表格的例子.</td>

              </tr>

            </tfoot>

      </table>

  </p>

</body>

</html>

小练习答案

二.form表单标签

　　定义:用于为用户输入创建 HTML 表单.

　　作用:向服务端传送数据. 　　

　　表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
　　表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

2.1常用的属性:

2.2 常用的控件:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>from表单练习</title>

</head>

<body>

    <form action="https://www.baidu.com"method="get">

        <div>

            <label for="user">用户名:</label>

            <input type="text" name="username" id="user" placeholder="请输入用户名">

        </div>

        <div>

            <label for="password">密码:</label>

            <input type="password"name="password" id="password" placeholder="输入密码">

        </div>

        <div>

            性别:

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

            <input type="radio"name="sex" value="女">女

        </div>

        <div>

            爱好:

            <input type="checkbox" name="check" value="游泳"checked=    "">游泳

            <input type="checkbox" name="check" value="打球">打球

            <input type="checkbox" name="check" value="跑步">跑步

            <input type="checkbox" name="check" value="骑行">骑行

        </div>

        <!-- 上传文件 -->

        <div>

            <input type="file" name="testfile">

        </div>

        <div>

            自我介绍:

            <textarea name="jieshao" id="" cols="30" rows="10" placeholder="自我介绍"></textarea>

        </div>

        <div>

            本人籍贯:

            <!-- selected表示默认选中项,size大于1,表示滚动式列表框 multiple=""表示可以被多选(针对滚动列表框)-->

            <select name="jiguan" id="">

                <option value="北京">北京</option>

                <option value="上海" selected="">上海</option>

                <option value="广州">广州</option>

                <option value="北京">深圳</option>

                <option value="东莞">东莞</option>

            </select>

        </div>

        <div>

            意向城市:

            <select name="city" id="" size="3" multiple="">

                <option value="郑州">郑州</option>

                <option value="北京"selected="">北京</option>

                <option value="苏州">苏州</option>

                <option value="杭州">杭州</option>

                <option value="上海">上海</option>

            </select>

        </div>

        <div>

            <!-- type="button"仅仅只是一个按钮类型,和form表单没有任何关系. -->

            <input type="button"name="btn" value="提交">

            <!-- 想要提交表单信息,type应该设置为"submit" -->

            <input type="submit" name="btn" value="submit">

        </div>

    </form>

</body>

</html>

form总结:

Unit 2.前端之html--table(表格),form(表单)标签的更多相关文章

  1. HTML table、form表单标签的介绍

    1. <table>标签 1.1说明: 在HTML 中定义表格布局. 1.2格式: <table> <caption></caption> <tr ...

  2. 【HTML】--- 列表、表格、form表单标签

    Html常用标签(2) 上篇博客讲了些常用的html标签 :[HTML]---常用标签(1) 这里主要讲 列表.表格标签和 form表单标签. 一.列表.表格标签 1.列表标签 概念 把内容以列表的形 ...

  3. HTML之form表单标签的学习

    from表单 表示 <form>form表单域</form> 作用 收集并替提交用户数据给指定服务器 属性 action:收集的数据的提交地址(也就是URL) method:收 ...

  4. html5之table嵌入form表单布局（务必注意：table标签必须在form表单内部，不能再form表单外部！）

    切记:用table标签来布局form表单元素,table标签必须放在form表单内部,否则可能会出现各种bug 原文地址:https://blog.csdn.net/weixin_43343144/a ...

  5. 前端笔记：React的form表单全部置空或者某个操作框置空的做法

    1.全部置空的做法,一般在弹出框关闭后,需要重置该form所有表单: this.props.form.resetFields(); 2.针对某个操作框置空的做法 例如,form表单里有一个部门和一个张 ...

  6. 前端 HTML form表单标签 input标签 type属性 file 上传文件

     加上上传文件功能 input type='file' - 依赖form表单里一个属性 enctype="multipart/form-data" 加上这个属性表示把你上次文件一点 ...

  7. [原创]java WEB学习笔记62：Struts2学习之路--表单标签:form,表单标签的属性，textfield, password, hidden，submit ，textarea ，checkbox ，list, listKey 和 listValue 属性，select ，optiongroup ，checkboxlist

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  8. [转]SpringMVC<from:form>表单标签和<input>表单标签简介

    原文地址:https://blog.csdn.net/hp_yangpeng/article/details/51906654 在使用SpringMVC的时候我们可以使用Spring封装的一系列表单标 ...

  9. HTML的<form>表单标签

    表单 HTML 表单用于搜集不同类型的用户输入. ㈠Form标签 ⑴form标签简介 在HTML中,如果创建一个表单,就把各种表单标签放在<form></form>标签内部.我 ...

随机推荐

  1. [Android] ScrollView can host only one direct child

    android 采用ScrollView布局时出现异常:ScrollView can host only one direct child.主要是ScrollView内部只能有一个子元素,即不能并列两 ...

  2. UVA11584-Partitioning by Palindromes(动态规划基础)

    Problem UVA11584-Partitioning by Palindromes Accept: 1326  Submit: 7151Time Limit: 3000 mSec Problem ...

  3. P2089 烤鸡（搜索简单题）

    题意:就是x分别是1到3的未知数,求x1+x2+x3.....+x10=n的方案数和输出每种方案.每种方案还必须按字典序输出 思路:就是简单的构建搜索树+约束条件啊,其实数据范围一点都不大,所以,我第 ...

  4. P2708 硬币翻转（简单模拟）

    题意:弱鸡,其实题意是1到i都变化.然后把所有的硬币都变到正面. 简单的模拟: 思路:本质就是记录相邻字符的有几组不同,比如11010,则就有3组不同,但是,这样变化出来的字符串是00000,所以需要 ...

  5. day04 if判断、while条件循环、for迭代器循环部分使用举例

    一:if判断 1.成绩>=90,那么:优秀         如果成绩>=80且<90,那么:良好         如果成绩>=70且<80,那么:普通         其 ...

  6. 微信硬件平台（八） 3-0ESP8266向微信服务器请求设备绑定的用户

    1调试助手 请求URL: https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=自己微信ID&a ...

  7. i春秋-百度杯十月场-fuzzing

    1. 打开链接,提示 show me key,抓包,传值key=1,GET请求没有用,而POST请求有返回. 2.将md5值直接拿去解密,得到key=ichunqiu105    OK,进入下一步. ...

  8. 用return关键字实现1——100累加求和，返回总和并接收输出

    package com.Summer_0419.cn; /** * @author Summer * 用return关键字实现1——100累加求和,返回总和并接收输出 */ public class ...

  9. bootstrapvalidator 用法

    1.引入js.css 2.用法 API:http://bootstrapvalidator.votintsev.ru/api/ 参考博客:https://blog.csdn.net/u01393846 ...

  10. CF960G Bandit Blues 第一类斯特林数、NTT、分治/倍增

    传送门 弱化版:FJOI2016 建筑师 由上面一题得到我们需要求的是\(\begin{bmatrix} N - 1 \\ A + B - 2 \end{bmatrix} \times \binom ...