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

 

🌱往期回顾：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。 

表单输入类型：

• radio：单选框

• 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> 元素相关联的优点：

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

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

<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> 元素的后代。

多行文本输入框/文本域

<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：元素的输入文本的行数（显示的高度）。

窗体选项栏

<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>

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

<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>

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

<span>
...
</span>

 type类型的符号类型

有序列表的序号类型