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 量…

边缘检测-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;方便…

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

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

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

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

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

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

Python爬虫获取接口数据

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

Docker与containerd:容器技术的双璧

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

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

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

面试笔记——Redis(集群方案:主从复制、哨兵模式和分片集群)

主从复制 在 Redis 主从集群中&#xff0c;一个主节点&#xff08;Master&#xff09;负责处理客户端的读写请求&#xff0c;而多个从节点&#xff08;Slave&#xff09;则负责复制主节点的数据&#xff0c;并对外提供读取服务——解决高并发问题。 主节点&#xff08;Master&…

最新ChatGPT/GPT4科研应用与AI绘图及论文高效写作教程

原文链接&#xff1a;最新ChatGPT/GPT4科研应用与AI绘图及论文高效写作教程https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247598050&idx5&sn70fd3f5946d581ad9c1363295b130ef5&chksmfa823e05cdf5b713baf9cf1381bfb2455ad675a0b21e194bef8b76f35d6aa77…

C++初阶 | [九] list 及 其模拟实现

摘要&#xff1a;介绍 list 容器&#xff0c;list 模拟实现&#xff0c;list与vector的对比 list&#xff08;带头双向循环列表&#xff09; 导入&#xff1a;list 的成员函数基本上与 vector 类似&#xff0c;具体内容可以查看相关文档(cplusplus.com/reference/list/list/)&…

Linux中使用vim编辑器的时候提示:发现交换文件“XXX.swap“

目录 问题描述解决方案 问题描述 有时候vim编辑文件的时候 系统突然卡了 无奈只能强制退出关机 然后重启 这个时候想重新回来继续编辑刚刚的文件 注意:我这种操作方式 虽然之后可以继续正常编辑了 但是发现文件是没有保存的 vim XXX进去有如下提示 解决方案 注意:我这种操作…

基于python的变配电室运行状态评估与预警系统flask-django-nodejs-php

近年来,随着我国工业化、城镇化步伐的不断加快&#xff0c;城市配电网络取得令人瞩目的发展成果。变配电室是供配电系统的核心&#xff0c;在供配电系统中占有特殊的重要地位[1]。变配电室电气设备运行状态和环境信息缺乏必要的监测评估预警手段&#xff0c;如有一日遭遇突发情…

Linux-线程同步

文章目录 前言一、为什么要线程同步&#xff1f;二、线程同步pthread_cond_initpthread_cond_destroypthread_cond_wait、pthread_cond_signal和 pthread_cond_broadcast 三、示例代码 前言 上节课学习了线程互斥&#xff0c;这节课针对线程互斥内容在做进一步的补充和完善&am…

[C语言]一维数组二维数组的大小

对于一维数组我们知道取地址是取首元素的地址&#xff0c;二维数组呢&#xff0c;地址是取第一行的地址&#xff0c;sizeof(数组名)这里计算的就是整个数组的大小&#xff0c;&数组名 表示整个数组&#xff0c;取出的是整个数组的地址&#xff0c;显示的是数组的首元素 记…

网络工程师练习题2

网络工程师 将专用IP地址转换为公用IP地址的技术是&#xff08;&#xff09;。 A.ARPB.DHCPC.UTMD.NAT 【答案】D 【解析】概念题&#xff0c;NAT技术将源地址从内部专用地址转换成可以在外部Internet上路由的全局IP地址。 R1、R2是一个自治系统中采用RIP路由协议的两个相…

【计算机网络篇】物理层(4)信道的极限容量,信道复用技术

文章目录 &#x1f354;信道的极限容量&#x1f6f8;造成信号失真的主要因素⭐码元的传输速率 &#x1f6f8;奈氏准则&#x1f6f8;香农公式&#x1f388;练习 &#x1f5d2;️小结 &#x1f354;信道复用技术⭐常见的信道复用技术&#x1f388;频分复用FDM&#x1f388;时分复…