HTML表单表格标签总结

一.常用标签

<p> -------------- 段落标签

<strong> <b> ---- 字体加粗

<i> <em> ----- 斜体

<u> ---- 文字下面加上下划线

<del> ----- 删除线

<br> ---- 换行

<hr> ------ 水平分割线

<font> ---- 用来修饰字体

二.input标签

语法格式：

<input type="元素类型" name="元素名称" value="元素值" id="客户唯一标识符'>

type属性的取值表格：

type="text"	文本框
type="password"	密码框
type="radio"	单选按钮
type="chexbox"	多选按钮
type="submit"	提交按钮
type="reset"	复位按钮，重置按钮
type="button"	普通按钮
type="image"	图像按钮
type="file"	上传文件
type="email"	邮箱
type="date"	日期
type="range"	进度条
type="datetime-local"	日期+时间

input的属性表格：

checked	默认选择
readonly	字段只读不能修改
disabled	表示input禁用不可点击
autofocus	默认光标的位置
required	input不能为空白提交

三 .select标签

select标签表示下拉选择框

会和option标签连用 option表示的下拉选择框中的选项

属性:

value ---- 选项的值

name ---- 下拉框的名称

selected ----- 默认被选中的选项

multiple ----- 以列表的形式显示

四.textarea标签

语法结构：

cols ---- 多少列表示的是文本域的宽度

rows --- 多少行表示的文本域的高度

五.标签综合练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form表单练习</title>
</head>
<body><div align="center">
<h1>用户注册</h1></div ><form align="center">用户名:<input type="text" name="username" method="post"><br>密&nbsp;&nbsp;&nbsp;&nbsp;码:<input type="text" name="possword" autofocus required ><br>请选择您的性别:<input type="radio" value="男" name="gender" checked>男<input type="radio" value="女" name="gender" checked>女<br><p> 请选择你的爱好:<input type="checkbox" value="足球" name="dance" >足球<input type="checkbox" value="篮球" name="dance" >篮球<input type="checkbox" value="lol" name="dance" >lol<input type="checkbox" value="韩剧" name="dance" >韩剧<input type="checkbox" value="王者荣耀" name="dance" >王者荣耀<br>邮箱:<input type="email"><br>用户头像:<input type="file" placeholder="请输入邮箱"><br>你的家庭住址:<select ><option value="北京">北京</option><option selected="selected">重庆</option><option>上海</option><option>西安</option></select><br>您的收货地址是:<select multiple="multipie"><option>永川</option><option selected="selected">江北</option><option>万州</option></select><br>请留下您的收获地址:<textarea cols="20" rows="5">您的建议或意见</textarea><br>请您选择您喜欢的颜色:<input type="color">注册的时间:<input type="date"><br><input type="submit" value="提交"><input type="reset" value="重置"></p><br></form>
</body>
</html>

六.HTML的简单缩写

&nbsp；	空格
&copy；	©
&lt；	<
转义符	/n /t
>	>
¥	￥
÷	÷
&permil;	%
&plusmn	±
&quot	"

七.表格基本属性

table标签 ------- 用于定义一个表格

thead ---- 定义表头

tr ---- 行

td ---- 列单元格必须放在 tr

tbody --- 主干

tfoot ----- 尾

表格的属性：

border 属性 ------ 边框取值是数字单位是像素当取值为 0 的时候表示没有边框（默认）大于 0的时候表格是有边框的，数值一定要为整数，不能为负数

height ---- 表示表格高度

width ---- 表示的是表格宽度

align ------ 表示的是表格对齐方式 left(居左) center(居中) right(居右), 默认是 left

bgcolor ----- 表示的是表格的背景颜色

background ---- 表示背景颜色

cellpadding ----- 表示表格边距

cellspacing ----- 表示表格间距

八.列表标签

(1)有序标签--------ol

属性：

type属性 ----- 表示设置序号的种类

start 属性 ----- 控制开始序号的位置

reversed ---- 降序（反序）

(2)无序标签---------ul

属性：

disc属性--------------默认值，实心圆

circle属性--------------空心圆

square属性-------------实心方块