前端基础之HTML+CSS（二）

最新推荐文章于 2024-09-14 22:18:26 发布

南门酒巷

最新推荐文章于 2024-09-14 22:18:26 发布

阅读量105

点赞数 2

分类专栏：前端基础之HTML+CSS 文章标签：前端 html css

本文链接：https://blog.csdn.net/weixin_46685715/article/details/131691805

版权

前端基础之HTML+CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了HTML中的表单元素<form>，包括GET和POST提交方式的区别，以及<input>的各种类型，如text、password、email等。还讲解了表格的创建和相关属性，以及列表（无序、有序和定义列表）的使用，并提到了CSS中与列表样式相关的属性。

摘要由CSDN通过智能技术生成

前言

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

表单标签

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

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

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

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

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

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

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

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

<tr>标签主要的属性：

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

<td>标签主要的属性：

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

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

列表

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

无序列表（Unordered List）：
- <ul>标签用于创建无序列表。
- 主要属性：
  - type：定义无序列表符号的类型，可以设置为"disc"（实心圆点，默认）、“circle”（空心圆点）或"square"（方形）
```
<ul>
    <li>无序列表</li>
</ul>
```
有序列表（Ordered List）：
- <ol>标签用于创建有序列表。
- 主要属性：
  - type：定义有序列表项的标记类型，可以设置为"1"（数字，默认）、“A”（大写字母）或"a"（小写字母）。
  - start：定义有序列表的起始值。
```
<ol type="A" start="4">
    <li>有序列表</li>
</ol>
```
定义列表（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属性，用于设置列表项的标记样式。

list-style-type：用于设置列表项的标记类型或样式。常见的取值包括：
- disc：实心圆点（默认值）。
- circle：空心圆点。
- square：方形。
- decimal：十进制数字。
- lower-alpha：小写字母。
- upper-alpha：大写字母。
- lower-roman：小写罗马数字。
- upper-roman：大写罗马数字。
- 可以使用其他取值来设置特殊的标记类型或自定义样式。
list-style-image：用于设置列表项的标记图像。可以将图像文件的路径指定为属性的值
- list-style-image: url("image.png");：使用名为image.png的图像作为列表项标记。
- none：无图像（默认值）。
list-style-position：该属性用于设置列表项标记的位置。
- inside：列表项标记位于列表项内容的内部（默认值），紧靠在文本旁边。
- outside：列表项标记位于列表项内容的外部，独立于文本之前。
```
ul {
	list-style-position: inside;
  	list-style-type: square;
  }
```
上述代码将无序列表的标记位置设置为内部（inside），标记类型设置为方形（square）。
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>）元素，用于自定义列表的样式和排版。

特殊符号

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