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并发编程&#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…

vivado中移位寄存器的优化(二)

移位寄存器优化用于改善移位寄存器单元&#xff08;SRLs&#xff09;与其他逻辑单元之间的负裕量路径的时序。如果存在对移位寄存器单元&#xff08;SRL16E或SRLC32E&#xff09;的时序违规&#xff0c;优化会从SRL寄存器链的开始或结束位置提取一个寄存器&#xff0c;并将其放…

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

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

面试:HashMap

目录 1、底层数据结构&#xff0c;1.7 与1.8有何不同? 2、为何要用红黑树&#xff0c;为何一上来不树化&#xff0c;树化阈值为何是8&#xff0c;何时会树化&#xff0c;何时会退化为链表? 3、索引如何计算? hashCode都有了&#xff0c;为何还要提供hash()方法?数组容量为…

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

文章目录 4.4.4获取分享信息4.4.5校验分享码4.4.6获取文件列表 4.4.4获取分享信息 明天做 4.4.5校验分享码 明天做 4.4.6获取文件列表 明天做

Vue3大事件项目1 登录注册

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

云服务器是不是云盘?

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

【Qt】事件

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

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

题目描述 在一个高度为H的箱子前方&#xff0c;有一个长和高为N的障碍物。 障碍物的每一列存在一个连续的缺口&#xff0c;第i列的缺口从第l各单位到第h个单位&#xff08;从底部由0开始数&#xff09;。 现在请你清理出一条高度为H的通道&#xff0c;使得箱子可以直接推出去。…

深度学习理论基础(二)深度神经网络DNN

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

每日一题(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模…

vivado 使用网表插入调试探测流程

使用网表插入调试探测流程 在 Vivado 工具中插入调试核的过程以分层方式来演示 &#xff0c; 以应对多样化的 Vivado 用户组的不同需求 &#xff1a; • 最高层是根据选定调试的一组信号线来自动创建并配置 Integrated Logic Analyzer (ILA) 核的简单向导。 • 下一层是“…

File,IO流,递归详解

File类 介绍 java.io.File类是Java语言提供了用来描述文件和目录(文件夹)的 构造 方法 注意&#xff1a; 构造方法中通常用的是第一个方法文件和目录可以通过File封装成对象File封装的对象仅仅是一个路径名&#xff0c;它是可以存在的&#xff0c;也可以不存在 绝对路径…

【二分查找】Leetcode x 的平方根

题目解析 69. x 的平方根 这道题表面是没有顺序性&#xff0c;但是我们可以发现如果使用枚举策略&#xff0c;它是包含顺序性质的&#xff0c;因此我们将枚举算法改进成二分算法 算法讲解 我们让left指针指向1&#xff0c; right指针指向x 如果当前的mid计算出来的平方 &g…

什么是商家转账到零钱

商家转账到零钱是什么&#xff1f; 通过商家转账到零钱这个功能&#xff0c;如果我们系统需要对用户支付费用&#xff0c;比如发放佣金、提成、退款之类的&#xff0c;可以直接转账到用户的微信零钱。 【商家转账到零钱】是【企业付款到零钱】的升级版&#xff0c;2022年5月1…

怀俄明探空站数据解算PWV和Tm

1. Matlab 获取代码可关注公众号WZZHHH回复&#xff08;怀俄明探空站数据解算PWV和Tm&#xff09;&#xff0c;或者咸鱼关注&#xff1a;WZZHHH123 怀俄明探空站数据解算PWV和Tm&#xff1a; 有关 Matlab 获取代码可关注公众号WZZHHH回复&#xff08;怀俄明多线程下载&#…

语音助手背后的魔法:一文揭秘NLP在智能助手中的应用

自然语言处理&#xff08;NLP&#xff09;正逐渐渗透到我们生活的每一个角落。在今天的大盘点中&#xff0c;我们将深入探索NLP在实际生活场景中的多样化应用&#xff0c;以及它在各个案例中所展现出的强大能力。 NLP技术如今已成为智能生活的关键驱动力&#xff0c;它让机器能…

wordpress全站开发指南-面向开发者及深度用户(全中文实操)--php数组与基本循环

php数组与基本循环 <?php$myName"xixi";$namesarray(xixi1,xixi2,xixi3); ?> <p> Hi ,my name is <?php echo $myName; ?> </p> <p> Hi,my name is <?php echo $names[0] ?> </p> <p> Hi,my name is <?…

Open CASCADE学习|放样建模

在CAD软件中&#xff0c;Loft&#xff08;放样&#xff09;功能则是用于创建三维实体或曲面的重要工具。通过选取两个或多个横截面&#xff0c;并沿这些横截面进行放样&#xff0c;可以生成复杂的三维模型。在CAD放样功能的操作中&#xff0c;用户可以选择不同的选项来定制放样…