HTML基础(下)

亦凉 2024-03-22 18:04 12阅读 0赞

**目录**

前言

一 表格标签

1.1 基础标签

1.2 表格属性

1.3 合并单元格

二 表单标签

2.1 form标签

2.2 input标签

2.3 label标签

2.4 select标签

2.5 textarea标签

三 无语义标签

3.1 div标签

3.2 span标签

五 综合练习

5.1 目标界面

5.2 界面源码

总结

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

## 前言 ##

对于html零基础的小白,这里建议先看上一篇博客 [HTML基础(上)][HTML],看完之后再来看本篇博客,本篇博客是继续上一篇博客的内容,继续介绍一些基础标签,并且最后出一个综合练习,一起练习以下这些基础标签.

## 一 表格标签 ##

### 1.1 基础标签 ###

*  table 标签: 表示整个表格
 *  tr 标签: 表示表格的一行
 *  td 标签: 表示表格中的一个单元格
 *  th 标签: 表示表头单元格, 会居中加粗
 *  thead 标签: 表格的头部区域, (这里注意和 th 标签区分, th标签 是表头单元格,而该标签是头部区域, 范围更大)
 *  tbody 标签: 表格的主体部分

### 1.2 表格属性 ###

提醒: 表格的这些属性可以设置大小以及边框的属性等,但是在前端开发的过程中我们一般都是使用CSS 来实现界面美化,因此不建议大家使用设置以下属性的方法来美化界面.

*  align: 表格相对于周围元素的对齐方式,主要有 left, right, center三个属性值.
 *  border: 边框属性, 属性值为 1 表示有边框(数字越大,边框越粗), 属性值为 "" 表示无边框
 *  cellpadding: 内容距离边框的距离, 默认为 1px.
 *  cellspacing: 单元格之间的距离, 默认为 2px.
 *  width / height: 设置单元格的尺寸

> 代码示例

>  效果如下

![160f7fe94ad4442cb32893042cd53f1a.png][]

### 1.3 合并单元格 ###

*  跨行合并: rowspan="n"
 *  跨列合并: colspan="n"

合并单元格的步骤

1.  先确定跨行还是跨列合并
2.  找好合并的目标单元格 (跨列合并, 最左侧的单元格是目标单元格; 跨行合并,最上方的单元格是目标单元格)
3.  删除多余的单元格

> 代码示例

> 效果如下:

![29eb344988ad4d66a80532c2bb88c0c7.png][]

## 二 表单标签 ##

表单是让用户输入信息的重要途径, 主要分为以下两个部分:

*  表单域: 包含表单元素的区域, 重点是form标签.
 *  表单控件: 表单域中的各种控件,如按钮,输入框等, 重点是input标签.

### 2.1 form标签 ###

> 基本用法如下

from标签主要是描述数据要按照什么方式,提交到哪个页面中,即form标签主要在 服务器和网络编程中使用,这里不做过多解释.

### 2.2 input标签 ###

input 标签可以实现很多输入控件,如单行文本框, 单选框, 复选框, 按钮等.

input 标签的主要属性如下:

*  type 属性(必须有): 指明当前 input 标签代表的控件, 取值有 button, checkbos, text, file, image, password, radio等
 *  name 属性: 给当前标签起一个名字, 这个对于单选框很有用,因为单选框是具有相同的 name 才能实现多选一
 *  value 属性: input 中的默认值
 *  checked 属性: 默认被选中, 主要用于单选按钮和多选按钮
 *  maxlength 属性: 设定文本最大长度

#### 1) 文本框 ####

> 代码示例

>  效果如下

![74d65d17cefc42b0a6b90a5d22785306.png][]

#### 2) 密码框 ####

> 代码示例

> 效果如下

![84815850345e4842883b96511e01f1df.png][]

#### 3) 单选框 ####

> 代码示例

性别: 
    <input type="radio" name="sex" checked="checked">男
    <input type="radio" name="sex">女

> 效果如下

![c66395a81ddb406baa534008666bdb70.png][]

#### 4) 复选框 ####

> 代码示例

以下人物你喜欢谁: <br>
    <input type="checkbox">唐僧
    <input type="checkbox">孙悟空
    <input type="checkbox">猪八戒
    <input type="checkbox">沙悟净

> 效果如下

![4f1354f4aa114265a20f3d84d25f6c32.png][]

