HTML基础知识详解（下）（如果想知道html的全部基础知识点，那么只看这一篇就足够了！）

        前言：在上一篇文章中，我们已经学习完了超链接标签、列表标签和表格标签，但是我们还有一些标签没有学习，在这篇文章中，我们将学习剩余的标签。

✨✨✨这里是秋刀鱼不做梦的BLOG

✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客

首先让我们看一下还剩余哪些标签：

那么我们废话不多说，让我们继续开始学习html的剩余的常用标签。

浏览HTML基础知识详解（上）点击-------------------------------------------------------------------------------->

HTML基础知识详解（上）（如果想知道html的全部基础知识点，那么只看这一篇就足够了！）_html 标签 开始标签 结束标签-CSDN博客

浏览HTML基础知识详解（中）点击-------------------------------------------------------------------------------->

HTML基础知识详解（中）（如果想知道html的全部基础知识点，那么只看这一篇就足够了！）-CSDN博客

目录

1.表单标签

        （1）认识表单

        （2）表单的框架标签

        （3）input标签的讲解

        【1】文本输入框

        【2】密码输入框

        【3】单选框

        【4】复选框

        【5】按钮

        【6】禁用表单控件     

2.文字域标签

3.下拉菜单标签

4.label标签

5.html实体

1.表单标签

        （1）认识表单

        在学习表单之前，让我们先看一下到底什么是表单：（如图）

像上图这种我们经常在网站上看到的注册界面其实就是所谓的表单。

了解了什么是表单之后，让我们正式的开始学习表单的知识点吧。

        （2）表单的框架标签

表单是由<form>和<input>两个标签组成的，<form>标签表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。<input>标签用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据。

        <form>和<input>两个标签的语义和属性：

标签名标签语义常用属性单 / 双标签
form输入框action ：用于指定表单的提交地址（需要与后端人员沟通后确
定）。
target ：用于控制表单提交后，如何打开页面，常用值如下：
_self ：在本窗口打开。
_blank ：在新窗口打开。		双
input表单type ：设置输入框的类型.
name ：用于指定提交数据的名字，（需要与后端人员沟通后确
定）。

单

了解了表单的大致内容之后，然我们用代码来更直观的看一下：

    <!-- 表单的大致框架 --><form action="" target="_blank">用户名：<input type="text"><br><br>密码：<input type="password"><br><br>性别：<input type="radio" name="gender">男  <input type="radio" name="gender">女<br><br>爱好：<input type="checkbox">唱歌 <input type="checkbox">跳舞 <input type="checkbox">篮球<br><br><input type="submit" value="完成注册"></form>

这样我们就大致的学完了表单的框架标签。

        （3）input标签的讲解

        从上边我们知道了表单是由<form>和<input>两个标签组成的，并且我们可以使用<input>标签来添加表单中的内容，那么<input>都有哪些呢？

        【1】文本输入框

我们直接使用代码来看一下：

<input type="text">

常用属性如下：

name 属性：数据的名称。
value 属性：输入框的默认输入值。
maxlength 属性：输入框最大可输入长度。

注：name为提交表单时传递给后端的数据的名称。

        【2】密码输入框

我们直接使用代码来看一下：

<input type="password">

常用属性如下：

name 属性：数据的名称。
value 属性：输入框的默认输入值。
maxlength 属性：输入框最大可输入长度。

        【3】单选框

我们直接使用代码来看一下：

<input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="male">男

常用属性如下：

name 属性：数据的名称，注意：想要单选效果，多个radio 的 name 属性值要保持一致。
value 属性：提交的数据值。
checked 属性：让该单选按钮默认选中。

        【4】复选框

我们直接使用代码来看一下：

<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头

常用属性如下：

name 属性：数据的名称。
value 属性：提交的数据值。
checked 属性：让该复选框默认选中。

        【5】按钮

我们直接使用代码来看一下：

<input type="submit">
<input type="reset"
<input type="button"

其中submit为提交按钮，它会将数据提交到后端，reset为重置按钮，它会重置表单的信息，button为普通按钮，它在之后会和JavaScript联动，这三个按钮都会自动生成一个按钮框。

        

        【6】禁用表单控件

