HTML03——列表_表格_表单

最新推荐文章于 2023-12-17 11:32:33 发布

rjbp40ht

最新推荐文章于 2023-12-17 11:32:33 发布

阅读量463

点赞数 1

分类专栏： HTML 文章标签： html web

本文链接：https://blog.csdn.net/qiao39gs/article/details/107700996

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

列表

无序列表

<ul type="><li></li></ul>
默认样式通常是黑色的实心小园圈 disc
circle 空心小园圈 square 小方块

有序列表

<ol type="" start="><li></li></ol>
Type属性取值：A a i 1

自定义列表

自定义列表不是一个项目的序列，它是一系列条目和它们的解释。有序列表以<dl>标签开始，自定义列表条目以<dt>开始，自定义列表的定义以<dd>开始。

表格

< table>标签属性
- width、height、bordercolor、bgcolor
- border、cellspacing、cellpadding、align
<tr>标签属性
- width、height、bordercolor、bgcolor
- border、align、valign
<td>标签属性
colspan 横跨的列数（合并列）
rowspan 横跨的行数（合并行）
<th> 表头默认显示为加粗，和<td>用法一样
<caption> 表格标题
<thead>
< tbody>
<tfoot>
如果使用 thead、tfoot 以及 tbody元素，就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。必须在tabe元素内部使用这些标签。

eg:课程表

表单

表单是Web浏览器和Web服务器进行通信的最常用的手段，即通过表单，浏览器不仅能从Web服务器中获得信息，而且还能向Web服务器反馈信息。HTML为此提供了表单（Form）元素来设计和实现这种交互界面。

表单形成的交互界面上有许多元素，负责收集用户输入的各种信息，这些元素一般称为控件。

单行/多行文本框
复选框
单选按钮
文件域
隐藏域
下拉菜单
提交按钮
重置按钮

form标签

属性：

action 提交的地址
method 提交的方式
- GET:
  是将编码好的表单数据追加到请求该页的URL中，通常，浏览器的默认方法为GET方法。URL的长度限制在8192个字符以内。所以不要使用GET方法发送长表单，如果发送的数据量太大，数据将被截断，从而导致意外的或失败的处理结果，而且，在发送机密用户名和密码、信用卡号或其他机密信息时，不要使用GET方法。用GET方法传递信息不安全
- POST
  POST在HTTP请求中嵌入编码好的表单数据，长度由HTTP请求中的CONTENT_LENGTN定义
name 规定表单的名称
enctype
- application/x-www-form-urlencoded在发送前编码所有字符（默认）
- multipart/form-data不对字符编码。在使用包含文件上传控件的表单时，必须使用该值
target
- 接受数据的页面以哪种方式打开

下拉框

HTML是过<select>和<option>标记来定义输入列表框的

列表框标记<select>是成对出现标记，首标记<select>和尾标记</select>之间的内容就是一个列表框的内容
<option>标记用于定义列表框中的各个选项

<select>标记属性有：name,size和multiple，其中name属性是不可缺省的

name属性用于指定输入列表框的名字
size属性 size属性是可选的，用于定义列表框的长度。size属性的参数值是数字，表示显示在列表框中的选项数目。当size属性的参数值小于列表框中的列表项数目时，浏览器会为该列表框添加滚动条，用户可以使用滚动条来查看所有的选项。size属性的缺省值为1
multiple属性表示可以多选，如果不设置本属性，那么只能单选；按Ctrl可以多选用法：multiple="multiple"

文本区域标记

HTML用<textarea>标记来定义高度超过一行的文本输入框。< textarea>标记是成对出现标记，首标记< textarea>和尾标记</textarea>之间的内容就是显示在文本输入框中的初始信息。< textarea>标记属性：NAME、ROWS和COLS

name属性用于指定文本输入框的名字。
cols属性 COLS属性用于规定文本输入框的宽度。属性的参数值是数字表示一行所能示的最大字符数。如果输入信息中有一行或几行的字符数大于COLS属性的参数值，浏览器会为该文本输入框添加水平滚动条
rows属性 ROWS属性用于规定文本输入框的高度。属性的参数值是数字，表示该文本输入框所占的行数。浏览器会自动为高度超过一行的文本输入框添加垂直滚动条。但是当输入信息的行数小于或等于ROWS属性的参数值时，滚动条将不起作用

按钮

<input type="submit">
<input type="reset">
<input type="button">

属性：

value 按钮中默认显示的内容
name 用于表单提交

Lable标签

用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上

例子

填写用户信息页面

<!DOCTYPE html>
<html>
<head>
	<title>表单</title>
</head>
<body>
	<form method="get" action="指定表单发到哪里">
		<!-- name为该元素传送到服务器时的解释/名称 -->
		<!-- value为默认的内容，可以删改 -->
		用户名：<input type="text" name="name" value="我是默认的内容">		<!-- 文本域 -->
		<br>
		<label for="pwd">密码：</label><input id="pwd" type="password" name="pwd">	<!-- 密码 -->
		<br>
		<!-- 单选框加一样的name，value指定name所对应的值 -->
		性别：男<input type="radio" name="sex" value="0">女<input type="radio" name="sex" value="1">	<!-- 单选框 -->
		<br>
		<!-- 复选框在name后加中括号 -->
		<!-- checked="checked"为默认选中 -->
		爱好：篮球<input type="checkbox" name="hobby[]" value="1">	<!-- 复选框 -->
		足球<input type="checkbox" name="hobby[]" value="2" checked="checked">
		排球<input type="checkbox" name="hobby[]" value="3" checked="checked">
		乒乓球<input type="checkbox" name="hobby[]" value="4">
		<br>
		个人照片：<input type="file">	<!-- 文件域 -->
		<br>
		个人简介：<textarea name="info" rows="5" cols="30"></textarea>	<!-- 文本区域 -->
		<br>
		<!-- selected="selected"为默认选中项 -->
		注册目的：<select name="target" size="2" multiple="multiple"
>
			<option value="jiaoyou">交友</option>
			<option value="yule">娱乐</option>
			<option value="daoluan" selected="selected">捣乱</option>
			<option value="dontknow">！@#￥</option>
		</select>	<!-- 下拉框 -->
		<br>
		<input type="submit" value="提交信息">	<!-- 提交按钮 -->
		<input type="reset" value="重新写">		<!-- 重置按钮 -->
		<br>
		<input type="button" value="button按钮">	<!-- 按钮 -->
		<input type="hidden">	<!-- 隐藏域 -->
	</form>
</body>
</html>