一、列表（有序列表和无序列表）

1、无序列表

2、有序列表

3、列表的嵌套

二、表格

1、表格所需的主要标签

2、详细介绍表格的制作

3、单元格的合并（跨行和跨列）

三、表单

1、表单标签

2、表单控件

A、input控件

B、select控件：下拉列表控件

C、textarea控件：文本区,可以输入多行、多列数据

D、button控件：按钮控件

E、label控件：用于显示文本

3、表单练习

我们可以使用html来制作列表、表格和表单。

一、列表（有序列表和无序列表）

1、无序列表

(1)需要用到<ul></ul>标签和<li></li>标签。

<body><h3>一个无序列表：</h3><ul><li>苹果</li><li>桃子</li><li>栗子</li><li>桔子</li></ul></body>

（2）如示例所示，无序列表项目符号默认为小黑点。如果需要更改，则令<ul type="需要的形状">,如图:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>无序列表</title>
</head>
<body><h3>一个无序列表：</h3><ul type="disc"><li>苹果</li><li>桃子</li><li>栗子</li><li>桔子</li></ul><br><ul type="circle"><li>苹果</li><li>桃子</li><li>栗子</li><li>桔子</li></ul><br><ul type="square"><li>苹果</li><li>桃子</li><li>栗子</li><li>桔子</li></ul>
</body>
</html>

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

2、有序列表

(1)需要用到<ol></ol>标签和<li></li>标签。

 <h3>一个有序列表：</h3><ol type="disc"><li>苹果</li><li>桃子</li><li>栗子</li><li>桔子</li></ol>

(2)有序列表项目符号定义举例：

 <li>你平时休闲经常去的地方是哪（）</li><br><ol type="A" start="1"><li>郊外</li><li>商场</li><li>公园</li><li>酒吧</li><br></ol>

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

3、列表的嵌套

有序列表和无序列表可以实现嵌套，即在有序列表里可以嵌套无序列表，无序列表也是里嵌套有序列表，当然还有其他列表，比如说定义列表。

二、表格

1、表格所需的主要标签

A、每个表格由 table 标签开始。

B、每个表格行由 tr 标签开始。

C、每个表格数据由 td 标签开始

2、详细介绍表格的制作

（1）、标签及其解释

<table border='边框线的宽度' align='表格在页面中的对齐方式' bgcolor='表格的背景色' background='背景图片'></table>	表示一个表格
<thead></thead>	语义标签,表示表格的头部
<tr align='行的对齐方式' bgcolor='行的背景色' background='背景图片'></tr>	表示表格的行,一个tr代表一行
<th width='列宽'></th>	表示列头,文字会自动加粗、自动居中,特殊的单元格
<tbody></tbody>	语义标签,表示表格的主体部分
<td align='单元格的对齐方式'></td>	表示的表格中的单元格
<caption></caption>	表示表格的标题

表格的边框属性：border	用来设置边框线的粗细
表格的填充属性:cellpadding	表示的是单元格的内容和单元格边框之间的距离
单元格的间距属性：cellspacing	表示的是单元格之间的距离

（2）、示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格</title>
</head>
<body><table border="1" align="center"  ><thead><tr bgcolor="grey"><th width="400" >这是表头</th></tr></thead><tbody><tr bgcolor="yellow" align="center"><td>第一</td><td>第二</td><td>第三</td><td>第四</td><td>第五</td></tr><tr><td align="center">二一</td><td bgcolor="blue">二二</td><td>二三</td><td>二四</td><td>二五</td></tr><tr><td><img src="../images/1.gif" alt=""></td><td><img src="../images/1.gif" alt=""></td><td><img src="../images/1.gif" alt=""></td><td><img src="../images/1.gif" alt=""></td><td><img src="../images/1.gif" alt=""></td></tr></tbody></table>
</body>
</html>

如图所示：这是一个三行五列的表格。tr标签中的背景颜色在本行有效；td标签中的属性设置只在本单元格有效；插入图片需要用到<img></img>标签。

