HTML表单标签组<form>相关使用方法
1.<form>标签自身属性
action="网络url 本地其他页面文件的地址"
method="提交数据的方式" get或post
2.表单元素-input
在<form>标签内嵌套一个<input>标签,input标签即为表单元素具体属性如下:
2.1 type属性 设置类型-可选常用类型
type="text" 文本框
type="password" 密码框
type="submit" 提交按钮
type="radio" 单选框
type="checkbox" 复选框
type="hidden" 隐藏域
type="range" 范围条
type="date" 日期选择
type="reset 重置按钮
type="button" 自定义按钮
type="image" 图片按钮2.2 name属性 用于设置表单提交时 文本框传递数据的键的名字<input type="xxx" .....>
<input type="xxx" name="xxx".....>
2.3 value属性 用于接收用户输入值
当 type="submit" 时 设置value属性 为 按钮名称
当type="radio"时 设置value属性 为单选按钮被选中项的值2.4 maxlength属性 限制文本框能够接收的最大字符数
2.5 maxlength属性 用户未输入时 显示在文本框中的提示文本
2.6 checked属性 某个单选按钮为默认状态
111111111111
11111111111111111111
<!--使用方法-->
<form action="#" method="get">
邮箱:<input type="xxx" name="mail">
<form>
<!--
input常用属性
type 设置元素类型
type="text" 文本框
type="password" 密码框
type="submit" 提交按钮
type="radio" 单选框
type="checkbox" 复选框
type="hidden" 隐藏域
type="range" 范围条
type="date" 日期选择
type="reset 重置按钮
type="button" 自定义按钮
type="image" 图片按钮
-->
<form action="#" method="get">
邮箱:<input type="text" name="mail">
<form>
1222128554
1. 基础块级标签
1.1 内容标题标签
<h1></h1> <h6></h6>
分别设置一至六级标题
一级标题文字最大 六级标题文字最小
标题文字自带加粗效果 并具有默认的上下外距
1.2 内容段落标签
<p></p>
用于在文章中进行文本段落的划分
自带上下的外距
按照w3c标准 p标签不能嵌套使用
不适用于页面的分区布局
1.3 层标签
<div></div>
无任何默认修饰效果
用于进行页面分区布局的主要标签
div+css
css 样式
1.4 水平分割线
<hr/>
横向分割线--宽度 默认为容器的100%
2. 列表标签组
2.1 有序列表标签组
<ol>
<li>内容</li>
<li>内容</li>
</ol>
主要使用在 页面的导航 或 列表内容中
属性 type="1/a/A/i/I"
用于设置列表中的列表项显示的序号种类
默认为1 如果提供的属性值不在五种可选值范围内 自动使用默认值
2.2 无序列表标签组
<ul>
<li>内容</li>
<li>内容</li>
</ul>
主要使用在 页面的导航 或 列表内容中
type="disc/circle/square"
disc是默认值 代表实心圆点
2.3 定义列表标签组--不常用
<dl>
<dt>图片</dt>
<dd>文字</dd>
</dl>
主要用于制作页面中的图文混编效果
dt 和 dd标签的数量 以及顺序均可以按需调整
3. 表格标签组--实用性不强
<table>
<tr>
<td></td>
</tr>
</table>
属性
table 的属性
border="1" 用于设置表格的边框
width="" height="" 用于设置表格的宽度与高度 如果表格中的所有单元格都没有内容 那么表格的宽高将自动平分给单元格
align="left/center /right"
表格本身参考容器标签的对齐方式
tr 的属性
width="" height=""
td 的属性
width="" height=""
跨行
rowspan="占据的行数 "
跨列
colspan="占据的列数"
表格标签用于布局 结构过于复杂 不推荐使用
逻辑表格
<table>
<caption>表名</caption>
<thead>
单行 设置th 单元格描述表头内容
</thead>
<tbody>
表的主体 由多行数据组成
</tbody>
<tfoot>
表的脚部 用于放置 核算类信息或 分页信息
</tfoot>
</table>
th单元格 文本自动居中 且 加粗
必要的逻辑区域为<tbody></tbody>
4. 表单标签组
4.1 表单标签
<form></form>
就是一个信件的信封
收件人地址
action="网络url 本地其他页面文件的地址"
提交数据的方式
method="get"
明信片提交数据
传输的数据暴露在url地址栏中 不安全 传输速度快
method="post"
信封提交数据
传输的数据 是隐藏传输 安全性高 传输速度较慢
4.2 表单元素
文本框
接收 账号 姓名 昵称 等文本信息的输入
<input type="text" />
属性
name="用于设置表单提交时 文本框传递数据的键的名字"
value="接收用户输入值"
maxlength="6"
限制文本框能够接收的最大字符数
placeholder="用户未输入时 显示在文本框中的提示文本"
密码框
接收密码信息输入
<input type="password"/>
属性
name="用于设置表单提交时 密码框传递数据的键的名字"
value="接收用户输入值"
maxlength="6"
限制文本框能够接收的最大字符数
placeholder="用户未输入时 显示在文本框中的提示文本"
提交按钮
用户点击该按钮 则立即提交表单信息
<input type="submit"/>
属性
value="查找"
单选按钮
提供选项给用于进行点选 只能在一组选项中选择一个
<input type="radio" />
属性
name=""
既是传输键值对数据的键 也是多个单选按钮分组的组名
value=""
依旧设置表单提交时 单选按钮被选中项的值
必要属性
checked="checked"
设置某个单选按钮为默认选中状态
复选框
范围条
隐藏域
下拉列表
重置按钮
自定义按钮
图片按钮
属性的属性值
自定义
可选值
发表评论