HTML中的常用标签用法总结(持续更新...)

🌟 欢迎来到 我的博客! 🌈

💡 探索未知, 分享知识 !💫

本文目录

    • 1. 标题标签
    • 2. 段落标签
    • 3. 链接标签
    • 4. 列表标签
    • 5. 图像标签
    • 6. 表格标签


在这里插入图片描述

1. 标题标签

<h1><h6>用于定义标题。<h1>是最大的标题,<h6>是最小的标题。通常,<h1>用于最重要的内容。

示例

<h1>这是最重要的标题</h1>
<h2>这是次重要的标题</h2>

这是最重要的标题

这是次重要的标题

2. 段落标签

<p>标签用于创建段落。在HTML中,段落是用于文本、链接或其他元素的容器。

示例

<p>这是一个段落。</p>

这是一个段落。

3. 链接标签

<a>标签用于创建链接。它通常与href属性一起使用,该属性指定链接的目标URL。

示例

<a href="https://www.baidu.com">这是一个链接</a>

这是一个链接

4. 列表标签

HTML提供了三种类型的列表:无序列表(<ul>)、有序列表(<ol>)和定义列表(<dl>)。每种类型的列表都有其特定的标签和语法。

  • 无序列表使用<ul><li>标签创建。<li>用于定义列表项。
  • 有序列表使用<ol><li>标签创建,并使用数字或字母顺序进行排序。
  • 定义列表使用<dl><dt>标签创建,用于描述术语和其定义。通常在定义列表中,术语位于<dt>标签中,而定义位于<dd>标签中。

示例

无序列表:

<ul><li>苹果</li><li>香蕉</li><li>橙子</li>
</ul>
  • 苹果
  • 香蕉
  • 橙子

有序列表:

<ol><li>读书</li><li>旅行</li><li>烹饪</li>
</ol>
  1. 读书
  2. 旅行
  3. 烹饪

定义列表:

<dl><dt>术语</dt> <dd>定义</dd><dt>编程</dt> <dd>编写计算机程序</dd><dt>设计</dt> <dd>创建视觉元素以传达信息</dd>
</dl>
术语
定义
编程
编写计算机程序
设计
创建视觉元素以传达信息

5. 图像标签

<img>标签用于在网页上插入图像。它需要一个src属性来指定图像的来源,以及可选的alt属性来提供图像无法加载时的替代文本。还可以使用widthheight属性来设置图像的尺寸。

示例

插入图像:

<img src="image.jpg" alt="示例图片 title="Hello" ">

alt属性:

  • alt属性用于提供图像的替代文本(alt text)。当图像无法加载或用户使用屏幕阅读器等辅助技术时,替代文本会被显示出来。它对于视觉障碍的用户和搜索引擎优化(SEO)非常重要。
  • alt属性的值通常是一个简短的描述,描述图像的内容和意义。它应该简洁明了,并且最好包含关键词,以便搜索引擎更好地理解图像。

title属性:

  • title属性为图像提供了一个额外的提示或说明。它会在鼠标悬停在图像上时显示。这可以提供额外的上下文信息,或者作为快捷键来访问更详细的信息。
  • title属性的值可以是任何文本,可以包含更多的详细信息或解释。它通常用于提供额外的内容,帮助用户更好地理解图像的含义。

6. 表格标签

HTML中的表格由<table><tr>(表格行)、<td>(表格数据)等标签组成。可以使用这些标签来组织和显示数据。表格通常用于展示数据或布局设计。表格的行和单元格可以使用不同的样式进行格式化。

示例:创建一个简单的表格:

<table border="1"><tr> <th>姓名</th><th>年龄</th></tr> <tr><td>张三</td><td>25</td></tr> <tr><td>李四</td><td>30</td></tr> 
</table> 每个单元格还可以使用样式来更改字体、颜色等。 例如: <td style="color:blue;">张三</td> 添加边框: <table border="1"> <tr style="border:solid black;">... </table> 添加背景色: <table style="background-color:green;">... </table> </td></tr></table> --> 这个示例中包含了多个表格和表格行的基本元素。</table></p></div></body></html></body></html>
姓名年龄
张三25
李四30