3、单元格的合并（跨行和跨列）

A、跨行（合并行）

在<td>中添加属性rowspan,该属性的值为占据的行数

<body><table border="1" align="center"><tr><td rowspan="2">跨两列</td><td>小王</td><td>小李</td></tr><tr><td>张三</td><td>李四</td></tr></table>
</body>

B、跨列（合并列）

<body><table border="1" align="center"><tr><td colspan="2">跨两行</td><td>小王</td></tr><tr><td>张三</td><td>李四</td><td>王五</td></tr></table>
</body>

三、表单

1、表单标签

A、action属性：表单数据提交的远程服务器的地址(服务器的URL)

B、method属性：表单数据的提交方式

2、表单控件

A、input控件

单行输入文本框	<input type='text'/>
密码框	<input type='password' />
重置按钮	<input type='reset' value='按钮上显示的文字'/>,若没有value属性,按钮上默认显示'重置'，只有放在<form></form>中才有效.
提交按钮	<input type='submit'/>，将表单数据提交给action指定的URL
单选按钮	<input type='radio' name='控件的名称' checked/> ,属性'checked'表示选中
复选框	<input type='checkbox' />
数字	<input type='number' />
日期选择框	<input type='date' />
时间选择框	<input type='time' />
隐藏控件	<input type='hidden' />

B、select控件：下拉列表控件

<body>
<form action=""><select><option value=''>列表项1</option><option value=''>列表项2</option><option value=''>列表项3</option></select>
</form>
</body>

点击即会有列表。

C、textarea控件：文本区,可以输入多行、多列数据

示例：<textarea cols="30" rows="10"></textarea>

D、button控件：按钮控件 <button type='按钮的类型'></button>

type属性的取值：

               a、type='button'：普通按钮,不含默认的动作(功能)

               b、type='reset'：重置按钮,重置表单控件

               c、type='submit'：提交按钮,将表单控件的值提交给远程服务器

E、label控件：用于显示文本

强调：

           (1)所有的表单控件(标签)都可以有id属性,id的属性值不能重复

           (2)所有的表单控件都有value属性,value属性的值会提交给远程服务器

           (3)所有的表单控件都有name属性,在后台可以通过name属性值找到对应的标签

           (4)disabled属性表示input是否可用(置灰)

           (5)readonly属性表示input的值是只读的

           (6)单行文本输入框(<input type='text'/>)的属性placeholder起提示的作用

           (7)required属性表示input是必须要输入的

           (8)maxlength属性表示input输入的最大长度

           (9)tabIndex属性用于设置表单控件的tab顺序

           (10)title属性用来设置鼠标经过时的提示文字

3、表单练习

<!DOCTYPE html></head>
<body><form action="#" method="GET"> <center><font face='宋体' color='bule' size="6" align='center'>用户注册表单</font></center><br/><br/><hr><table><tbody><tr><td width="200">用户名：</td><td width="400"><input type="text" name="" id=""></td><td><font face='宋体' color='red' size="3" align='center'>用户名长度为4-16字符</font></td></tr><tr><td width='200' align="left">密码：</td><td width='300'><input type="password"  title="登录密码"size='6'/></td><td width='200' align="left"><font face='宋体' color='red' size="3" align='left'>密码长度为6个字符</font></td></tr><tr><td width='200' align="left">确认密码：</td><td width='300'><input type="password" title="登录密码"size='6'/></td><td width='200' align="left"><font face='宋体' color='red' size="3" align='left'>重复密码</font></td></tr> <tr><td width='200' align="left">性别：</td><td width='300'></label><input type="radio" name="sex" id='s1'><label for="s1">男</label><input type="radio" name="sex" id="s2"><label for="s2">女</label></td></tr><tr><td width='200' align="left" >出生日期:</td><td width='300'><select ><option value="">----</option></select>年<select ><option value="">----</option></select>月<select ><option value="">----</option></select>日</td></tr><tr><td width='200' align="left">爱好：</td><td><input type="checkbox" id="chk1"><label for="chk1">体育</label><input type="checkbox" id="chk2"><label for="chk2">旅游</label><input type="checkbox" id="chk3"><label for="chk3">音乐</label></td><td width='200' align="left"><font face='宋体' color='red' size="3" align='left'>至少选三项</font></td></tr><tr><td></td><td><input type="checkbox" id="chk1"><label for="chk1">影视</label><input type="checkbox" id="chk2"><label for="chk2">追星</label><input type="checkbox" id="chk3"><label for="chk3">写作</label></td></tr><tr><td width='200' align="left">个人介绍：</td> <td><textarea cols="30" rows="10"></textarea> </td></tr><tr><td width='200' align="left">验证码：</td><td><input type="text" >791216</td>  <td width='200' align="left"><font face='宋体' color='red' size="3" align='left'>请输入验证码</font></tr></table><hr><table><tbody><tr><td width='200'></td><td width='400'></td><td><button type="reset" value="取消">重置</button><button type="submit" value="提交">提交</button></td></tr></tbody></table></form>
</body>