给表单控件的标签设置 disabled 既可禁用表单控件。

我们直接使用代码来看一下disabled标签的使用：

<!-- disabled标签的使用 -->
用户名：<input type="text">
密码：<input type="password" disabled>

我们可以看到密码的输入框变灰并且不可以输入内容了。

以上就是表单中<input>标签的基本属性和方法了。

     

2.文字域标签

<textarea>标签表示一个多行纯文本编辑控件，你可以在里面输入一段相当长的、不限格式的文本。

我们直接使用代码来看一下：

<textarea name="msg" rows="22" cols="3">我是文本域</textarea>

常用属性如下：

name 属性：数据的名称。

rows 属性：指定默认显示的行数，会影响文本域的高度。
cols 属性：指定默认显示的列数，会影响文本域的宽度。

这样我们就了解了文字域标签。

3.下拉菜单标签

<select>标签表示一个提供选项菜单的控件。

我们直接使用代码来看一下：

<select name="from">
<option value="黑">黑龙江</option>
<option value="辽">辽宁</option>
<option value="吉">吉林</option>
<option value="粤" selected>广东</option>
</select>

常用属性如下：

name 属性：指定数据的名称。
option 标签设置value 属性：如果没有value 属性，提交的数据是option 中间的文字；如果设置了value 属性，提交的数据就是value 的值（建议设置 value 属性）
selected 属性：表示默认选中。

这样我们就了解了下拉菜单标签。

4.label标签

<label>标签表示用户界面中某个元素的说明，label 标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。
 

两种与label 关联方式如下：

1. 让label 标签的for 属性的值等于表单控件的id 。

2. 把表单控件套在 label 标签的里面。

        第一种方式：将一个 <label> 和一个 <input> 元素匹配在一起，并且给 <input> 一个 id 属性。而 <label> 需要一个 for 属性，其值和 <input> 的 id 一样。

<!-- 第一种方式 -->
<input type="radio" id="female"><label for="female">男</label>

        第二种方式：将 <input> 直接放在 <label> 里，此时则不需要 for 和 id 属性。

<!-- 第二种方式 -->
<label><input type="radio">女</label>

这样我们就了解了label标签。

5.html实体

在HTML 中我们可以用一种特殊的形式的内容，来表示某个符号，这种特殊形式的内容就是HTML 实体。比如小于号 < 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须在HTML 源码中插入字符实体。

一般来说字符实体由三部分组成：一个& 和 一个实体名称（或者一个# 和 一个实体编号），最后加上一个分号 ；

让我们看一下经常使用的字符实体：

描述实体名称实体编号
空格&nbsp;&#160;
<小于&lt;&#60;
>大于&gt;&#62;
&和号&amp;&#38;

我们使用代码来看一下结果：

这是&nbsp;空格字符实体 <br>
&gt; <br>
&lt; <br>
&amp; <br>

注：在实际的使用中，我们更推荐使用实体名称来代表字符实体。

浏览HTML基础知识详解（上）点击-------------------------------------------------------------------------------->

HTML基础知识详解（上）（如果想知道html的全部基础知识点，那么只看这一篇就足够了！）_html 标签 开始标签 结束标签-CSDN博客

浏览HTML基础知识详解（中）点击-------------------------------------------------------------------------------->

HTML基础知识详解（中）（如果想知道html的全部基础知识点，那么只看这一篇就足够了！）-CSDN博客

以上就是HTML基础知识详解（下）的全部内容了~~~

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

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

相关文章

java的基本数据类型

java的基本数据类型

在Java编程语言中&#xff0c;基本数据类型是构成Java程序的基础元素&#xff0c;它们用于存储简单值。Java的基本数据类型可以分为两大类&#xff1a;原始类型&#xff08;Primitive Types&#xff09;和引用类型&#xff08;Reference Types&#xff09;。原始类型包括整型、…
阅读更多...
JAVA并发编程（一）

JAVA并发编程（一）

