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>的时候，建议人为加上width和height属性来指定图片的高度和宽度，否则可能会出现图片一直闪烁的情况（不过作者是没碰到过）。

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

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

相关文章

【MySQL】事务日志

【MySQL】事务日志

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

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;包括社交、购物、服务等。 观测云对微信小程序的监控能够实时收集性能指标、错误日志和…
阅读更多...
分布式系统CAP理论

分布式系统CAP理论

1、什么是CAP理论 C是Consistency(强一致性)、A是Availability(可用性)、P是Partition Tolerance(分区容错性)&#xff0c;一个分布式系统不可能同时很好的满足—致性、可用性和分区容错性这三个需求&#xff0c;不能同时成立&#xff0c;最多只能同时满足其中的两项&#xff…
阅读更多...
Linux系统运维命令：找出某个分区或者路径下 占用磁盘空间最多的文件和目录

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

目录 一、需求 二、解决方法 1、解决思路 2、组合命令 3、du命令 三、实例演示和命令解释 1、实例演示 &#xff08;1&#xff09;查看当前路径下文件和目录 &#xff08;2&#xff09;命令效果展示 2、命令解释 &#xff08;1&#xff09;. du -cks &#xff08;2…
阅读更多...
小白学视觉 | 图像上的 OpenCV 算术运算

小白学视觉 | 图像上的 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）

RuoYi-Vue-Plus（sa-token）

一、介绍 官网&#xff1a; Sa-Tokenhttps://sa-token.cc/index.html 特性&#xff1a; 登录与权限认证&#xff1a;支持用户登录和细粒度权限认证。会话管理&#xff1a;提供会话创建、维护和销毁功能。单点登录&#xff1a;支持单点登录&#xff0c;简化多应用登录流程。OAu…
阅读更多...
聚类分析|基于层次的聚类方法及其Python实现

聚类分析|基于层次的聚类方法及其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. 基于…
阅读更多...
GAMES Webinar 288-VR/AR专题-陆峰-混合现实中的多模态自然人机交互

GAMES Webinar 288-VR/AR专题-陆峰-混合现实中的多模态自然人机交互

感知交互增强智能 研究室虚拟现实技术与系统国家重点实验室&#xff0c;北京航空航天大学计算医学研究所&#xff0c;大数据精准医疗北京市高精尖创新中心 Perception & Hybrid Interaction (PHI) for Augmented & Affective Intelligence (A2I) We are working on v…
阅读更多...
力扣56. 合并区间

力扣56. 合并区间

Problem: 56. 合并区间 文章目录 题目描述思路及解法复杂度Code 题目描述 思路及解法 1.将数组按内部的一维数组的第一项按从小到大的顺序排序&#xff1b; 2.创建二维结果数组merged&#xff0c;并将排序后的数组中的第一个一维度数组存入到merged中&#xff1b; 3.从后面的一…
阅读更多...
九泰智库 | 医械周刊- Vol.17

九泰智库 | 医械周刊- Vol.17

⚖️ 法规动态 器审中心公示新一期医疗器械优先审批申请审核结果 3月22日&#xff0c;依据原国家食品药品监督管理总局《医疗器械优先审批程序》&#xff08;总局公告2016年168号&#xff09;&#xff0c;器审中心对申请优先审批的医疗器械注册申请进行了审核&#xff0c;对相关…
阅读更多...
elasticsearch _cat/indices docs.count is different than ＜index＞/_count

elasticsearch _cat/indices docs.count is different than ＜index＞/_count

今天遇到一个问题&#xff0c;kibana中看到文档数与下面语句查询到的不同 GET /_cat/count/jiankunking_xxxxx_product_expand_test?v GET /jiankunking_xxxxx_product_expand_test/_search?track_total_hitstrue语句查询结果 epoch timestamp count 1711433785 06:16…
阅读更多...
详解从ERP传到MES系统的数据

详解从ERP传到MES系统的数据

1、物料需求计划 MES系统提供的物料需求计划与传统BOM-MRP方式提供的物料需求计划有本质的不同。首先&#xff0c;满足产能约束、各种生产约束、优化生产调度、提高工作效率的要求。其次&#xff1a;它有详细的以分钟为单位的时间信息。将这些数据提供给ERP&#xff0c;可以大…
阅读更多...
是德科技KEYSIGHT N9938A频谱分析仪

是德科技KEYSIGHT N9938A频谱分析仪

181/2461/8938产品概述&#xff1a; N9938A 是一款使用电池供电的便携式微波频谱分析仪&#xff1b;配置还包括全频段跟踪发生器和前置放大器、干扰分析仪、时间选通、VSWR 和反射测量、内置功率计。 N9938A FieldFox 手持式微波频谱分析仪 主要特性和功能 频率范围&#xff…
阅读更多...
美团面试一面凉经

美团面试一面凉经

1.自我介绍 2.科研项目提问 没咋准备&#xff0c;说的有点没逻辑 3.问论坛项目 为什么用Redis实现登录&#xff1f;能不能用其他方式实现&#xff1f; 1、Redis 具备高性能 假如用户第一次访问 MySQL 中的某些数据。这个过程会比较慢&#xff0c;因为是从硬盘上读取的。将…
阅读更多...
000_coolprop_in_matlab在Matlab中使用CoolProp

000_coolprop_in_matlab在Matlab中使用CoolProp

在Matlab中使用CoolProp 简介 CoolProp是一个开源的热力学性质库&#xff0c;可以计算多种流体的热力学性质。CoolProp支持多种编程语言&#xff0c;包括Python、C、Matlab等。本文将介绍如何在Matlab中使用CoolProp。 CoolProp官网 本文所使用的Matlab版本为R2021a。 在Ma…
阅读更多...
C++基础--类和对象（上）--类与类成员及其成员函数

C++基础--类和对象（上）--类与类成员及其成员函数

C基础--类和对象&#xff08;上&#xff09;--类与类成员及其成员函数 一、类的引入二、类的定义三、类的访问限定符及封装1、访问限定符2、封装 四、类的作用域五、类的实例化六、类的对象大小的计算七、类成员函数的 this 指针1、this指针的引出2、this指针的特性 八、总结 一…
阅读更多...
Vit Transformer

Vit Transformer

一 VitTransformer 介绍 vit : An Image is Worth 16x16 Words: Transformers for Image Recognition at Scale 论文是基于Attention Is All You Need&#xff0c;由于图像数据和词数据数据格式不一样&#xff0c;经典的transformer不能处理图像数据&#xff0c;在视觉领域的应…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023