认识HTML中表格、列表标签以及表单控件
前端之HTML，CSS（二）
HTML标签
列表标签
无序列表：闭标签，由<ul><li></li>...</ul>组合而成，效果成纵向列表。格式：<ul><li>content</li><li>content</li>...</ul>,<ul>标签中只能嵌套<li>标签，<li>标签作为容器，包含内容，内容可以是文本或者其他元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无序列表标签-测试</title>
</head>
<body>
<ul>
<li>Python</li>
<li>Java</li>
<li>C</li>
<li>C++</li>
<li>Ruby</li>
<li>PHP</li>
<li>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
</ul>
</body>
</html>
有序列表：闭标签，由<ul><li></li>...</ul>组合而成，效果成纵向列表。格式：<ul><li>content</li><li>content</li>...</ul>,<ul>标签中只能嵌套<li>标签，<li>标签作为容器，包含内容，内容可以是文本或者其他元素。与无序列表之间只是<ul>换成了<ol>。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无序列表标签-测试</title>
</head>
<body>
<ol>
<li>Python</li>
<li>Java</li>
<li>C</li>
<li>C++</li>
<li>Ruby</li>
<li>PHP</li>
<li>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</li>
</ol>
</body>
</html>
自定义列表：闭标签，由<dl><dt></dt><dd></dd><dd></dd>...</dl>组合而成，效果成纵向无标记符号列表。格式：<dl><dt>content</dt><dd>content</dd>...</dl>,<dl>标签中嵌套一组<dt>标签，<dd>标签作为容器，包含内容，内容可以是文本或者其他元素，<dd>标签内容是对<dt>标签内容的扩展和说明。
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无序列表标签-测试</title>
</head>
<body>
<dl>
<dt>中国</dt>
<dd>北京</dd>
<dd>上海</dd>
<dd>广州</dd>
<dd>深圳</dd>
</dl>
</body>
</html>
上述列表的效果展示建议保存至list.html文件，使用浏览器打开查看一下。
表格标签
表格标签由<table></table>表示整体外框（不显示，只是界定范围），<tr></tr>表示表格的行标签，<td>content</td>表示单元格标签，表格中的内容嵌入<td></td>单元格标签中。所以，表定义为一个表格范围，划分为多个行，行又划分为多个单元格，每个单元记录内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签-测试</title>
</head>
<body>
<table>
<tr>
<td>Python</td>
<td>PHP</td>
<td>Perl</td>
</tr>
<tr>
<td>C</td>
<td>C++</td>
<td>C#</td>
</tr>
</table>
</body>
</html>
| 属性名 | 属性值 | 描述 |
| border | 数字 | 设置表格边框，默认为0，无边框 |
| width | 像素 | 设置表的宽度，注意是表整体 |
| height | 像素 | 设置表的高度，注意是表整体 |
| align | left,center,right | 设置表的位置，注意是表整体，默认为左对齐 |
| cellspacing | 像素 | 设置单元格与单元格之间的距离，注意表整体的外部边框是一个大单元格。默认为2px |
| cellspadding | 像素 | 设置单元格与单元格中内容的距离，默认为1px |
表格属性效果（一般推荐设置border,cellspacing,cellspadding属性值设置为0.）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签-测试</title>
</head>
<body>
<table border="1", width="100", height="100", align="center", cellspacing="3", cellpadding="3">
<!--尝试去改动上述属性值验证效果 -->
<tr>
<td>Python</td>
<td>PHP</td>
<td>Perl</td>
</tr>
<tr>
<td>C</td>
<td>C++</td>
<td>C#</td>
</tr>
</table>
</body>
</html>
注意：对单元格内容居中对齐可以使用<tr align="center">或者<td align="center">，推荐是用CSS调整。
表头标签：一种对单元格内容加粗和居中的表示，一般去取表格的首行或者首列作为表头。闭标签，使用<th></th>标签，格式：<th>content</th>，取代<td></td>。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签-测试</title>
</head>
<body>
<table>
<tr>
<th>Python</th>
<th>PHP</th>
<th>Perl</th>
</tr>
<tr>
<td>C</td>
<td>C++</td>
<td>C#</td>
</tr>
</table>
</body>
</html>
标题标签：作为表格的标题，像<tr><td><th>一般嵌入<table>标签中。闭标签，效果居中显示，格式：<caption>title</caption>。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签-测试</title>
</head>
<body>
<table>
<caption>编程语言</caption>
<tr>
<th>Python</th>
<th>PHP</th>
<th>Perl</th>
</tr>
<tr>
<td>C</td>
<td>C++</td>
<td>C#</td>
</tr>
</table>
</body>
</html>
合并单元格：表格中会常出现单元格合并，可以单元多行合并，也可以多列合并。单元格属性：rowspan，行合并；colspan，列合并。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签-测试</title>
</head>
<body>
<table border="1">
<tr>
<th>X</th>
<th>X</th>
<th>X</th>
</tr>
<tr>
<td rowspan="2">X</td>
<td>X</td>
<td>X</td>
</tr>
<tr>
<td colspan="2">X</td>
</tr>
</table>
</body>
</html>
表单标签
表单的组成：表单控件、提示信息、表单域。
input控件：开标签，<input type="" />
| 属性 | 属性值 | 描述 |
| type | text | 单行文本框 |
| password | 密码输入框 | |
| radio | 单选按钮框 | |
| checkbox | 多选按钮框 | |
| button | 普通按钮 | |
| submit | 提交按钮 | |
| reset | 重置按钮 | |
| image | 图像提交按钮 | |
| file | 文件域 | |
| name | 用户自定义文本 | 控件名称 |
| value | 用户自定义文本 | 控件默认值 |
| checked | checked | 控件默认选项 |
input控件效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单标签-测试</title>
</head>
<body>
<table border="0", cellpadding="0", cellspacing="0", align="center">
<caption>个人信息表</caption>
<tr>
<td>用户名</td>
<td><input type="text", value="Bellamy" /></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" /></td>
</tr>
<tr>
<td>性别</td>
<td>
男<input type="radio" name="sex"， checked="checked" />
女<input type="radio" name="sex" />
</td>
</tr>
<tr>
<td>爱好</td>
<td>
运动<input type="checkbox", checked="checked" />
游戏<input type="checkbox" />
阅读<input type="checkbox" />
音乐<input type="checkbox" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="注册" />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="image" src="data:images/submit.jpg">
</td>
</tr>
<tr>
<td>上传头像</td>
<td><input type="file" /></td>
</tr>
</table>
</body>
</html>
注意：<input type="radio", name="xx">单选框按钮，必须在多个选项中添加相同的name属性值，将其归类为一组选择项，从中选择一项。
label标签：闭标签，效果扩大点击输入范围，格式：<label>用户名：<input type="text" /></label>。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>label标签-测试</title>
</head>
<body>
<!-- 点击用户名，文本框无光标输入提示 -->
用户名：<input type="text" />
<br />
<!-- 点击用户名，文本框有光标输入提示 -->
<label>用户名：<input type="text" /></label>
</body>
</html>
注意：<label>标签应用于两个<td>标签时，无法达到扩大点击输入范围，可以使用<label for="id">中的for属性指定。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单标签-测试</title>
</head>
<body>
<table>
<tr>
<td>
<label for="user_name">用户名</label>
</td>
<td>
<input type="text", value="Bellamy", id="user_name" />
</td>
</tr>
</table>
</body>
</html>
文本域标签：闭标签，<textarea></textarea>,效果可以输入多行文本，即文本可以换行输入，格式：<textarea>content</textarea>。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>textarea标签-测试</title>
</head>
<body>
<table>
<tr>
<td>留言</td>
<td>
<textarea>此处显示默认文本</textarea>
</td>
</tr>
</table>
</body>
</html>
下拉菜单：闭标签，<select><option></option>...</select>，效果点击出现下来选项，格式：<select><option>选项</option><option>选项</option>...</select>。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉菜单-测试</title>
</head>
<body>
<table>
<tr>
<td>出生年月</td>
<td>
<select>
<option>请选择年</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>...</option>
</select>
<select>
<option>请选择月</option>
<option>1月</option>
<option>2月</option>
<option>3月</option>
<option>4月</option>
<option>5月</option>
<option>...</option>
</select>
</td>
</tr>
</table>
</body>
</html>
在<option>设置selected="selected"属性可以设置默认显示选项。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉菜单-测试</title>
</head>
<body>
<table>
<tr>
<td>出生年月</td>
<td>
<select>
<option>请选择年</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option selected="selected">1993</option>
<option>...</option>
</select>
<select>
<option>请选择月</option>
<option>1月</option>
<option>2月</option>
<option selected="selected">3月</option>
<option>4月</option>
<option>5月</option>
<option>...</option>
</select>
</td>
</tr>
</table>
</body>
</html>
表单域：闭标签，用于包裹多个表单控件，格式：<form action="URL", method="提交方式" />，其中action属性指定接受处理表单的服务器URL地址，method指提交表单的方式，一般取HTTP方法的get或者post方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单标签-测试</title>
</head>
<body>
<form action="demo.php", method="post">
<table border="0", cellpadding="0", cellspacing="0", align="center">
<caption>个人信息表</caption>
<tr>
<td>用户名</td>
<td><input type="text", value="Bellamy" /></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" /></td>
</tr>
<tr>
<td>性别</td>
<td>
男<input type="radio" name="sex"， checked="checked" />
女<input type="radio" name="sex" />
</td>
</tr>
<tr>
<td>爱好</td>
<td>
运动<input type="checkbox", checked="checked" />
游戏<input type="checkbox" />
阅读<input type="checkbox" />
音乐<input type="checkbox" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="image" src="data:images/submit.jpg">
</td>
</tr>
<tr>
<td>上传头像</td>
<td><input type="file" /></td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="注册" />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</td>
</tr>
</table>
</form>
</body>
</html>
文档查阅
HTML标签还有很多，博客中提到的是我们常用标签，其他标签的使用和学习可以查阅W3C和MDN。
W3C：https://www.w3cschool.cn/
MDN：https://www.w3cschool.cn/
认识HTML中表格、列表标签以及表单控件的更多相关文章
- 前端 HTML body标签相关内容 常用标签 表单标签 form 表单控件分类
表单控件分类 input标签: input标签 type属性的text,password,button按钮,submit按钮 input标签placeholder属性 标签上显示内容 input标签 ...
- 从零开始学习前端开发 — 10、HTML5新标签及表单控件属性和属性值
一.html5新增标签 1.结构性标签 header 定义网页的头部 nav 定义网页的导航 footer 定义网页的底部 section 定义网页的某个区域 article 定义网页中的一篇文章 a ...
- 了解HTML表单之13个表单控件
目录 传统控件 button select option optgroup textarea fieldset legend label 新增控件 datalist keygen output pro ...
- Bootstrap_表单_表单控件
一.输入框input 单行输入框,常见的文本输入框,也就是input的type属性值为text. 在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确 ...
- Bootstrap 表单控件一（单行输入框input，下拉选择框select ，文本域textarea）
单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...
- HTML的表格标签，列表标签，表单标签，HTML5有哪些新特性
欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...
- 415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、 对表格操作、通用性和标准的事件监听方法（点击后弹窗效果以及去掉效果）
DOM访问列表框.下拉菜单的常用属性: form.length.options.selectedindex.type 使用options[index]返回具体选项所对应的常用属性:defa ...
- HTML入门（列表、表单、常用表单控件、浮动框架、iframe、 摘要与细节、度量标签）
一.列表 1.作用:默认显示方式为从上到下的显示数据 2.列表的组成 列表类型和列表项 3.列表的分类:有序列表 无序列表 自定义列表 无序列表语法为ul>li, 语法:ul代表列表,l ...
- Excel中的表单控件和active控件
EXCEL中有两种控件:表单控件和active控件 表单控件是excel5和excel95开始使用的,从excel97开始,active控件开始出现 关于表单控件和active控件的区别和使用范围,网 ...
随机推荐
- 利用URL重写实现Session跟踪
Servlet规范中引入了一种补充的会话管理机制,它允许不支持Cookie的浏览器也可以与WEB服务器保持连续的会话.这种补充机制要求在响应消息的实体内容中必须包含下一次请求的超链接,并将会话标识号作 ...
- LightOJ 1079 Just another Robbery (01背包)
题意:给定一个人抢劫每个银行的被抓的概率和该银行的钱数,问你在他在不被抓的情况下,能抢劫的最多数量. 析:01背包,用钱数作背包容量,dp[j] = max(dp[j], dp[j-a[i] * (1 ...
- element时间选择器插件转化为YYYY-MM-DD的形式
let datete = new Date(this.form.value0);this.form.value0 =datete.getFullYear() +"-" +(date ...
- 用firebug 进行表单自定义提交
在一些限制网页功能的场合,例如,防止复制内容,防止重复提交,限制操作的时间段/用户等,网页上一些按钮是灰化的(禁用的),这通常是通过设置元素的 disable属性来实现的.但在后台并没有做相应的功能限 ...
- C++ TIM或者QQ 自动发送消息
简单写了一下 很简单的demo 闲着没事干 #include "stdafx.h" #include <thread> #include <Windows.h&g ...
- MySQL参数log_bin_trust_function_creators
问题:执行创建函数的sql文件报错如下: [Err] 1418 - This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA ...
- MVC进阶篇（二）—路由机制
前言 这个东西好像,一般也不经常动,都用默认的即可.由于MVC模式在framework里面的解析机制,区别与webform模式,是采用解析路由机制的url.从来实例化视图列对象,然后对该action进 ...
- kali linux之edb--CrossFire缓冲区溢出
漏洞的罪恶根源------变量,数据与代码边界不清,开发人员对用户输入没做过滤,或者过滤不严 如这个脚本,写什么,显示什么,但是加上:,|,&&,后面加上系统命令,就执行命令了 缓冲区 ...
- GN算法---《Community structure in social and biological networks》这篇论文讲了什么？
用中文记下这篇论文的大致意思,以防止忘了.好记性不如烂笔头! 摘要:最近的一些研究在研究社交网络或WWW.研究者都集中于研究网络的“小世界性”,“幂率分布特性”,“网络传递性”(聚类性吧).本文提出网 ...
- P2645 斯诺克 题解
P2645 斯诺克 题目背景 镇海中学开设了很多校本选修课程,有体育类.音乐类.美术类.无线电测向.航空航海航天模型制作等,力争使每位学生高中毕业后,能学到一门拿得出手的兴趣爱好,为将来的终身发展打下 ...