JAVA并发编程&#xff08;一&#xff09; 1.1JAVA线程API 1.1.1currentThread package com.lisus2000.thread;/** * 当前线程 * */ public class Test07 extends Thread {public Test07() {System.out.println("new Test07()......" Thread.currentThread().getNa…
阅读更多...
【前端浅谈】前端开发语言有哪些

【前端浅谈】前端开发语言有哪些

前端开发主要涉及到的语言包括以下几种&#xff1a; HTML (HyperText Markup Language): HTML是网页的基础结构&#xff0c;它定义了网页的结构和内容。HTML5是最新的版本&#xff0c;提供了更多的语义标签和API&#xff0c;用于构建更丰富、更互动的网页体验。 CSS (Cascadin…
阅读更多...
vivado中移位寄存器的优化（二）

vivado中移位寄存器的优化（二）

移位寄存器优化用于改善移位寄存器单元&#xff08;SRLs&#xff09;与其他逻辑单元之间的负裕量路径的时序。如果存在对移位寄存器单元&#xff08;SRL16E或SRLC32E&#xff09;的时序违规&#xff0c;优化会从SRL寄存器链的开始或结束位置提取一个寄存器&#xff0c;并将其放…
阅读更多...
深入理解数据结构第三弹——二叉树（3）——二叉树的基本结构与操作

深入理解数据结构第三弹——二叉树（3）——二叉树的基本结构与操作

二叉树&#xff08;1&#xff09;&#xff1a;深入理解数据结构第一弹——二叉树&#xff08;1&#xff09;——堆-CSDN博客 二叉树&#xff08;2&#xff09;&#xff1a;深入理解数据结构第二弹——二叉树&#xff08;2&#xff09;——堆排序及其时间复杂度-CSDN博客 前言…
阅读更多...
面试：HashMap

面试：HashMap

目录 1、底层数据结构&#xff0c;1.7 与1.8有何不同? 2、为何要用红黑树&#xff0c;为何一上来不树化&#xff0c;树化阈值为何是8&#xff0c;何时会树化&#xff0c;何时会退化为链表? 3、索引如何计算? hashCode都有了&#xff0c;为何还要提供hash()方法?数组容量为…
阅读更多...
【Easy云盘 | 第十二篇】分享模块（获取分享信息、校验分享码、获取文件列表）

【Easy云盘 | 第十二篇】分享模块（获取分享信息、校验分享码、获取文件列表）

文章目录 4.4.4获取分享信息4.4.5校验分享码4.4.6获取文件列表 4.4.4获取分享信息 明天做 4.4.5校验分享码 明天做 4.4.6获取文件列表 明天做
阅读更多...
Vue3大事件项目1 登录注册

Vue3大事件项目1 登录注册

创建项目 引入 element-ui 组件库 登录&#xff1a;注册样式准备之后&#xff0c;配置校验规则&#xff08;4个条件&#xff1a;一数据、二规则&#xff09; 1. 校验相关 (1) 给当前表单绑上整个的数据对象&#xff1a;el-form > :model"ruleForm" 绑…
阅读更多...
云服务器是不是云盘？

云服务器是不是云盘？

​　　云服务器是不是云盘?云服务器和云盘是两个不同的概念&#xff0c;尽管它们都是云计算服务的一部分。云服务器是一种提供计算能力的服务&#xff0c;可以运行各种应用程序和服务&#xff0c;而云盘则是一种提供数据存储和共享服务的工具。 具体来说&#xff1a; 云服务器…
阅读更多...
【Qt】事件

【Qt】事件

目录 一、介绍 二、进入离开事件 三、鼠标事件 3.1 鼠标单击事件 3.2 鼠标释放事件 3.3 鼠标双击事件 3.4 鼠标移动事件 3.5 滚轮事件 四、按键事件 4.1 单个按键 4.2 组合按键 五、定时器 5.1 QTimerEvent类 5.2 QTimer类 5.3 获取系统日期及时间 六、窗口移…
阅读更多...
插值表达式

插值表达式

<!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"> <title>插值表达式</title> </head> &l…
阅读更多...
两个有序的链表合并成一个【C语言】

两个有序的链表合并成一个【C语言】

