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

大前端应用开发与架构设计-使用HTML构建Web站点(二)

时间：2018-06-19 13:57:32      阅读：253      评论：0      收藏：0      [点我收藏+]

标签：单选   属性表   dingding   tip   有一个   应用开发   baseline   content   使用   

大前端应用开发与架构设计-使用HTML构建Web站点(二)

大前端应用开发与架构设计 

3 HTML表格和表单标签

3.1 表格

3.1.1 概述

表格通常是用来后台系统展示数据，如下图所示，使用表格展示了4行6列的数据。
技术分享图片

在html中，使用table表示一个表格，表格可以是由标题和若干行组成的,每行又被分割成若干个单元格，表格的行使用tr表示，表格的单元格使用td表示。
表格的标题使用<caption></caption>标签，需要放在table标签的第一行。

注意事项:

在使用table标签时需要注意的是和无序列表ul li标签一样，table标签只能包含tr标签，tr也只能包含td标签，在td内可以包含任意元素。

3.1.2 表格属性

在使用<table></table>展示数据时，默认的外观样式通常不是我们想要的，如下图所示
技术分享图片

应用案例如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用表格展示数据</title>
</head>
<body>

    <table >

        <!--表格的标题-->
        <caption>语文成绩表</caption>
        <tr>
            <td>姓名</td>
            <td>科目</td>
            <td>分数</td>
        </tr>

        <tr>
            <td>tony</td>
            <td>语文</td>
            <td>99</td>
        </tr>
        <tr>
            <td>raorao</td>
            <td>语文</td>
            <td>99</td>
        </tr>
       
    </table>
</body>
</html>

这里我们可以通过修改表格的边框，单元格边框之间的距离以及单元格边框与单元格内容等属性，来达到我们想要的外观效果,如下应用案例(table.html)所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用表格展示数据</title>
</head>
<body>

    <table border="1" align="center" width="300px" height="200px"  cellspacing="0" cellpadding="25">

        <!--表格的标题-->
        <caption>语文成绩表</caption>
        <tr>
            <td>姓名</td>
            <td>科目</td>
            <td>分数</td>
        </tr>

        <tr>
            <td>tony</td>
            <td>语文</td>
            <td>99</td>
        </tr>
        <tr>
            <td>raorao</td>
            <td>语文</td>
            <td>99</td>
        </tr>
       
    </table>
</body>
</html>

表格常用的属性及其功能描述如下所示

属性名称 属性描述
border 设置表格的边框，默认为无边框，即boder=0
align 控制表格在网页中的水平的对齐方式
width 表格的宽度
height 表格的高度
cellspacing 控制单元格与单元格之间的间距
cellpadding 控制单元格内容和单元格边框之间的距离

3.1.3 表格的结构

在日常开发中，通常把表格分为表头<thead></thead>，主体<tbody></tbody>和底部<tfoot></tfoot>三部分组成，以便于实现统一的管理(样式控制)，其中表格的第一行数据表示表头，表格的最后一行数据表示表尾，中间部分表示主体。

如下图所示，可以通过Chrome的开发人员工具来查看表格的结构
技术分享图片

实现应用案例(table_structure.html)如下所示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格结构的划分</title>
</head>

<body>
    <h3 align="center">语文成绩表</h3>

    <table border="1" align="center" width="300px" height="200px" cellspacing="0" cellpadding="25">
        <thead>
            <tr>
                <td>姓名</td>
                <td>科目</td>
                <td>分数</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>tony</td>
                <td>语文</td>
                <td>99</td>
            </tr>
            <tr>
                <td>raorao</td>
                <td>语文</td>
                <td>99</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>jack</td>
                <td>语文</td>
                <td>99</td>
            </tr>
        </tfoot>

    </table>
</body>

</html>

3.1.4 表格的合并

在展示某些数据时可能会用到跨行或者时跨列显示，如下图所示。
技术分享图片

