HTML详解连载(3)

2023-11-06

专栏链接 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;
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML详解连载(3) 的相关文章

  • Li向左浮动,长度动态:最后一行无边框底部

    情况如下 https jsfiddle net rpepf9xs https jsfiddle net rpepf9xs 我想用选择器 nth last child 删除边框底部 但是 如果列表中只有8个 li 则会出现如下错误 ul di
  • 用不同的颜色为 Google 热图着色

    我试图开发一个遵循 Google Map API 的热度 https developers google com maps documentation javascript examples layer heatmap https deve
  • 如何修复网站 iframe 错误?

    当我访问此网址时 警告 推荐使用一些广告拦截器 网页链接加载良好 没有错误 但是 当我尝试通过加载同一页面时iframe在我的html代码中 出现错误 我的html代码
  • 使用 javascript 禁用按钮:FF 与 IE

    我有一排按钮 它们都会创建一个我想在新选项卡中打开的 pdf 文件 这样按钮页面就会保持在顶部 并且 pdf 会打开以进行打印 为了防止单击按钮两次 我禁用该按钮 如下所示 我使用 python
  • 如何在 Java 中使用 HTML 解析器和 Apache Tika 来提取所有 HTML 标签?

    我下载了 tika core 和 tika parser 库 但找不到将 HTML 文档解析为字符串的示例代码 我必须删除网页源的所有 html 标签 我能做些什么 如何使用 Apache Tika 进行编码 您想要 html 文件的纯文本
  • Thymeleaf 下拉菜单中的默认值

    我正在使用 Spring MVC 和 thymeleaf 构建一个 Web 应用程序 我的下拉菜单是这样的并且它按预期工作
  • 显示表中的记录

    我的第一个 PHP 项目遇到了一些麻烦 我试图从 MySQL 数据库 有 3 条记录 获取数据并将其显示在表格中 问题是它似乎只显示记录 2 和 3 它跳过了第 1 条记录 请参阅我的代码并在下面显示 if mysqli connect e
  • 如何使用CSS将背景图像放入选择选项标签中

    我有一个从 json 响应接收的国家 地区下拉列表 并且想要在国家 地区名称旁边添加相应的国家 地区国旗图标 也从 json 响应获取图像 我已经尝试了不同的 jQuery 和 bootstrap 插件 但他们所做的是破坏我以前的选择框样式
  • 将 div 文本分配给变量然后显示它

    我有一个简单的任务 我试图完成学习 JavaScript 但一直无法找到明确的答案 这是代码 div Testing div 基本上我希望将方框 div 中的文本存储到变量中 然后 我想在页面的不同部分显示该变量的文本 使用上面的代码我得到
  • 更改javascript nodejs中所有页面的href url

    我已经实现了具有多种语言下拉菜单的引导导航栏 当我选择语言时 它将翻译页面 如何更改其他页面的 url 和按钮文本 当我选择french 将所有网址更改为 fr about and fr contact 如何使用 JavaScript 进行
  • 如何解决此错误:属性 rel 的原始源值错误

    我正在尝试使用 w3c 验证我的网站 但出现错误 Bad value original source for attribute rel on element link The string original source is not a
  • 如何设置视频文件的预览,从输入类型='文件'中选择

    在我的模块之一中 我需要从 input type file 浏览视频 之后我需要在开始上传之前显示选定的视频 我使用基本的 HTML 标签来显示 但它不起作用 这是代码 document on change file multi video
  • 古老的“字幕”标签的替代品?

    marquee 标签的标准等效项是什么 我正在寻找 HTML C asp NET 或 ASPX jquery java 脚本的解决方案 marquee 标签未包含在标准中 因为它是 视觉 标签 而不是 语义 标签 因此 您想要的任何语言都没
  • VBA 完成 Internet 表单

    我正在寻找将 Excel 中的值放入网页的代码 Sub FillInternetForm Dim IE As Object Set IE CreateObject InternetExplorer Application IE naviga
  • 使用本地存储在从另一个表保存的 HTML TABLE 中打印 JSON,以便我在另一个页面上打印我的表

    在我的作业中 我必须使用用户输入中的数据并将数据保存在本地存储中 我必须以水平表格式将这些数据从本地存储打印到其他页面 为此 我编写了用于用户输入并将数据保存在本地存储中的代码 div p p div
  • 防止垃圾邮件按钮呼叫功能

    如何防止调用函数时出现垃圾邮件按钮 就像用户只能在按钮上每 1 秒调用一次该函数 有办法做到吗 因为我尝试了 setTimeout 但没有成功 它仍然在发送垃圾邮件 顺便说一句 我使用 Jquery 这是我的代码
  • 滚动时的 CSS 背景模糊

    我有固定的背景图像 滚动时我希望图像变得模糊 我知道如何在 css 中进行模糊 但在特定的滚动位置进行 这是一个例子 https medium com good music f160ba9e6c52 https medium com goo
  • 如何使用角度材料在具有可扩展行的表格中创建嵌套垫表

    我有以下数据 id c9d5ab1a subdomain wing domain aircraft part id c9d5ab1a info mimetype application json info dependent parent
  • 如何始终将焦点保持在文本框中

    我创建了一个包含两个 div 的 HTML 页面 左侧的 div 页面的 90 是 ajax 结果的目标 右侧的 div 页面的 10 包含一个文本框 该页面的想法是在文本框中输入零件编号 通过条形码扫描仪 并显示与该零件编号匹配的绘图 显
  • 如何从浏览器向服务器发送“页面将关闭”消息?

    我想向每个 html 文档添加一个脚本 JavaScript 该脚本向服务器发送两条消息 页面确实打开了 页面将关闭 此消息包含页面打开的时间 打开消息应在文档加载时 或加载完成时 发送 这是简单的部分 The close message

