【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">

效果图：

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/369097.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

python json 不好用_Python之json使用

python json 不好用_Python之json使用

一、概念json是一种通用的数据类型&#xff0c;任何语言都认识接口返回的数据类型都是json长得像字典&#xff0c;形式也是k-v { }其实json是字符串字符串不能用key、value来取值&#xff0c;要先转成字典才可以格式如下&#xff1a;{"error_code": 0,#要使用双引号&…
阅读更多...
jstack命令(Java Stack Trace)

jstack命令(Java Stack Trace)

转&#xff1a;http://blog.csdn.net/fenglibing/article/details/6411940 JDK内置工具使用 一、javah命令(C Header and Stub File Generator) 二、jps命令(Java Virtual Machine Process Status Tool) 三、jstack命令(Java Stack Trace) 四、jstat命令(Java Virtual Machine …
阅读更多...
链式存储mysql_链栈：栈的链式存储结构

链式存储mysql_链栈：栈的链式存储结构

前面讲完了栈的顺序存储结构&#xff0c;我们现在来看看栈的链式存储结构&#xff0c;简称为链栈。链栈是没有附加头结点的运算受限的单链表。栈顶指针就是链表的头指针。栈是用栈顶来做插入和删除操作&#xff0c;那么对于链栈的栈顶放在链表的头部还是尾部呢&#xff1f;单链…
阅读更多...
树状数组 学习笔记

树状数组 学习笔记

树状数组可以用来求区间元素的和。与前缀和做法不同&#xff0c;它支持值的修改。比如说&#xff0c;现在我有一个数列a&#xff0c;要求你维护这个数列&#xff0c;使其支持两个操作。1.改变数列第k项的值2.查询从第i项到第j项的总值暴力做法总是过不了所有点的&#xff0c;如…
阅读更多...
iOS动画-从UIView到Core Animation

iOS动画-从UIView到Core Animation

首先&#xff0c;介绍一下UIView相关的动画。 UIView普通动画&#xff1a;[UIView beginAnimations: context:];[UIView commitAnimations]; 动画属性设置&#xff1a; 1 //动画持续时间2 [UIView setAnimationDuration:(NSTimeInterval)];3 //动画的代理对象4 …
阅读更多...
201621123055《JAVA程序设计》第三周学习总结

201621123055《JAVA程序设计》第三周学习总结

1. 本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词。 答&#xff1a;类、对象、关键字等。1.2 用思维导图或者Onenote或其他工具将这些关键词组织起来。(注&#xff1a;首次使用&#xff0c;不太会用软件&#xff09; 2. 书面作业 1.以面向对象方式改造数据结构…
阅读更多...
通过运行示例从WSO2 ESB开始

通过运行示例从WSO2 ESB开始

我最近加入了一个新任务&#xff0c;在该任务中&#xff0c;我们必须基于WSO2工具栈实施ESB解决方案。 尽管我熟悉ESB的大多数概念以及其他一些实现&#xff08;例如Mule ESB &#xff09;&#xff0c;但这是我第一次必须使用WSO2 ESB 。 幸运的是&#xff0c;可以找到很多文档…
阅读更多...
爬虫（十二）：scrapy中spiders的用法

爬虫（十二）：scrapy中spiders的用法

Spider类定义了如何爬去某个网站&#xff0c;包括爬取的动作以及如何从网页内容中提取结构化的数据&#xff0c;总的来说spider就是定义爬取的动作以及分析某个网页 工作流程分析 以初始的URL初始化Request&#xff0c;并设置回调函数&#xff0c;当该request下载完毕并返回时&…
阅读更多...
position:fixed 兼容浏览器低版本

position:fixed 兼容浏览器低版本

项目中遇到的坑&#xff0c;写篇博客做个笔记纪念下&#xff0c;position: fixed一般来说都兼容各个浏览器&#xff0c;但是要兼容浏览低版本问题&#xff0c;就得用-webkit-transform: translateZ(0);这段代码了。 项目中用到position: fixed;z-index: xxx;的时候&#xff0c;…
阅读更多...
监控java_Java应用程序监控JavaMelody

监控java_Java应用程序监控JavaMelody

JavaMelody是运行在Java Web容器中&#xff0c;用来监控Java内存和J服务器CPU使用情况&#xff0c;用户Session数量&#xff0c;JDBC连接数&#xff0c;和http请求、sql请求等的执行数量&#xff0c;平均执行时间&#xff0c;错误百分比等。图表可以按天&#xff0c;周&#xf…
阅读更多...
【谈谈IO】BIO、NIO和AIO

