HTML入门二（列表，表格与表单）
文章目录
- 一、列表
- 1、无序列表
- 2、有序列表
- 3、嵌套列表
- 二、表格
- 1、表格的基本语法
- 2、表格常用标签
- 3、合并单元格
- （1）跨多列的标签
- （2）跨多行的标签
- 4、表格填充属性
- (1)cellspacing属性
- (2)cellpadding属性
- 三、表单
- 1、表单的应用
- 2、表单页面基本结构
- 3、表单元素
- （1）文本框基本语法
- （2）密码框基本语法
- （3）单选按钮基本语法
- （4）复选按钮基本语法
- （5）列表框基本语法
- （6）多行文本框基本语法
- （7）按钮基本语法
- （8）其他语法
- 4、强调内容
一、列表
1、无序列表
用于页面中没有顺序的列举项
标签格式为
<ul type=''></ul>
type属性设置标号的类型，值可以取：
1、 disc ：实心圆点
2 、circle ：空心圆点
3、square ：实心方块
举例如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表</title>
</head>
<body><h1>四大名著</h1><ul type='square'><li>红楼梦</li><br/><li>西游记</li><br/><li>水浒传</li><br/><li>三国演义</li><br/></ul>
</body>
</html>
2、有序列表
用于说明页面中的某些成分，需要按特定的顺序排列。有序列表的每项都有连续的编号。
标签格式为
<ol type='' start=''></ol>
type设置标号的类型，值可以取：
1 、1：显示数字
2、 A：显示大写字母
3 、a：显示小写字母
4、 I：显示大写罗马数字
5、 i：显示小写罗马数字
start设置标号的起始值。
举例如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表</title>
</head>
<body><h1>战国七雄</h1><ol type="A" start="3"><li>韩</li><li>赵</li><li>魏</li><li>楚</li><li>燕</li><li>齐</li><li>秦</li></ol>
</body>
</html>
3、嵌套列表
一个列表作为另一个列表的一部分，即多层列表。
举例如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表</title>
</head>
<body><ul><li>你更喜欢吃哪种水果（ ）</li><br/><br/><ol type="A"><li>草莓</li><li>香蕉</li><li>苹果</li><li>西瓜</li></ol><br/><br/><li>你平时休闲经常去的地方在哪里（ ）</li><br/><br/><ol type="A"><li>郊外</li><li>商场</li><li>公园</li><li>酒吧</li></ol></ul>
</body>
</html>
二、表格
在 HTML 文档中，广泛使用表格来存放网页上的文本和图像。
1、表格的基本语法
<table><tr><td></td></tr></table>
2、表格常用标签
A:<table border=‘边框线的宽度’ align=‘表格在页面中的对齐方式’ bgcolor='表格的背景色’background=‘背景图片’>
举例如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格</title>
</head>
<body>
<table border="1" align="center" bgcolor='red'><tr><th>姓名</th><th>学号</th><th>年龄</th></tr><tr><td>小红</td><td>001</td><td>12</td></tr><tr><td>小明</td><td>002</td><td>12</td></tr><tr><td>小芳</td><td>003</td><td>13</td></tr>
</table>
</body>
</html>
B：语义标签,表示表格的头部
<thead></thead >
C：行的标签
<tr align='行的对齐方式' bgcolor='行的背景色' background='背景图片'></tr>：表示表格的行,一个tr代表一行
D：列头的标签
<th width='列宽'></th>：表示列头,文字会自动加粗、自动居中,特殊的单元格
E：语义标签,表示表格的主体部分
<tbody></tbody>
F：单元格的标签
<td align='单元格的对齐方式'></td>：表示的表格中的单元格
G：标题标签
<caption></caption>
举例如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表</title>
</head>
<body>
<table border="1" align="center" bgcolor='red'><caption>信息表</caption><tr><th width='150px'>姓名</th><th width='150px'>学号</th><th width='150px'>年龄</th></tr><tr><td align="right">小红</td><td>001</td><td align="right">12</td></tr><tr><td>小明</td><td align="right">002</td><td>12</td></tr><tr><td align="right">小芳</td><td>003</td><td align="right">13</td></tr>
</table>
</body>
</html>
3、合并单元格
（1）跨多列的标签
<td colspan=""></td>一个单元格占据多列,在<td>中添加属性colspan,该属性的值为占据的列数
（2）跨多行的标签
<td rowspan=""></td>一个单元格占据多行,在<td>中添加属性rowspan,该属性的值为占据的行数
举例如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格</title>
</head>
<body>
<table border="1" align="center"><tr><th colspan="3">淘宝</th></tr><tr><td rowspan="2">手机</td><td>vivo</td><td>oppo</td></tr><tr><td>苹果</td><td>华为</td></tr>
</table>
</body>
</html>
4、表格填充属性
(1)cellspacing属性
用来设置表格内框宽度
(2)cellpadding属性
用来设置表格内填充距离
三、表单
1、表单的应用
注册用户
收集信息
反馈信息
搜索引擎
2、表单页面基本结构
<form action="" method=""></form>
action：设置服务器上处理程序的位置，参数值是一个URL路径。
method：设置表单的运行方式，可以取值get、post。
get的特点是信息暴露、长度不能超过255字节，但是速度快。
post的特点信息隐藏、长度不限，但是速度较慢。
3、表单元素
（1）文本框基本语法
<input type=“text” value="" size="">
text为文本输入框
value为输入元素的默认值
size为文本区的宽度
举例如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单</title>
</head>
<body><form action="#"><input type=“text” value="小欢" size="20"/></form>
</body>
</html>
（2）密码框基本语法
<input type=“password” value=“” size=“”>
password为密码框
value为输入密码的默认值
size为密码区的宽度
举例如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单</title>
</head>
<body><form action="#"><input type=“password” value='123456' size='10'></form>
</body>
</html>
（3）单选按钮基本语法
<input type="radio" value="男" checked="checked">
value为默认值
size为密码区的宽度
checked默认选中
id定义一个唯一的标识符，链接时标识元素
name为控件名称
举例如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单</title>
</head>
<body><form action="#"><input type="radio" name="sex" id="1" checked/><label for="1">男</label><input type="radio" name="sex" id="2"/><label for="2">女</label></form>
</body>
</html>
ps: label标签可以绑定某个表单元素，用于扩展可以相应点击等事件的区域且label中的for属性值与id值相匹配，可以将文本与单选按钮链接起来，使点击文本时也可以达到单选效果。
（4）复选按钮基本语法
<input type=“checkbox” name="" value="talk">
value为默认值
name为控件名称
举例如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单</title>
</head>
<body><form action="#"><input type="checkbox" id='1'/><label for="1" >运动</label><input type="checkbox" id='2'/><label for="2">看电影</label><input type="checkbox" id='3'/><label for="3">读书</label></form>
</body>
</html>
（5）列表框基本语法
<select size=“”><option value=""></option><option value=""></option><option value=""></option>……</select>
第一个option内填写为默认值
其余option内为选择值
举例如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单</title>
</head>
<body><form action="#"><select name="#"><option value="选择">选择</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select> </form>
</body>
</html>
（6）多行文本框基本语法
<textarea name=“textarea” cols=“” rows=“”>内容</textarea>
name为文本框的名字
cols为文本框的列数
rows为文本框的行数
举例如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单</title>
</head>
<body><form action="#"><textarea name="textarea" id="1" cols="30" rows="10">好好学习，天天向上</textarea></form>
</body>
</html>
（7）按钮基本语法
<input type='' name='' value=''>
type内填写按钮类型可为button（按钮）、submit（提交）、reset（重置）
value为按钮上的标签
name为按钮名称
举例如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单</title>
</head>
<body><form action="#"><p><input type="reset" name="reset" value=" 重填 "><input type='submit' name='submit' value='提交'><input type="button" name="cancel" value="取消"></p></form>
</body>
</html>
（8）其他语法
a、数字：<input type='number' />b、日期选择框：<input type='date' />c、时间选择框：<input type='time' />d、隐藏控件：<input type='hidden' />
4、强调内容
(1)所有的表单控件(标签)都可以有id属性,id的属性值不能重复；
(2)所有的表单控件都有value属性,value属性的值会提交给远程服务器；
(3)所有的表单控件都有name属性,在后台可以通过name属性值找到对应的标签；
(4)disabled属性表示input是否可用(置灰)；
(5)readonly属性表示input的值是只读；
(6)单行文本输入框的属性placeholder起提示的作用；
(7)required属性表示input是必须要输入的；
(8)maxlength属性表示input输入的最大长度；
(9)tabIndex属性用于设置表单控件的tab顺序；
(10)title属性用来设置鼠标经过时的提示文字。
HTML入门二（列表，表格与表单）相关推荐
- html表格列表模板,前端基础 - HTML（二） 表格、表单、列表
表格 table标签用于定义表格 tr 必须嵌套在table标签中 td 必须嵌套在tr中 表格的基本语法: ↑---border代表边框线 align代表位置 right左边left(右边)cent ...
- WEB入门二 表格和表单
学习内容 Ø 表格的作用和制作 Ø 表单的制作 入门视频课:H5和JAVASCRIPT实战教程 能力目标 Ø 掌握表格的创建 Ø 掌握设置表格的 ...
- easyui表单网格列错位_《HTML5从入门到精通》——第3章 HTML表格与表单
<HTML5从入门到精通> ◎千锋教育高教产品研发部/编著 (清华大学出版社出版) 目 录 第3章 HTML表格与表单................................... ...
- HTML的表格标签，列表标签，表单标签，HTML5有哪些新特性
HTML的表格标签,列表标签,表单标签,HTML5有哪些新特性 欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页: ...
- html中的列表、表格、表单
目录 一.列表(有序列表和无序列表) 1.无序列表 2.有序列表 3.列表的嵌套 二.表格 1.表格所需的主要标签 2.详细介绍表格的制作 3.单元格的合并(跨行和跨列) 三.表单 1.表单标签 ...
- HTML5简明教程系列之HTML5 表格与表单（二）
HTML的第二弹也来了,最近高产似母猪,状态也不错,代码来源为实验课.本期主要内容为:HTML表格与DIV应用.HTML表单.上期基础部分的传送门: HTML5简明教程系列之HTML5基础(一)_Th ...
- 前端之表格，表单，列表
## 本资源由 itjc8.com 收集 --- typora-copy-images-to: media --- > 第01阶段.前端基础.表格 # HTML 第二天目标 能够利用表格.列表和 ...
- 前端学习第一周-计算机基础，html标签的介绍，其中包括列表，表格以及表单的使用
前端学习第一周-HTML基础 文章目录 前端学习第一周-HTML基础 前言 DAY 1 计算机组成 计算机网络 DAY 2 vscode快捷方式 HTML骨架 DAY 3 HTML属性 HTML标签 ...
- HTML 表格标签、列表标签、表单标签（案例： 注册页面）
1. 表格标签 表格是实际开发中非常常用的标签: 1. 表格的主要作用 2. 表格的基本语法 1.1 表格的主要作用 表格主要用于显示.展示数据,因为它可以让数据显示的非常的规整,可读性非常好.特别是 ...
- 解放前端工程师——手把手教你开发自己的自定义列表和自定义表单系列之二接口
前言 阅读前请按照顺序参看系列文章,效果更佳! Vue中路由到一个公共组件,然后根据路径中是否存在文件动态加载组件 解放前端工程师--手把手教你开发自己的自定义列表和自定义表单系列之一缘起 据说系列文 ...
最新文章
- 成都郫县php开发学校_成都各区九年制学校、十二年制学校汇总
- ora-14400插入的分区关键字未映射到任何分区---oracle数据库表过期问题
- 强化学习(十九) AlphaGo Zero强化学习原理
- ABAP OO的八大理由(四)
- Vue2.0中子组件向父组件传递数据的方法，以完整demo演示
- SAP Spartacus初始化时和user token相关的APP INITIALIZER
- 光纤测试时不得不用的福禄克CFP光纤测试仪
- 上下div高度动态自适应--另类处理方案
- 【JS】我的JavaScript学习之路(2)
- MongoDB入门简介
- mysql创建数据库schooldb_mysql创建新用户和数据库
- 定义一个没有参数的函数、输出python3次_Python函数参数详解，三天让你掌握python，不再是小白
- Tomcat启动Maven项目异常：java.lang.NoClassDefFoundError: org/springframework/context/ApplicationContext
- linux用shell怎么改文件名称,linux下使用shell批量修改文件名几种方法总结
- 局域网即时通讯软件_远程桌面监控软件好不好用？哪个好？
- Oracle兵器谱上古神器之-KFED
- ARTIX-7 XC7A35T实验项目之 串口发送
- http2协议翻译(转)
- 毕业生档案、户籍、三方协议等问答
- 计算机组成原理学习笔记——计算机外围设备