随机推荐

  • js 每隔 10 秒钟 运行一次,发送一个 ajax 请求

    每隔 10 秒钟 运行一次 发送一个 ajax 请求 function runEvery10Sec 1000 10 10 秒钟 setTimeout runEvery10Sec 1000 10 ajax dataType json type
  • jQuery取得select选中的值

    jQuery取得select选中的值 本来以为jQuery select1 val 是取得选中的值 那么jQuery select1 text 就是取得的文本 这是不正确的 正确做法是 jQuery select1 option selec
  • Qt中的单例模式:实现一个单例的界面类

    文章目录 前言 一 什么是单例模式 二 单例模式的优缺点及使用场景 三 Qt中单例类的创建 四 单例类的使用 测试 总结 前言 本文主要讲述了使用加锁的懒汉式来实现单例 文中示例将一个界面类修改为单例类 并在主界面获取多次该类的实例来进行测
  • 统计一个字符串中大写字母字符,小写字母字符,数字字符出现的次数

    统计一个字符串中大写字母字符 小写字母字符 数字字符出现的次数 不考虑其他字符 1 需求 统计一个字符串中大写字母字符 小写字母字符 数字字符出现的次数 不考虑其他字符 举例 Hello123World 结果 大写字符 2个 小写字符 8个
  • IDEA中常用的插件

    目录 Free MyBatis plugin codehelper generator grep console Translation Alibaba Java Coding Guidelines CamelCase GenerateAl
  • unordered_map的哈希HASH重载——举例unordered_map与pair联合使用

    有些时候 为了图省力 我们没准会这样的调用一个函数 unordered map lt pair
  • 分子模拟—Ovito渲染案例教程

    heartsuit spadesuit 分子模拟 Ovito渲染案例教程 heartsuit
  • 利用Nodejs 构建 WEB服务器

    前言 Web 服务器一般指网站服务器 是指驻留于因特网上某种类型计算机的程序 可以 向浏览器等 Web 客户端提供文档 也可以放置网站文件 让全世界浏览 可以放置数据文件 让全世界下载 目前最主流的三个 Web 服务器是 Apache Ng
  • 运算放大器芯片输出扩流电路三例

    工作原理 图1所示为三种集成运算放大器输出电流扩展电路 图 a 为双极性扩展电路 图 b 图 c 为单极性扩展电路 在图1 a 所示电路中 当输出电压为正时 BG1管工作 BG2管截止 输出电压为负时 BG1管截止 BC2管工作 二极管D1
  • C、C++、C#、python、java编程—文件读取

    C资料 菜鸟教程 C语言中文网 C community C 资料 菜鸟教程 cplusplus C community C 资料 菜鸟教程 microsoftC 文档 python资料 菜鸟教程 python标准库 Java资料 菜鸟教程
  • Multisim14.0安装教程

    2 安装步骤 解压 打开 Multisim14 0 鼠标右击 NI Circuit Design Suite 14 0 exe 选择 以管理员身份运行 点击确定 选择文件的解压路径 最好不解压在C盘 安装完成删掉即可 然后点击 Unzip
  • 华为OD机试2023(JS,C++,JAVA,PYTHON)-服务器能耗统计

    本篇题解 服务器耗能 题目描述 服务器有三种运行状态 空载 单任务 多任务 每个 时间片 的能耗的分别为 1 1 1 3 3 3 4 4 4 每个任务由起始时间片和结束时间片定义运行时间 如果一个时间片只有一个任务需要执行 则服务器处于单任
  • 微信小程序的常见的面试题(总结)

    1 微信小程序有几个文件 WXML WeiXin Markup Language 是框架设计的一套标签语言 结合基础组件 事件系统 可以构建出页面的结构 内部主要是微信自己定义的一套组件 WXSS WeiXin Style Sheets 是
  • Qt实现IP输入框(模仿Windows系统中的IP输入框)

    本文章所用的代码整理自Qt实现IP输入框 qt中ip地址输入框 GreenArrowMan的博客 CSDN博客 感谢原作者分享 本代码在上述作者代码基础上做了如下修改 1 屏蔽中文输入法 2 修复原作者代码中输入框四周的黑色边线无法正常显示
  • 【安装问题】python安装weditor出现报错总结

    python安装weditor出现报错总结 问题描述 主要原因是公司使用的python2版本过老 由于不能随意升级python版本 只能在python2的基础上解决办法 有很多地方需要更新 总结命令如下 基本上试过一遍 问题就可以解决了 解
  • 深度学习源码小项目汇总-代码全

    demo仓库和视频演示 到此一游7758258的个人空间 哔哩哔哩 bilibili 卷积网路CNN分类的模型一般使用包括alexnet DenseNet DLA GoogleNet Mobilenet ResNet ResNeXt Shu
  • 财报解读:毛利持续改善,金山云正在“弯道超车”?

    一季度 云巨头们的表现持续稳健 依旧稳坐前排 而作为中小云代表的金山云也在5月23日发布了2023年一季度财报 盈利能力持续改善成为通篇最亮眼的一笔 随着AI大模型打开了新的 潘多拉魔盒 云市场也在发生着巨变 但AI能否成为云厂商打开盈利大
  • JavaScript实现经典消方块游戏

    操作方式 在游戏区域中任意位置滑动手势 点击屏幕下方的按钮 键盘WASD和 都可以操作 游戏动作 操作 方块向左移动 左划 按下蓝色键 左一 A 方块向右移动 右划 按下橙色键 右一 D 强制方块下落 下划 按下粉色键 左二 S 改变方块方
  • Learncpp___CH1

    You have to write a program once to know how you should have written it the first time Short answer You don t C is one p
  • HTML详解连载(3)

    HTML详解连载 3 专栏链接 link http t csdn cn xF0H3 下面进行专栏介绍 开始喽 表单 作用 使用场景 input标签基本使用 示例 type属性值以及说明 input标签占位文本 示例 注意 单选框 radio