HTML第四次课堂笔记（补充）

一.表格的合并

colspan：左右合并单元格 rowspan：上下合并单元格

 

生成表格的快捷方式：table>tr*4>th*1+td*3{单元格}

二.表单

什么是表单：表单是用来采集用户的输入数据，然后将数据提交给服务器表单的组成（三个基本部分）：1.表单标签：这里面包含了处理表单数据所用程序的URL以及数据提交到服务器的方法。 2.表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 3.表单按钮：包括提交按钮、复位按钮和一般按钮；

表单标签：

<form action="" method="get">
	<input type="text" name="user" placeholder="手机号/邮箱"><br />
	<input type="password" name="mi ma" placeholder="密码" maxlength=""><br />
	<input type="submit" value="登录">
	<input type="reset" value="重置">
	<input type="button" value="按钮">
	<input type="image" img src="images/KAMEN RIDER.jpg" style="height:50px">
</form>

 form：用来表示采集数据的范围     action：数据提交的路径    method：数据提交的方式

get：获取  提交的表单数据在 URL 中可见

post：发送 不在 URL 中显示提交的表单数据

input：输入  type：类型   

type="text" 文本框      type="password" 密码框     type="submit" 提交按钮    type="reset" 重置按钮

type="button" 一般按钮   type="image" 图片提交按钮

name：名字   value：初始值   placeholder：输入框里的提醒文本

maxlength：最大长度  最多输入的字符数

 

复选框：checkbox 复选框允许用户在有限数量的选项中选择零个或多个选项

单选框：radio  单选框允许用户仅选择有限数量选项中的一个

 

checked 属性规定在页面加载时应该被预先选定的 input 元素。

checked 属性适用于 <input type="checkbox"> 或 <input type="radio">。

如果使用该属性，则会预先选定该 input 元素。

checked 属性也可以在页面加载后，通过 JavaScript 代码进行设置。

 

 下拉框：select 定义下拉列表， option 元素定义待选择的选项。列表通常会把首个选项显示为被选选项。能够通过添加 selected 属性来定义预定义选项。

 

文本框：textraea  元素定义多行输入字段可以使用cols和rows改变文本框的大小。

可以加style="resize:none;"使文本框的大小固定（textraea标签必须写在一行，否则placeholder标签不会显示。）

 

 

label：

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

上传：file 有时候，需要用户上传自己的文件，文件上传框看上去和其它文本域差不多，只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。 选择多个上传文件可以使用multiple="multiple"

 

 其他：readonly只读状态（用于文本框）  disabled不可用状态（用于按钮）

 

button 标签定义一个按钮。

在 <button> 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。

提示：请始终为 <button> 元素规定 type 属性。不同的浏览器对 <button> 元素的 type 属性使用不同的默认值。

 

三.总结

把之前学过的元素分为以下三类：

块元素（display：black）：<p></p>
<h1></h1>~<h6></h6>
<ul></ul>
<ol></ol>
<hr>
<div></div>
<form></form>

行内元素（display：inline）：<span></span>
<a href=" "></a>
<b></b>
<strong></strong>
<i></i>
<em></em>
<label></label>
<small></small>

行内块元素（display：inline-block）：<img src=" " alt=" ">
<iframe></iframe>
<input type=" ">
<textarea></textarea>
<select></select>
<button></button>