HTML(二)---【常见的标签使用】

零.前言

本文只介绍常见的标签使用,其中使用的一些HTML专业术语可以在作者的第一篇文章:

HTML(一)---【基础】-CSDN博客中找到。

一.<b>粗体、<i>或<em>斜体

1.定义

粗体、斜体的实现可以在CSS中实现,不过如果实在想利用HTML实现也不是不可以,就是比较反人类

<b>粗体、<i>斜体、<em>斜体

三个标签都是双标签

其中<i><em>在本质上是一样的,都是斜体。

不过我们更偏向于使用<em>

2.效果

    <p>我没有粗体也没有斜体</p><p><b>我有粗体</b></p><p><i>我有斜体</i></p><p><em>我也有斜体</em></p>

效果:

二.<input>输入

1.定义

<input>是一个单标签

<input>定义输入字段,通常为创建一个输入框用来获取用户输入

2.使用

使用<input>我们可以制作账号、密码输入框、搜索栏等等。

<input>t的使用主要依靠于<input>的"type"属性来完成。

通过"type"属性,我们可以规定<input>的元素应该是一种什么形式的。

由于篇幅有限,在本章我们不专门介绍<input>的所有属性值,只举出几个常见的属性值。

  • button”:按钮形式
  • checkbutton”:复选按钮形式
  • password”:密码形式,输入的内容会被自动隐藏
  • radio”:单选按钮形式
  • text”:文本形式
    <p>这是一个input示例</p><input type="button"><br><br><input type="checkbox"><br><br><input type="password"><br><br><input type="radio"><br><br><input type="text"><br><br>

效果:

 三.<label>标志

1.定义

<label>是单标签

<label>通常与<input>、<meter>、<progress>、<select>、<textarea>标签结合使用。

2.作用

上述所结合标签的元素定义标注(标记)

<label>不会向用户呈现任何特殊的效果,因而在用户的眼中,使用<p><label>是一样的效果。

    <p>这是一个input示例</p><label for="linput">这是一个input示例</label><input type="text" id="linput"><br><br>

效果:

那么它标注的作用是什么呢?

很简单,当我们点击使用<label>标签构建的"这是一个input示例"后,鼠标焦点自动进入我们id为“linput”输入框中了!!!

没错,标注的作用就是:“用户点击label后,鼠标焦点会自动跳转到label所对应的标签中”。

3.使用

<label>中只有两个属性:“for”、“form”。

for的值上述可以结合使用标签id

form的值表单id

使用这两个属性,可以将某一个<label>与某一个标签相关联。

4.注意

在使用上述可以结合的标签时,如果需要提示词,请尽量使用<label>,而不是<p>

四.<form>表单

1.定义

<form>双标签

使用<form>可以创建一个表单,用于接收用户输入的数据,并且将它们打包发送给某个"URL"。

2.作用

用户需要一次输入多种类型数据,如:“图片”、“密码”、“数字”等等,可以使用<form>来完成。

3.使用

<form>属性有很多,在这里只介绍几个常用的:

  • action”:指定用户的数据发送到哪个URL
  • method”:指定表单发送数据的时候使用get请求还是post请求
    <form action="./demo/action.php"><label for="fname">名字:</label><input type="text" name="fname" id="fname"><br><br><label for="lname">姓氏:</label><input type="text" name="fname" id="lname"><br><br><input type="submit" value="提交"></form><p>当点击“提交”按钮后,表单数据将被发送到服务器上名为“action.php的页面”</p>

效果:

五.<a>超链接

1.定义

<a>双标签

<a>用于创建一个超链接,可以使浏览器跳转到<a>所指的URL网页

2.使用

<a>的使用依靠于它的属性,其中最重要的莫过于"href",用于指定跳转的目标URL或者某个HTML标签的位置:

  • href”:点击超链接后跳转的目标URL
  • target”:点击超链接后,目标URL网页在当前页打开另开一页打开父窗口打开等等
    <a href="https://www.baidu.com">访问百度</a>

效果:

除此之外还可以使用图片代替文字实现点击后跳转URL的效果。

六.<base>基准URL

1.定义

<base>单标签

规定文档中所有相对URL基准URL

2.使用

<base>有两个属性:“href”、“target”。

  • href”:指定当前文档所有URL基准URL
  • target”:指定当前文档所有跳转到URL的方式(新开一页、当前一页、父窗口开一页等等)。

例如我们有多个图片URL:

可以看到,它们又都有一个公共前缀:“https://tse3-mm.cn.bing.net/th/id/”

那么我们就可以利用<base>来设置公共基准URL前缀,来简化后续的书写。

