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;

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

软考笔记 信息管理师 高级

文章目录 介绍考试内容与时间教材 预习课程一些例子课本结构考试内容 1 信息与信息化1.1 信息与信息化1.1.1 信息1.1.2 信息系统1.1.3 信息化 1.2 现代化基础设施1.2.1 新型基础建设1.2.2 工业互联网1.2.3 车联网&#xff1a; 1.3 现代化创新发展1.3.1 农业农村现代化1.3.2 两化…

STM32 F103C8T6学习笔记2:GPIO的认识—GPIO的基本输入输出—点亮一个LED

今日继续学习使用 STM32 F103C8T6开发板 点亮一个LED灯&#xff0c;文章提供源码&#xff0c;测试工程&#xff0c;实验效果图&#xff0c;希望我的归纳总结会对大家有帮助~ 目录 GPIO的认识与分类 &#xff1a; 引脚安排整理&#xff1a; 定时器的引脚例举&#xff1a; …

小内存嵌入式设备软件的差分升级设计(学习)

摘要 提出一种改进HDiffPatch算法并在复旦微单片机上实现小内存差分升级的方案&#xff0c;即使用单片机内的Flash空间替代算法占用的RAM空间&#xff0c;从而减少算法对单片机RAM空间的需求&#xff0c;以满足小内存微处理器的差分升级&#xff0c;同时对算法内存分配释放函数…

JDK、JRE、JVM:揭秘Java的关键三者关系

文章目录 JDK&#xff1a;Java开发工具包JRE&#xff1a;Java运行环境JVM&#xff1a;Java虚拟机关系概述 案例示例&#xff1a;Hello World结语 在Java世界中&#xff0c;你可能经常听到JDK、JRE和JVM这几个概念&#xff0c;它们分别代表了Java开发工具包、Java运行环境和Java…

多线程的同步与互斥

文章目录 线程安全问题多线程互斥互斥量mutex互斥锁的使用理解锁加锁如何做到原子性对mutex做封装 可重入与线程安全死锁 线程同步条件变量条件变量函数接口理解条件变量条件变量的使用 线程安全问题 首先来看一段代码&#xff0c;该代码是一个多线程抢票的逻辑 #include<…

Python爬虫在框架下的合规操作与风险控制

大家好&#xff01;作为一名专业的爬虫代理供应商&#xff0c;我今天要和大家分享一些关于Python爬虫在法律框架下的合规操作与风险控制的知识。随着互联网的发展&#xff0c;数据爬取在商业和研究领域扮演着重要的角色&#xff0c;但我们也必须遵守相关法律和规定&#xff0c;…

交换排序——选择排序和冒泡排序的区别是什么?

今天重温一下算法&#xff0c;其实刚开始我觉得冒泡排序和选择排序是一样的&#xff0c;因为他们排序过程中都是通过相邻的数据比较找到最小/最大的数据&#xff0c;通过不断思考和学习才明白&#xff0c;两者还是有区别的。 冒泡排序 概念 冒泡排序(Bubble Sort)&#xff0…

JVM之内存模型

1. Java内存模型 很多人将Java 内存结构与java 内存模型傻傻分不清&#xff0c;java 内存模型是 Java Memory Model&#xff08;JMM&#xff09;的意思。 简单的说&#xff0c;JMM 定义了一套在多线程读写共享数据时&#xff08;成员变量、数组&#xff09;时&#xff0c;对数据…

Grafana技术文档--基本安装-docker安装并挂载数据卷-《十分钟搭建》-附带监控服务器

阿丹&#xff1a; Prometheus技术文档--基本安装-docker安装并挂载数据卷-《十分钟搭建》_一单成的博客-CSDN博客 在正确安装了Prometheus之后开始使用并安装Grafana作为Prometheus的仪表盘。 一、拉取镜像 搜索可拉取版本 docker search Grafana拉取镜像 docker pull gra…

AI绘画(1)stable diffusion安装教程

1、引言 stable diffusion 是一款免费开源的AI绘画工具&#xff0c;它能够帮助任何人轻松地进行绘画创作。不论你是有绘画基础还是完全没有经验&#xff0c;stable diffusion 都能让你在数字画布上释放创造力。 stable diffusion 提供了丰富多样的绘画工具和选项&#xff0c;…

Centos7源码安装redis

1、下载redis Index of /releases/ 2、解压redis tar -xvf redis-6.2.9.tar.gz 3、进入解压后的目录 cd redis-6.2.9/4、指定内存分配器为 libc make MALLOClibc 5、进入src目录&#xff0c;安装 cd src && make install6、运行 ./redis-server 7、添加开机…

了解IL汇编跳转语句

il代码&#xff0c; .assembly extern mscorlib {}.assembly Test{.ver 1:0:1:0}.module test.exe.method static void main() cil managed{.maxstack 5.entrypointldstr "Enter First Number"call void [mscorlib]System.Console::WriteLine (string)call string …

《大型网站技术架构设计》第二篇 架构-性能

不同视角下的网站性能 1、用户 从用户角度&#xff0c;网站性能就是用户在浏览器上直观感受到的网站响应速度快还是慢。用户感受到的时间。 2、开发人员 开发人员关注的主要是应用程序本身及其相关子系统的性能&#xff0c;包括响应延迟、系统吞吐量、并发处理能力、系统稳定…

ElasticSearch:项目实战(2)

ElasticSearch: 项目实战 (1) 需求&#xff1a; 新增文章审核通过后同步数据到es索引库 1、文章服务中添加消息发送方法 在service层文章新增成功后&#xff0c;将数据通过kafka消息同步发送到搜索服务 Autowiredprivate KafkaTemplate<String,String> kafkaTemplate;/…

python num循环怎么从1开始

如何实现python for循环从1开始&#xff1f; range()函数的作用和用法&#xff1a; 编写一个从数值1开始的循环&#xff1a; 执行后得到的结果 其他注意事项

hutool 导出复杂表头excel

假如已这样的表头导出数据 1.把包含表头的excel添加到项目资源目录 2.编写代码读取表头所在sheet,并且加入需导出的数据 /*** 导出excel*/public static void downloadExcel(List<List<Object>> list, HttpServletResponse response) throws IOException {/*Strin…

微信小程序读取本地json

首先在项目录下新建【server】文件夹&#xff0c;新建data.js文件&#xff0c;并定义好json数据格式。如下&#xff1a; pages/index/index.ts导入data.js并请求json pages/index/index.wxml页面展示数据

权限管理之admin数据不可编辑

效果图 在线地址&#xff1a;https://codesandbox.io/s/authorizedbyrole-yzy4r2?file/src/util/directive.js 当前用户为非管理员角色 环境 vuetify2.6.6 vuex javascript 事情经过 一般的系统&#xff0c;都是采用**RBAC模型&#xff1a;基于用户-角色-权限控制** 所以在…

python+vue生成条形码码并展示

需求 最近想做一个小工具&#xff0c;大概要实现这样的效果&#xff1a;后端生成条形码后&#xff0c;不保存到服务器&#xff0c;直接返回给前端展示。 大概思路是&#xff0c;通过 python-barcode库 生成条码的字节流&#xff0c;生成字节流后直接编码成base64格式返回给前…

【Freertos基础教程】任务管理之基本使用

文章目录 前言一、freertos任务管理是什么&#xff1f;二、任务管理涉及到的一些概念1.任务状态2.优先级3.栈(Stack)4.事件驱动5.协助式调度(Co-operative Scheduling) 二、任务的基本操作1.创建任务什么是任务 2.创建任务3.任务的删除4.任务的调度3.简单示例 总结 前言 本fre…