跨行:从指定的单元格位置处开始，纵向向下，合并掉几个单元格(包含自己)，被合并的单元格要删除,然后在指定的单元格设置rowspan属性值即可,例如<td rowspan="2">。

跨列:从指定的单元格位置处开始，横向向右，合并掉几个单元格(包含自己)，被合并的单元格要删除，然后在指定的单元格位置处设置colspan属性值即可，例如<td colspan="2">。

关于表格的行和列合并的应用案例如下所示


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格单元格的合并</title>
</head>

<body>
    <table border="1" align="center" width="300px" height="200px" cellspacing="0" cellpadding="25">

        <!--表格的标题-->
        <caption>语文成绩表</caption>
        <tr>
            <td>姓名</td>
            <td>科目</td>
            <td>分数</td>
        </tr>

        <tr>
            <td>tony</td>
            <td>语文</td>
            <td>99</td>
        </tr>
        <tr>
            <td>raorao</td>
            <td>语文</td>
            <td>97</td>
        </tr>

        <tr>
            <td>qq</td>
            <!--跨两列显示内容-->
            <td colspan="2">语文&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;88</td>
        </tr>


        <tr>
            <td>weixin</td>
            <td>语文</td>
            <!--跨行合并单元格 这里的td占据两行-->
            <td rowspan="2">99</td>
        </tr>
        <tr>
            <td>dingding</td>
            <td>语文</td>
            
        </tr>
    </table>
</body>

</html>

使用表格完成一个复杂的跨行跨列数据展示，实现效果如图所示。
技术分享图片

分析:首先以D为标准(即1行一列)，那么整个表格就可以算成3行3列。

第一步，先绘制一个基础的表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>实现一个复杂的表格跨行跨列的应用</title>
</head>
<body>
   <table border="1" width="500" height="500" cellpadding="25" cellspacing="0">
       <tr>
           <td></td>
           <td></td>
           <td></td>
       </tr>
       <tr>
           <td></td>
           <td></td>
           <td></td>
       </tr>
       <tr>
           <td></td>
           <td></td>
           <td></td>
       </tr>
   </table>
</body>
</html>

第二步:分析各个元素占据的行列

A:一行两列
B:一列两行
C:一列两行
D:一行一列
F:一行两列

第三步:通过设置colspan和rowspan属性改变元素占据的行列，完整实现如下应用案例(table_app.html)所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>实现一个复杂的表格跨行跨列的应用</title>
</head>
<body>
   <table border="1" width="500" height="500" cellpadding="25" cellspacing="0">
      
       <tr>
           <td colspan="2">A</td>
           <td rowspan="2">B</td>
       </tr>
       <tr>
           <td rowspan="2">C</td>
           <td>D</td>
       </tr>

       <tr>
           
            <td colspan="2">F</td>
        </tr>
   </table>
</body>
</html>

3.2 表单

3.2.1 概述

表单在网站中是非常常见的元素，以淘宝网为例子，当打开淘宝首页在搜索框中搜索商品时，如下图所示
技术分享图片
当输入用户名，密码登录时，如下图所示。
技术分享图片
都使用到了表单，其作用是收集用户数据后提交给服务器。

3.2.2 表单组成

表单是由表单域，提示文本，表单元素组成的，如下图所示，其中表单域包含了提示文本和表单元素。
技术分享图片

3.2.2.1 表单元素

常见的表单元素包括
用于文本添加的单行文本框，密码框以及多行文本域textarea和隐藏域，
用于选择的单选按钮，多选按钮，下拉框select option，
以及用于提交表单的普通按钮，提交按钮以及图片按钮和用于实现图片上传的标签。

3.2.2.1.1 单行文本框

在淘宝登录注册或者搜索商品时经常会使用到单行文本框，通过使用input标签，设置type="text"即可，设置placeholder属性表示默认显示在文本框用于给用户提示的文字。

      用户名:  <input type="text" value="" placeholder="请输入用户名"/> <br/>
3.2.2.1.2 密码框

