【HTML】--- 列表、表格、form表单标签
Html常用标签(2)
上篇博客讲了些常用的html标签 :【HTML】---常用标签(1)
这里主要讲 列表、表格标签和 form表单标签。
一、列表、表格标签
1、列表标签
概念 把内容以列表的形式展现。列表最大的特点就是 整齐 、整洁、 有序。
示例
<!DOCTYPE html>
<html>
<head>
<title>列表标签</title>
</head>
<body bgcolor="#FFFF00">
<!-- 无序列表 -->
2017年心愿
<ul type="circle"> <!--无序序列<ul> ，无序有circle：圆点，square：小方块-->
<li>父母身体健康</li>
<li>宝宝健康成长</li>
<li>媳妇健健康康</li>
</ul>
<!-- 有序列表 -->
2017年大事件
<ol type="1" start="2"> <!--有序的标签是<ol>,有序有五种：1,A,a ,i,I，start代表从什么时候开始等于2代表从2开始-->
<li>老婆要生小孩了</li>
<li>自己换工作了</li>
<li>要卖掉一套房</li>
</ol>
<!-- 自定义列表 -->
<dl> <!--在自定义列表<dl> </dl>中使用<dt> </dt>表示小标题，使用<dd> </dd>表示列表项-->
<dt>时刻告诉自己</dt>
<dd>不抱怨</dd>
<dd>零负能量</dd>
<dd>该与不该</dd>
</dl>
</body>
</html>
运行结果
2、表格标签
表格的现在还是较为常用的一种标签，但不是用来布局。常见用于处理、显示表格式数据。
基本语法
<table> </table> <!-- 用于定义一个表格 -->
<tr> </tr> <!-- 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格 -->
<td> </td> <!-- 标签用于表示列 必须嵌套在<tr></tr>标签中，一对 <tr> </tr>中包含几对<td></td>，就表示该行中有多少列 -->
<th> </th> <!-- 标签用于表示表格的标题，用法和 <td> </td>一样只是里面的内容会自动加大加粗 -->
<caption> <!-- 表头名</caption>用于表示表头 -->
<!--=====================列表属性======================-->
border <!-- 设置表格边框的宽度，单位为pixel -->
width <!-- 设置表格宽度，单位为pixel -->
height <!-- 设置表格高度，单位为pixel -->
cellspacing <!-- 设置单元格之间的距离,就指表格表格边框的间距 -->
cellpadding <!-- 设置文字距离单元格边框的距离 -->
bgcolor <!-- 设置表格的背景颜色 -->
align <!-- 用于设置对齐方式，比如center，left，right -->
示例
<!DOCTYPE html>
<html>
<head>
<!-- 原创作者：雨点的名字 -->
<title>table标签</title>
</head>
<body>
<!--这里的center表示该表格在页面的中间位置--> <!--这里的背景色标签是bgcolor-->
<table border="1" width="360" height="240" cellspacing="1" cellpadding="1" align="center" bgcolor="red">
<caption><h2>我的好朋友</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>爱好</th>
</tr>
<!--这里的center表示的是表格里面的字体居中-->
<tr align="center">
<td>小红</td>
<td>女</td>
<td>20</td>
<td>跳舞</td>
</tr>
<tr align="center">
<td>小舵</td>
<td>女</td>
<td>24</td>
<td>唱歌</td>
</tr>
</table>
</body>
</html>
运行结果
合并单元格 在表格操作的时候我们可能会有合并单元格的操作，如下示例
<!DOCTYPE html>
<html>
<head>
<title>table中合并单元格</title>
</head>
<body>
<table border="1" width="300" height="200"
align="center" background="first.jpg" > <!--background代表的是背景图片，bgcolor代表背景色完全不一样-->
<tr align="center" width="100" >
<td>1</td>
<td colspan="2">占两列</td> <!--当colspan="2"表示在同一行中，两列并一列，那么在它下面少写一个<td></td>标签-->
<!-- 删除掉此<td></td> -->
<td>2</td>
</tr>
<tr align="center" width="100">
<td rowspan="2">占两行</td> <!--当 rowspan="2"表示在同一列中 两行并一行，那么在同一列中删掉一个<td></td>标签-->
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr align="center" width="100" >
<!-- 删除掉此<td></td> 因为行已经被上面占掉，所以在这里要少一行-->
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
</body>
</html>
运行结果
二、form表单标签
作用 用于收集用户信息，如：登录、注册等场景。
form表单里主要包含的标签有：form表单域、input标签、 select 标签、label标签、textarea标签。
1、form表单域
基本语法
<form id="" action="" method="post" enctype="">
<input name="nickname">
<input type="submit" value="提交">
</form>
action 提交地址动作。与input标签中的submit属性相关联。
method 提交方法，有 get 和 post 两种提交方法。
enctype 表单数据提交时编码类型，默认"pplication/x-www-form-urlencoded"，如果表单中有上传文件，编码类型需要使用"multipart/form-data"，类型，
才能完成传递文件数据。
2、input标签
<input />标签为单标签，type属性为其最基本的属性类型 ,其取值不同代表不同的控件类型。
基本语法
<input type="text" name =""> <!-- 普通文本，标签的默认属性时text -->
<input type="password" name=""> <!-- 密文文本，输入的内容不显示 -->
<input type="radio" name="" value=""> <!-- 单选按钮 同一组单选它们的name值必须相同value都不相同-->
<input type="checkbox" name="" value=""> <!-- 复选框 同样如果是同一组多选那么它们的name必须相同value都不相同-->
<input type="button" name=""> <!-- 普通按钮 -->
<input type="submit" name=""> <!-- 提交按钮。要与action一起用。 -->
<input type="reset" name=""> <!-- 重置按钮 -->
<input type="image" src="first.jpg" alt="1"> <!-- 图片方式提交按钮 -->
<input type="email" name=""> <!-- 邮箱按钮 -->
<input type="file"multiple="multiple"> <!-- 文件上传按钮 -->
选择完input类型type属性后，还有些常用的属性值：
name: 指定名字，因为提交的是键值对，所以必须要指定名字，否则无法提交，即使提交了也没有意义
value: input控件的默认文本值。
size: 控件的宽度。
checked: 定义选择控件默认被选中。
maxlength: 运行输入的文本最大长度。
placeholder: 文本的提示内容。
readonly: 只读模式，设置后无法修改输入框的内容。
disabled: 禁用状态。
3、 select 标签
select标签是一个下拉框的形式让用户进行选择选项，所以select标签中必须包含option标签才能显示属性
基本语法
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
4、label标签
作用 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
示例
<!-- for 属性规定 label 与哪个表单元素绑定。绑定后如果点击"男"也会代表选中这个单选 -->
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="男">
5、textarea(文本域)
text文本框只能写一行文本，而textarea文本域可以输入大量文本的信息。
基本语法
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
6、完整示例
为了方便理解，这里来一个完整的示例。
<!DOCTYPE html>
<head>
<title>form表单</title>
</head>
<body>
<!--form 指的是表单标签 当前标签的内容在提交的时候都会被自动提交 action=""是指把当前表单提交的位置-->
<!--onSubmit只有当返回为true是才能提交表单，可以先校验这个表单-->
<form action="Myservlet" method="post" onSubmit="return submitFun();">
<fieldset> <!--主要会在相关表单元素周围绘制边框-->
<legend>用户注册</legend> <!--在上面绘制的边框绘制的位置写上“用户注册”-->
用户名:<input type="text" name="username" placeholder="请输入用户名" /><br/> <!--input text 输入框 placeholder 提示语-->
密码 :<input type="password" name="password"/><br/> <!--password代表输入的文字显示为黑点-->
<!--value是指当前表单提交后 获取的值 checked设置默认选中的情况 同一单选name相同-->
性别:男性<input type="radio" name="sex" value="male" checked="checked">
女性<input type="radio" name="sex" value="female"><br/>
学历: <select name="education"> <!--select代表下来列表,同一组name也要想同-->
<option value="gz">博士</option> <!--option代表每一个值，取名gz为了后台获取-->
<option value="yjs">研究生</option>
<option value="bk" selected="selected">本科</option> <!--select代表默认选中，本科会显示到界面-->
<option value="zk">专科</option>
</select> <br/><br/>
兴趣爱好:<input type="checkbox" name="likes" value="bike" />骑车 <!--checkbox复选框,checked代表默认选中-->
<input type="checkbox" name="likes" value="sleep" checked="checked" />睡觉
<input type="checkbox" name="likes" value="eat" />吃饭
<input type="checkbox" name="likes" value="daima" />敲代码 <br/>
备注:<textarea cols="40" rows="5" name="bz"></textarea> <br/><br/> <!--textarea文本域设置行和列-->
个人头像:<input type="file"><br> <!--代表可以在电脑上宣文件-->
<!--disabled代表不可编辑，不可编辑状态后台是无法取到这个value值的，想要获得就要在提交时改变为可编辑-->
个人网站:<input type="url" value="www.baidu.com" disabled="disabled"> <br>
<!--邮箱格式-->
个人邮箱:<input type="email"><br>
<!--代表只能输入数字-->
身体体重:<input type="number"><br>
<!--可选年月日-->
出生日期:<input type="date"><br>
<!--这个隐藏标签有很大的作用，可以不显示在界面，但后台可以获取值-->
隐藏项： <input type="hidden" value="你们看不到我"><br>
<input type="button" value="填写完毕"> <!--普通的button按钮-->
<input type="reset" value="重置信息"> <!--reset代表一按重置所以信息清空-->
<input type="submit" value="完成注册"> <!--submi代表所以信息提交到后台,如果上面调用了onSubmit方法，那么返回为true才提交-->
</fieldset>
</form>
</body>
</html>
运行结果
```
你如果愿意有所作为，就必须有始有终。(2)
```
【HTML】--- 列表、表格、form表单标签的更多相关文章
- Unit 2.前端之html--table(表格),form(表单)标签
一.table标签 作用:定义html表格.一个table标签元素至少包含 thead(表头),tbody(表主题),还可以有tfoot(表底部) html表格游table元素及一个或者多个tr,th ...
- HTML之form表单标签的学习
from表单 表示 <form>form表单域</form> 作用 收集并替提交用户数据给指定服务器 属性 action:收集的数据的提交地址(也就是URL) method:收 ...
- HTML table、form表单标签的介绍
1. <table>标签 1.1说明: 在HTML 中定义表格布局. 1.2格式: <table> <caption></caption> <tr ...
- [原创]java WEB学习笔记62：Struts2学习之路--表单标签:form,表单标签的属性，textfield, password, hidden，submit ，textarea ，checkbox ，list, listKey 和 listValue 属性，select ，optiongroup ，checkboxlist
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- [转]SpringMVC<from:form>表单标签和<input>表单标签简介
原文地址:https://blog.csdn.net/hp_yangpeng/article/details/51906654 在使用SpringMVC的时候我们可以使用Spring封装的一系列表单标 ...
- HTML的<form>表单标签
表单 HTML 表单用于搜集不同类型的用户输入. ㈠Form标签 ⑴form标签简介 在HTML中,如果创建一个表单,就把各种表单标签放在<form></form>标签内部.我 ...
- 前端 HTML form表单标签 input标签 type属性 file 上传文件
加上上传文件功能 input type='file' - 依赖form表单里一个属性 enctype="multipart/form-data" 加上这个属性表示把你上次文件一点 ...
- form表单标签的enctype属性的作用
Enctype是指定将数据回发到server时浏览器使用的编码类型.其编码类型有下面三种 一. application/x-www-form-urlencoded 这是通过表单发送数据 ...
- 前端 HTML form表单标签 textarea标签 多行文本
<textarea></textarea>作用:允许用户录入多行数据到表单控件中 <!DOCTYPE html> <html lang="en&qu ...
随机推荐
- 2019-2020-4 20199317《Linux内核原理与分析》第四周作业
第3章 MenuOS的构造 1 Linux内核源代码简介 计算机的“3大法宝”:存储程序计算机.函数调用堆栈和中断. 操作系统的“两把宝剑”:一把是中断上下文的切换——保存现场和恢复 ...
- 输入URL按下enter键后发生的事
输入URL按下enter键后浏览器和服务器各自发生的事. 浏览器 1.用户在浏览器中输入URL地址 2.浏览器解析用户输入的URL地址=>域名+端口 3.浏览器检查本地缓存中是否存在这个域名=& ...
- React中autoComplete="off" 失效
Turning Off Autocomplete in Chrome with React tl;dr Add a hidden input with an arbitrary value attri ...
- Elasticsearch logstash filter
参照官方文档: https://www.elastic.co/guide/en/logstash/current/advanced-pipeline.html demo-pipeline.conf i ...
- 第4节：Java基础 - 必知必会（中）
第4节:Java基础 - 必知必会(中) 本小节是Java基础篇章的第二小节,主要讲述抽象类与接口的区别,注解以及反射等知识点. 一.抽象类和接口有什么区别 抽象类和接口的主要区别可以总结如下: 抽象 ...
- CoderForces 163E e-Government(AC自动机+树状数组维护fail树的dfs序)
E. e-Government time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...
- CoderForces999D-Equalize the Remainders
D. Equalize the Remainders time limit per test 3 seconds memory limit per test 256 megabytes input s ...
- Exponial
Description Everybody loves big numbers (if you do not, you might want to stop reading at this point ...
- Mac ifconfig 详解（ifconfig detail）-- 外婆送来的丁香(Grandma's clove)
引言 Intro 图片源链:https://pixnio.com/zh/%E6%A4%8D%E7%89%A9/%E8%8A%B1/%E4%B8%81%E9%A6%99%E8%8A%B1-%E5%8F% ...
- bash单引号嵌套
转自:https://blog.jysoftware.com/2015/12/bash-%E6%80%8E%E4%B9%88%E5%81%9A%E5%8D%95%E5%BC%95%E5%8F%B7%E ...