【重识 HTML + CSS】列表、表格、表单

冷不防 2022-10-16 07:53 298阅读 0赞

### HTML 元素 ###

*  列表
 *   *  有序列表 ol、li
     *  无序列表 ul、li
     *  定义列表 dl、dt、dd
     *  列表相关的 CSS 属性 list-style
     *  练习
 *  表格
 *   *  table 的常用属性
     *  tr 的常用属性
     *  th、td 的常用属性
     *  细线表格的实现 border-collapse
     *  表格的其他元素 tbody、caption、thead、tfoot、th
     *  单元格的合并
     *  CSS 属性 - border-spacing
 *  表单
 *   *  input 常用属性
     *  布尔属性
     *  按钮 - input 和 button
     *  label 绑定 input
     *  radio
     *  checkbox
     *  隐藏域 (type=hidden)
     *  select 和 option
     *  fieldset 和 legend
     *  form 的常用属性
     *  get 和 post
     *  表单练习 - 集成各种搜索引擎

> 博文集合：[【重识 HTML + CSS】知识点目录][HTML _ CSS]

# 列表 #

本章代码：[https://gitee.com/szluyu99/html\_css\_note/tree/master/day05/02-列表][https_gitee.com_szluyu99_html_css_note_tree_master_day05_02-]

列表在网页中非常常见![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70]

HTML 提供了 3 组常用的用来展示列表的元素

*  有序列表：ol、li
 *  无序列表：ul、li
 *  定义列表：dl、dt、dd

## 有序列表 ol、li ##

*  **ol (ordered list)**  
    有序列表，直接子元素只能是 li
 *  **li (list item)**  
    列表中的每一项  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 1]

## 无序列表 ul、li ##

*  **ul (unordered list)**  
    无序列表，直接子元素只能是 li
 *  **li (list item)**  
    列表中的每一项  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 2]

> li 一定要是 ul 或者 ol 的**直接子元素**  
> 即不可以 `ul>div>li`，但是可以 `ul>li>div`

## 定义列表 dl、dt、dd ##

*  **dl (definition list)**  
    定义列表，直接子元素只能是 dt、dd
 *  **dt (definition term)**  
    列表中每一项的项目名
 *  **dd (definition description)**  
    列表中每一项的具体描述，是对 dt 的描述、解释、补充  
    一个 dt 后面一般紧跟着1个或者多个 dd

> dt、dd 常见的组合
> 
>  *  事物的名称、事物的描述
>  *  问题、答案
>  *  类别名、归属于这类的各种事物  
>     ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 3]  
>     ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 4]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 5]

## 列表相关的 CSS 属性 list-style ##

列表相关的常见 CSS 属性有 4 个：`list-style-type`、`list-style-image`、`list-style-position`、`list-style`

*  适用于 display 设置为 list-item 的元素，比如 li 元素
 *  它们都可以继承，所以设置给 ol、ul 元素，默认也会应用到 li 元素

1、`list-style-type`：设置 li 元素前面标记的样式

*  disc 实心圆、circle 空心圆、squar 实心方块
 *  decimal 阿拉伯数字、lower-roman 小写罗马数字、upper-roman 大写罗马数字
 *  lower-alpha 小写英文字母、upper-alpha 大写英文字母
 *  none 什么也没有

2、`list-style-image`：设置某张图片为 li 元素前面的标记，会覆盖 `list-style-type` 的设置

3、`list-style-position`：设置 li 元素前面标记的位置，可以取 outside、inside 2 个值

4、`list-style`：是 `list-style-type`、`list-style-image`、`list-style-position` 的缩写属性

*  例如：`list-style: outside url("images/dot.png");`
 *  一般最常用的还是设置为 `none`，去掉 li 元素前面的默认标记 `list-style: none;`

## 练习 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 6]

