一.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. chrome的source工具

    http://www.cnblogs.com/ys-ys/p/5597717.html http://www.cnblogs.com/strick/p/5556434.html

  2. LDAP概念

    1.1.LDAP目录结构   此图为树形目录结构,我将此跳过去了,因为这个是按照“国家这种结构来划分的”.如果你喜欢这样看更好,如下还有一种: 树也可以根据互联网域名组主.这种命名方式正越来越受欢迎, ...

  3. influxdb问题解决

    一.influxdb启动不了? 清空数据文件夹: cd /var/lib/influxdb/data rm -rf * 清除完就可以启动了,然后查看/var/lib/influxdb下data和met ...

  4. 14.msql_python

    # 1.安装 pip install pymysql import pymysql try: # 1.链接 数据库 链接对象 connection() conn = pymysql.Connect( ...

  5. centos7下安装docker（17.4docker监控----prometheus）

    Prometheus是一个非常优秀的监控工具.准确的说,应该是监控方案.Prometheus提供了监控数据搜集,存储,处理,可视化和告警一套完整的解决方案 Prometheus架构如盗图: 官网上的原 ...

  6. Doc2vec实现原理

    论文来源:https://www.eecs.yorku.ca/course_archive/2016-17/W/6412/reading/DistributedRepresentationsofSen ...

  7. P2068 统计和（树状数组模板）

    这是一道树状数组题 #include<iostream> using namespace std; ; int tree[maxn], n, m; char h; int x, y; vo ...

  8. eclipse导入maven项目，资源文件位置显示不正确

    eclipse导入maven项目后,资源文件位置显示不正确,如下图所示 解决方法: 在resources上右键Build Path,选择Use as Source Folder即可正确显示资源文件

  9. github 遇到Permanently added the RSA host key for IP address '192.30.252.128' to the list of known hosts问题解决

    刚开始使用github的时候不是很了解,新手一般的都会遇到这个问题Permanently added the RSA host key for IP address '192.30.252.128' ...

  10. 修改tomcat JVM 大小

    参考:https://blog.csdn.net/mynamepg/article/details/80591348 1.Xms表示初始分配给jvm的内存大小,-Xmx表示最大可分配给jvm的内存大小 ...