<base href="https://tse3-mm.cn.bing.net/th/id/">
<img src="OIP-C.z2PylNZUxOygR-as4ZcPuAHaLR?w=202&h=308&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt="">
<img src="OIP-C.ifPPvosPvXWiPMfJhDijdQHaLR?w=202&h=308&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt="">

效果:

3.注意

使用<base>的时候,必须“href”或者“target”属性存在一个,或者两个都有

不过在作者本机电脑上测试,发现只有<base>网页貌似也能正常识别,并没有出错,不过安全起见,大家还是加上吧,哪怕为空值也好

七.<img>图片

1.定义

<img>用于在网页中插入图片,从实质上来说,<img>并不是将图片放入到网页中了,而是将图片链接放入到了文档中,只是起一个存放照片的容器作用。

2.作用

<img>有两个必有的属性:“src”和“alt”。

  • src”:可以是一个URL,也可以是一个本地图片的存放地址
  • “alt”:当图片无法正常显示的时候,显示的文本
  • “width”:图片缩放后的宽度
  • “height”:图片缩放后的高度
<img src="OIP-C.z2PylNZUxOygR-as4ZcPuAHaLR?w=202&h=308&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt="" width="100" height="100">

效果:

3.注意

使用<img>的时候,建议人为加上widthheight属性来指定图片的高度宽度,否则可能会出现图片一直闪烁的情况(不过作者是没碰到过)。

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

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

相关文章

【半结构化访谈法】

文章目录 什么是半结构化访谈法&#xff1f;如何进行半结构化访谈&#xff1f;1. 确定研究目的和主题2. 制定访谈指南3. 进行访谈4. 记录和分析数据5. 报告结果 半结构化访谈法的优缺点优点&#xff1a;缺点&#xff1a; 什么是半结构化访谈法&#xff1f; 半结构化访谈法是一…

Windows 和 Linux 的免费媒体播放器 - SMPlayer

Windows 和 Linux 的免费媒体播放器 - SMPlayer 1. A quick look at SMPlayer2. Downloads2.1. Packages for Ubuntu References https://www.smplayer.info/ 1. A quick look at SMPlayer SMPlayer is a free media player for Windows and Linux with built-in codecs that…

【MySQL】事务日志

事务的隔离性由锁机制实现&#xff0c;事务的原子性、一致性和持久性由redo日志和undo日志实现。 一、redo日志 1.1、为什么需要redo日志 一方面&#xff0c;由于数据从内存写回磁盘需要一定的时间&#xff0c;假如在事务提交后&#xff0c;还没有写回磁盘&#xff0c;数据库…

优雅地处理前端数据转换:自定义封装 translateDict 函数

在前端开发中&#xff0c;我们经常需要处理数据的转换。有时候&#xff0c;我们需要将某种格式的数据转换为另一种格式&#xff0c;这可能涉及到字符串、数组等不同数据类型的转换。在这篇博客中&#xff0c;我们将介绍一个名为 translateDict 的函数&#xff0c;它可以帮助我们…

Rancher(v2.6.3)——Rancher部署Nginx(单机版)

Rancher部署Nginx详细说明文档&#xff1a;https://gitee.com/WilliamWangmy/snail-knowledge/blob/master/Rancher/Rancher%E4%BD%BF%E7%94%A8%E6%96%87%E6%A1%A3.md#5rancher%E9%83%A8%E7%BD%B2nacos ps&#xff1a;如果觉得作者写的还行&#xff0c;能够满足您的需求&#x…

LeetCode225:用队列实现栈

题目描述 请你仅使用两个队列实现一个后入先出&#xff08;LIFO&#xff09;的栈&#xff0c;并支持普通栈的全部四种操作&#xff08;push、top、pop 和 empty&#xff09;。 实现 MyStack 类&#xff1a; void push(int x) 将元素 x 压入栈顶。 int pop() 移除并返回栈顶元…

web前端面试题---->HTML、CSS

一.居中方法 block元素如何居中 margin&#xff1a;0 auto&#xff1b;position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);flex布局&#xff1a; 对父元素操作 &#xff1a; justify-content:center; al…

商城小程序项目实现监控的可观测性最佳实践

前言 微信小程序是一种轻量级的应用程序&#xff0c;用户可以在微信内直接使用&#xff0c;无需下载安装。它具有独立的开发框架和生态系统&#xff0c;支持丰富的功能和交互&#xff0c;包括社交、购物、服务等。 观测云对微信小程序的监控能够实时收集性能指标、错误日志和…

深入理解 C++ 中的 IO 流【iostream篇】

