🌱博客主页：大寄一场.
🌱系列专栏：前端

🌱往期回顾：HTML+CSS+JS 学习笔记（一）———HTML(上)

HTML+CSS+JS 学习笔记（一）———HTML(中)
😘博客制作不易欢迎各位👍点赞+⭐收藏+➕关注

表单

表单的功能结构

form元素

input元素

input 元素的属性

label元素

多行文本输入框/文本域

窗体选项栏

简单表格的制作

表头的设置

表格的合并

div 标签

div 标签的介绍

div 标签的应用

span 标签

span 标签的介绍

span 标签的应用

列表

列表的标签

表单

介绍：HTML表单是用户和web站点或应用程序之间交互的主要内容之一。它们允许用户将数据发送到web站点。大多数情况下，数据被发送到web服务器，但是web页面也可以自己拦截它并使用它。

表单的功能结构

概念：HTML表单是由一个或多个小部件组成的。这些小部件可以是文本字段(单行或多行)、选择框、按钮、复选框或单选按钮。大多数情况下，这些小部件与描述其目的的标签配对——正确实现的标签能够清楚地指示视力正常的用户和盲人用户输入表单所需的内容。

多数情况下，表单收集的数据被发送到web服务器。在这种情况下，您需要设置一个web服务器来接收和处理数据。服务器识文目前超出了所学范围，我们会在以后学习。

form元素

元素 form元素正式定义了一个表单。它是一个容器元素，但它也支持一些特定的属性来配置表单的行为方式。它的所有属性都是可选的，但实践中最好至少要设置action属性和method属性。

支持的属性：

name: 给这个表单起个名字
method: 属性定义了发送数据的HTTP方法(它可以是“get”或“post”).
action: 属性定义了在提交表单时,应该把所收集的数据送给谁(/那个模块)(URL)去处理。
target :目标窗口的打开方式
enctype:表单信息提交的编码形式，其属性值有 text/plain、 applicarion/x-www-form.urlencoded 和multipart/ form-data 三个

input元素

input是一个单一型元素用于为基于Web的表单创建交互式控件，以便接受来自用户的数据。

<input type="text ">

type：input的工作方式相当程度上取决于type属性的值，不同的 type 值会赋予input元素不同的功能。如果未指定此属性，则采用的默认类型为 text。

表单输入类型：

text (默认)：单行的文本输入框，输入中的换行会被自动去除。
```
<input type="text">
```
password：单行的密码输入框，输入的文本使用密文显示。
```
<input type="password">
```
number：只能输入数字的输入框。
```
<input type="number">
```
email：编辑邮箱地址的输入框。类似 text 输入，但在支持的浏览器上会有邮箱格式的规则验证提示。
```
<input type="email">
```
search：用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。
```
<input type="search">
```
tel：用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。
```
<input type="tel">
```

表单日期类型 ：

week：用于输入以年和周数组成的日期，不带时区。
month ：输入年和月的控件，不带时区。
time (H5新增)：于输入时间的控件，不包括时区。
date (H5新增)：输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时会打开日期选择器或年月日的数字滚轮。
datetime-local：输入日期和时间的控件，使用户所在时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。 (目前支持的浏览器为数不多)

表单单复选类型 ：

checkbox：复选框，可设为选中或未选中。

radio：单选框

单选栏位 :<input type=”radio” name=” 栏位名称 ” value=” 内定值 ” checked=”checked” disabled=” disabled ”>

表单按钮类型 ：

button：没有默认行为的按钮，上面显示 value 属性的值，默认为空。
submit：用于提交表单的按钮。
reset：此按钮将表单的所有内容重置为默认值。不推荐。

表单文件类型

file：让用户选择文件的控件。使用accept属性规定控件能选择的文件类型。

表单颜色类型

color：用于指定颜色的控件；在支持的浏览器中，激活时会打开取色器。

表单范围控制类型

hidden：不显示的控件，其值仍会提交到服务器。

input 元素的属性

type：所有input元素,input表单控件的type
disabled：所有input元素,表单控件是否被禁用
form：所有input元素,将控件和一个form元素联系在一起
name：所有input元素,input表单控件的名字。以名字/值对的形式随表单一起提交
value：所有input元素,表单控件的值。以名字/值对的形式随表单一起提交
checked：当input元素type为radio, checkbox时，用于控制控件是否被选中
alt：当input元素type为image时，alt属性是可访问性的要求。
height： image 和 <img> 的 height 属性相同；垂直方向
src： image 图像资源的地址
width： image 与 <img> 的 width 属性一样
placeholder：当input元素type为password, search, tel, text, url时，当表单控件为空时，控件中显示的内容

label元素

将一个 <label> 和一个 <input> 元素相关联的优点：

