【HTML 基础】元素和标签

news2024/12/25 12:31:49

文章目录

    • 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 页面吧!

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

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

相关文章

Prometheus 监控系统的初步了解与系统搭建

目录 目录 目录 前言 Prometheus的相关知识 Prometheus特点 Prometheus的存储引擎&#xff1a;TSDB Prometheus的组件 1.核心组件&#xff1a;prometheus server Prometheus server又分为三个部分&#xff1a; 2.exports 3.client Library 4.cadvisor 5.blackbox-ex…

二维数组的学习

前言 在前面我们学习了一维数组&#xff0c;但是有的问题需要用二位数组来解决。 二维数组常称为矩阵&#xff0c;把二维数组写成行和列的排列形式&#xff0c;可以有助于形象化的理解二维数组的逻辑结构。 一、二维数组的定义 二维数组定义的一般格式&#xff1a; 数据类型 数…

【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】

文章目录: 1. 下拉菜单 2. 文本域3.label标签 4.按钮- button 4.1 reset重置按钮结合form表单区域使用 5.无语义的布局标签 6.字符实体 注册信息综合案例 表单第二节 1. 下拉菜单 标签: select嵌套option,select是下拉菜单整体&#xff0c;option是下拉菜单的每一项。 代码…

自媒体必备,这10个免费素材网站,一定要收藏~

自媒体必备素材库&#xff0c;视频、图片、音效、各种类型BGM&#xff0c;这10个网站都能找到&#xff0c;免费下载可商用&#xff0c;朋友们赶紧收藏一波~ 视频素材 1、菜鸟图库 https://www.sucai999.com/video.html?vNTYwNDUx 菜鸟图库虽然是个设计素材网站&#xff0c;但…

文物预防性保护新高度:守护历史,个性化定制保护方案

一、西安市研究院宣布西安长安曹家堡村发现2823座古代遗迹 深藏于西安长安曹家堡村地下的2823座古代遗迹&#xff0c;在西安文物维护考古研究院的用心调研下&#xff0c;逐渐揭开了神秘面纱。其中&#xff0c;已有1088座陵墓重见天日&#xff0c;出土的文物琳琅满目&#xff0…

如何实现Win系统ssh连接Ubuntu使用vscode远程敲代码

最近&#xff0c;我发现了一个超级强大的人工智能学习网站。它以通俗易懂的方式呈现复杂的概念&#xff0c;而且内容风趣幽默。我觉得它对大家可能会有所帮助&#xff0c;所以我在此分享。点击这里跳转到网站。 文章目录 前言1、安装OpenSSH2、vscode配置ssh3. 局域网测试连接…

【.NET Core】深入理解C#中的特殊字符

【.NET Core】深入理解C#中的特殊字符 文章目录 【.NET Core】深入理解C#中的特殊字符一、概述二、$-- 字符串内插2.1 内插字符串的结构2.2 内插原始字符串字面量2.3 特殊字符2.4 内插字符串编译 三、-- 逐字字符串标识符四、“”“--原始字符串文本 一、概述 特殊字符是预定义…

Vite+Electron快速构建一个VUE3桌面应用(一)

一. 简介 首先&#xff0c;介绍下vite和Electron。 Vite是一种新型前端构建工具&#xff0c;能够显著提升前端开发体验。Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入Chromium和Node.js到二进制的 Electron 允许您保持一个 JavaScript 代码代码…

elementui-table组件列表中的tooltip内容过长超出屏幕换行显示

elementui-table组件列表中的tooltip内容过长超出屏幕换行显示 el-table列属性中带的有show-overflow-tooltip&#xff0c;可以设置内容超出列宽度显示为…&#xff0c;并且有tooltip提示&#xff0c;但是内容过多时&#xff0c;提示会超出屏幕&#xff1a; 但是el-table组件…

cad设计绘图 -- AutoCAD 2024 中文

AutoCAD 2024是一款全球领先的CAD软件&#xff0c;广泛应用于建筑、机械、电子等领域。相比其他CAD软件&#xff0c;它具有以下优势&#xff1a;首先&#xff0c;AutoCAD 2024提供了丰富的绘图和设计工具&#xff0c;满足各种工作需求&#xff1b;其次&#xff0c;其界面直观、…