#### 5) 普通按钮 ####

这里只是简单的在页面上实现个按钮,想让按钮按完之后有反应,应该搭配 javascript来实现.

> 代码示例

> 效果如下

![364653d09a6c4efca70488d343a578db.png][]

#### 6) 提交按钮 ####

> 代码示例

> 效果如下

![45856ff97d3f41e296c3dfce9ddca9c1.png][]

注意: 提交按钮必须放到form标签中,当我们点击提交按钮后,就会尝试给from中action指定的url发送该表单的数据.

#### 7) 清空按钮 ####

> 代码示例

> 效果如下

![de218a01050f4d62937dc238efb8cad6.png][]

注意: 清空按钮必须放到form标签中,点击后会将该清空按钮所在的from表单中的用户输入全部重置

#### 8) 文件选择 ####

>  代码示例

> 效果如下

![155d5189683e45f19e225de63b28e6ed.png][]

### 2.3 label标签 ###

label标签主要是搭配 input标签使用的, 可以实现点击label也能选中对应的单选 / 复选框,提升用户的体验

*  for 属性: 指定当权label和哪个相同id的input标签对应

> 代码示例

性别: 
    <input type="radio" name="sex" id="male" checked="checked">
    <label for="male">男</label>
    <input type="radio" name="sex" id="famale">
    <label for="famale">女</label>

> 效果展示

![dfb0cd265e9b462d8ab2a22d40efd841.png][]

这样子设计之后,我们不用点击⭕, 点击 男 或者 女 就可以选中.

### 2.4 select标签 ###

select标签主要搭配 option标签 一起使用

> 代码示例

>  效果如下

![63470bedef2146809636c92b6f3964f6.png][]

### 2.5 textarea标签 ###

> 代码示例

<textarea cols="30" rows="10">
        这是一个文本域
    </textarea>

>  效果如下

![6784a6e7d5644478906bb59fba8fe447.png][]

提醒: textaera标签中的内容就是默认内容.

## 三 无语义标签 ##

### 3.1 div标签 ###

div标签,其中div 是 division 的缩写, 意义是 分割, 同时div是独占一行的,是一个大盒子,在日常书写前端代码的时候, div常用来划分区域, 使得CSS可以很好的选中该区域并调整该区域的样式.

> 代码示例

<div>
        这是第一个区域
    </div>
    <div>
        这是第二个区域
    </div>

>  效果如下

![d2f436801c764d3c8abea34cdd20b309.png][]

### 3.2 span标签 ###

span标签, 意思是跨度, span标签和div标签不同的是span标签不独占一行,是一个小盒子,利用span标签可以做到对局部样式的控制.

> 代码示例

> 效果如下

![4503e6bc66c94525ba0e3f4d6950f57d.png][]

总之,div标签和span标签在CSS的学习中我们就会对他们有深刻的理解,这里不做过多解释.

## 五 综合练习 ##

前面已经学习了这么多的标签,这里让我们一起使用这些标签来实现一些简单的页面,提醒: 这个页面较丑且为静态的,后续我们想让其动起来需要的是 javascript 代码, 而想让其更美观需要的是 CSS 代码.

### 5.1 目标界面 ###

![26e2590b82ec4702bbdf85dce8491ee3.png][]