<!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>02-ul-练习</title>
        <style> .list { /* 去除li前面的项目符号 */ list-style-type: none; } /*.item { !* 去除li前面的项目符号 *! list-style-type: none; }*/ .list .item .tag { color: #fff; background-color: #999; padding-left: 5px; padding-right: 5px; } .list .item .tag.main { background-color: #f00; } .list .item { margin-bottom: 5px; } .list .item a { text-decoration: none; color: #3b5998; } .list .item a:hover { text-decoration: underline; color: #d10301; } </style>
    </head>
    <body>
    
    <ul class="list">
        <li class="item">
            <span class="tag main">1</span>
            <a href="#">针尖对麦芒 WEY VV7s与马自达CX-5</a>
        </li>
        <li class="item">
            <span class="tag main">2</span>
            <a href="#">躁动的心 媳妇为法拉利458当车模</a>
        </li>
        <li class="item">
            <span class="tag main">3</span>
            <a href="#">越看越喜欢 奔驰AMG A 45提车经历</a>
        </li>
        <li class="item">
            <span class="tag">4</span>
            <a href="#">你是我的黑武士 秀宝马740Li领先</a>
        </li>
        <li class="item">
            <span class="tag">5</span>
            <a href="#">无法拒绝的机器 宝马M2提车满月记</a>
        </li>
    </ul>
    
    </body>
    </html>

# 表格 #

本章代码：[https://gitee.com/szluyu99/html\_css\_note/tree/master/day05/03-表格][https_gitee.com_szluyu99_html_css_note_tree_master_day05_03-]

以下界面都是表格： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 9]

常用元素 table、tr、td：

*  **table** 表格
 *  **tr** 表格中的行
 *  **td** 行中的单元格

## table 的常用属性 ##

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>border</td> 
   <td>边框的宽度</td> 
  </tr> 
  <tr> 
   <td>cellpadding</td> 
   <td>单元格内部的间距</td> 
  </tr> 
  <tr> 
   <td>cellspacing</td> 
   <td>单元格之间的间距</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>表格的宽度</td> 
  </tr> 
  <tr> 
   <td>align</td> 
   <td>表格的水平对其方式 <br> left、center、right</td> 
  </tr> 
 </tbody> 
</table>

## tr 的常用属性 ##

## th、td 的常用属性 ##

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>valign</td> 
   <td>单元格的垂直对齐方式<br> top、middle、bottom、baseline</td> 
  </tr> 
  <tr> 
   <td>align</td> 
   <td>单元格的水平对齐方式<br> left、center、right</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>单元格的宽度</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>单元格的高度</td> 
  </tr> 
  <tr> 
   <td>rowspan</td> 
   <td>单元格可横跨的行数</td> 
  </tr> 
  <tr> 
   <td>colspan</td> 
   <td>单元格可横跨的列数</td> 
  </tr> 
 </tbody> 
</table>

## 细线表格的实现 border-collapse ##

方法 1：

*  表格的 `border` 为 0（或不设置 `border`）
 *  分别设置表格、单元格的背景色
 *  表格的背景色决定了表格线的颜色
 *  设置 `cellspacing` 的值，决定了表格线的粗细

代码：[细线表格【了解】 ][Link 1]

--------------------

方法2：

*  `table { border-collapse: collapse; }` 合并单元格的边框  
    ![在这里插入图片描述][20210528233957211.png]

代码：[细线表格][Link 2]

## 表格的其他元素 tbody、caption、thead、tfoot、th ##

> 实际上这些元素并不常用，**表格往往使用 tr、td 进行表示即可**

*  **tbody** 表格的主体
 *  **caption** 表格的标题
 *  **thead** 表格的表头
 *  **tfoot** 表格的页脚
 *  **th** 表格的表头单元格

代码：[更完整的表格结构【了解】][Link 3]

## 单元格的合并 ##

单元格的合并主要依靠 `rowspan` 与 `colspan`

示例代码：[单元格的合并][Link 4]

--------------------

练习：课程表  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 10]  
代码：[课程表 - 练习][-]

## CSS 属性 - border-spacing ##

`border-spacing` 用于设置单元格之间的**水平间距、垂直间距**，比如：

*  `table {border-spacing: 10px 20px; }`  
    设置 2 个值则分别是 cell 之间的水平间距、垂直间距  
    如果只设置 1 个值，同时代表水平、垂直间距  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 11]

示例代码：[ border-spacing][border-spacing]

# 表单 #

本章代码：[https://gitee.com/szluyu99/html\_css\_note/tree/master/day06/01-表单][https_gitee.com_szluyu99_html_css_note_tree_master_day06_01-]

常见表单：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 12]  
常见表单元素：

*  **form** 表单  
    一般情况下，其他表单相关元素都是它的后代元素
 *  **input** 单行文本输入框、单选框、复选框、按钮等元素
 *  **textarea** 多行文本框
 *  **select**、**option** 下拉选择框
 *  **button** 按钮
 *  **label** 表单元素的标题
 *  **fieldset** 表单元素组
 *  **legend** fieldset 的标题

## input 常用属性 ##

`type`：input 的类型

*  text：文本输入框（明文输入）
 *  password：文本输入框（密文输入）
 *  radio：单选框
 *  checkbox：复选框
 *  button：按钮
 *  reset：重置
 *  submit：提交表单数据给服务器
 *  file：文件上传
 *  hidden：隐藏域

`maxlength`：允许输入的最大字数

`placeholder`：占位文字

`readonly`：只读

`disabled`：禁用

`checked`：默认被选中

*  只有当 `type` 为 radio 或 checkbox 时可用

