【HTML 基础】元素和标签

文章目录

    • 1. <p> - 段落标签
    • 2. <h1> - <h6> - 标题标签
    • 3. <a> - 超链接标签
    • 4. <img> - 图片标签
    • 5. <ul>, <ol>, <li> - 列表标签
      • 无序列表
      • 有序列表
    • 总结

HTML(Hypertext Markup Language)是构建 Web 页面的基础。在 HTML 中,我们使用各种标签(Tags)来定义文档的结构和内容。以下是一些常见的 HTML 标签,它们在网页设计中扮演着重要的角色。

1. <p> - 段落标签

<p> 标签用于定义文本的段落。所有放在 <p> 标签中的文本将被显示为一个段落

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

执行效果

在这里插入图片描述

2. <h1> - <h6> - 标题标签

HTML 提供了六个级别的标题标签,分别是 <h1> 到 <h6>,表示从最高级标题到最低级标题

<h1>这是最大的标题</h1>
<h2>这是较大的标题</h2>
<!-- ... -->
<h6>这是最小的标题</h6>

执行效果

在这里插入图片描述

3. <a> - 超链接标签

<a> 标签用于创建超链接,将文本或图像链接到另一个文档或资源

<a href="https://www.baidu.com/">访问百度</a>

执行效果

在这里插入图片描述

4. <img> - 图片标签

<img> 标签用于在页面中插入图像。src 属性指定图像的文件路径或 URL

<img src="C:\Users\Administrator\Desktop\CSDN\HTML\html-logo.png" alt="这是一个LOGO图片">

执行效果

在这里插入图片描述

5. <ul>, <ol>, <li> - 列表标签

HTML 支持无序列表(<ul>)、有序列表(<ol>)和列表项(<li>)

无序列表

<ul>
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ul>

执行效果

在这里插入图片描述

有序列表

<ol>
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ol>

执行效果

在这里插入图片描述

总结

这只是 HTML 中一小部分常见标签的介绍。了解这些基础标签是构建网页的第一步。随着你深入学习,你将发现 HTML 提供了丰富的标签,用于定义文档的结构、内容和样式。继续学习 HTML,打造令人印象深刻的 Web 页面吧!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

RabbitMQ快速实战

目录 什么是消息队列&#xff1f; 消息队列的优势 应用解耦 异步提速 削峰填谷 总结 主流MQ产品特点比较 Rabbitmq快速上手 创建用户admin Exchange和Queue Connection和Channel RabbitMQ中的核心概念总结 什么是消息队列&#xff1f; MQ全称Message Queue&#xf…

某大厂关于Linux系统相关面试题

一、Linux系统和Shell 1、写一个sed命令&#xff0c;修改/tmp/input.txt文件的内容&#xff0c;要求&#xff1a;(1) 删除所有空行&#xff1b;(2) 在非空行前面加一个"AAA"&#xff0c;在行尾加一个"BBB"&#xff0c;即将内容为11111的一行改为&#xff1…

linux 下scrcpy 手机投屏到电脑,QT+ffmpeg 获取视频流,处理等等

linux 下scrcpy 手机投屏到电脑,QT+ffmpeg 获取视频流,处理 1 安装 scrcpy 地址 https://github.com/Genymobile/scrcpy 转到 relese 下载 我这里下载的是linux系统 v2.3.1 版本 scrcpy-2.3.1.tar.gz 下载 scrcpy-server v2.3.1 版本 scrcpy-server-v2.3.1 解压scrcpy-2.3…

【工具推荐】磁盘分析工具 | SpaceSniffer 高效分析

文章目录 1 下载2 分析 最近发现一款很好用的工具——SpaceSniffer&#xff08;磁盘空间分析工具&#xff09; 硬盘用久了&#xff0c;里头的文件总是杂乱不堪&#xff0c;十分影响效率和心情&#xff1b; 我们往往会忘记哪些内容占用的空间比较多~所以我们如果可以高效分析哪…

Linux 网络流量相关工具

本文聚焦于网络流量的查看、端口占用查看。至于网络设备的管理和配置&#xff0c;因为太过复杂且不同发行版有较大差异&#xff0c;这里就不赘述&#xff0c;后面看情况再写。 需要注意的是&#xff0c;这里列出的每一个工具都有丰富的功能&#xff0c;流量/端口信息查看只是其…

深度学习-使用Labelimg数据标注

数据标注是计算机视觉和机器学习项目中至关重要的一步&#xff0c;而使用工具进行标注是提高效率的关键。本文介绍了LabelImg&#xff0c;一款常用的开源图像标注工具。用户可以在图像中方便而准确地标注目标区域&#xff0c;为训练机器学习模型提供高质量的标注数据。LabelImg…

软件设计师-23年上半年-下午试题

软件设计师-23年上半年-下午试题 更多软考资料 https://ruankao.blog.csdn.net/试题一、二、三、四必答&#xff0c;五、六二选一 试题一(15分) 说明 随着农业领域科学种植的发展&#xff0c;需要对农业基地及农事进行的信息化管理&#xff0c;为租户和农户等人员提供种植相…

