Document

前言

继上一篇常用标签，本篇将常用的标签及对应的常用属性补充完整。

表单标签

<form method="get/post" action="向何处发送表单数据">
    action 是处理表单提交的 URL。这个值可被 <button>、<input type="submit"> 或 <input type="image"> 元素上的 formaction 属性覆盖。
    <input />
</form>

<form>元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。

在form标签中method的post和get有什么区别呢？

1. get是从服务器上获取数据，post是向服务器传送数据；
2. get是把参数数据队列加到提交表单的action属性所指的URL中，值和表单内各个宇段一一对应，在URL中可以看到，以?作为分隔符。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到action属性所指的URL地址。用户看不到这个过程；
3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用RequestForm获取提交的数据；
4. get传送的数据量较小，不能大于2KB。post传送的数据较大，一般被默认为不受限制；
5. get安全性非常低，post安全性较高。但是执行效率却比post方法好。

<input> 元素是目前是 HTML 中最强大、最复杂的元素之一，因为它有大量的输入类型和属性组合。<input> 的工作方式相当程度上取决于 type 属性的值。如果未指定此属性，则采用的默认类型为 text。

以下是一些常见的 <input> 类型：

1. type="text"：默认类型，用于单行文本输入。使用通用的 <input> 属性，如 placeholder（占位符文本）、maxlength（最大字符数）等。
2. type="password"：用于密码输入，将输入内容隐藏。使用通用的 <input> 属性。
3. type="email"：用于电子邮件地址输入，会验证输入是否符合电子邮件的格式。使用 pattern 属性来指定一个正则表达式，验证输入是否符合特定的电子邮件格式。
4. type="number"：用于输入数值，可以限制输入为数字类型。使用 min 和 max 属性来限制允许的最小和最大值，使用 step 属性指定合法的步进值。
5. type="date"：用于选择日期，通常会弹出日期选择器。使用 min 和 max 属性来限制允许的最小和最大日期值。
6. type="checkbox"：用于选择一个或多个选项，可以多选。使用 checked 属性来指定初始是否选中状态。
7. type="radio"：用于选择一个选项，只能单选。通常需要为每个选项指定相同的 name 属性，以确保只能选择其中一个选项。
8. type="file"：用于上传文件。没有特定的独特属性，但可以使用 accept 属性指定允许上传的文件类型。
9. type="submit"：用于提交表单数据。
10. type="reset"：用于重置表单内容。
11. type="button"：用于创建一个普通按钮，不具有特殊功能。

此外，HTML5 还引入了其他一些输入类型，如 type="color"（颜色选择器）、type="range"（滑动条）和 type="search"（搜索框）等。

在form标签内的input标签若要提交数据到服务器，name必须设置。

表格标签

<table> <!-- 创建表格 -->
    <caption></caption> <!-- 定义表格标题，必须紧跟table标签之后 -->
    <tr> <!-- tr表示行 -->
        <th>num</th><!-- th表示表头 -->
        <td>1</td> <!-- td表示单元格 -->
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

<table>标签主要的属性：

1. border：定义表格的边框宽度；
2. cellpadding：定义单元格的内边距；
3. cellspacing：定义单元格之间的间距；
4. width：定义表格的宽度；
5. height：定义表格的高度；
6. align：定义表格在页面中的水平对齐方式，可以设置为left（左对齐）、center（居中对齐）或right（右对齐）；
7. bgcolor：定义表格的背景颜色，可以设置为颜色名称或颜色的十六进制值；
8. summary：提供表格的简短描述或摘要信息，以帮助屏幕阅读器等辅助技术理解表格的内容；
9. caption：为表格添加标题，可以在<table>标签内部使用<caption>标签来定义；
10. bordercolor：定义表格边框的颜色，可以设置为颜色名称或颜色的十六进制值。

<tr>标签主要的属性：

1. align：定义行中单元格的水平对齐方式，可以设置为left（左对齐）、center（居中对齐）或right（右对齐）；
2. valign：定义行中单元格的垂直对齐方式，可以设置为top（顶部对齐）、middle（居中对齐）或bottom（底部对齐）；
3. bgcolor：定义行的背景颜色，可以设置为颜色名称或颜色的十六进制值。

