From e0c112a6154af1c0c0c8321aeb9c7dd4da45ebdd Mon Sep 17 00:00:00 2001 From: Yzh0407 Date: Thu, 19 Sep 2024 00:07:37 +0800 Subject: [PATCH] =?UTF-8?q?20240918-Html=E8=A1=A8=E6=A0=BC=E4=B8=8E?= =?UTF-8?q?=E8=A1=A8=E5=8D=95=E6=A0=87=E7=AD=BE=E5=8F=8A=E5=9F=BA=E7=A1=80?= =?UTF-8?q?=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...72\347\241\200\345\261\236\346\200\247.md" | 160 ++++++++++++++++++ 1 file changed, 160 insertions(+) create mode 100644 "\345\217\266\345\255\220\350\241\241/20240918-Html\350\241\250\346\240\274\344\270\216\350\241\250\345\215\225\346\240\207\347\255\276\345\217\212\345\237\272\347\241\200\345\261\236\346\200\247.md" diff --git "a/\345\217\266\345\255\220\350\241\241/20240918-Html\350\241\250\346\240\274\344\270\216\350\241\250\345\215\225\346\240\207\347\255\276\345\217\212\345\237\272\347\241\200\345\261\236\346\200\247.md" "b/\345\217\266\345\255\220\350\241\241/20240918-Html\350\241\250\346\240\274\344\270\216\350\241\250\345\215\225\346\240\207\347\255\276\345\217\212\345\237\272\347\241\200\345\261\236\346\200\247.md" new file mode 100644 index 00000000..60f5bdeb --- /dev/null +++ "b/\345\217\266\345\255\220\350\241\241/20240918-Html\350\241\250\346\240\274\344\270\216\350\241\250\345\215\225\346\240\207\347\255\276\345\217\212\345\237\272\347\241\200\345\261\236\346\200\247.md" @@ -0,0 +1,160 @@ +# 20240918第六次课笔记 + +## 表格标签 + +`` 表示表格中的一行 + +`` 表示表格中的一列 + +```html + + + + + + +
.........
+``` + +**`` 的属性：** +- `border`：设置表格边框的大小，单位为像素。 +- `style="border-collapse:collapse;"`：将单元格之间的边线与表格的外边框合并。 +- `width`：表格的宽度，单位为像素。 +- `height`：表格的高度，单位为像素。 +- `bordercolor`：设置表格边框的颜色。 +- `align`：定义表格在页面中的水平对齐方式，可取值：left, right, center。 +- `cellpadding`：控制单元格内容与单元格边缘的距离，单位为像素。 +- `cellspacing`：设置单元格与单元格之间的间距，单位为像素。 +- `bgcolor="#99cc66"`：设置表格的背景颜色。 +- `background="路径src/..."`：设置表格的背景图片。背景图片的优先级高于背景颜色。 +- `bordercolorlight`：设置表格上、左边框及单元格右、下边框的颜色，主要用于3D效果。 +- `bordercolordark`：设置表格右、下边框及单元格上、左边框的颜色，也用于3D效果。 + +### 单元格合并 + +单元格可以通过以下属性进行合并： + +- `colspan`：横向合并单元格。 +```html +
+ + + + +
内容1内容2
+``` +- `rowspan`：纵向合并单元格。 +```html + + + + + + + + +
内容1内容2
内容1
+``` + +### 表格的结构标签 + +- ``：表格头部标签 +- ``：表格主体标签 +- ``：表格尾部标签 + +区别： +1. 使用这些标签后，代码顺序可以任意安排，浏览器最终会按照 `thead`、`tbody`、`tfoot` 的顺序渲染表格内容。如果不使用这些标签，则按代码的书写顺序显示。 +2. 如果表格较大且内容较多，使用 `thead`、`tbody`、`tfoot` 标签时，内容可以边获取边显示，而不需要等待整个表格内容加载完成。 + +```html + + + + + + + + + + + + + + + + +
头部内容
主体内容
尾部内容
+``` + +## 表单标签 + +表单标签 `
` 用来定义用户输入区域，用于收集用户信息并与服务器交互。 + +**表单的属性：** +- `name`：表单的名称，用于在JS中操作表单。 +- `id`：表单的ID，用于唯一标识表单。 +- `action`：指定表单数据提交的处理地址，一般为PHP文件。 +- `method`：指定表单提交的方式，常用的取值为 `get` 和 `post`。 + +嵌套表格与表单时，表单标签 `` 包含 `` 标签。 + +**GET 与 POST 的区别：** +- GET：表单数据会附加在URL后，以 `name=value` 形式呈现，适合提交较少的信息，数据可见且不太安全。 +- POST：表单数据在提交时会直接发送到服务器，数据不可见，适合提交大量信息，较为安全。 + +### `` 标签 + +用于创建文本框、密码框、单选框等。 + +```html + +``` + +**常见的 `type` 属性：** +- `text`：文本框（默认）。 +- `password`：密码输入框。 +- `radio`：单选按钮，name 属性相同的按钮属于同一组。 +- `checkbox`：多选框，name 属性相同的按钮可以进行多选。 +- `hidden`：隐藏输入框，用于隐藏提交数据。 +- `value`：设置输入框中的默认值。 + +```html + + 用户名：
+ 密码：
+ 性别：男 + 女
+ +``` + +### 按钮类型 + +- `button`：普通按钮，用于结合 JS 脚本。 +- `submit`：提交按钮，点击后提交表单。 +- `reset`：重置按钮，点击后表单内容将恢复为默认值。 + +```html + +
+
+
+ +``` + +### 下拉列表 `` 标签用于创建下拉列表，每个选项用 `