`autofocus`：当页面加载时，自动聚焦

`name`：名字

*  在提交数据给服务器时，可用于区分数据类型

`value`：取值

`form`：设置所属的form元素（填写form元素的id）

*  一旦使用了此属性，input 元素即使不写在 form 元素内部，它的数据也能够提交给服务器

> 去除 input 的 Tab 键选中效果
> 
>  *  `input { outline:none; }`
>  *  或者将 tabindex 属性设置为 -1

## 布尔属性 ##

布尔属性可以没有属性值，写上属性名就代表使用这个属性

常见的布尔属性有 `disabled`、`checked`、`readonly`、`multiple`、`autofocus`、`selected`

**如果要给布尔属性设值，值就是属性名本身**  
![在这里插入图片描述][20210529141134559.png]

## 按钮 - input 和 button ##

普通按钮（`type=button`）：使用 value 属性设置按钮文字

重置按钮（`type=reset`）：重置它所属 form 的所有表单元素（input、textarea、select）

提交按钮（`type=submit`）：提交它所属 form 的表单数据给服务器（input、textarea、select）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 13]

> 默认情况下，敲**回车键 (Enter)** 会自动提交表单数据给服务器  
> 如需禁止此行为，需要编写相应的 JavaScript 代码

--------------------

使用 button 元素也能实现按钮，功能效果跟 input 一样  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 14]  
示例代码：[button][]

## label 绑定 input ##

label 元素一般跟 input 配合使用，用来表示 input 的标题

label 可以跟某个 input 绑定，点击 label 就可以激活对应的 input  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 15]  
也可以使用以下写法：使用 label 标签包住 input  
![在这里插入图片描述][20210529142024699.png]

## radio ##

name 值相同的 radio 才具备单选功能  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 16]

## checkbox ##

属于同一种类型的 checkbox，name 值要保持一致  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 17]

## 隐藏域 (type=hidden) ##

隐藏域不会显示到网页界面上，但提交表单数据的时候，它的 name 和 value 也会被提交给服务器

如果有些发放给服务器的数据，是不需要用户输入的，或者不希望在界面上显示出来，可以使用隐藏域  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 18]  
示例代码：[隐藏域][Link 5]

## select 和 option ##

option 是 selec t的子元素，一个 option 代表一个选项  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 19]  
select 常用属性

*  multiple：可以多选
 *  size：显示多少项

option 常用属性

*  selected：默认被选中

## fieldset 和 legend ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 20]  
![在这里插入图片描述][20210529143655513.png]

## form 的常用属性 ##

`action`：用于提交表单数据的请求 URL

`method`：请求方法（get 和 post），默认是 get

`target` 在什么地方打开URL（参考 a 元素的 target）

`enctype` 规定了在向服务器发送表单数据之前如何对数据进行编码，取值有 3 种：

*  application/x-www-form-urlencoded：默认的编码方式
 *  text/plain：普通文本传输
 *  **multipart/form-data**：文件上传时必须为这个值，并且 `method` 必须是 post  
    文件上传成功的响应界面：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 21]

`accept-charset`：规定表单提交时使用的**字符编码**

示例代码：[input][]

## get 和 post ##

提交表单数据时，浏览器发送的是 http 请求，有 2 种请求方法可以选择：

*  **get**  
    在请求 URL 后面以 `?` 的形式跟上发给服务器的参数，多个参数之间用 `&`隔开，比如  
    `http://ww.test.com/login?phone=123&password=234&sex=1`  
    由于浏览器和服务器对 URL 长度有限制，因此在 URL 后面附带的参数是有限制的，通常不能超过 1KB  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 22]
 *  **post**  
    **发给服务器的参数全部放在请求体中**  
    理论上，post 传递的数据量没有限制（具体还得看服务器的处理能力）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 23]

## 表单练习 - 集成各种搜索引擎 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 24]  
代码：[表单练习][Link 6]

