HTML HTML基础(5)
1.表单
概念：一个包含交互的区域，用于收集用户提供的数据。
(1).基本结构
| 标签名 | 标签语义 | 常用属性 | 单/双 标签 |
| form | 表单 | action：用于指定表单的提交地址（与后端人员对接） target：用于控制表单提交后，如何打开网页，常用值如下： _self：在本窗口打开 _blank：在新窗口打开 method：用于控制表单的提交方式 | 双 |
| input | 输入框 | type：设置输入框的类型 name：用于指定提交数据的名字，（与后端人员沟通后确定） | 单 |
| button | 按钮 | ....... | 双 |
<form action="https://www.baidu.com/s" target="_blank" method="get"><input type="text" name="wd"><button>去百度搜索</button>
</form>(2).常用表单控件
(1.文本输入框
<input type="text">常用属性如下：
name 属性：数据的名称
value 属性：输入框默认输入值
maxlength 属性：输入框最大可输入长度
(2.密码输入框
<input type="password">常用属性如下：
name 属性：数据的名称
value 属性：输入框默认输入值
maxlength 属性：输入框最大可输入长度
(3.单选框
<input type="radio" name="sex" value="female">女<input type="radio" name="sex" value="male">男常用属性如下：
name 属性：数据的名称，注意：想要单选效果，多个 radio 的 name 属性值要保持一致
value 属性：提交的数据
maxlength 属性：让该单选按钮默认选中
(4.复选框
<input type="checkbox" name="hobby" value="smoke">抽烟<input type="checkbox" name="hobby" value="drink">喝酒<input type="checkbox" name="hobby" value="perm">烫头常用属性如下：
name 属性：数据的名称
value 属性：提交的数据
maxlength 属性：让该复选框默认选中
(5.隐藏域
<input type="hidden" name="tag" value="100">用户不可见的一个输入区域，作用是： 提交表单的时候，携带一些固定的数据。
常用属性如下：
name 属性：指定数据的名称。
value 属性：指定的是真正提交的数据
(6.提交按钮
<input type="submit" value="点我提交表单"><button>点我提交表单</button>注意：
1. button 标签 type 属性的默认值是 submit 。
2. button 不要指定 name 属性
3. input 标签编写的按钮，使用 value 属性指定按钮文字。
(7.重置按钮
<input type="reset" value="点我重置"><button type="reset">点我重置</button>注意：
1. button 不要指定 name 属性
2. input 标签编写的按钮，使用 value 属性指定按钮文字。
(8.普通按钮
<input type="button" value="普通按钮"><button type="button">普通按钮</button>注意点：普通按钮的 type 值为 button ，若不写 type 值是 submit 会引起表单的提交。
(9.文本域
<textarea name="msg" rows="22" cols="3">我是文本域</textarea>常用属性如下：
1. rows 属性：指定默认显示的行数，会影响文本域的高度。
2. cols 属性：指定默认显示的列数，会影响文本域的宽度。
3. 不能编写 type 属性，其他属性，与普通文本输入框一致。
(10.下拉框
<select name="from"><option value="黑">黑龙江</option><option value="辽">辽宁</option><option value="吉">吉林</option><option value="粤" selected>广东</option></select>常用属性及注意事项：
1. name 属性：指定数据的名称。
2. option 标签设置 value 属性， 如果没有 value 属性，提交的数据是 option 中间的文字；如果设置了 value 属性，提交的数据就是 value 的值（建议设置 value 属性）
3. option 标签设置了 selected 属性，表示默认选中。
(3).禁用表单控件
给表单控件的标签设置 disabled 既可禁用表单控件。
input 、 textarea 、 button 、 select 、 option 都可以设置 disabled 属性
(4).label标签
label 标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。 两种与 label 关联方式如下：
(1. 让 label 标签的 for 属性的值等于表单控件的 id 。
(2. 把表单控件套在 label 标签的里面。
(5).fieldset与legend的使用
fieldset 可以为表单控件分组、legend 标签是分组的标题。
<fieldset><legend>主要信息</legend><label for="zhanghu">账户：</label><input id="zhanghu" type="text" name="account" maxlength="10"><br><label>密码：<input id="mima" type="password" name="pwd" maxlength="6"></label><br>性别：<input type="radio" name="gender" value="male" id="nan"><label for="nan">男</label><label><input type="radio" name="gender" value="female" id="nv">女</label>
</fieldset>(6).表单总结
| 标签名 | 标签语义 | 常用属性 |
| from | 表单 | action 属性：表单要提交的地址 target 属性：要跳转的新地址打开位置 method 属性：请求方式，值：get 、post |
| input | 多种形式的表单控件 | type 属性：指定表单控件的类型。值：text 、password 、 radio checkbox 、 hidden 、 submit 、 res 、 button 等。 name 属性：指定数据名称 value 属性： 对于输入框：指定默认输入的值 对于单选框和复选框：实际提交的数据 对于按钮：显示按钮文字 disabled 属性：设置表单控件不可用 maxlength 属性：用于输入框，设置最大可输入长度 checked 属性：用于单选按钮和复选框，默认选中 |
| textarea | 文本域 | name 属性：指定数据名称 rows 属性：指定默认显示的行数，影响文本域的高度 cols 属性：指定默认显示的列数，影响文本域的宽度 disabled 属性：设置表单控件不可用 |
| select | 下拉框 | name 属性：指定数据的名称 disabled 属性：设置整个下拉框不可用 |
| option | 下拉框的选项 | disabled 属性：设置拉下选项不可用 value 属性：该选项事件提交的数据（不指定value，会把标签中的内容作为提交数据） selected 属性：默认选中 |
| button | 按钮 | disabled 属性：设置按钮不可用 type 属性：设置按钮的类型，值：submit 、reset 、button |
| label | 与表单控件做关联 | for 属性：值要与要关联的表单控件的ID值相同 |
| fieldset | 表单边框 |
2.框架标签
| 标签名 | 功能和语义 | 属性 | 单/双 标签 |
| iframe | 框架（在网页中嵌入其他文件） | name：框架名字，可以与 target 属性配合 width：框架的宽 height：框架的高度 frameborder：是否显示边框，值：0或1 | 双 |
iframe 标签的实际应用：
1. 在网页中嵌入广告。
2. 与超链接或表单的 target 配合，展示不同的内容。
3.HTML实体
在 HTML 中我们可以用一种特殊的形式的内容，来表示某个符号，这些特殊形式的内容，就是 HTML 实体。比如小于号 < 用于定义 HTML 标签的开始。如果我们希望浏览器正确的显示这些字符，我们必须在源码中插入字符实体。
字符实体由三部分组成：一个 & 和一个实体名称（或者一个 # 和一个实体编号），最后加上一个分号 ; 。
常用字符实体总结：
| 描述 | 实体名称 | 实体编号 | |
| 空格 | |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ` | 反引号 | ´ | ´ |
| ￠ | 分(cent) | ¢ | ¢ |
| £ | 镑(pound) | £ | £ |
| ¥ | 元(yen) | ¥ | ¥ |
| € | 欧元(euro) | € | € |
| © | 版权(copyright) | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
4.HTML全局属性
常用全局属性：
| 属性名 | 含义 |
| id | 给标签指定的唯一标识，注意：id 是不能重复的。 作用：可以让 label 标签与表单控件相关联；也可以与CSS JavaScript配合使用 |
| class | 给标签指定类名，随后通过CSS就可以给标签设置样式 |
| style | 给标签设置 CSS 样式 |
| dir | 内容的方向，值：ltr 、rtl |
| title | 给标签设置一个文字提示，一般超链接和图片用的比较多 |
| lang | 给标签指定语言 |
完整的全局属性，请参考：全局属性 - HTML（超文本标记语言） | MDN
5.meta元信息
(1).配置字符编码
<meta charset="utf-8">(2).针对 IE 浏览器的兼容性配置
<meta http-equiv="X-UA-Compatible" content="IE=edge">(3).针对移动端的配置（移动端课程中会详细讲解）
<meta name="viewport" content="width=device-width, initial-scale=1.0">(4).配置网页关键字
<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语">(5).配置网页描述信息
<meta name="description" content="80字以内的一段话，与网站内容相关">(6).针对搜索引擎爬虫配置
<meta name="robots" content="此处可选值见下表">| 值 | 描述 |
| index | 允许搜索爬虫索引此页面 |
| noindex | 要求搜索爬虫不索引此页面 |
| follow | 允许搜索爬虫跟随此页面上的链接 |
| nofollow | 要求搜索爬虫不跟随此页面上的链接 |
| all | 与 index 、follow等价 |
| none | 与 noindex 、nofollow 等价 |
| noarchive | 要求搜索引擎不缓存页面内容 |
| nocache | noarchive 的替代名称 |
(7).配置网页作者
<meta name="author" content="tony">(8).配置网页生成工具
<meta name="generator" content="Visual Studio Code">(9).配置定义网页版权信息
<meta name="copyright" content="2023-2027©版权所有">(10).配置网页自动刷新
<meta http-equiv="refresh" content="10;url=http://www.baidu.com">完整的网页元信息，请参考：文档级元数据元素 | MDN