### 5.2 界面源码 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>简历信息填写表</title>
    </head>
    <body>
        <table width="500px" cellspacing="0">
            <thead>
                <h2>请填写简历信息</h2>
            </thead>
            <tr>
                <td>
                    姓名
                </td>
                <td>
                    <input type="text" id="name">
                </td>
            </tr>
            <tr>
                <td>
                    性别
                </td>
                <td>
                    
                    <input type="radio" name="sex" id="male" checked="checked">
                    <label for="male">男</label>
                    <input type="radio" name="sex" id="female">
                    <label for="female">女</label>
                </td>
            </tr>
            <tr>
                <td>
                    出生日期
                </td>
                <td>
                    <select id="year">
                        <option>--请选择年份--</option>
                        <option>2005</option>
                        <option>2004</option>
                        <option>2003</option>
                        <option>2002</option>
                        <option>2001</option>
                        <option>2000</option>
                        <option>1999</option>
                        <option>1998</option>
                        <option>1997</option>
                        <option>1996</option>
                    </select>
                    <select id="month">
                        <option>--请输入月份--</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                        <option>6</option>
                        <option>7</option>
                        <option>8</option>
                        <option>9</option>
                        <option>10</option>
                        <option>11</option>
                        <option>12</option>
                    </select>
                    <select id="day">
                        <option>--请选择日期--</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                        <option>6</option>
                        <option>7</option>
                        <option>8</option>
                        <option>9</option>
                        <option>10</option>
                        <option>11</option>
                        <option>12</option>
                        <option>13</option>
                        <option>14</option>
                        <option>15</option>
                        <option>16</option>
                        <option>17</option>
                        <option>18</option>
                        <option>19</option>
                        <option>20</option>
                        <option>21</option>
                        <option>22</option>
                        <option>23</option>
                        <option>24</option>
                        <option>25</option>
                        <option>26</option>
                        <option>27</option>
                        <option>28</option>
                        <option>29</option>
                        <option>30</option>
                        <option>31</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    就读学校
                </td>
                <td>
                    <input type="text">
                </td>
            </tr>
            <tr>
                <td>
                    应聘岗位
                </td>
                <td>
                    
                    <input type="checkbox" id="1">
                    <label for="1">前端开发</label>
                    <input type="checkbox" id="2">
                    <label for="2">后端开发</label>
                    <input type="checkbox" id="3">
                    <label for="3">测试开发</label>
                    <input type="checkbox" id="4">
                    <label for="4">运维开发</label>
                </td>
            </tr>
            <tr>
                <td>
                    掌握的技能
                </td>
                <td>
                    <textarea name="skill" cols="30" rows="10"></textarea>
                </td>
            </tr>
            <tr>
                <td>
                    项目经历
                </td>
                <td>
                    <textarea name="experience" cols="30" rows="10"></textarea>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    
                    <input type="checkbox" id="lisence">
                    <label for="lisence">我已经仔细阅读过公司的招聘要求</label>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    
                    <a href="#">查看我的状态</a>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <h3>请应聘者确认:</h3>
                    <ul>
                        <li>以上信息真实有效</li>
                        <li>能够尽早去公司实习</li>
                        <li>能接收公司的加班文化</li>
                    </ul>
                </td>
            </tr>
        </table>
    </body>
    </html>

## 总结 ##

以上就是本篇博客的所有内容了, 如果本篇博客对您有帮助,希望您可以 点赞 关注 评论 支持以下小编,感谢 ! !

[HTML]: https://blog.csdn.net/m0_70322372/article/details/130477364
[160f7fe94ad4442cb32893042cd53f1a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/051041fd21a844f9ab77e17da3391823.png
[29eb344988ad4d66a80532c2bb88c0c7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/a9cd96004c5d41dbb84f6ea129aead8d.png
[74d65d17cefc42b0a6b90a5d22785306.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/e8f53038c7294f23b7d816fda8c90edd.png
[84815850345e4842883b96511e01f1df.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/86bf07a8d6c940be9fcb00665a581edb.png
[c66395a81ddb406baa534008666bdb70.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/66cd560e714a4db0ae45becb3e3524b4.png
[4f1354f4aa114265a20f3d84d25f6c32.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/ee933e1e65214f2bb1067c02cc59371f.png
[364653d09a6c4efca70488d343a578db.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/4f7b198316264506a856929b2dae2823.png
[45856ff97d3f41e296c3dfce9ddca9c1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/a6c8997536304d0da752e76f66d89fc8.png
[de218a01050f4d62937dc238efb8cad6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/28c6018ff09b4cda9d330ee39d2be201.png
[155d5189683e45f19e225de63b28e6ed.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/4ee84f574c3b41049ff683ea7ffb005d.png
[dfb0cd265e9b462d8ab2a22d40efd841.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/1bed165cf735424eae97305dd1b0c291.png
[63470bedef2146809636c92b6f3964f6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/7c66095dbcbb4dc3b374f07edf47e060.png
[6784a6e7d5644478906bb59fba8fe447.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/f849ba845a7f4f899c990c2d07e9415e.png
[d2f436801c764d3c8abea34cdd20b309.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/431b08745bc24a8eb95c010ff50c949e.png
[4503e6bc66c94525ba0e3f4d6950f57d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/6234f8614c2b4aadbceb2f6a6530161e.png
[26e2590b82ec4702bbdf85dce8491ee3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/f9190f0a1a744daa9a8311ecc27d6efc.png