你可以点击关联的标签来聚焦或者激活这个输入元素，就像直接点击输入元素自身一样。这扩大了元素的可点击区域，让包括使

用触屏设备在内的用户更容易激活这个元素。

你需要给 <input> 一个 id 属性。而 <label> 需要一个 for 属性，其值和 <input> 的 id 一样。

<label for="apple">Do you like apple?</label>
<input type="text" name="apple" id="apple">

支持的属性：

for：即和 <label> 元素在同一文档中的可关联标表单元素的 id。

注意： <label> 元素可同时有一个 for 属性和一个子代控件元素，只是 for 属性需要指向这个控件元素。

form：表示与 label 元素关联的 <form> 元素（即它的表单拥有者）。其值应是同一文档中 <form> 元素的 id。因此你可以将 label 元素放在文档的任何位置，而不仅作为 <form> 元素的后代。

多行文本输入框/文本域

概念： HTML <textarea> 元素表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。

<label for="proposal">请提出宝贵的建议</label>
<textarea id="proposal" name="proposal"
rows="5" cols="33">
这里是多行文本输入框的内容......
</textarea>

为了提高可访问性（ accessibility ），请 <label> 与 <textarea> 关联。

name 属性，用于设置随表单一同提交到服务器的相关数据的名字。

rows 和 cols 属性，用于声明 <textarea> 的精确尺寸。这对于一致性非常有帮助，因为不同浏览器的默认值常常不一样。

位于开始标签和闭合标签之间的内容就是 <textarea> 输入框中的内容。 <textarea> 不支持 value 属性。

支持的属性 ：

name：元素的名称。
disabled：禁用文本域。默认为false。
form：指定跟自身相关联的表单。值必须为本文档内的表单的ID，如果未指定，就是跟当前所在的表单元素相关联。这就允许
你在文档的任意地方放置文本域元素。
placeholder：向用户提示可以在控件中输入的内容。在渲染提示时，占位符文本中的回车符(\r)或换行符(\n)一定会被作
为行断（换行）处理。
readonly：不允许用户修改元素内文本。和 disabled 属性不同的是，这个能让用户点击和选择元素内的文本。如果在表单
里，这个元素的值还是会跟随表单一起提交。
required：提示用户这个元素的内容必填。
cols：文本域的可视宽度。必须为正数，默认为20 (HTML5)。
rows：元素的输入文本的行数（显示的高度）。

窗体选项栏

概念： HTML <select> 元素表示一个提供选项菜单的控件

格式：

<label for="关联id">Choose:</label>
<select name=”栏位名称” size=”数字” id="关联id">
<option value=”选项值” selected=”selected”>
<option value=”选项值”>…
<option value=”选项值”>…
</select>
<!--
你还可以将 <option> 元素放在 <optgroup> 元素中以为下拉菜单创建不同的选项分组。
-->
<select>
<optgroup label="分组名称">
<option>Tyrannosaurus</option>
<option>Velociraptor</option>
<option>Deinonychus</option>
</optgroup>
<optgroup label="分组名称">
<option>Diplodocus</option>
<option>Saltasaurus</option>
<option>Apatosaurus</option>
</optgroup>
</select>

select支持的属性：

disabled：这个布尔值的属性表示用户不能与该表单控件交互。
元素的id（如果没有设置这个属性， <select> 元素则与其任何存在的祖先 <form> 元素关联）。
form： <select> 所关联的 <form> (它的"表单拥有者")。其值必须是在同一文档中的
name：该属性规定了控件的名称。

option 支持的属性 ：

disabled：如果设置了这个布尔属性，则该选项不可选。浏览器通常会将这种控件显示为灰色，并且不再接受任何浏览器事
件，例如鼠标点击或者焦点相关的事件。如果这个属性没有设置，而这个元素的其中一个父元素是被禁用的
label：这个属性是用于表示选项含义的文本。如果 label 属性没有定义，它的值就是元素文本内容。
selected：这个布尔属性存在时表明这个选项是否一开始就被选中。 <select> 元素的 multiple 属性没有设置，则 <select> 元素中只有一个 <option> 元素可以拥有 selected 属性。
value: 这个属性的值表示该选项被选中时提交给表单的值。如果省略了这个属性，值就从选项元素的文本内容中获取。

简单表格的制作

表格标签是 <table>..</table>，表格的其他标签只有在表格的开始标签 <table>和格的结束标签 </table> 间才有效。用于制作表格的主要标签如下表所示。

标签	含义
<table>	表格标签
<ti>	行标签
<td>	单元格标签

<table>标签的语法格式如下:

<table>
    <tr>
        <td>单元格内的文字 </td>
        <td> 单元格内的文字 </td>
         ...

    </tr>
    <tr>
        <td> 单元格内的文字 </td>
        <td> 单元格内的文字 </td>
        ...
    </tr>
    ...