html中的列表、表格、表单相关推荐

定义列表的特点html,HTML的列表表格表单知识点
无序列表格式 ...
Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇除了HTML提供的三种基本列表样式: 无序列表 <ul><li>-& ...
html语法中表格命令具备哪些属性,html 语法介绍标签及有关属性列表表格表单...
1.HTML简介 HTML是用来做网页 HTML:Herp Text MarkUp Language 超文本标记语言超文本:超:超链接包含超链接的文本标记语言: 标记:标签语言:制作网页的语言 ...
(18)C#传智:HTML,属性,标签,元素,body,Font,A,列表,表格,表单,Div,Span,框架
比较简单,无事的跳过,直接w3c.school 一.HTML简介一个实例:右键查看源文件(标签,属性,内容...) HTML文档=网页 HTML超文本标记语言(Hyper ...
css文本,背景,动画和html列表,表格,表单总结
css文本标签的应用文本 text-shadow文本阴影:1px 2px 3px color 第1个长度值用来设置对象的阴影水平偏移值.可以为负值第2个长度值用来设置对象的阴影垂直偏移值.可以为负 ...
HTML基本结构标签列表表格表单 form input 单选框radio 多选框checkbox 列表框select option 按钮button
文章目录 HTML HTML基本结构网页的基本标签标题标签段落标签换行标签水平线字体样式标签 HTML注释和特殊符号图像标签常见的图片格式语法案例链接标签页面间链接语法锚链 ...
HTML表格、列表、表单
学习目标: 学会表格的基本语法,了解表格的属性以及合并单元格: 学会三种列表的基本语法,了解三种列表的属性. 学习内容: 一.表格标签表格的基本语法 <table> <tr> ...
html如何制作一个漂亮的表格？+ 列表制作 + 表单制作（干货！直接收代码）
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记如有转载,请注明出处(如不注明,盗者必究) 目录 html如何 ...
表格标签，今日小说排行榜案例，合并单元格，无序列表，有序列表，自定义列表，表单标签，注册页面综合案例
表格标签表格主要用于展示数据 <table><tr><td>单元格内的文字</td>...</tr>... </table> ...
vue中添加附件以及表单内表格动态添加的功能实现
vue前端表单自动生成地址 form-generator vue中添加附件以及表单内表格动态添加的功能实现页面展示 <el-col :span="12"><el ...

html中的列表、表格、表单

一、列表（有序列表和无序列表）

1、无序列表

2、有序列表

3、列表的嵌套

二、表格

1、表格所需的主要标签

2、详细介绍表格的制作

3、单元格的合并（跨行和跨列）

三、表单

1、表单标签

2、表单控件

A、input控件

B、select控件：下拉列表控件

C、textarea控件：文本区,可以输入多行、多列数据

D、button控件：按钮控件 <button type='按钮的类型'></button>

E、label控件：用于显示文本

3、表单练习

html中的列表、表格、表单相关推荐

最新文章

热门文章