在淘宝登录时需要用户名、密码才能登录，密码框相对于单行文本框的不同之处在于内容不是明文显示的，同样使用input标签，只需要设置type="password"即可，如果想要设置输入的密码长度，只要设置maxlength属性即可，代码片段如下所示。

密码: <input type="password" maxlength="16"/> <br/>
3.2.2.1.3 文本域

通常在论坛网站回帖时，可能会想输入多行文本内容，如下图所示
技术分享图片
这时就可以使用多行文本域来实现，如果想要控制内容的行数，可以通过设置rows属性来实现，代码片段如下所示。

<textarea  rows="20">
                今天遇到一个很严峻的问题
                解决问题的方式就是不停的尝试，只要坚持，一定会成功。
        </textarea> <br/>
3.2.2.1.4 隐藏域

隐藏域在页面上通常看不到效果，主要是用来传值使用，如下图所示，淘宝首页也使用了大量的隐藏域。

技术分享图片
淘宝网隐藏域的使用

在使用时只需要使用input标签，并设置type=hidden即可,代码片段如下所示。

      隐藏域: <input type="hidden" value="" name="item"/> </br>
3.2.2.1.5 单选按钮

在网站注册时，可能会让你选择性别信息，它通常是一个单选按钮，因为人只能有一个性别，这时就需要使用单选按钮，如下代码片段所示，如果是一组元素(例如这里的两个radio)，通过设置相同的name属性用于设置名称和用于分组，一组单选按钮的name必须相同，还可以通过设置checked="checked"属性实现当打开页面默认选中的性别，同时必须设置value属性值，推荐是数字，代码片段如下所示。

      性别: <input type="radio" name="gender" checked="checked" value="1"  />男 <input type="radio" name="gender" value="1" />女
3.2.2.1.6 多选按钮

在网站想要了解你的兴趣爱好时，可能会有多个兴趣爱好让你选择，此时会使用到多选按钮checkbox,只需要使用input标签并设置type="checkbox"即可，同时和单选按钮一样，必须设置name和value的属性值，代码片段如下所示。

爱好:<input type="checkbox" name="hobby" value="1" />programming <input type="checkbox" name="hobby" value="2" /> 音乐 <input type="checkbox" name="hobby"  value="3" />美女 </br>>
3.2.2.1.7 下拉框

在设置收货地址时，需要选择省市区，这时就需要使用到了select option，通过下拉选择一个值，代码片段如下所示，
如果想要设置默认选中，只需要在option中设置selected=selected即可,代码片段如下所示。

 收货地址: <select>

                <option>请选择省市自治区</option>
                <!--
                    默认选中上海
                -->
                <option selected="selected" value="1">上海</option>
                <option value="2">北京</option>
                <option value="3">天津</option>
                <option value="4">重庆</option>
           </select> 
        
           <select>

                <option>请选择区</option>
                <option value="1">黄埔区</option>
                <option value="2">浦东新区</option>
                <option value="3">长宁区</option>
                <option value="4">静安区</option>
           </select> 
        </br>
3.2.2.1.8 文件上传

文件上传也是网站上常用的功能，如下所示就是CSDN的文件上传
技术分享图片
当想要使用文件上传时，只需要使用input标签，并设置type="file"即可,代码片段如下所示。

      文件上传: <input type="file" name="fileupload" /><br/>
3.2.2.1.8 提交按钮

提交按钮用于将表单元素的数据发送到服务器，代码片段如下所示

      提交按钮: <input type="submit" value="提交"/> <br/>
3.2.2.1.8 图像按钮

当你想使用单独的图片作为按钮时，此时可以借助图片按钮来实现，可以使用input标签，然后设置属性type="image",并设置src="图片路径"即可。

      图片按钮: <input type="image" src="../../../images/163_register_button.png"/><br/>
3.2.2.1.8button按钮

