前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >HTML详解连载(3)

HTML详解连载(3)

作者头像
学编程的小程
发布2023-10-11 15:59:10
1900
发布2023-10-11 15:59:10
举报
文章被收录于专栏:学习笔记ol
HTML详解连载(3)

下面进行专栏介绍

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

开始喽

表单

作用

收集用户信息

使用场景

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

input标签基本使用

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

示例
代码语言:javascript
复制
   <input  type=”...”>
type属性值以及说明

属性值

说明

text

文本框,用于输入单行文本

password

密码框

radio

单选框

checkbox

多选框

file

上传文件

input标签占位文本

占位文本:提示信息

示例
代码语言:javascript
复制
   <input  type=”...” placeholder=”提示信息”>
注意

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

单选框 radio

属性名

作用

特殊说明

name

控件名称

控件分组,同组只能选中一个(单选功能)

checked

默认选中

属性名和属性值相同,简写为一个单词

## 上传文件-file 默认情况下,文件上传表单控件只能上传一个文件,添加multiple属性可以实现文件 多选功能

代码示例
代码语言:javascript
复制
 <input type=”file”multiple>

多选框-checkbox

多选框也叫复选框

注意

默认选中:checked

代码示例
代码语言:javascript
复制
  <input type=”checkbox”checked>敲前端代码

## 下拉菜单 select 嵌套option, select是下拉菜单整体,option是下拉菜单的每一项

文本域

作用

多行输入文本的表单控件

标签:

textarea,双标签

示例
代码语言:javascript
复制
  <textarea>默认提示文字</textarea>

label标签

作用

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

经验

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

写法一

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

代码语言:javascript
复制
<input type=”radio”id=”man”>
<lable for=”man”>男</lable>
写法二:

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

代码语言:javascript
复制
<lable><input type=”radio”>女</lable>
强调

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

按钮-button

代码语言:javascript
复制
<button type=””>按钮</button>
type属性值和说明

属性值

说明

submit

提交按钮,点击后可以提交数据到后台(默认功能)

reset

重置按钮,点击后将表单控件恢复到默认值

button

普通按钮,默认没有功能,一般配合JavaScript使用

无语义的布局标签

作用

布局网页(划分网页区域,摆放内容) div:独占一行 span:不换行

示例
代码语言:javascript
复制
<duv>div标签,独占一行</div>
<span>span标签,不换行</span>

字符实体

作用

在网页中显示预留字符

表格

显示结果

描述

实体名称

空格

&nbsp;

<

小于号

&lt;

>

大于号

&gt;

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-08-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • HTML详解连载(3)
  • 下面进行专栏介绍
  • 开始喽
    • 表单
      • 作用
      • 使用场景
    • input标签基本使用
      • 示例
      • type属性值以及说明
    • input标签占位文本
      • 示例
      • 注意
    • 单选框 radio
      • 代码示例
    • 多选框-checkbox
      • 注意
      • 代码示例
    • 文本域
      • 作用
      • 标签:
      • 示例
    • label标签
      • 作用
      • 经验
      • 写法一
      • 写法二:
      • 强调
    • 按钮-button
      • type属性值和说明
    • 无语义的布局标签
      • 作用
      • 示例
    • 字符实体
      • 作用
      • 表格
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档