## 表单标签

目标:能够使用表单相关标签和属性,实现网页中表单类网页结构搭建

表单域 `

`

语法:

```

各种表单控件

```

提交方式:get/post

轮廓线:outline

给表单添加outline:0;或者outline:none;样式后,就可以去掉默认的蓝色边框;

## input系列标签

场景:在网页中显示 `收集用户信息的表单效果`。如:登陆页面、注册页

标签名:input;`input标签可以通过type属性值的不同,展示不同效果`

Type属性值:

常用属性:`placeholder:占位符`,提示用户输入内容的文本

拓展:Value属性和name属性作用介绍:

* `value:用户输入的内容`,提交之后会发送给后端服务器* `name:当前控件的含义`,提交之后可`以告诉后端发送过去的数据是什么含义`* 后端接收到的数据的格式是:name的属性值=value的属性值

注意点:

1. 有相同name属性值的单选框为一组,一组中只能同时有一个被选中
2. type属性不要拼错或者多加空格,否则相当于设置了默认值状态;text模式
3. `checked:默认选中`,属性值可省略
4. `multiple:多文件选择`,属性值可省略
5. 如果需要实现上述按钮功能,需要配合form标签使用。Form使用方法:`用form标签把表单标签一起包裹起来即可。Form表单标签。`

## button按钮标签

场景:在网页中显示用户点击的按钮

属性值:`reset、submit、button`

注意点:

1. 谷歌浏览器中button默认是提交按钮;
2. 双标签,更便于包裹其他内容:文字、图片等;

## select下拉菜单标签

场景:在网页中提供多个选择项的下拉菜单表单控件

标签组成:

Select标签:下拉菜单的整体Option标签:下拉菜单的每一项

常见属性:Selected:下拉菜单的默认选中

## textarea文本域标签

场景:在网页中提供可输入多行文本的表单控件

常见属性:

Cols:规定了文本域内可见宽度Rows:规定了文本域内可见行数
`防止拖拽文本域:resize:none;`

单行文本溢出文字由省略号代替,需要满足以下三个条件:

1. 强制一行内显示文本。White-space:nowrap;(默认normal自动换行)
2. 超出部分隐藏。Overflow:hidden;
3. . 用省略号代替超出部分。Text-overflow:ellispsis;

多行文本溢出文字由省略号代替:

注意点:

1. 右下角拖拽改变大小
2. 实际开发时针对于样式效果推荐使用CSS设置

## label标签

场景:`常用于绑定内容与表单标签的关系`

使用方法一:

1. 使用label标签把内容包裹起来
2. 在表单标签上添加 id属性
3. 在label标签的for属性中设置对应的id属性值

代码演示:

```HTML

单选

```

使用方法二:

1. 直接使用label标签把内容和表单标签一起包裹起来
2. 需要把label标签的for属性删除即可

代码演示:

```HTML

单选

```

## 新增属性

1. required:required;表单拥有该属性表示其内容不能为空,必填;
2. autofocus:autofocus;自动聚焦属性,页面加载完成自动聚焦到指定表单
3. autocomplete:off/on;当用户在字段开始键入时,浏览器基于之前输入过的值,应该显示出在字段中填写的选项。默认已经打开,需要放在表单内,同时加上name属性,同时成功提交。
4. `multiple:multiple;可以多选文件提交。`

## 语义化标签

学习路径:

1. 没有语义的布局标签
2. 有语义的布局标签

无语义:`div和span`

1. div:一行只显示一个(独占一行)2. span:一行可以显示多个

有语义:

场景:在HTML5新版本中,推出了一些有语义的布局标签供开发者使用

标签:

1. header:网页头部
2. nav:网页导航
3. footer:网页底部
4. aside:网页侧边栏
5. section:网页区块
6. article:网页文章

注意点:`以上标签显示特点和div一致,但是比div多了不同的语义`

## 字符实体

场景:在网页中展示特殊符号效果时,需要使用字符实体替代

结构:`&英文;`

常见字符实体:在`实体名称前加上英文下的 & 符号(如:  )`因为解析问题说以表格里没加。

| 显示结果 | 描述 | 实体名称 |
| ---------- | ------------------- | -------------------- |
| | 空格 | nbsp; |
| < | 小于号 | lt; |
| > | 大于号 | gt; |
| & | 和号 | amp; |
| ” | 引号 | quop; |
| ` | 撇号 | apos;(IE不支持) |
| ¢ | 分(cent) | cent; |
| £ | 镑(pound) | pound; |
| ¥ | ( Himoto | Himoto; |
| € | 欧元(euro) | euro; |
| § | 小节 | sect; |
| © | 版权(copyright) | copy; |

最后修改:2021 年 09 月 16 日
谢谢老板打赏