数据结构.队列的顺序表示

一、队列的定义 二、队列的顺序实现 #include<iostream> using namespace std; const int N 10; typedef struct {int data[N];int front,rear; }SqQueue;void Init(SqQueue& Q)//初始化 {Q.front Q.rear0;} 三、入队 bool Push(SqQueue& Q, int x)//入队 {if …

ThinkPhp3.2(qidian)部署文档

宝塔环境部署 申请域名以及域名解析 具体配置&#xff0c;可百度之 在宝塔面板中创建网站 上传代码导入数据配置运行目录 注意&#xff1a;&#xff08;如果版本&#xff1a;thinkphp3.2 &#xff09;配置 运行目录要特别注意&#xff1a;运行目录要选择根目录“/”&#xff…

Java基础数据结构之反射

一.定义 Java的反射机制是在运行状态中的&#xff0c;对于任意一个类都能知道这个类的所有属性和方法&#xff1b;对于任意一个对象&#xff0c;都能够调用它的任意方法及属性。既然能拿到&#xff0c;我们就可以修改部分类型信息。这种动态获取信息以及动态调用对象方法的功能…

什么是正向代理?为什么要使用它?

在计算机网络中&#xff0c;代理服务器&#xff08;Proxy Server&#xff09;是一种充当客户端和目标服务器之间的中间人的计算机或应用程序。代理服务器可以用于多种目的&#xff0c;其中之一就是正向代理。 正向代理的定义 正向代理是一种代理服务器配置方式&#xff0c;它…

【网络】:网络基础

网络基础 一.总体概述二.认识Mac地址三.数据跨网络传输 一.总体概述 1.协议是什么 1.从概念上说&#xff1a;为了保证不同厂家生产出来的不同型号的电脑能够互相通信&#xff0c;而制定的标准——协议。 2.从技术上说&#xff1a;简单粗暴的理解——是操作系统里的结构体。 2.…

Flink的SQL开发

概叙 Flink有关FlinkSQL的官网: https://nightlies.apache.org/flink/flink-docs-release-1.13/zh/docs/dev/table/sql/overview/ 阿里云有关FlinkSQL的官网: https://help.aliyun.com/zh/flink/developer-reference/overview-5?spma2c4g.11186623.0.0.3f55bbc6H3LVyo Ta…

Windows系统本地安装Everything搜索神器并结合内网穿透实现远程访问

文章目录 前言1.软件安装完成后&#xff0c;打开Everything2.登录cpolar官网 设置空白数据隧道3.将空白数据隧道与本地Everything软件结合起来总结 前言 要搭建一个在线资料库&#xff0c;我们需要两个软件的支持&#xff0c;分别是cpolar&#xff08;用于搭建内网穿透数据隧道…

金融OCR领域实习日志(一)——OCR技术从0到1全面调研

一、OCR基础 任务要求&#xff1a; 工作原理 OCR&#xff08;Optical Character Recognition&#xff0c;光学字符识别&#xff09;是指电子设备&#xff08;例如扫描仪或数码相&#xff09;检查纸上打印的字符&#xff0c;经过检测暗、亮的模式肯定其形状&#xff0c;而后用…

(自用)learnOpenGL学习总结-高级OpenGL-立方体贴图

ok终于来到了立方体贴图了&#xff0c;在这里面我们可以加入好看的天空包围盒&#xff0c;这样的画我们的背景就不再是黑色的了&#xff01; 首先&#xff0c;立方体贴图和前面的sampler2D贴图一样&#xff0c;不过是6个2D组成的立方体而已。 那么为什么要把6个组合在一起呢&…

粒子群优化算法(Particle Swarm Optimization,PSO)求解基于移动边缘计算的任务卸载与资源调度优化(提供MATLAB代码)

一、优化模型介绍 移动边缘计算的任务卸载与资源调度优化原理是通过利用配备计算资源的移动无人机来为本地资源有限的移动用户提供计算卸载机会&#xff0c;以减轻用户设备的计算负担并提高计算性能。具体原理如下&#xff1a; 任务卸载&#xff1a;移动边缘计算系统将用户的计…