一.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. 经常在比特币中看到的merkle树是什么？

    区块基础-merkle树   Merkle tree中文叫做梅克尔树,这当然不是一棵真正的植物树,merkle tree是计算机数据结构中的一种树,是由计算机科学家 Ralph Merkle 提出的, ...

  2. ASP.Net Web API 输出缓存 转载 -- Output caching in ASP.NET Web API

    一.Nuget安装相关dll Web API 2 : Install-Package Strathweb.CacheOutput.WebApi2 Web API 1 : Install-Package ...

  3. 【window】git安装教程

    相关链接:https://blog.csdn.net/nly19900820/article/details/73379854 作者:smile.轉角 QQ:493177502

  4. Java NIO2：NIO概述

    一.概述 从JDK1.4开始,Java提供了一系列改进的输入/输出处理的新特性,被统称为NIO(即New I/O).新增了许多用于处理输入输出的类,这些类都被放在java.nio包及子包下,并且对原j ...

  5. windows使用.NET CORE下创建MVC,发布到linux运行

    1.在有dotnet core 的环境下,打开控制台.创建文件夹demo1 2.创建MVC程序 3.创建完成 4.使用记事本修改一下HomeController 修改端口 5.发布 6.压缩发布的文件 ...

  6. Spark运行模式：cluster与client

    When run SparkSubmit --class [mainClass], SparkSubmit will call a childMainClass which is 1. client ...

  7. Java多线程学习(一)---并发与多线程

    Java并发与多线程 摘要: 1. 并发与并行的区别,何为并发编程,并发编程的优势在哪 2. 多线程.多任务.多进程机制概述 3. 多线程.多任务.多进程机制与编程思想的关系 一.并发 1.1 并发与 ...

  8. FineUIPro v4.0.0 发布了，全新 CSS3 动画惊艳登场！

    FineUI(专业版)v4.0.0 即将于 2017-10-23 发布! 这个版本将引入了激动人心的 CSS3 动画,只需要开启全局属性 EnableAnimation 即可,先睹为快: 1. 菜单动 ...

  9. C# Type.GetType 返回NULL 问题解决记录

    Type.GetType("OP.Client.Html.Resources.KenFengFormMethod"); 从Dll里面获取KenFengFormMethod这个会返回 ...

  10. 跨域访问-需要设置HTTP响应标头

    前提:服务端网站的配置(被请求的网站) 1.需要在IIS服务器站点的功能视图中设置HTTP响应标头: 2.双击“HTTP响应标头”进入设置界面 3.点击右侧添加按钮弹出窗口 4.填入需要设置的信息 名 ...