C 中的输入输出流&#xff08;iostream&#xff09;是非常重要的一部分&#xff0c;它们提供了与用户交互以及与文件系统进行数据交换的功能。本文将深入探讨 C 中的 cin 和 cout&#xff0c;介绍它们的使用方法、缓冲区以及常用的成员函数等相关知识。 1. cin 和 cout 的基本…

[蓝桥杯 2019 省 B] 特别数的和

题目描述 小明对数位中含有 22、00、11、99 的数字很感兴趣&#xff08;不包括前导 00&#xff09;&#xff0c;在 11 到 4040 中这样的数包括 11、22、99、1010 至 3232、3939 和 4040&#xff0c;共 2828 个&#xff0c;他们的和是 574574。 请问&#xff0c;在 11 到 &…

分布式系统CAP理论

1、什么是CAP理论 C是Consistency(强一致性)、A是Availability(可用性)、P是Partition Tolerance(分区容错性)&#xff0c;一个分布式系统不可能同时很好的满足—致性、可用性和分区容错性这三个需求&#xff0c;不能同时成立&#xff0c;最多只能同时满足其中的两项&#xff…

MPIRUN 31280 segmentation fault (core dumped)

用mpirun运行多节点nccl时有时候出现hang死&#xff0c;而且是指定了mpi_host的情况 nccl正常&#xff0c;各节点通信正常&#xff0c;但是一跑mpirun就卡死&#xff0c;core dump。 提前退出&#xff1a; [worker0:38156] *** Process received signal *** [worker0:38156] …

Linux系统运维命令:找出某个分区或者路径下 占用磁盘空间最多的文件和目录

目录 一、需求 二、解决方法 1、解决思路 2、组合命令 3、du命令 三、实例演示和命令解释 1、实例演示 &#xff08;1&#xff09;查看当前路径下文件和目录 &#xff08;2&#xff09;命令效果展示 2、命令解释 &#xff08;1&#xff09;. du -cks &#xff08;2…

rt-thread开发之sccb通讯协议记录(用于ov7670)

头文件 /** Copyright (c) 2024-2024&#xff0c;shchl** SPDX-License-Identifier: Apache-2.0** Change Logs:* Date Author Notes* 2024-3-26 shchl first version*/#ifndef F4_OS_SCCB_H #define F4_OS_SCCB_H#include "board.h"#define …

小白学视觉 | 图像上的 OpenCV 算术运算

本文来源公众号“小白学视觉”&#xff0c;仅用于学术分享&#xff0c;侵权删&#xff0c;干货满满。 原文链接&#xff1a;图像上的 OpenCV 算术运算 1 OpenCV 简介 图像可以进行算术运算&#xff0c;例如加法、减法和按位运算&#xff08;AND、OR、NOT、XOR&#xff09;。…

电商系列之仓储发货

疫情3年&#xff0c;大多数人都将购买需求转移到了线上。同时由于暴涨的订单数量、还在恢复中的物流运输等因素&#xff0c;导致用户的收货时间缓慢甚至是发货时间、收货时间延后。那么笔者就从订单的仓库作业流程入手&#xff0c;分析了用户订单发货延后的原因。 受到最近疫情…

简历工具推荐

HR浏览一份简历也就25秒左右&#xff0c;如果你连「好简历」都没有&#xff0c;怎么能找到好工作呢&#xff1f; 以最简单的方式来写好简历&#xff0c;只需专注内容本身而无需关注排版。这样的效果才是我们想要的&#xff0c;这里推荐使用入职啦简历&#xff0c;这个工具最大的…

RuoYi-Vue-Plus(sa-token)

一、介绍 官网&#xff1a; Sa-Tokenhttps://sa-token.cc/index.html 特性&#xff1a; 登录与权限认证&#xff1a;支持用户登录和细粒度权限认证。会话管理&#xff1a;提供会话创建、维护和销毁功能。单点登录&#xff1a;支持单点登录&#xff0c;简化多应用登录流程。OAu…

npm安装yarn和pnpm

安装yarn&#xff1a; 首先&#xff0c;确保你的系统中已经安装了Node.js和npm。这是使用npm安装yarn的前提条件。打开命令行工具&#xff08;如终端或命令提示符&#xff09;。运行以下命令来全局安装yarn&#xff1a; npm install -g yarn 安装完成后&#xff0c;你可以通过…

聚类分析|基于层次的聚类方法及其Python实现

聚类分析|基于层次的聚类方法及其Python实现 0. 基于层次的聚类方法1. 簇间距离度量方法1.1 最小距离1.2 最大距离1.3 平均距离1.4 中心法1.5 离差平方和 2. 基于层次的聚类算法2.1 凝聚&#xff08;Agglomerative&#xff09;2.3 分裂&#xff08;Divisive&#xff09; 3. 基于…