【HTML基础】表格和表单

本次博客的主要内容如下:

  1. meta和link
  2. 表格
  3. 表单

meta和link

meta

meta的属性有两种:name和http-equiv。

name属性主要用于描述网页内容,对应与网页内容。

1.关键字,当搜索引擎在爬取内容的时候,会根据关键字判断:

<head>
    <title></title>
    <meta name="keywords" content="豆瓣,广播,登陆豆瓣">
</head>

2.网页描述

    <!-- 网页描述 -->
    <meta name="description" content="提供图书、电影、音乐唱片的推荐、评论和价格比较,以及城市独特的文化生活。">

上面的例子来自于豆瓣,这里我们在搜索引擎里面搜“登录豆瓣”,查看效果,网页描述会被显示:

3.网页重定向

<meta http-equiv="refresh" content="3;url=http://www.google.com">

效果图:

 

 

link

作用:引用外部css或者是title图片

1.引用外部css

<link rel="stylesheet" type="text/css" href="1.css">

2.设置icon图标

<link rel="icon" href="favicon.ico">

 

表格(table)

表格基础和标准结构 

表格可以更好的显示数据,比如要显示一个课程表,这个时候表格的作用就非常大了。

<body>
    <table>   表格
        <tr>  行
            <td></td> 列
            <td></td>
            <td></td>
        </tr>
    </table>
</body>

属性:

border="1"  单元格边框的宽度
width="500"  表格的宽度
height="300" 表格的高度
cellspacing="2" 单元格与单元格的距离
cellpadding="2" 内容距边框的距离
bgcolor="red" 背景颜色
align="left|right|center" 内容的的位置,也可以用于表格,如果直接给表格用align="center",表格居中,如果给tr或者td使用,tr或者td内容居中。

有如下表格:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <table border="1" width="500" height="300" cellspacing="0" align="center" bgcolor="green">
        <tr>
            <td>关宏峰</td>
            <td>30</td>
            <td>警察</td>
        </tr>
    </table>

</body>
</html>

效果图:

表格的标准结构

    <thead>   表格头部,也就是第一行
        <tr>
            <td></td>
            <td></td>
        </tr>
    </thead>
    <tbody>    表格主体
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>    表格底部,也就是最后一行
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tfoot>

使用标准的表格主体,也易于搜索引擎的搜索。

 

表头和单元格合并

现在有如下表:

    <table border="1" cellspacing="0" width="500" height="300" align="center">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

为其加上表头

    <table border="1" cellspacing="0" width="500" height="300" align="center">
        <caption>课程表</caption>

效果图:

合并同行的单元格:

        <caption>课程表</caption>
        <tr>
            <td colspan="2"></td>
            <!-- <td></td> -->
            <td></td>
            <td></td>
        </tr>

使用属性colspan可以合并同行的单元格,后面指定合并的单元格数目。

效果图:

 

合并同列的单元格:

        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <!-- <td></td> -->
            <td></td>
            <td></td>
            <td></td>
        </tr>

 

使用属性rowspan可以合并同列的单元格,后面指定合并的单元格数目。

 效果图:

 

 

 表格标题、边框颜色、内容垂直对齐

 表格标题使用<th></th>,和<td></td>的用法是一样的,标题的文字自动加粗且水平居中对其。

    <table border="1" cellspacing="0" width="500" height="300" align="center">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>居住地</th>
        </tr>
        <tr align="center">
            <td>周巡</td>
            <td></td>
            <td>30</td>
            <td>津港</td>
        </tr>
        <tr align="center">
            <td>周舒桐</td>
            <td></td>
            <td>23</td>
            <td>津港</td>
        </tr>
    </table>

效果图:

边框颜色:

<table border="1" cellspacing="0" width="500" height="300" align="center" bordercolor="red">

bordercolor可以设置边框颜色。

效果图:

 

内容垂直对齐方式:

<td valign="bottom">周巡</td>

valign设置内容的垂直对齐方式,默认是居中(middle),也可以是顶部垂直(top)和底部垂直(bottom)。

效果图:

思路扩展:上面例子显示的表格边框的宽度都是2个像素,因为每个单元格的最小的宽度为1个像素,所以两个单元格合并之后的宽度为2个像素,现在如果想要实现一个像素宽度的表格该怎样写呢?

实现方式如下:

    <table bgcolor="red" width="400" height="300" cellspacing="1" >
        <tr bgcolor="white">
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>居住地</th>
        </trb>
        <tr bgcolor="white" align="center">
            <td>周巡</td>
            <td></td>
            <td>30</td>
            <td>津港</td>
        </tr>
        <tr bgcolor="white" align="center">
            <td>周舒桐</td>
            <td></td>
            <td>23</td>
            <td>津港</td>
        </tr>
    </table>

