前端基础之HTML+CSS(二)

前言

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


表单标签

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

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

form标签methodpostget有什么区别呢?

  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":用于输入数值,可以限制输入为数字类型。使用 minmax 属性来限制允许的最小和最大值,使用 step 属性指定合法的步进值。
  5. type="date":用于选择日期,通常会弹出日期选择器。使用 minmax 属性来限制允许的最小和最大日期值。
  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-typelist-style-imagelist-style-positionlist-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-typelist-style-positionlist-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>)元素,用于自定义列表的样式和排版。

特殊符号

字符代码 特殊字符 描述
&nbsp 空格符
&lt < 小于号
&gt > 大于号
&amp & 和号
&yen 人民币
&copy © 版权
&reg ® 注册商标
&deg ° 摄氏度
&plusmn ± 正负号
&times × 乘号
&divide ÷ 除号
&sup2 ² 平方
&sup3 ³ 立方