<td>标签主要的属性：

1. colspan：定义单元格横向跨越的列数。例：<td colspan="2">表示该单元格跨越两列；
2. rowspan：定义单元格纵向跨越的行数。例如：<td rowspan="3">表示该单元格跨越三行；
3. align：定义单元格内容的水平对齐方式，left（左对齐）、center（居中对齐）、right（右对齐）或justify（两端对齐）；
4. valign：定义单元格内容的垂直对齐方式，可以设置为top（顶部对齐）、middle（居中对齐）或bottom（底部对齐）；
5. bgcolor：定义单元格的背景颜色，可以设置为颜色名称或颜色的十六进制值；
6. nowrap：禁止单元格内容换行，可以设置为nowrap；
7. width：定义单元格的宽度。

<th>标签类似于<td>标签，通常用于表格的首行或首列，用于标识列标题或表头信息，以便更好地描述表格的结构和内容。其相较于<td>标签特殊的属性是scope：指定表头单元格的范围，可以设置为col（列范围）或row（行范围）。

列表

在HTML中，常用的列表类型有无序列表（Unordered List）、有序列表（Ordered List）和定义列表（Definition List）。以下是每种列表及其常用属性的说明：

1. 无序列表（Unordered List）：

   • <ul>标签用于创建无序列表。

   • 主要属性：

     • type：定义无序列表符号的类型，可以设置为"disc"（实心圆点，默认）、“circle”（空心圆点）或"square"（方形）

       <ul>
           <li>无序列表</li>
       </ul>
       

2. 有序列表（Ordered List）：

   • <ol>标签用于创建有序列表。

   • 主要属性：

     • type：定义有序列表项的标记类型，可以设置为"1"（数字，默认）、“A”（大写字母）或"a"（小写字母）。

     • start：定义有序列表的起始值。

       <ol type="A" start="4">
           <li>有序列表</li>
       </ol>
       

3. 定义列表（Definition List）：

   • <dl>标签用于创建定义列表。

   • 主要标签：

     • <dt>标签用于定义术语（term）。
     • <dd>标签用于定义术语的解释（description）。

   • 无特定属性，但可以使用其他通用的文本属性来样式化术语和解释。

     <dl>
         <dt>可以是文字也可以是图</dt>
         <dd>相关文字</dd>
     </dl>
     

list-style-type、list-style-image、list-style-position、list-style是CSS属性，用于设置列表项的标记样式。

1. list-style-type：用于设置列表项的标记类型或样式。常见的取值包括：

   • disc：实心圆点（默认值）。
   • circle：空心圆点。
   • square：方形。
   • decimal：十进制数字。
   • lower-alpha：小写字母。
   • upper-alpha：大写字母。
   • lower-roman：小写罗马数字。
   • upper-roman：大写罗马数字。
   • 可以使用其他取值来设置特殊的标记类型或自定义样式。

2. list-style-image：用于设置列表项的标记图像。可以将图像文件的路径指定为属性的值

   • list-style-image: url("image.png");：使用名为image.png的图像作为列表项标记。
   • none：无图像（默认值）。

3. list-style-position：该属性用于设置列表项标记的位置。

   • inside：列表项标记位于列表项内容的内部（默认值），紧靠在文本旁边。

   • outside：列表项标记位于列表项内容的外部，独立于文本之前。

     ul {
     	list-style-position: inside;
       	list-style-type: square;
       }
     

   上述代码将无序列表的标记位置设置为内部（inside），标记类型设置为方形（square）。

4. list-style：该属性是list-style-type、list-style-position和list-style-image的简写形式，用于一次性设置所有列表项的标记样式。

   • list-style: <type> <position> <image>;：可以使用list-style属性同时设置列表项的标记类型、位置和图像。

   • <type>：列表项的标记类型，与list-style-type属性相同的取值。

   • <position>：列表项标记的位置，与list-style-position属性相同的取值。

   • <image>：列表项标记的图像，与list-style-image属性相同的取值。

   使用较多的是：list-style: none去除列表项标记。

这些属性可以应用于无序列表（<ul>）和有序列表（<ol>）以及其相关的列表项（<li>）元素，用于自定义列表的样式和排版。

特殊符号