解释:

1.将表格背景设置为红色,不用设置单元格边框(也就是border不设置)。

2.将单元格的背景色设置为白色,单元格之间的距离设置为1即可。

效果图:

 

表单(form)

常见的表单:比如各种账号的注册,学习录入等等。

作用:主要负责数据的采集功能。

比如网易的邮箱注册界面:

 

表单的组成:

提示信息:一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。
表单控件:包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
表单域:他相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。

创建表单:

    <form action="1.php" method="post">

    </form>

表单属性:

action:用来指定表单处理程序的位置,也就是将收集到数据发送的位置(服务器端脚本处理程序)
name:定义表单的名字
method:定义表单将数据传送到服务器的方式,默认是get,但是get是通过地址栏提供信息的,安全性差,建议使用post,直接通过action指定的脚本来处理信息,安全性更高。

文本输入框:

    <form action="1.php" method="post">
        用户名:<input type="text" name="username" maxlength="6" >

    </form>

属性:

maxlength:指定输入的字符最大长度
readonly="readonly":将输入框设置为只读的状态
disable="disable":输入框设置为未**状态
name="username":输入框的名称
value="frank":将输入框的内容传给处理的脚本,后面如果指定内容则为默认内容。

效果图:

密码输入框:

&nbsp;码:<input type="password" name="pwd" >

文本输入框的属性对密码输入框均有效。

效果图:

 

单选框:

        <input type="radio" name="gender" checked="checked"><input type="radio" name="gender" >

如果只需要在多个选项中选择一个,只需要将name设置成一样的即可,checked这里设置代表默认选项。

效果图:

下拉列表:

        居住地:<select>
            <option>北京</option>
            <option>上海</option>
            <option selected="selected">天津</option>
        </select>

属性:

multiple="multiple":将下拉列表设置为多选项
selected="selected":设置为默认的选中项

效果图:

使用optgroup标签可以对下拉列表进行分组:

        居住地:<select>
            <optgroup label="上海市">
                <option>长宁区</option>
                <option>静安区</option>
                <option>浦东新区</option>
                <option>奉贤区</option>
                <option>杨浦区</option>
                <option>普陀区</option>
                <option selected="selected">松江区</option>
            </optgroup>
            <optgroup label="安徽省">
                <option>合肥市</option>
                <option>芜湖市</option>
                <option>马鞍山市</option>
                <option>安庆市</option>
                <option>宿州市</option>
                <option>阜阳市</option>
            </optgroup>
        </select>

label指定了组名,不能被选定:

 

多选框:

            兴趣爱好:
            <input type="checkbox" checked="checked">读书
            <input type="checkbox">看电影
            <input type="checkbox">玩游戏

效果图:

 

多行文本框

        自我介绍:
        <br /> <br />
        <textarea cols="30" rows="10">这里填写自我介绍哦!</textarea>

属性:

cols:控制输入的字符个数
rows:控制输入的行数

效果图:

文件上传控件

        设置头像:
        <br /> <br />
        <input type="file">

可用于上传文件。

效果图:

 

文件提交按钮

<input type="submit">

可以实现信息的提交功能。

效果图:

普通按钮

<input type="button" value="点我啊">

不能实现信息的提交,必须要配合JS的使用。

效果图:

 

图片按钮

<input type="image" src="an.jpg">

能够实现数据的提交。

效果图:

 

重置按钮

<input type="reset">

可以重置输入的内容,也就是恢复到表单的原始状态。

效果图:

表单信息分组

    <form action="1.php" method="post">
        <fieldset>
        <legend>用户信息注册</legend>
        用户名:<input type="text" name="username" maxlength="6" >&nbsp;码:<input type="password" name="pwd" >
        <br /><br />
        <input type="radio" name="gender" checked="checked"><input type="radio" name="gender" ><br /><br />
        居住地:<select>
            <optgroup label="上海市">
                <option>长宁区</option>
                <option>静安区</option>
                <option>浦东新区</option>
                <option>奉贤区</option>
                <option>杨浦区</option>
                <option>普陀区</option>
                <option selected="selected">松江区</option>
            </optgroup>
            <optgroup label="安徽省">
                <option>合肥市</option>
                <option>芜湖市</option>
                <option>马鞍山市</option>
                <option>安庆市</option>
                <option>宿州市</option>
                <option>阜阳市</option>
            </optgroup>
        </select>
        <br /> <br />
        兴趣爱好:
            <input type="checkbox" checked="checked">读书
            <input type="checkbox">看电影
            <input type="checkbox">玩游戏
        </fieldset>
    </form>