持续更新中…

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

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

相关文章

模型部署——RKNN模型量化精度分析及混合量化提高精度

模型部署——RKNN模型量化精度分析及混合量化提高精度&#xff08;附代码&#xff09;-CSDN博客 3.1 量化精度分析流程 计算不同情况下&#xff0c;同一层网络输入值的余弦距离&#xff0c;来近似的查看每一层精度损失的情况。具体量化精度分析的流程如下&#xff1a; 3.2 量…

ONNX @riscv+OpenKylin

安装onnxruntime-riscv 下载软件: git clone https://github.com/ucb-bar/onnxruntime-riscv apt install unzip cd onnxruntime-riscv && sh build.sh 报错... 改了g环境变量部分还是不行&#xff0c;放弃。 安装onnxruntime 使用这个库 git clone https://g…

数据结构大合集03——栈的相关函数运算算法

函数运算算法合集03 顺序栈的结构体顺序栈的基本运算的实现1. 初始化栈2. 销毁栈3. 判断栈是否为空4. 进栈5. 出栈6. 取栈顶元素 链栈的结构体链栈的基本运算的实现1. 初始化栈2. 销毁栈3. 判断是否为空4. 进栈5. 出栈6. 取栈顶元素 注&#xff1a; 本篇文章的概念合集 数据结构…

RocketMQ的重试机制

RocketMQ的重试机制是指:当消费者消费消息失败时,RocketMQ会在一定时间后重新将消息发送给消费者进行消费,以确保消息的可靠消费。 RocketMQ的重试机制主要体现在: 1.自动重试:Consumer在消费失败后,会在一定重试策略下定期重试消费失败的消息,直到成功或达到最大重试次数。 …

边缘检测-Tiny and Efficient Model for the Edge Detection Generalization

源代码: https://github.com/xavysp/TEED 论文地址&#xff1a;https://arxiv.org/pdf/2308.06468.pdf 大多数高级计算机视觉任务依赖于低级图像操作作为其初始过程。边缘检测、图像增强和超分辨率等操作为更高级的图像分析提供了基础。在这项工作中&#xff0c;我们考虑三个…

帮助读者掌握C语言编程基础知识的书籍

帮助读者掌握C语言编程的基础知识&#xff0c;了解如何将人工智能技术应用于自己的编程项目。 人工智能编程&#xff08;赋能C语言&#xff09; 作者&#xff1a; 黄箐、廖云燕、曾锦山、邢振昌 ISBN号&#xff1a; 9787302648796 出版日期&#xff1a; 2023-11-01 本书以C…

刷题DAY26 | LeetCode 39-组合总和 40-组合总和II 131-分割回文串

39 组合总和&#xff08;medium&#xff09; 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target &#xff0c;找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 &#xff0c;并以列表形式返回。你可以按 任意顺序 返回这些组合。 candidates…

小程序绕过 sign 签名

之前看到了一篇文章【小程序绕过sign签名思路】之前在做小程序渗透时也遇到了这种情况&#xff0c;但是直接放弃测试了&#xff0c;发现这种思路后&#xff0c;又遇到了这种情况&#xff0c;记录下过程。 并没有漏洞分享&#xff0c;仅仅是把小程序也分享出来&#xff0c;方便…

什么是数组流

字节数组流 1.ByteArrayInputStream和ByteArrayOutputStream分别使用字节数组作为流的源和目标。 2.ByteArrayInputStream构造方法 •ByteArrayInputStream (byte[] buf) •ByteArrayInputStream (byte[] buf,int offset,int length) 3.ByteArrayInputStream常用方法 • public…

如何建立数字化招标采购(系统)评价体系?

前言 长期以来&#xff0c;采购的经济目标占据了主导地位&#xff0c;采购人、采购代理机构或出于“经济人”的本性&#xff0c;或迫于采购资金的限制&#xff0c;极易采购便宜的产品、工程和服务&#xff0c;而忽略了采购的价值。 有效的采购制度&#xff0c;不仅仅以控制成…

