Web前端——HTML中的列表、表格、表单
一. 列表
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表</title>
</head>
<body><!-- 列表（list）1、铅笔2、尺子3、橡皮在html中也可以创建列表，html列表一共有三种：1、有序列表2、无序列表3、定义列表无序列表，使用ul标签来创建无序列表使用li表示列表项(list item) 有序列表，使用ol标签来创建无序列表使用li表示列表项 定义列表，使用dl标签来创建一个定义列表使用dt来表示定义内容使用dd来对内容进行解释说明列表之间可以相互嵌套--><ul><li>结构</li><li>表现</li><li>行为</li>
</ul><ol><li>结构</li><li>表现</li><li>行为</li>
</ol><dl><dt>结构</dt><dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd><dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd><dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
</dl><ul><li>aa<ul><li>aa-1</li><li>aa-2</li></ul></li>
</ul></body>
</html>
结果：
1. 符号列表
<h3>HTML5 + CSS + JS --- 符号列表</h3><hr><!-- 添加文档主体内容 --><ul type="disc"><li>圆点符号列表1</li><li>圆点符号列表2</li><li>圆点符号列表3</li></ul><ul type="circle"><li>空心圆形符号列表1</li><li>空心圆形符号列表2</li><li>空心圆形符号列表3</li></ul><ul type="square"><li>方形符号列表1</li><li>方形符号列表2</li><li>方形符号列表3</li></ul>
2. 编号列表
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>符号列表标签</title>
</head><body><!-- type属性可以修改列表项前面的符号--><h3>HTML5 + CSS + JS --- 编号列表</h3><hr><!-- order list --><ol type="1"><li>列表1</li><li>列表2</li><li>列表3</li></ol><hr><ol type="I"><li>列表I</li><ol type="i"><li>列表i</li><li>列表ii</li></ol><li>列表II</li></ol><hr><ol type="A"><li>列表A</li><ol type="a"><li>列表a</li><li>列表b</li><li>列表c</li></ol><li>列表B</li><li>列表C</li></ol>
</body></html>
3. 自定义列表
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>自定义列表标签</title>
</head><body><h3>HTML5 + CSS + JS --- 自定义列表</h3><hr><!-- 添加文档主体内容 --><dl><dt>HTML 5</dt><dd>HyperText Mark-up Language 5th</dd><dt>CSS3</dt><dd>Cascading Style Sheets 3</dd><dt>JavaScript</dt><dd>非常、非常强大的脚本语言</dd></dl>
</body></html>
二. 表格
1. 定义
HTML表格一般由表格标题、表头、表格主体、表格行、表格列、单元格、表注等部分组成
表格由 <table> 标签来定义。
每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。
字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<!doctype HTML>
<html>
<head>
<title>表格</title>
</head>
<body><table border="1"> <!-- 边框属性，表示边框的宽度 --><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr><!-- tr表示行，td表示列 --></table>
</body>
</html>
表格的表头单元格使用 <th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本：
<table border="1" align="center"> <!--align设置表格相对于页面的对齐方式--><tr><th>Header 1</th><th>Header 2</th></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr>
</table>
2. 属性
(1). 定义表格主体的标签
<caption>标签--------定义表格的标题
<caption align="水平对齐方式" valign="垂直对齐方式">表格标题
</caption>
<thead>标签 ---------表格的页眉（表头部分）
<tbody>标签 ---------表格的主体
<tfoot>标签 ---------定义表格的页脚（表格的注脚）
表格三要素 table、tr、td 缺一不可。
(2). 定义表格属性的标签
语法：
<table 属性1="" 属性2="" ...> </table>
<table> 标签（定义表格）
常用属性：
border="1" 表格边框的宽度
bordercolor="#fff" 表格边框的颜色
cellspacing="5" 单元格与单元格之间的空白间距cellpadding="6" 设置单元格内容与其边框之间的空白距离宽度
width="500" 表格的总宽度
height="100" 表格的总高度
bgcolor="#fff" 表格整体的背景色
align="对齐方式" 设置表格对齐方式
(3). th标签属性
<th> 标签（定义表格的表头单元格）
常用属性:
width="500" 单元格的宽度，设置后对当前一列的单元格都有影响
height="100" 单元格的高度，设置后对当前一行的单元格都有影响
bgcolor="fff" 单元格的背景色
align="right" 单元格文字的水平对齐方式 (参数left、center、right)
valign="top" 单元格文字的垂直对齐方式 (参数middle、bottom、top)
rowspan="3" 合并垂直水平方向的单元格
colspan="3" 合并水平方向单元格
(4). tr标签属性
<tr> 标签（定义表格的行）
常用属性:
bgcolor="#fff" 行的颜色
align="right" 行内文字的水平对齐方式 (参数有left、center、right)
valign="top" 行内文字的垂直对齐方式 (参数有top、middle、bottom)
(5). td标签属性
<td>标签（定义表格的列）
常用属性：
定义表格内文字的对齐水平排列：align="right" 表格整体对齐方式 (参数有 left、center、right)垂直排列：valign=top/ middle /bottom/ baseline(基线)rowspan="3" 合并垂直水平方向的单元格
colspan="3" 合并水平方向单元格
举例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="DZQ" content="width=device-width, initial-scale=1.0"><title>课程表</title></head>
<body><style>table tr th,table tr td {border: 1px solid black;}</style><table width="600" border="4" cellspacing="5" cellpadding="6" style="border-style:solid; border-color: #4C96FF; "><caption align="center">课程表</caption><tr><th>项目</th><th colspan="3" align="center">理论课：11</th><th colspan="2" align="center">实验课：ss</th><th colspan="2" align="center">休息：00</th></tr><tr bgcolor=silver><td>星期</td><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td><td>星期六</td><td>星期天</td> </tr><tr><td rowspan="2">上午</td><td align=left>11</td><td align=right>00</td><td align=left>11</td><td align=right>00</td><td align=left>11</td><td align=right>00</td><td rowspan="2" valign=bottom align="right">00</td></tr><tr><td align=left>11</td><td align=left>11</td><td align=left>11</td><td align=right>00</td><td align=left>11</td><td align=left>11</td></tr><tr><td rowspan="2">下午</td><td align=left>ss</td><td align=left>ss</td><td align=right>00</td><td align=right>00</td><td align=left>ss</td><td align=right>00</td><td rowspan="2" align=right>00</td></tr><tr><td align=right>00</td><td align=left>ss</td><td align=right>00</td><td align=right>00</td><td align=right>00</td><td align=left>ss</td></tr></table></body>
</html>
三. 表单
用户需要使用它来输入数据，并向服务器提交数据，服务器的有关应用程序将处理提交信息，处理结果或是将用户提交的信息存储在服务器端的数据库中，或是将有关信息返回到客户端的浏览器上。用户在表单中输入的数据将作为请求参数发送给服务器，从而实现用户与web应用的动态交互
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,
比如：
文本域(textarea)、
下拉列表、
单选框(radio-buttons)、
复选框(checkboxes)、
提交重置按钮等等。
最终通过表单提交实现数据传递的组件
表单使用表单标签 <form> 来设置
<form><input 元素></form>
1. 表单<form>标签元素
在HTML中，表单form标签中可以添加一系列属性
accept-charset：定义服务器可处理表单数据字符集
action：属性值为URL，定义当提交表单时向该URL发送表单数据
method：属性值为get或post，用于定义发送form-data的HTTP方法-get 方法是默认的，使用get时，表单数据在页面地址栏可见-post 在页面地址栏中被提交的数据是不可见的
name：定义表单的名称
target：定义何处打开action URL，属性值一般为_blank, _self
form标签具体来说有两方面的作用：
- 限定表单范围，即定义一个区域，表单各元素都要设置在这个区域内，点击提交按钮时，提交的也是这个区域的数据
- 携带表单的相关信息，如处理表单的程序
基本语法
<form name="表单名称" method="提交方法" action="处理程序"> ...
</form>
2. 表单<form>标签组成
(1). 输入标签<input>
多数情况下被用到的表单标签是输入标签（<input> ）。
<input>标签根据不同的type属性值，会有不同的的表现形式，
例如：
文本字段、
文本域、
列表、
单选框、
复选框、
密码框、
文本控件、
分组、
单选按钮
基本语法
<input type="元素类型" name="表单元素名称" value="默认值">
注：表单中的单选按钮可以设置以下几个属性：value、name、checked
value：提交数据到服务器的值（后台程序PHP使用）name：为控件命名，以备后台程序 ASP、PHP 使用checked：当设置 checked="checked" 时，该选项被默认选中
| type属性值 | 描述 |
|---|---|
| text | 设置单行文本框元素 |
| password | 设置密码元素 |
| file | 设置文件元素 |
| hidden | 设置隐藏元素 |
| radio | 设置单选框元素 |
| checkbox | 设置复选框元素 |
| button | 设置普通按钮元素 |
| submit | 设置提交按钮元素 |
| reset | 设置重置按钮元素 |
<form><p>你生活在哪个国家？</p><input type="radio" name="country" value="China" checked="checked">中国<br/><input type="radio" name="country" value="the USA">美国
</form>注意：同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“country”，
这样同一组的单选按钮才可以起到单选的作用。
输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
1. 文本框（Text Fields）
文本域通过<input type=“text”> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
<form>First name: <input type="text" name="firstname"><br>Last name: <input type="text" name="lastname">
</form>
注：
input属性中 type类型为reset表示重置
type类型为submit表示提交
type类型为text表示文本域
label标签主要作用是为input标签定义标记文本域添加关联标记通过label标签的for属性，其属性值与input标签中的id属性值一一对应
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表单</title>
</head><body><h3>HTML5 + CSS + JS --- HTML表单<form>文本域</h3><hr><br><!-- 添加文档主体内容 --><form action="ch06-html-form-textfield.php" method="get" target="_blank"><table><caption>文本域表单</caption><tr><th><label for="id_form_username">用户名:</label></th><td><input type="text" name="name_form_username" id="id_form_username" /></td></tr><tr><th><label for="id_form_nickname">昵称:</label></th><td><input type="text" name="name_form_nickname" id="id_form_nickname" /></td></tr><tr><th><label for="id_form_sex">性别:</label></th><td><input type="text" name="name_form_sex" id="id_form_sex" /></td></tr><tr><th><label for="id_form_age">年龄:</label></th><td><input type="text" name="name_form_age" id="id_form_age" /></td></tr><tr><th><label for="id_form_level">级别:</label></th><td><input type="text" name="name_form_level" id="id_form_level" /></td></tr><tr><td></td><td><input type="reset" value="重置" /><input type="submit" value="提交" /></td></tr></table></form></body></html>
2. 密码字段
密码字段通过标签<input type=“password”> 来定义:
<form>Password: <input type="password" name="pwd">
</form>
3. 单选按钮（Radio Buttons）
<input type=“radio”> 标签定义了表单单选框选项
<form><input type="radio" name="sex" value="male" check="checked">Male<br><input type="radio" name="sex" value="female">Female
</form>
- check="checked"表示默认选中
4. 复选框（Checkboxes）
<input type=“checkbox”> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
<form><input type="checkbox" name="vehicle" value="Bike">I have a bike<br><input type="checkbox" name="vehicle" value="Car">I have a car
</form>
5. 提交按钮(Submit Button)
<input type=“submit”> 定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:
<form name="input" action="https://blog.csdn.net/qq_44853882" method="get">Username: <input type="text" name="user"><input type="submit" value="Submit">
</form>
6. 隐藏域(hidden)
主要用于在不同页面中传递域中设定的值
基本语法：
<input type="hidden" name="域名称" value="域值">name设置隐藏域的名称
value用于设置隐藏域需要传递的值
7. 文件域(file)
用于创建文件域，文件域可以将本地文件上传到服务器端
基本语法：
<input type="file" name="域名称">
注：name设置文件域的名称，用于在脚本中获取域的数据。
在将文件内容上传到服务器，还必须修改表单的编码，这需要使用form标签的enctype属性，应该将属性的值设置为multipart/form-data，同时提交表单方法必须为post
(2). Label标签
- < label>标签为input元素定义标注
- < label >标签用于绑定一个表单元素，当点击< label >标签内的文本时，浏览器会自动将焦点（光标）转到或者选择相应的表单元素上，用来增加用户体验
语法：
<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>
核心：< label >标签的for属性应当与相关元素的id属性相同
<!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>label标签</title>
</head>
<body><label for="name"> 用户名：</label> <input type="text" id="name"> <label for="man">男：</label><input type="radio" name="sex" id="man"><label for="woman">女：</label><input type="radio" name="sex" id="woman">
</body>
</html>
(3). 选择列表标签<select>
1. 下拉列表
在使用下拉列表时，用户每次只能选择一项，这点和单选按钮的功能比较接近
但是当选项很多时，下拉列表的优势就比较明显
下列列表通过<select><option>标签来实现
select标签的name=web属性表示，PHP服务器将通过该属性值获取下拉列表的选项值
通过option标签元素value定义了6中语言类型
修改默认项方式：在option中添加selected属性即可
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表单</title>
</head><body><h3>HTML5 + CSS + JS --- HTML表单<form>示例</h3><hr><br><!-- 添加文档主体内容 --><form action="ch06-html-form-select.php" method="get" target="_self"><table class="csstable"><caption>下拉列表表单</caption><tr><th>请选择您最喜爱的编程语言:</th></tr><tr><td><select name="web"><option value="html">HTML</option><option value="css">CSS</option><option value="js" selected="selected">JavaScript</option><option value="php">PHP</option><option value="asp">ASP.Net</option><option value="C#">C#</option></select></td></tr><tr><td><hr></td></tr><tr><td><input type="reset" value="重置" /><input type="submit" value="提交" /></td></tr></table></form></body></html>
2. 多项选择列表
多项选择列表是指一次可以选择多个列表选项，且一次可以显示1个以上列表选项的选择列表
基本语法：
<select name="列表名称" size="显示的选项数目" multiple="multiple"><option value="选项值" selected="selected"> 选项一 </option><option value="选项值" selected="selected"> 选项二 </option><option value="选项值"> 选项三 </option>
size设置同时显示的列表选项个数(默认为1)，取值大于或等于1
multiple设置列表中的项目可多选
selected设置默认选项，可对多个列表选项进行此属性的设置
(4). 多行文本域标签<textarea>
多行文本域textarea可以在控件内输入多行数据信息元素，且可以设定标签元素的行高和列宽
基本语法：
<textarea name="文本区域名称" rows="行数" cols="字符数">...(起始标签和结束标签输入的为默认文本)
</textarea>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><link type="text/css" rel="stylesheet" href="css/style.css" /><title>HTML 之表单</title>
</head><body><h3>HTML5 + CSS + JS --- HTML表单<form>多行文本域</h3><hr><br><!-- 添加文档主体内容 --><form action="ch06-html-form-textarea.php" method="post" target="_self"><table class="csstable"><caption>多行文本域表单</caption><tr><th><label for="id_textarea_web">请写出<br>您喜爱的<br>编程语言:</label></th><td><textareaname="name_textarea_web"id="id_textarea_web"rows="5"cols="25"></textarea></td></tr><tr><td colspan="2"><hr></td></tr><tr><td></td><td><input type="reset" value="重置" /><input type="submit" value="提交" /></td></tr></table></form></body></html>
(5). 表单提交的细节
form标签是表单标签
- action属性设置提交的服务器地址
- method属性设置提交的方式get(默认)或post
表单提交的时候，数据没有发送给服务器的三种情况：
- 表单项没有name属性值
- 单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
- 表单项不在提交的form标签中
GET请求的特点是：
4. 浏览器地址栏中的地址是：action属性[+?+请求参数]
请求参数的格式是：name=value&name=value
5. 不安全
6. 它有数据长度的限制
POST请求的特点是：
7. 浏览器地址栏中只有action属性值
8. 相对于GET请求要安全
9. 理论上没有数据长度的限制
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单的显示</title>
</head>
<body><form action="http://localhost:8080" method="post"><input type="hidden" name="action" value="login" /><h1 align="center">用户注册</h1><table align="center"><tr><td> 用户名称：</td><td><input type="text" name="username" value="默认值"/></td></tr><tr><td> 用户密码：</td><td><input type="password" name="password" value="abc"/></td></tr><tr><td>性别：</td><td><input type="radio" name="sex" value="boy"/>男<input type="radio" name="sex" checked="checked" value="girl" />女</td></tr><tr><td> 兴趣爱好：</td><td><input name="hobby" type="checkbox" checked="checked" value="java"/>Java<input name="hobby" type="checkbox" value="js"/>JavaScript<input name="hobby" type="checkbox" value="cpp"/>C++</td></tr><tr><td>国籍：</td><td><select name="country"><option value="none">--请选择国籍--</option><option value="cn" selected="selected">中国</option><option value="usa">美国</option><option value="jp">小日本</option></select></td></tr><tr><td>自我评价：</td><td><textarea name="desc" rows="10" cols="20">我才是默认值</textarea></td></tr><tr><td><input type="reset" /></td><td align="center"><input type="submit"/></td></tr></table></form>
</body>
</html>
3. HTML5新增大量input标签元素
(1). email类型
(2). number类型
(3). range类型
(4). url类型
(5). data pickers日期选择器类型
Web前端——HTML中的列表、表格、表单相关推荐
- Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul><li>-& ...
- 定义列表的特点html,HTML的列表表格表单知识点
无序列表格式 ...
- 视频教程-Web前端开发利器 SPRY框架之表单验证-JavaScript
Web前端开发利器 SPRY框架之表单验证 有17年互联网行业从业经验,始终在教学第一线,勇于创新,从有效教学,不断向高效教学转变.始终坚持"学生为主体,教师为主导:商业化案例,企业化情境& ...
- web前端必学功法之一：表单校验（1）
web前端必学功法之一:表单校验 案例效果: 这里的布局采用的是bootstrap布局 <div class="container" style="margin-t ...
- web前端必学功法之一：表单校验（2）
web前端必学功法之一:表单校验(2) 这里采用另一种写法,jQuery写法,在用jQuery写法之前,一定要引入jquery.js. <div class="container&qu ...
- 【前端学习日志】HTML表格表单注册页面案例+CSS选择器
今日学习 一.HTML部分 1.表格的基本语法 2.表头单元格标签 3.还是表头单元格标签 4.小说排行榜案例 5.合并单元格 6.无序列表 7.有序列表 8.自定义列表 9.表单域 10.Input ...
- 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个长度值用来设置对象的阴影垂直偏移值.可以为负 ...
最新文章
- 海康威视 AI Cloud 软硬件平台
- 解决vue项目eslint校验 Do not use ‘new‘ for side effects 的两种方法
- java通过ssh读取日志_IDEA+java通过SSH来进行分析日志，实现UI自动化动态验证码登录...
- SDUT—2054数据结构实验之链表九：双向链表 （基本建立）
- 我国法定报告的传染病分为几类？包括哪些传染病？
- android 购物车抛物线,添加到购物车抛物线动画
- React JS 组件间沟通的一些方法
- 实验1 熟悉实验环境
- linux 安装rpm包时遇到error:Failed dependencies解法方法
- Oracle技术之初始化参数REMOTE_OS_AUTHENT
- python_IDE开发环境使用_建立Python源文件---python工作笔记011
- 【实践】小红书推荐中台实践
- windows Anaconda lightgbm 安装
- 【Docker】常用命令简述十一
- 大牛精心挑选的25个Visual Basic学习资料汇总
- linux光盘挂载加载过程,如何在Linux系统下挂载光盘
- html编码的aacll,高级音频编码（AAC）的一种信息隐藏方法.pdf
- SLA文档提高期学习总结
- 军团指挥官(权限题)
- 什么是对齐，为什么要对齐