opencv学习二值分析

内容来源于《opencv4应用开发入门、进阶与工程化实践》 二值分析&#xff1a; 常见的二值化方法&#xff1a; 基于全局阈值&#xff08;threshold&#xff09;得到的二值图像&#xff1b;基于自适应阈值&#xff08;adaptiveThreshold&#xff09;得到的二值图像&#xff1…

【数据分析】numpy基础第三天

前言 本文只会讲解最常用的加、减、乘、除&#xff0c;点乘&#xff08;或叫矩阵乘法&#xff09;、还有广播机制。 本文代码 链接提取码&#xff1a;1024 第1部分&#xff1a;基础数学计算 使用NumPy进行基本的数学运算是十分直观和简单的。下面我们将展示一些基本的加、…

幻兽帕鲁服务器怎么收费?4核16G配置

幻兽帕鲁服务器价格多少钱&#xff1f;4核16G服务器Palworld官方推荐配置&#xff0c;阿里云4核16G服务器32元1个月、96元3个月&#xff0c;腾讯云换手帕服务器服务器4核16G14M带宽66元一个月、277元3个月&#xff0c;8核32G22M配置115元1个月、345元3个月&#xff0c;16核64G3…

C# 实现 gRPC 服务和调用

写在前面 gRPC 是一种与语言无关的高性能远程过程调用 (RPC) 框架。 主要优点如下&#xff1a; 1.高性能轻量化。 2.协议优先的 API 定义模式&#xff0c;默认使用协议缓冲区&#xff0c;允许与语言无关的实现。 3.可用于多种语言的工具&#xff0c;以生成强类型服务器和客户…

flutter 搜索框实现,键盘搜索按钮,清空,防抖

import package:flutter/material.dart; import package:flutter_screenutil/flutter_screenutil.dart; import package:flutter_svg/svg.dart; import package:sy_project/config/app_colors.dart; import package:sy_project/core/assets.dart;/// 搜索textview class Custom…

cmake-find_package链接第三方库

文章目录 基本调用形式和模块模式使用方式 之前我们是使用了绝对路径来链接OpenCV第三方库&#xff0c;但是现在很多库一般会自己写一些cmake文件提供给用户&#xff0c;用户可以直接使用其中的内置变量即可。使用的命令就是find_package。 基本调用形式和模块模式 find_packa…

类和对象(1)

引入 我们在c语言阶段使用的struct其实与类很相似。所以c兼容c语言结构体struct的用法&#xff0c;同时升级成了类。但为了区分&#xff0c;我们用class来定义类&#xff0c;但是结果提也是可以的。 class 类名 {//private: //public: 访问限定符 //protected://成员函…

AI开启手机摄影新时代:三星Galaxy S24 Ultra影像解读

在全球科技领域&#xff0c;生成式AI无疑是当前最为炙手可热的亮点&#xff0c;不少行业专家和业界领袖都纷纷预言&#xff0c;生成式AI技术必将重塑千行百业。 那么是否有人想过&#xff0c;如果生成式AI技术被应用在智能手机上&#xff0c;又会带来怎样翻天覆地的变革&#x…

【electron】安装网络问题处理

目录 场景排查问题排查结论electron 安装失败解决方案 新的问题electron-builder 打包失败处理 场景 在mac上使用electron进行代码开发的时候&#xff0c;无法正常下载与electron、electron-builder相关的依赖 排查问题 是不是因为没有翻墙导致资源无法下载是不是没有设置正…

【揭秘】RecursiveTask全面解析

内容概要 RecursiveTask的优点在于能够将复杂任务递归分解为更小的子任务&#xff0c;从而提高处理效率&#xff0c;通过ForkJoinPool执行&#xff0c;RecursiveTask能充分利用多核处理器资源&#xff0c;实现任务的并行化处理&#xff0c;大大加快了计算速度&#xff0c;此外…

数据结构-顺序表的实现 [王道]

本博客记录个人寒假学习内容。此篇博客内容为 顺序表的定义。 博客中截图来自王道数据结构公开课 目录 顺序表的定义 顺序表的特点 顺序表的实现--静态分配 顺序表的实现--动态分配 顺序表的定义--知识结构框架 顺序表的定义 >线性表是具有相同(每个数据元素所占的空间…

win11设置mysql开机自启

目录 命令式 1、打开命令提示符或 PowerShell&#xff1a; 2、使用管理员权限运行命令行工具&#xff1a; 3、设置 MySQL 服务为开机自启动&#xff1a; 4、启动 MySQL 服务&#xff1a; 5、 验证设置是否生效&#xff1a; 操作视图式 1、右击任务栏 ---> 选择任务管…

南京观海微电子---如何减少时序报告中的逻辑延迟

1. 引言 在FPGA逻辑电路设计中&#xff0c;FPGA设计能达到的最高性能往往由以下因素决定&#xff1a; ▪ 工作时钟偏移和时钟不确定性&#xff1b; ▪ 逻辑延迟&#xff1a;在一个时钟周期内信号经过的逻辑量&#xff1b; ▪ 网络或路径延迟&#xff1a;Vivado布局布线后引…