[HTML _ CSS]: https://blog.csdn.net/weixin_43734095/article/details/117025820
[https_gitee.com_szluyu99_html_css_note_tree_master_day05_02-]: https://gitee.com/szluyu99/html_css_note/tree/master/day05/02-%E5%88%97%E8%A1%A8
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70]: /images/20221014/9ffa2788c01440f496819bbc0474c008.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 1]: /images/20221014/e0c4f85c75b349aea6a5e513c6475133.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 2]: /images/20221014/d524bc930e294f2f8eeffec4556c545a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 3]: /images/20221014/7dfb611a51da4e34b7c168f756e9682b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2021052814103624.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 5]: /images/20221014/437d49d5e4eb43519f0008ddda269cfc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 6]: /images/20221014/3eabfea9bdcc475d8999c5e6a848b01d.png
[https_gitee.com_szluyu99_html_css_note_tree_master_day05_03-]: https://gitee.com/szluyu99/html_css_note/tree/master/day05/03-%E8%A1%A8%E6%A0%BC
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 7]: /images/20221014/8f2bc27f82b145a8bad5b6715ef90bd2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 8]: /images/20221014/a5ab3908e46e452286043c93fca8f873.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 9]: /images/20221014/ac3fc1b783bb4d8c99dbbdbaa12c8139.png
[Link 1]: https://gitee.com/szluyu99/html_css_note/blob/master/day05/03-%E8%A1%A8%E6%A0%BC/02-%E7%BB%86%E7%BA%BF%E8%A1%A8%E6%A0%BC%E3%80%90%E4%BA%86%E8%A7%A3%E3%80%91.html
[20210528233957211.png]: /images/20221014/337c9a4506bc4379a9fe55e1916e177e.png
[Link 2]: https://gitee.com/szluyu99/html_css_note/blob/master/day05/03-%E8%A1%A8%E6%A0%BC/03-%E7%BB%86%E7%BA%BF%E8%A1%A8%E6%A0%BC.html
[Link 3]: https://gitee.com/szluyu99/html_css_note/blob/master/day05/03-%E8%A1%A8%E6%A0%BC/04-%E6%9B%B4%E5%AE%8C%E6%95%B4%E7%9A%84%E8%A1%A8%E6%A0%BC%E7%BB%93%E6%9E%84%E3%80%90%E4%BA%86%E8%A7%A3%E3%80%91.html
[Link 4]: https://gitee.com/szluyu99/html_css_note/blob/master/day05/03-%E8%A1%A8%E6%A0%BC/06-%E5%8D%95%E5%85%83%E6%A0%BC%E7%9A%84%E5%90%88%E5%B9%B6.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 10]: /images/20221014/95909fb855fe43e39992c666d0c157ff.png
[-]: https://gitee.com/szluyu99/html_css_note/blob/master/day05/03-%E8%A1%A8%E6%A0%BC/07-%E8%AF%BE%E7%A8%8B%E8%A1%A8-%E7%BB%83%E4%B9%A0.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 11]: /images/20221014/4dd02a71cdcd40819cb546b9c2ea2fff.png
[border-spacing]: https://gitee.com/szluyu99/html_css_note/blob/master/day05/03-%E8%A1%A8%E6%A0%BC/08-border-spacing.html
[https_gitee.com_szluyu99_html_css_note_tree_master_day06_01-]: https://gitee.com/szluyu99/html_css_note/tree/master/day06/01-%E8%A1%A8%E5%8D%95
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 12]: /images/20221014/66628a2634784cde8ba3af700adf045b.png
[20210529141134559.png]: /images/20221014/43fde9c7faaf44e89d91b9946c513abd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 13]: /images/20221014/2f09d26354384941bd205f6757ebd901.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 14]: /images/20221014/16f9028ecb7d4ca4a5f661c06725d9c1.png
[button]: https://gitee.com/szluyu99/html_css_note/blob/master/day06/01-%E8%A1%A8%E5%8D%95/02-%E6%8C%89%E9%92%AE.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 15]: /images/20221014/ab03ed89c7c64fe1abda78ff17a02bba.png
[20210529142024699.png]: /images/20221014/c5957d2a605846d88c260350acdbe42c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 16]: /images/20221014/b245830fb4544bd6a47c5370772597a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 17]: /images/20221014/e26910d3e57648c5a4e1186537fd128e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 18]: /images/20221014/dcb48cc08d134039a8ad4d52965bf846.png
[Link 5]: https://gitee.com/szluyu99/html_css_note/blob/master/day06/01-%E8%A1%A8%E5%8D%95/04-hidden.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 19]: /images/20221014/2bcc301a332d430ea96bc570fc51d812.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 20]: /images/20221014/9581f766afa346c5a2ebb9f6ba59ecf2.png
[20210529143655513.png]: /images/20221014/80a9f277d11b4a07a0e0a7b2af1bf394.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 21]: /images/20221014/5fd50a4adad94de7bc556febafbd0456.png
[input]: https://gitee.com/szluyu99/html_css_note/blob/master/day06/01-%E8%A1%A8%E5%8D%95/01-input.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 22]: /images/20221014/a3c74fa3dafa446882990c48eac7e25d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 23]: /images/20221014/f9c4bdbdf48246219634a58a062a88c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 24]: /images/20221014/4160f6f006d74bfd913fb7042fa5f9e3.png
[Link 6]: https://gitee.com/szluyu99/html_css_note/blob/master/day06/01-%E8%A1%A8%E5%8D%95/03-%E7%BB%83%E4%B9%A0.html