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 标签的开始。如果我们希望浏览器正确的显示这些字符，我们必须在源码中插入字符实体。

字符实体 由三部分组成：一个 & 和一个实体名称（或者一个 # 和一个实体编号），最后加上一个分号 ; 。

常用字符实体总结：

|-------|---------------|-----------|----------|
| | 描述 | 实体名称 | 实体编号 |
| | 空格 | &nbsp; | &#160; |
| < | 小于号 | &lt; | &#60; |
| > | 大于号 | &gt; | &#62; |
| & | 和号 | &amp; | &#38; |
| " | 引号 | &quot; | &#34; |
| ` | 反引号 | &acute; | &#180; |
| ￠ | 分(cent) | &cent; | &#162; |
| £ | 镑(pound) | &pound; | &#163; |
| ¥ | 元(yen) | &yen; | &#165 |
| € | 欧元(euro) | &euro; | &#8364; |
| © | 版权(copyright) | &copy; | &#169; |
| ® | 注册商标 | &reg; | &#174; |
| ™ | 商标 | &trade; | &#8482; |
| × | 乘号 | &times; | &#215; |
| ÷ | 除号 | &divide; | &#247; |

完整实体列表，请参考： HTML Standard

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