【以图搜图】GPUNPU适配万物识别模型和Milvus向量数据库

目录 以图搜图介绍项目地址Milvuscv_resnest101_general_recognition 代码使用流程结果展示模型部署环境Milvus部署及使用docker安装docker-compose安装Milvus可视化工具Attu进入网页端 Data数据示例点个赞再走呗&#xff01;比心&#x1f49e;️ 以图搜图 • &#x1f916; Mo…

[视觉基础知识]: 点云数据

https://pointclouds.org/documentation/tutorials/pcd_file_format.html PCD 不是第一种支持 3D 点云数据的文件类型。尤其是计算机图形学和计算几何学社区&#xff0c;已经创建了多种格式来描述使用激光扫描仪获取的任意多边形和点云。其中一些格式包括&#xff1a; PLY - …

Go微服务实战——服务的监控与链路追踪(监控数据可视化)

链路追踪背景 对于早期系统或者服务来说&#xff0c;开发人员一般通过打日志的方式来进行埋点&#xff08;常用的数据采集方式&#xff09;&#xff0c;然后再根据日志系统和性能监控定位及分析问题。对于单体的应用通过日志系统完全可以定位到问题&#xff0c;从而排查异常。…

Jpg图片怎么变成gif?三步在线转换gif动画

JPG是一种常见的图像格式&#xff0c;而GIF动态则是一种流行的动态图像格式。如果你想将多张JPG图片合成为一个GIF动画&#xff0c;下面是一些简单的方法来帮助你完成这个任务。通过使用Gif动画制作工具-GIF中文网&#xff0c;上传多张jpg格式图片轻松一键在线转换gif动画&…

uniapp H5打开应用商店

/* 点击事件 */downApp() {let sysInfo uni.getSystemInfoSync()if (sysInfo.osName ios) { // ios/* 跳转到ios商店 id后面接的就是苹果id */window.location.replace(itms-appss://apps.apple.com/cn/app/id6479005866)} else { // androidthis.detectDeviceBrand(sysInfo…

【shell】定时检查说明

想法&#xff1a;定一个时间&#xff0c;然后查询需要格式的相关文件&#xff0c;移到一个新的文件夹下面 文件单独检查 进入账号su root之后&#xff0c;进入到crontab -e进行添加 #凌晨1点10分 0点30分 10 1 * * * /data/edw_ods/check_st/1move_file.sh 30 0 * * * /data…

Python爬虫获取接口数据

Python爬虫获取接口数据 正常人的操作​​​​​​​​​​爬虫的思路标题获取请求信息标题请求转换为代码完整代码请求返回信息执行程序获取静态网页数据的教程,适用于我们要爬取的数据在网页源代码中出现,但是还是有很多的数据是源代码中没有的,需要通过接口访问服务器来获…

Docker与containerd:容器技术的双璧

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《Docker幻想曲&#xff1a;从零开始&#xff0c;征服容器宇宙》 &#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、前言 1、Docker和containerd的背景…

ISO9001质量管理体系是什么,ISO9001认证详细介绍

ISO9001质量管理体系是国际标准化组织&#xff08;ISO&#xff09;制定的一套质量管理标准&#xff0c;旨在帮助企业建立有效的质量管理体系&#xff0c;提高产品和服务的质量水平&#xff0c;增强企业的竞争力和市场信誉。ISO9001认证则是企业按照ISO9001标准建立起质量管理体…

cobbler批量装机工具,可以实现同时装多台或多台不同系统的主机,也可以实现定制安装

cobbler批量装机工具 文章目录 cobbler批量装机工具1. cobbler简介2. cobbler服务端部署uos3. 客户端安装(内存和cpu可以多个点&#xff0c;以免后面出错)4.cobbler服务端部署centos75.客户端安装6.cobbler服务端部署centos87.客户端安装8.cobbler服务端部署rockylinux99.客户端…