比如&#xff1a; 输入&#xff1a;1->2->4, 1->3->4 输出&#xff1a;1->1->2->3->4->4 #include <stdio.h> #include <stdlib.h>typedef struct Node {int data;struct Node* next; } Node, *LinkedList;// 创建一个新节点 Node* cr…
阅读更多...
理解七层网络协议

理解七层网络协议

osi体系结构 上三路&#xff08;管数据&#xff09; 应用层 通过http等&#xff0c;把传输的格式&#xff0c;数据打包 处理网络应用。直接为端用户服务&#xff0c;提供各类应用过程的接口和用户接口。例如&#xff1a;HTTP、Tenlent、FTP、SMTP、NFS等。基于TCP的FTP、HTTP…
阅读更多...
mySql数据库学习001-创建数据表及表数据的增删改操作

mySql数据库学习001-创建数据表及表数据的增删改操作

创建数据表及表数据的增删改操作 一、创建数据库 create table if not exists user(id int unsigned primary key auto_increment,username varchar(20),gender enum(男,女,保密) default 保密 )解释&#xff1a; if not exists 表示数据表不存在就创建&#xff1b;unsigned…
阅读更多...
蓝桥杯刷题 前缀和与差分-[NewOJ P1819]推箱子（C++）

蓝桥杯刷题 前缀和与差分-[NewOJ P1819]推箱子（C++）

题目描述 在一个高度为H的箱子前方&#xff0c;有一个长和高为N的障碍物。 障碍物的每一列存在一个连续的缺口&#xff0c;第i列的缺口从第l各单位到第h个单位&#xff08;从底部由0开始数&#xff09;。 现在请你清理出一条高度为H的通道&#xff0c;使得箱子可以直接推出去。…
阅读更多...
深度学习理论基础（二）深度神经网络DNN

深度学习理论基础（二）深度神经网络DNN

目录 一、基础知识点Ⅰ 参数部分Ⅱ 模型部分 二、深度神经网络模型搭建1. 准备数据集2. 划分数据集3. 搭建模型4. 训练网络5. 测试网络6. 保存与导入模型 神经网络通过学习大量样本的输入与输出特征之间的关系&#xff0c;以拟合出输入与输出之间的方程&#xff0c;学习完成后&…
阅读更多...
Qt Creator 设置 One Dark Pro主题

Qt Creator 设置 One Dark Pro主题

这个是我基于上网很多教程设置 C 美化加一些基本的配置&#xff0c;下载这个导入一键设置&#xff0c;省去很多烦恼&#xff01;&#xff01;&#xff01; Qt Creator 13.0.0 (Community) 新版的 Qt 编辑器还需要一个文件&#xff0c;不然主界面黑屏&#xff0c;网上很多教程都…
阅读更多...
window系统实现不同版本的python(Anaconda)

window系统实现不同版本的python(Anaconda)

1.创建不同的环境 https://blog.csdn.net/wz947324/article/details/80228679&#xff1b; https://blog.csdn.net/miracleoa/article/details/106115730&#xff1b; 2.cuda不用版本安装 https://www.bilibili.com/video/BV1nL4y1b7oT/?spm_id_from333.337.search-card.al…
阅读更多...
每日一题（leetcode31）：下一个排列-思维

每日一题（leetcode31）：下一个排列-思维

思路&#xff1a;从后往前找到第一个nums[i-1]>nums[i] 然后从后往前(len-1 -->i(包含))找到第一个大于nums[i-1]的数&#xff0c;与nums[i-1]交换&#xff0c;然后对下标区间为[i,len-1]的元素进行排序。 class Solution { public:void nextPermutation(vector<in…
阅读更多...
[深度学习] 无人车环境准备

[深度学习] 无人车环境准备

1. 安装过程基本遵循以下步骤 电脑端环境配置 - OriginBot智能机器人开源套件 需要注意以下两点&#xff1a; 1> 由于深度学习需要的包和镜像体积都比较大&#xff0c;所以虚拟机硬盘大小建议120GB 2> 虚拟机的网络适配器应该设置为桥接模式&#xff0c;如果使用NAT模…
阅读更多...
最新文章

Copyright @ 2022~2023