HTML详解连载(3)

HTML详解连载(3)

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

专栏链接 link

下面进行专栏介绍

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

开始喽

在这里插入图片描述

表单

作用

收集用户信息

使用场景

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

input标签基本使用

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

示例

   <input  type=”...”>

type属性值以及说明

属性值说明
text文本框,用于输入单行文本
password密码框
radio单选框
checkbox多选框
file上传文件

input标签占位文本

占位文本:提示信息

示例

   <input  type=”...” placeholder=”提示信息”>

注意

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

单选框 radio

属性名作用特殊说明
name控件名称控件分组,同组只能选中一个(单选功能)
checked默认选中属性名和属性值相同,简写为一个单词

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

代码示例

 <input type=”file”multiple>

多选框-checkbox

多选框也叫复选框

注意

默认选中:checked

代码示例

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

在这里插入图片描述## 下拉菜单
select 嵌套option, select是下拉菜单整体,option是下拉菜单的每一项

文本域

作用

多行输入文本的表单控件

标签:

textarea,双标签

示例

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

label标签

作用

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

经验

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

写法一

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

<input type=”radio”id=”man”>
<lable for=”man”></lable>

写法二:

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

<lable><input type=”radio”></lable>

强调

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

按钮-button

<button type=””>按钮</button>

type属性值和说明

属性值说明
submit提交按钮,点击后可以提交数据到后台(默认功能)
reset重置按钮,点击后将表单控件恢复到默认值
button普通按钮,默认没有功能,一般配合JavaScript使用

无语义的布局标签

作用

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

示例

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

字符实体

作用

在网页中显示预留字符

表格

显示结果描述实体名称
空格&nbsp;
<小于号&lt;
>大于号&gt;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/69124.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

主流的嵌入式微处理器

目前主流的嵌入式微处理器系列有&#xff1a; ARM系列 MIPS系列 PowerPC系列 Super H系列 一、MPC/PPC系列 PowerPC(简称PPC),其基本设计源自IBM的POWER.1991年&#xff0c;APPLE(苹果电脑)、IBM、Motorola&#xff08;摩托罗拉&#xff09;组成的AIM联盟发展出Power微处理器…

Unity 工具 之 Azure 微软SSML语音合成TTS流式获取音频数据的简单整理

Unity 工具 之 Azure 微软SSML语音合成TTS流式获取音频数据的简单整理 目录 Unity 工具 之 Azure 微软SSML语音合成TTS流式获取音频数据的简单整理 一、简单介绍 二、实现原理 三、实现步骤 四、关键代码 一、简单介绍 Unity 工具类&#xff0c;自己整理的一些游戏开发可…

ViewFs And Federation On HDFS

序言 ViewFs 是在Federation的基础上提出的,用于通过一个HDFS路径来访问多个NameSpace,同时与ViewFs搭配的技术是client-side mount table(这个就是具体的规则配置信息可以放置在core.xml中,也可以放置在mountTable.xml中). 总的来说ViewFs的其实就是一个中间层,用于去连接不…

css伪元素实现li列表圆点相连+锚点跳转悬浮窗实现

实现效果&#xff1a; html代码&#xff1a; <div class"sidenav"><ul class"nav-text progressbar"><!-- data-target的值对应要跳转的模块的id --><li data-target"module1"><div class"text">锚点…

如何使VMware虚拟机的屏幕自适应窗口大小

安装VMware tool 首先安装VMware tool&#xff0c;在选项中选取安装 之后在虚拟机中会出现光盘映像&#xff0c;点击打开光盘&#xff0c;点击VmwareTools-xxxx.tar.gz压缩包&#xff0c;将vmware-tools-distribute文件夹解压在任意一个目录下 解压后&#xff0c;右键点击…

四张图片道清AI大模型的发展史(1943-2023)

四张图片道清AI大模型的发展史(1943-2023) 现在最火的莫过于GPT了&#xff0c;也就是大规模语言模型(LLM)。“LLM” 是 “Large Language Model”&#xff08;大语言模型&#xff09;的简称&#xff0c;通常用来指代具有巨大规模参数和复杂架构的自然语言处理模型&#xff0c;…

用dcker极简打包java.jar镜像并启动

用dcker极简打包java.jar镜像并启动 一、本地打包好jar包 二、新建文件夹&#xff0c;将步骤1中的jar包拷贝到文件夹下 三、同目录下新建Dockerfile ## 基础镜像&#xff0c;这里用的是openjdk:8 FROM openjdk:8## 将步骤一打包好的jar包 拷贝到镜像的 跟目录下[目录可以自定义…

mysql-5.5.62-win32安装与使用

1.为啥是这个版本而不是当前最新的8.0&#xff1f; 因为我要用32位。目前mysql支持win32的版本最新只到5.7.33。 首先&#xff0c;到官网MySQL :: MySQL Downloads 然后选 选一个自己喜欢的版本就好。我这里是如标题版本。下载32位的zip。然后回来解压。 完了创建系统环境变…

Java反序列化漏洞笔记

前言 作为Java安全方面的盲对Java反序列化各种链方面了解的并不多&#xff0c;但是这些链条又极为重要&#xff0c;有助于更好的理解各种漏洞的产出和原理&#xff0c;因此以下笔记开始从底慢慢学起。 为什么会产生安全问题&#xff1f; 服务器反序列化数据时&#xff0c;客…

下一代计算:嵌入AI的云/雾/边缘/量子计算

计算系统在过去几十年中推动了计算机科学的发展&#xff0c;现在已成为企业世界的核心&#xff0c;提供基于云计算、雾计算、边缘计算、无服务器计算和量子计算的服务。现代计算系统解决了现实世界中许多需要低延迟和低响应时间的问题。这有助于全球各地的青年才俊创办初创企业…

Android中如何不编译源生模块

如果想让自己的app 替换系统的app 比如使用闪电浏览器替换系统的Browser 首先把闪电浏览器放到 vendor/rockchip/common/apps Android.mk LOCAL_PATH : $(call my-dir) include $(CLEAR_VARS)LOCAL_MODULE : Lightning LOCAL_SRC_FILES : $(LOCAL_MODULE).apk LOCAL_MODULE_C…

【TypeScript】this指向,this内置组件

this类型 TypeScript可推导的this类型函数中this默认类型对象中的函数中的this明确this指向 怎么指定this类型 this相关的内置工具类型转换ThisParameterType<>ThisParameterType<>ThisType TypeScript可推导的this类型 函数中this默认类型 对象中的函数中的this…