【谈谈IO】BIO、NIO和AIO

BIO: BIO是阻塞IO&#xff0c;体现在一个线程调用IO的时候&#xff0c;会挂起等待&#xff0c;然后Thread会进入blocked状态&#xff1b;这样线程资源就会被闲置&#xff0c;造成资源浪费&#xff0c;通常一个系统线程数是有限的&#xff0c;而且&#xff0c;Thread进入内核态也…
阅读更多...
css动画-模拟正余弦曲线

css动画-模拟正余弦曲线

今天就写一个css3抛物线的动画吧 从左到右的抛物线动画&#xff0c;我们就暂且把动作分为匀速向右运动和变速的上下运动。 水平匀速运动我们可以利用 translateX(x)&#xff1a;定义 2D 转换&#xff0c;沿着 X 轴移动元素&#xff1b;以及linear&#xff1a;动画从头到尾的速…
阅读更多...
java list 循环赋值_Java List集合的坑（add方法报空指针，循环赋值时list已保存的值会改变）...

java list 循环赋值_Java List集合的坑（add方法报空指针，循环赋值时list已保存的值会改变）...

先看空指针异常&#xff1a;ListmovieInfos null;这样创建时&#xff0c;list指向为空&#xff0c;修改方法&#xff1a;ListmovieInfos new ArrayList();再看list循环赋值的问题&#xff1a;问题描述&#xff1a;for (i0;i<10;i){movieInfoSum.movieId (int)recommendatio…
阅读更多...
ros使用时的注意事项技巧

ros使用时的注意事项技巧

1.rosrun package-name executable-name 比如 rosrun turtlesim turtlesim_node 2.一旦启动roscore后,便可以运行ROS程序了。ROS程序的运行实例被称为节点(node)&#xff0c;roscore叫做节点管理器 3.查看节点列表rosnode list 4.需要注意节点名并不一定与对应可执行文件名称相…
阅读更多...
Ubuntu+vscode打不开

Ubuntu+vscode打不开

前沿: vscode链接参考链接 问题: 之前在Ubuntu上安装chrome, 结果chrome没装成功, 还把vscode给qiu坏了, 貌似是当时安装chrome时提示要升级一个包. 后来发现当时是修改了libnss这个包的版本: 解决方法: # 将libnss给downgrade一下就OK了. sudo apt install libnss32:3.21-1ubu…
阅读更多...
纯css隐藏移动端滚动条解决方案（ios上流畅滑动）

纯css隐藏移动端滚动条解决方案（ios上流畅滑动）

html代码展示&#xff08;直接复制代码保存至本地文件运行即可&#xff09;&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, init…
阅读更多...
JavaAppArguments.java

JavaAppArguments.java

思路&#xff1a;定义一个String类型的变量&#xff0c;用来接收每次args读取到的值&#xff0c;然后把String转换为int,然后计算输出sum。 流程图&#xff1a; 源代码&#xff1a; 截图&#xff1a; 转载于:https://www.cnblogs.com/xiaohaigege666/p/7635907.html
阅读更多...
〖Mysql〗-- python操作数据库

〖Mysql〗-- python操作数据库

【数据库进阶】 python 操作MYSQL数据库主要有两种方式&#xff1a; 　　 使用原生模块&#xff1a;pymysql　　ORM框架&#xff1a;SQLAchemy 一、pymysql 1.1下载安装模块 12第一种&#xff1a;cmd下&#xff1a;执行命令下载安装&#xff1a;pip3 install pymysql第二种&…
阅读更多...
Apriori 关联分析算法原理分析与代码实现

Apriori 关联分析算法原理分析与代码实现

转自穆晨 阅读目录 前言关联分析领域的一些概念Apriori算法基本原理频繁项集检索实现思路与实现代码关联规则学习实现思路与实现代码小结回到顶部前言 想必大家都听过数据挖掘领域那个经典的故事 - "啤酒与尿布" 的故事。 那么&#xff0c;具体是怎么从海量销售信息中…
阅读更多...
Spring JpaRepository示例（内存中）

Spring JpaRepository示例（内存中）

这篇文章描述了一个使用内存中HSQL数据库的简单Spring JpaRepository示例。 该代码示例可从GitHub的Spring-JpaRepository目录中获得。 它基于带有注释的Spring-MVC-示例和此处提供的信息 。 JPA资料库 我们为该示例实现一个虚拟bean&#xff1a; Entity AutoProperty public…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023