一.表单
概念：一个包含交互的区域，用于收集用户提供的数据。
1. 基本结构
<form>表单
action：用于指定表单的提交地址（需要与后端人员沟通后确定）。
method：用于控制表单的提交方式。具体看ajax。
target：用于控制表单提交后，如何打开页面，常用值如下：
_self ：在本窗口打开。
_blank ：在新窗口打开。
<input>输入框
type：设置输入框的类型，目前用到的值是text，表示普通文本。
name：用于指定提交数据的名字，（需要与后端人员沟通后确定）。
<button>按钮
<form action="https://www.baidu.com/s" target="_blank" method="get">
<input type="text" name="wd">
<button>去百度搜索</button>
</form>
2. 常用表单控件
- 文本输入框
<input type="text">
常用属性如下：
name 属性：数据的名称。
value 属性：输入框的默认输入值。
maxlength 属性：输入框最大可输入长度。<input type="password">
- 密码输入框
<input type="password">
- 单选框
<input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="male" checked>男
常用属性如下：
name 属性：数据的名称，注意：想要单选效果，多个 radio 的 name 属性值要保持一致。
value 属性：提交的数据值。
checked 属性：让该单选按钮默认选中。
- 复选框
<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头
常用属性如下：
name 属性：数据的名称。
value 属性：提交的数据值。
checked 属性：让该复选框默认选中。
- 隐藏域
<input type="hidden" name="tag" value="100">
用户不可见的一个输入区域，作用是：
提交表单的时候，携带一些固定的数据。
name 属性：指定数据的名称。
value 属性：指定的是真正提交的数据。
- 提交按钮
<input type="reset" value="点我重置">
<button type="reset">点我重置</button>
注意点：
1. button 标签 type 属性的默认值是 submit。
2. button 不要指定 name 属性。
3. input 标签编写的按钮，使用 value 属性指定按钮文字。
- 普通按钮
<input type="button" value="普通按钮">
<button type="button">普通按钮</button>
注意点：普通按钮的 type 值为 button ，若不写 type 值是 submit 会引起表单的提交。
- 文本域
<textarea name="msg" rows="22" cols="3">我是文本域</textarea>
常用属性如下：
1. rows 属性：指定默认显示的行数，会影响文本域的高度。
2. cols 属性：指定默认显示的列数，会影响文本域的宽度。
3. 不能编写 type 属性，其他属性，与普通文本输入框一致。
- 下拉框
<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>标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。
1. 让 label 标签的 for 属性的值等于表单控件的 id 。
2. 把表单控件套在 label 标签的里面。
<label for="telephone">电话：</label>
<input id="telephone" name="phone" type="text">
第二种写法：
<label>
电话：
<input id="telephone" name="phone" type="text">
</label>
二.meta元信息
- 配置字符编码
<meta charset="utf-8">
- 针对 IE 浏览器的兼容性配置
<meta http-equiv="X-UA-Compatible" content="IE=edge">
- 针对移动端的配置
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 配置网页关键字
<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语">
- 配置网页描述信息
<meta name="description" content="80字以内的一段话，与网站内容相关">
- 针对搜索引擎爬虫配置
<meta name="robots" content="此处可选值见下表">
7. 配置网页作者
<meta name="author" content="tony">
- 配置网页生成工具
<meta name="generator" content="Visual Studio Code">
- 配置定义网页版权信息
<meta name="copyright" content="2023-2027©版权所有">
- 配置网页自动刷新
<meta http-equiv="refresh" content="10;url=http://www.baidu.com">
