HTML详解连载（3）

女爷i 2023-10-14 18:41 89阅读 0赞

#### HTML详解连载（3） ####

*  专栏链接 \[link\](http://t.csdn.cn/xF0H3)
 *   *  下面进行专栏介绍
 *  开始喽
 *   *  表单
     *   *  作用
         *  使用场景
     *  input标签基本使用
     *   *  示例
         *  type属性值以及说明
     *  input标签占位文本
     *   *  示例
         *  注意
     *  单选框 radio
     *   *  代码示例
     *  多选框-checkbox
     *   *  注意
         *  代码示例
     *  文本域
     *   *  作用
         *  标签：
         *  示例
     *  label标签
     *   *  作用
         *  经验
         *  写法一
         *  写法二：
         *  强调
     *  按钮-button
     *   *  type属性值和说明
     *  无语义的布局标签
     *   *  作用
         *  示例
     *  字符实体
     *   *  作用
         *  表格

## 专栏链接 [link][] ##

### 下面进行专栏介绍 ###

本专栏是自己学前端的征程，纯手敲的代码，自己跟着黑马课程学习的，并加入一些自己的理解，对代码和笔记  
进行适当修改。希望能对大家能有所帮助，同时也是请大家对我进行监督，对我写的代码进行建议，互相学习。

## 开始喽 ##

![在这里插入图片描述][ac3db430eb26450fa0c088cd8dcee9d4.png]

### 表单 ###

#### 作用 ####

收集用户信息

#### 使用场景 ####

登录页面，注册页面，搜素区域

### input标签基本使用 ###

input标签type属性值不同，则功能不同

#### 示例 ####

#### type属性值以及说明 ####

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>text</td> 
   <td>文本框，用于输入单行文本</td> 
  </tr> 
  <tr> 
   <td>password</td> 
   <td>密码框</td> 
  </tr> 
  <tr> 
   <td>radio</td> 
   <td>单选框</td> 
  </tr> 
  <tr> 
   <td>checkbox</td> 
   <td>多选框</td> 
  </tr> 
  <tr> 
   <td>file</td> 
   <td>上传文件</td> 
  </tr> 
 </tbody> 
</table>

### input标签占位文本 ###

占位文本：提示信息

#### 示例 ####

#### 注意 ####

文本框和密码框都可以使用

### 单选框 radio ###

<table> 
 <thead> 
  <tr> 
   <th align="center">属性名</th> 
   <th align="right">作用</th> 
   <th align="right">特殊说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">name</td> 
   <td align="right">控件名称</td> 
   <td align="right">控件分组，同组只能选中一个（单选功能）</td> 
  </tr> 
  <tr> 
   <td align="center">checked</td> 
   <td align="right">默认选中</td> 
   <td align="right">属性名和属性值相同，简写为一个单词</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][39abade81fd84250b375cd63c5b33f57.png]\#\# 上传文件-file  
默认情况下，文件上传表单控件只能上传一个文件，添加multiple属性可以实现文件 多选功能

#### 代码示例 ####

### 多选框-checkbox ###

多选框也叫复选框

#### 注意 ####

默认选中：checked

#### 代码示例 ####

<input type=”checkbox”checked>敲前端代码

![在这里插入图片描述][d6e63819498d41a499931f314f5e904e.png]\#\# 下拉菜单  
select 嵌套option， select是下拉菜单整体，option是下拉菜单的每一项

### 文本域 ###

#### 作用 ####

多行输入文本的表单控件

#### 标签： ####

textarea，双标签

#### 示例 ####

<textarea>默认提示文字</textarea>

### label标签 ###

#### 作用 ####

网页中，某个标签的说明文本

#### 经验 ####

用lable标签绑定文职和表单控件的关系，增大表单的点击范围

#### 写法一 ####

lable标签只包裹内容，不包裹表单控件  
设置lable标签的for属性值和表单控件的id属性相同

#### 写法二： ####

使用lable标签包裹文字和表单控件，不需要属性

#### 强调 ####

支持lable标签增大点击范围的表单控件：文本框、密码框、上传文件、多选框、下拉菜 单、文本域等等。

### 按钮-button ###

#### type属性值和说明 ####

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>submit</td> 
   <td>提交按钮，点击后可以提交数据到后台（默认功能）</td> 
  </tr> 
  <tr> 
   <td>reset</td> 
   <td>重置按钮，点击后将表单控件恢复到默认值</td> 
  </tr> 
  <tr> 
   <td>button</td> 
   <td>普通按钮，默认没有功能，一般配合JavaScript使用</td> 
  </tr> 
 </tbody> 
</table>

### 无语义的布局标签 ###

#### 作用 ####

布局网页（划分网页区域，摆放内容）  
div:独占一行  
span：不换行

#### 示例 ####

<duv>div标签，独占一行</div>
    <span>span标签，不换行</span>

### 字符实体 ###

#### 作用 ####

在网页中显示预留字符

#### 表格 ####

[link]: http://t.csdn.cn/xF0H3
[ac3db430eb26450fa0c088cd8dcee9d4.png]: https://img-blog.csdnimg.cn/ac3db430eb26450fa0c088cd8dcee9d4.png
[39abade81fd84250b375cd63c5b33f57.png]: https://img-blog.csdnimg.cn/39abade81fd84250b375cd63c5b33f57.png
[d6e63819498d41a499931f314f5e904e.png]: https://img-blog.csdnimg.cn/d6e63819498d41a499931f314f5e904e.png