如果想按钮有更好的显示方式,便可引入<button></button>标签，这样可以在标签中间使用其他元素(例如文本内容和图片)，如下应用片段所示

 button按钮: <button> <img src="../../../images/163_register_button.png"> </button><br/>

完整的表单元素案例如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单的常见元素使用</title>
</head>
<body>
    
        <!--通过type属性指定input元素的类型，value表示该元素的默认值-->

        <!--text是单行文本框-->
      用户名:  <input type="text" value="" placeholder="请输入用户名"/> <br/>

      隐藏域: <input type="hidden" value="" name="item"/> </br>
    
      <!-- 通过设置maxlength属性控制字符最大长度-->

      <!--label标签用于绑定表单元素，当点击label标签的内容时，表单元素得到焦点-->
      <label>密码: <input type="password" maxlength="16"/> <br/></label> 

      <!--如果label标签包含了多个表单元素，可以使用 for id的格式来绑定某个表单元素-->

      <label for="email">
            手机号: <input type="text" value=""/></br>
            邮箱: <input type="text" id="email" value=""/></br>
      </label>
      
      性别: <input type="radio" name="gender" checked="checked" value="1"  />男 <input type="radio" name="gender" value="0" />女  </br>

      爱好:<input type="checkbox" name="hobby" value="1" />programming <input type="checkbox" name="hobby" value="2" /> 音乐 <input type="checkbox" name="hobby"  value="3" />美女 </br>

      收货地址: <select>

                <option>请选择省市自治区</option>
                <!--
                    默认选中上海
                -->
                <option selected="selected" value="1">上海</option>
                <option value="2">北京</option>
                <option value="3">天津</option>
                <option value="4">重庆</option>
           </select> 
        
           <select>

                <option>请选择区</option>
                <option value="1">黄埔区</option>
                <option value="2">浦东新区</option>
                <option value="3">长宁区</option>
                <option value="4">静安区</option>
           </select> 
        </br>


        <textarea  rows="20">
                今天遇到一个很严峻的问题
                解决问题的方式就是不停的尝试，只要坚持，一定会成功。
        </textarea> <br/>

      重置: <input type="reset"/><br/>

      button按钮: <button> <img src="../../../images/163_register_button.png"> </button><br/>
      文件上传: <input type="file" name="fileupload"/><br/>
      图片按钮: <input type="image" src="../../../images/163_register_button.png"/><br/>
      提交按钮: <input type="submit" value="提交"/> <br/>        
      
</body>
</html>

3.2.3 表单域

表单域使用<form></form>标签表示，该标签可以包含之前提到的表单元素，也只有包含在<form></form>标签内的表单控件的值才能传递给服务器。
该标签有几个重要的属性:

  • action：提交给服务器后端(通常是使用java/python/php编写的服务端程序)处理的地址

  • method:提交的方式，主要有post和get两种方式提交，其中get请求是以明文的方式将数据传递给服务器，安全性低，同时提交的数据最大限制为2KB,通常在查询操作时使用,post是以隐式的方式将数据传递给服务器，其安全性高，不限制传递数据的大小，通常在增、删、改数据时使用。

  • enctype:用于指定表单进行数据编码的方式,主要取值有application/x-www-form-urlencoded允许将任意类型的文本提交给服务器,multipart/form-data:允许将文件提交给服务器,text/plain:不对任何数据进行编码和传输。

完整的表单域应用程序如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>form表单域</title>
</head>
<body>


    <form action="/user/login" method="GET" name="login" enctype="application/x-www-form-urlencoded"  >
        <label>用户名:</label> <input type="text" name="username"/></br>
        <label>密码:</label><input type="password" name="password"/> </br>   
        <label>提交: <input type="submit"/></label></br>
        <label>重置: <input type="reset"/></label></br>

    </form>
</body>
</html>

大前端应用开发与架构设计-使用HTML构建Web站点(二)

标签：单选   属性表   dingding   tip   有一个   应用开发   baseline   content   使用   

原文地址：https://www.cnblogs.com/ittimeline/p/9197837.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！