</table>

在该语法中，<table> 和 </table> 标签分别标志着一个表格的开始和结束 <tr> 和</tr>标签分别标志着表格中一行的开始和结束，在表格中包含几组 <tr>...</tr> 标签，就表示该表格为几行: <td> 和 </td> 标签标志着一个单元格的开始和结束，即表示一行中包含了几列。

表头的设置

表格中还有一种特殊的单元格，称为表头。表头一般位于表格第一行，用来表明该列的内容类别，用 <th> 和 </th> 标签来表示。<th> 标签的使用方法与 <td> 签的使用方法相同，但是 <th> 标签中的内容是加粗显示的，其语法格式如下:

<table>
    <caption>表格的标题 </caption>
    <tr>
        <th>表格的表头 </th>
        <th>表格的表头 </th>
       ...
    </tr>
    <tr>
        <td>单元格内的文字</td>
        <td>单元格内的文字</td>
       ...
    </tr>
</table)

表格的合并

表格的合并是指在复杂的表格结构中,有些单元格是跨多列的,有些单元格是跨多行的,其语法格式如下:

//左右合并
<td colspan="跨的列数">
//上下合并
<td rowspan="跨的行数">

在该语法中，跨的列数是指单元格在水平方向上跨的列数: 跨的行数是指单元格在垂直方向上跨的行数。

举个栗子

            <td rowspan="2">序号</td>
			<td colspan="2">姓名</td>

div 标签

<div> 标签是用来为 HTML 文档内容提供结构和背景的元素。<div> 起始标签和/div> 结束标签之间的所有内容都是用来构成这个块的，其中包含的标签的特性由 <div>示签中的属性来控制，或者通过使用样式表格式化这个块来进行控制。

div 标签的介绍

div 全称为 division，意为分隔。<div> 标签被称为分隔标签，表示一块可以显示HTML 的区域，用于设置字、图片、表格等的摆放位置。<div> 标签是块级标签，需要使用结束标签 </div>。

块级标签叉名块级元素，与其对应的是内联元素，也叫行内标签，它们都是HTML 规范中的概念

<div> 标签的语法格式如下:

<div>
...
</div>

div 标签的应用

在应用 <div> 标签之前，先来了解 <div> 标签的属性。当网页加入层时，会经常用到<div> 标签的属性。
<div> 标签的语法格式如下:

<div id="value" align="value" class="value" style="value">
</div>

其中各参数含义如下。
(1) id: <div> 标签的 id，也可以说是 <div>标签的名字，常与 CSS 式相结合，实现对网页中元素的控制。
(2) align: 用于控制 <div> 标签中元素的对齐方式，其值可以是 left、center 和right，分别用于设置元素的居左、居中和居右对齐。
(3) class: 用于设置 <div> 标签中元素的样式，其值为 CSS 样式中的 class 选择符。
(4) style: 用于设置 <div> 标签中元素的样式，其值为 CSS 属性值，各属性值应用分号分隔。

span 标签

大部分 HTML 标签都有其意义(如<p> 标签创建段落、<h1> 签创建标题等)，然而<span> 标签和 <div> 标签似乎没有任何内容上的意义，但它与 CSS 结合后，应用范围就非常广泛了。

span 标签的介绍

<span> 标签和 <div> 标签非常类似，是 HTML中组合用的标签，可以作为插入 CSS的容器，或插入 class、id 等语法内容的容器。
<span> 标签的语法格式如下:

<span>
...
</span>

span 标签的应用

<span> 标签是行内标签，<span> 标签的前后不会换行，它没有结构上的意义，是纯粹的应用样式，当其他行内元素都不合适时，可以使用 <span> 标签。

列表

列表形式在网站设计中占据比较大的比重，可以使网页上的信息整齐、直观地显示出来，便于用户理解。在后面的学习中会涉及大量列表元素的高级运用。

列表的标签

列表分为两种类型:一种是有序列表，另一种是无序列表。有序列表使用编号来记录项目的顺序，无序列表使用项目符号来标记无序的项目。

列表的主要标签如表所示：

标签	描述
<ul>	无序列表
<ol>	有序列表
<dir>	目录列表
<dl>	定义列表
<menu>	菜单列表
<dt>,<dd>	定义列表的标签
<li>	列表项目的标签

type类型的符号类型

类型值	列表项目的符号
disc	实心⚪
circle	空心⚪
square	实心■

有序列表的序号类型

type取值	列表项目的序号类型
1	数字1，2，3，4，..·
a	小写英文字母 a，b，c，d，·.·
A	大写英文字母 A，B，C，D，·.·
i	小写罗马数字i，ii，ii，iv，..·
I	大写罗马数字I，，m，IV，...