HTML的知识点
- form：表单
- form常用属性：
method：表单的提交方式（post和get）
action：表单处理服务器 - 注意：
凡是用户与服务器交互的表单标签应全部放在form标签内
form内的提交按钮提交的是整个form表单 - post方法：
如果采用 POST 方法，浏览器将会按照下面两步来发送数据。首先，浏览器将与 action 属性中指定的表单处理服务器建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器
在服务器端，一旦 POST 样式的应用程序开始执行时，就应该从一个标志位置读取参数，而一旦读到参数，在应用程序能够使用这些表单值以前，必须对这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数 - get方法：
如果采用 GET 方法，浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据：浏览器会将数据直接附在表单的 action URL 之后。这两者之间用问号进行分隔 - 一般浏览器通过上述任何一种方法都可以传输表单信息，而有些服务器只接受其中一种方法提供的数据。可以在 <form> 标签的 method （方法）属性中指明表单处理服务器要用方法来处理数据，使 POST 还是 GET
- input：表单元素
- input常用属性：
name：类似前端的id，同时前端可以用来js取值和分类
type：input的种类
value：input的值
placeholder（输入类）：文本输入提示（css3新增属性，用来提示文本输入）
checked（选择类）：页面加载时默认选定的 input 元素
disabled/readonly：规定禁用/只读的 input 元素 - input的专用伪类选择器：:focus---获得焦点
- input的按钮类元素在鼠标移入时不会显示为可以点击的手型，可以用cursor的样式改变其效果，cursor也可以用在其他元素上
- type的类型：
- 输入类：text——文本框；password——密码
- 选择类：radio——单选；checkbox——复选
- 按钮类：submit/image——提交/图片提交；reset——重置；button——按钮
- 特殊类：file——上传
label标签：绑定input元素定义标注，并帮助input元素获取焦点
- 写法1：两个标签分开写，label的for属性的值等于input的id值
- 写法2：label嵌套成input的父元素
DOM中文档结构如下：
<form method="get" action="https://www.baidu.com">
<input type="text" name="Text" placeholder="请输入用户名"/><br/>
<input type="password" placeholder="请输入密码"/><br/>
<input type="file" value="上传"/><br/>
<input type="button" value="按钮"/><br/>
<input type="text" readonly="readonly" value="我是只读的"/><br/>
<input type="text" disabled="disabled" value="我是禁用的"/><br/>
<input type="image" value="提交图片"/><br/>
<input type="submit" value="提交" class="cursor"/><br/>
<input type="reset" value="重置"/><br/>
单选框：<br/>
<input type="radio" id="rad1"/><label for="rad1">同意</label><br/>
多选框：<br/>
<label><input type="checkbox" name="xq"/>苹果</label>
<label><input type="checkbox" name="xq"/>香蕉</label>
<label><input type="checkbox" name="xq"/>菠萝</label>
</form>
CSS中的样式如下：
input:focus{border:1px red solid;}
.cursor:hover{cursor:pointer;}
效果图如下：
- 其他表单元素
- select/option：下拉选框/下拉选框的选项
对高度的支持不兼容
size（select属性）：用来设置同时显示选项的数量
selected（option属性）：用来设置下拉框的默认选项
DOM中文档结构如下：
下拉列表：<select id="sel1">
<option value="北京">北京</option>
<option selected="selected" value="上海">上海</option>
<option value="西安">西安</option>
</select>
效果图如下：
- textarea：文本域
各个浏览器下的默认滚动条显示不兼容
css3新增 resize 调整尺寸属性 resize: none;
cols/rows属性：列数/行数
DOM中文档结构如下：
文本域：<textarea style="resize:none;" cols="5" rows="5">我是value</textarea>
效果图如下：