标签:

<fieldset></fieldset>:对表单信息进行分组
<legend></legend>:表单信息分组的名称

效果图:

 

 HTML5补充表单控件

        <input type="url">
        <!-- 日期控件 -->
        <input type="date">
        <!-- 时间控件 -->
        <input type="time">
        <!-- 邮件控件 -->
        <input type="email">
        <!-- 数字控件 -->
        <input type="number" step="2">
        <!-- 滑块控件 -->
        <input type="range">

效果图:

 

版权声明:本文为weixin_39037804原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_39037804/article/details/100531745

智能推荐

前端小练习:jQuery酷炫照片墙

jQuery酷炫照片墙 效果展示: HTML代码: css代码: jQuery代码: 方法 解释 transform transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。W3scool Math.random() 产生随机数。编程狮 translate 绘图函数编程狮 attr attr() 方法设置或返回被选元素的属性和值。编程狮 anima...

springMVC拦截器

一、     SpringMVC拦截器实现原理 用户请求到DispatherServlet中,DispatherServlet调用HandlerMapping查找Handler,HandlerMapping返回一个拦截器链(HandlerExecutionChain),springmvc中的拦截器是通过HandlerMapping发起的。 &nbs...

Unity Json反序列化

Json反序列化 结果:...

[机器学习-回归算法]Sklearn之线性回归实战

Sklearn之线性回归实战 一,前言 二,热身例子 三,贸易公司的简单例子 四,Sklearn 官网里的一个例子 参考资料 一,前言 一元线性回归的理论片请看我这个链接 二,热身例子 预测直线 y=1x1+2x2+3y = 1x_1 + 2x_2 +3y=1x1​+2x2​+3 导入LinearRegression 从Sklearn.liear_model 包里 拟合数据也可以说是训练 检验正确...

Android 开发者,你真的懂 Context 吗?

Android Context 详解 前言 一、Context是什么 二、Context结构 1、ContextImpl类介绍 2、ContextWrapper类介绍 3、ContextThemeWrapper 三、Context的数量 四、Context注意事项 五、如何正确回复以上面试题? 前言 Context 相信所有的 Android 开发人员基本上每天都在接触,因为它太常见了。但是这并不...

猜你喜欢

SpringMVC ----Json的简单交互处理

SpringMVC--Json Json的介绍 什么是JSON? JSON 和 JavaScript 对象互转 Controller返回JSON数据 Jackson 乱码 乱码的解决方法一 代码优化 乱码统一解决方法 返回json字符串统一解决 测试多个对象的集合输出 输出时间对象 抽取为工具类 FastJson fastjson 三个主要的类: JSONObject JSONArray JSON...

微信小程序自定义组件简单实现

本文将教你如何实现一个自定义的toast提示框,实现后的基本效果图如下: 小程序中一个自定义组件由 json wxml wxss js 4个文件组成的。下面我们一步一步地来创建文件及完成其中的配置: step1:创建自定义组件 首先创建一个components文件夹,用于放置所有自定义的组件,创建之后的目录结构为 其中的toastedit是我们本次...

PyTorch学习(四)--用PyTorch实现线性回归

教程视频:https://www.bilibili.com/video/BV1tE411s7QT 废话不多说,代码如下: 结果: 0 56.52023696899414 1 25.170454025268555 2 11.214292526245117 3 5.001270771026611 4 2.2352840900421143 5 1.0038176774978638 6 0.4554775...

1、Qt 的窗口组件和窗口类型

1、窗口组件 图形用户界面由不同的窗口和窗口组件组成 组件的类型 — 容器类(父组件):用于包含其它的界面组件 — 功能类(子组件):用于实现特定的交互功能 Qt 中没有父组件的顶级组件叫做窗口 QWidget QWidget 继承于 QObject 和 QPaintDevice — QObject 是所有支持 Qt 对象模型的基类 — QPaint...

从APP跳转到微信指定联系人聊天页面功能的实现与采坑之旅

从APP跳转到微信指定联系人聊天页面功能的实现与采坑之旅 起因 实现逻辑 效果图 实现过程 跳转微信按钮点击事件 无障碍监听主要方法 一些必要的参数 监听主要方法 遇到的坑 1. 搜索内容无法赋值给搜索框 2. 如何停止监听? 3. 没查询到结果如何停止监听? 4. 如果在微信其他页面怎么办? 5. 页面改变UI加载太慢 6. 聊天界面和主页面是同一个活动 7. 搜索不到结果时,发现他在搜索结果页...