目录
一、表单标签
应用场景:登录、注册、搜索页面
1.input系列标签
1.1 input系列标签的基本介绍
场景:在网页中显示收集用户信息的表单效果,如:登录页、注册页
标签名:input(input标签可以通过type属性值的不同,展示不同效果)
type属性值:
标签名 | type属性值 | 说明 |
input | text | 文本框,用于输入单行文本 |
input | password | 密码框,用于输入密码 |
input | radio | 单选框,用于多选一 |
input | checkbox | 多选框,用于多选多 |
input | file | 文件选择,用于之后上传文件 |
input | submit | 提交按钮,用于提交 |
input | reset | 重置按钮,用于重置 |
input | button | 普通按钮,默认无功能,之后配合js添加功能 |
1.2 input系列标签-文本框
场景:在网页中提示输入单行文本的表单控件
type属性值:text
常用属性:
属性名 | 说明 |
placeholder | 占位符,提示用户输入内容的文本 |
像这种就是占位符:
1.3 input系列标签-单选框
场景:在网页中显示多选一的单选表单控件
type属性值:radio
常见属性:
属性名 | 说明 |
name | 分组。有相同name属性的单选框为一组,一组中同时只能有一个被选中 |
checked | 默认选中 |
注意点:
name属性对于单选框有分组功能
有相同name属性的单选框为一组,一组中只能同时有一个被选中
1.4 input系列标签-文件选择
场景:在网页中显示文件选择的表单控件
type属性值:file
常用属性:
属性名 | 说明 |
multiple | 多文件选择 |
1.5 input系列标签-按钮
场景:在网页中显示不同功能的按钮表单控件
type属性值:
标签名 | type属性值 | 说明 |
input | submit | 提交按钮,点击之后提交数据给后端服务器 |
input | reset | 重置按钮,点击之后恢复表单默认值 |
input | button | 普通按钮,默认无功能,之后配合js添加功能 |
注意点:
如果需要实现以上按钮功能,需要配合form标签使用
form使用方法:用form标签把表单标签一起包裹起来即可
value属性可以给按钮命名
2.button按钮标签
场景:在网页中显示用户点击的按钮
标签名:button
type属性值(同input的按钮系列)
标签名 | type属性值 | 说明 |
button | submit | 提交按钮,点击之后提交数据给后端服务器 |
button | reset | 重置按钮,点击之后恢复表单默认值 |
button | button | 普通按钮,默认无功能,之后配合js添加功能 |
注意点:
谷歌浏览器中button默认是提交按钮
button标签是双标签,更便于包裹其他内容:文字、图片等
3.下拉菜单
3.1 select下拉菜单标签
场景:在网页中提供多个选择项的下拉菜单表单控件
标签组成:
select | 下拉菜单的整体 |
option | 下拉菜单的每一项 |
常见属性:
selected:下拉菜单的默认选中
4.文本域
4.1 textarea文本域标签
场景:在网页中提供可输入多行文本的表单控件
标签名:textarea
常见属性:
cols | 规定了文本域内可见宽度 |
rows | 规定了文本域内可见行数 |
注意点:
右下角可以拖拽改变大小
实际开发时针对于样式效果推荐使用css设置
5.label标签
场景:常用于绑定内容与表单标签的关系(点击相关内容即可选中选项)
标签名:label
使用方法:
(1)使用label标签把内容(如文本)包裹起来,在表单标签上添加id属性,在label标签的for属性中设置对应的id属性值
(2)直接使用label标签把内容(如文本)和表单标签一起包裹起来,需要把label标签的for属性删除
6.语义化标签
6.1 没有语义的布局标签-div和span
场景:实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签
div标签:一行只显示一个(独占一行)
span标签:一行可以显示多个
6.2 有语义的布局标签(了解)
场景:在HTML5新版本中推出了一些有语义的布局标签供开发者使用(用于手机端)
标签(用于手机端):
标签名 | 语义 |
header | 网页头部 |
nav | 网页导航 |
footer | 网页底部 |
aside | 网页区块 |
section | 网页区块 |
article | 网页文章 |
7.字符实体
7.1常见字符实体
场景:在网页中展示特殊符号效果时,需要使用字符实体替代
结构:&英文;
常见字符实体:
显示结果 | 描述 | 实体名称 |
---|---|---|
空格 | | |
< | 小于号 | < |
> | 大于号 | > |
& | 和号 | & |
" | 引号 | " |
' | 撇号 | ' |
₵ | 分(cent) | ¢ |
£ | 镑(pound) | £ |
¥ | 元(yen) | ¥ |
€ | 欧元(euro) | € |
§ | 小节 | § |
© | 版权(copyright) | © |