HTML 标签类型全面介绍

HTML 标签类型全面介绍

HTML(HyperText Markup Language)是构建 Web 页面结构的基础语言。HTML 由不同类型的标签组成,每种标签都有特定的用途。本文将全面介绍 HTML 标签的分类及其用法。


1. HTML 标签概述

HTML 标签通常成对出现,由 开始标签结束标签 组成,例如:

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

某些标签是 自闭合 的,例如 <img><br>


2. HTML 标签的分类

2.1 结构性标签(Layout Tags)

这些标签用于定义页面的整体结构。

  • <html>:定义 HTML 文档的根元素。
  • <head>:包含页面的元数据。
  • <body>:包含页面的主要内容。
  • <header>:定义网页的头部区域。
  • <footer>:定义网页的底部区域。
  • <main>:页面的主要内容。
  • <section>:定义一个独立的内容块。
  • <article>:独立的文章内容。
  • <nav>:导航栏。
  • <aside>:侧边栏。
  • <div>:块级容器。
  • <span>:行内容器。

示例:

<header><h1>网站标题</h1><nav><ul><li><a href="#">首页</a></li><li><a href="#">关于</a></li></ul></nav>
</header>

2.2 文本格式化标签(Text Formatting Tags)

用于修饰和格式化文本。

  • <h1> - <h6>:标题标签。
  • <p>:段落。
  • <br>:换行。
  • <hr>:水平分割线。
  • <b> / <strong>:加粗。
  • <i> / <em>:斜体。
  • <u>:下划线。
  • <mark>:高亮。
  • <sub> / <sup>:下标 / 上标。
  • <blockquote>:引用。
  • <code>:代码片段。

示例:

<p><strong>重要:</strong>请在 HTML 中使用语义化标签!</p>

2.3 链接和媒体标签(Links & Media Tags)

  • <a>:超链接。
  • <img>:图片。
  • <audio>:音频。
  • <video>:视频。
  • <source>:音视频资源。
  • <iframe>:内嵌网页。
  • <embed>:嵌入对象。
  • <object>:多媒体内容。

示例:

<a href="https://www.example.com">访问示例网站</a>
<img src="image.jpg" alt="示例图片">

2.4 表单标签(Form Tags)

用于创建用户输入界面。

  • <form>:表单。
  • <input>:输入框。
  • <label>:标签。
  • <button>:按钮。
  • <textarea>:多行文本输入。
  • <select>:下拉列表。
  • <option>:下拉选项。
  • <fieldset>:分组表单。
  • <legend>:分组标题。
  • <datalist>:可选输入项。

示例:

<form><label for="name">姓名:</label><input type="text" id="name" name="name"><button type="submit">提交</button>
</form>

2.5 表格标签(Table Tags)

用于创建表格结构。

  • <table>:表格。
  • <tr>:行。
  • <th>:表头。
  • <td>:单元格。
  • <caption>:表格标题。
  • <thead> / <tbody> / <tfoot>:表格的不同部分。

示例:

<table><thead><tr><th>姓名</th><th>年龄</th></tr></thead><tbody><tr><td>张三</td><td>25</td></tr></tbody>
</table>

2.6 交互元素(Interactive Elements)

  • <details> / <summary>:可折叠内容。
  • <dialog>:对话框。
  • <progress>:进度条。
  • <meter>:度量值。

示例:

<details><summary>点击展开</summary><p>这里是隐藏的内容。</p>
</details>

3. 语义化标签的重要性

HTML5 引入了很多语义化标签,如 <header><article><section> 等,提升了可读性和 SEO 效果。

示例:

<header><h1>网站标题</h1>
</header>
<section><article><h2>文章标题</h2><p>文章内容...</p></article>
</section>

4. 结论

本文介绍了 HTML 标签的主要类型及其使用示例。掌握这些标签的用法,可以帮助你更好地构建网页结构,提高网页的可读性和可维护性。希望这篇文章对你有所帮助!🚀

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

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

相关文章

vscode中的【粘滞滚动】的基本概念和作用,关闭了以后如何开启

1、粘滞滚动的基本概念和作用 ‌VSCode中的“粘滞”功能主要是指编辑器在滚动时的一种特殊效果&#xff0c;使得编辑器在滚动到某个位置时会“粘”在那里&#xff0c;而不是平滑滚动到底部或顶部。‌ 粘滞滚动的基本概念和作用 粘滞滚动功能可以让用户在滚动时更直观地看到当前…

【商城实战(101)】电商未来已来:新技术引领商城发展新航向

【商城实战】专栏重磅来袭!这是一份专为开发者与电商从业者打造的超详细指南。从项目基础搭建,运用 uniapp、Element Plus、SpringBoot 搭建商城框架,到用户、商品、订单等核心模块开发,再到性能优化、安全加固、多端适配,乃至运营推广策略,102 章内容层层递进。无论是想…

深度学习Note.5(机器学习.6)

1.Runner类 一个任务应用机器学习方法流程&#xff1a; 数据集构建 模型构建 损失函数定义 优化器 模型训练 模型评价 模型预测 所以根据以上&#xff0c;我们把机器学习模型基本要素封装成一个Runner类&#xff08;加上模型保存、模型加载等功能。&#xff09; Runne…

linux服务器专题1------redis的安装及简单配置

在 linux上安装 Redis 可以按照以下步骤进行(此处用Ubuntu 服务器进行讲解)&#xff1a; 步骤 1: 更新系统包 打开终端并运行以下命令以确保你的系统是最新的&#xff1a; sudo apt update sudo apt upgrade步骤 2: 安装 Redis 使用 apt 包管理器安装 Redis&#xff1a; s…

面试问题总结:qt工程师/c++工程师

C 语言相关问题答案 面试问题总结&#xff1a;qt工程师/c工程师 C 语言相关问题答案 目录基础语法与特性内存管理预处理与编译 C 相关问题答案面向对象编程模板与泛型编程STL 标准模板库 Qt 相关问题答案Qt 基础与信号槽机制Qt 界面设计与布局管理Qt 多线程与并发编程 目录 基础…

实现实时数据推送:SpringBoot中SSE接口的两种方法

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…

LXC 导入多Linux系统

前提要求 ubuntu下安装lxd 参考Rockylinux下安装lxd 参考LXC 源替换参考LXC 容器端口发布参考LXC webui 管理<

ES的文档更新机制

想获取更多高质量的Java技术文章&#xff1f;欢迎访问Java技术小馆官网&#xff0c;持续更新优质内容&#xff0c;助力技术成长 Java技术小馆官网https://www.yuque.com/jtostring ES的文档更新机制 在现代应用中&#xff0c;数据的动态性越来越强&#xff0c;我们不仅需要快…

trae.ai 编辑器:前端开发者的智能效率革命

一、为什么我们需要更智能的编辑器&#xff1f; 作为从业5年的前端开发者&#xff0c;我使用过从Sublime到VSCode的各种编辑器。但随着现代前端技术的复杂度爆炸式增长&#xff08;想想一个React组件可能涉及JSX、CSS-in-JS、TypeScript和GraphQL&#xff09;&#xff0c;传统…

MySQL篇(一):慢查询定位及索引、B树相关知识详解

MySQL篇&#xff08;一&#xff09;&#xff1a;慢查询定位及索引、B树相关知识详解 MySQL篇&#xff08;一&#xff09;&#xff1a;慢查询定位及索引、B树相关知识详解一、MySQL中慢查询的定位&#xff08;一&#xff09;慢查询日志的开启&#xff08;二&#xff09;慢查询日…

uniapp APP端在线升级(简版)

设计思路&#xff1a; 1.版本比较&#xff1a;应用程序检查其当前版本与远程服务器上可用的最新版本 2. 更新状态指示&#xff1a;如果应用程序是不是最新的版本&#xff0c;则页面提示下载最新版本。 3.下载启动&#xff1a;通过plus.downloader.createDownload()启动新应用…

基于javaweb的SpringBoot教务课程管理设计与实现(源码+文档+部署讲解)

技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论文…

使用大语言模型进行Python图表可视化

Python使用matplotlib进行可视化一直有2个问题&#xff0c;一是代码繁琐&#xff0c;二是默认模板比较丑。因此发展出seaborn等在matplotlib上二次开发&#xff0c;以更少的代码进行画图的和美化的库&#xff0c;但是这也带来了定制化不足的问题。在大模型时代&#xff0c;这个…

【JavaEE】MyBatis - Plus

目录 一、快速使用二、CRUD简单使用三、常见注解3.1 TableName3.2 TableFiled3.3 TableId 四、条件构造器4.1 QueryWrapper4.2 UpdateWrapper4.3 LambdaQueryWrapper4.4 LambdaUpdateWrapper 五、自定义SQL 一、快速使用 MyBatis Plus官方文档&#xff1a;MyBatis Plus官方文档…

采用前端技术开源了一个数据结构算法的可视化工具

今天要推荐的开源项目叫VisuAlgoX,是一个面向计算机科学和游戏开发的 交互式算法可视化工具&#xff0c;帮助用户通过直观的动画理解各种数据结构和算法。 项目的前身 由于最近在做一些关于游戏和图形化方面的文章&#xff0c;因此做了一部分相关算法的动态可视化来做配图展示…

体验智谱清言的AutoGLM进行自动化的操作(Chrome插件)

最近体验了很多的大模型&#xff0c;大模型我是一直关注着ChatGLM&#xff0c;因为它确实在7b和8b这档模型里&#xff0c;非常聪明&#xff01; 最近还体验了很多大模型的应用软件&#xff0c;比如Agently、5ire、 mcphost、 Dive、 NextChat等。但是这些一般都是图形界面或者…

pytorch中dataloader自定义数据集

前言 在深度学习中我们需要使用自己的数据集做训练&#xff0c;因此需要将自定义的数据和标签加载到pytorch里面的dataloader里&#xff0c;也就是自实现一个dataloader。 数据集处理 以花卉识别项目为例&#xff0c;我们分别做出图片的训练集和测试集&#xff0c;训练集的标…

Blender模型导入虚幻引擎设置

单位系统不一致 Blender默认单位是米&#xff08;Meters&#xff09;&#xff0c;而虚幻引擎默认使用**厘米&#xff08;Centimeters&#xff09;**作为单位。 当模型从Blender导出为FBX或其他格式时&#xff0c;如果没有调整单位&#xff0c;虚幻引擎会将1米&#xff08;Blen…

Docker基础详解

Docker 技术详解 一、概述 Docker官网&#xff1a;https://docs.docker.com/ 菜鸟教程&#xff1a;https://www.runoob.com/docker/docker-tutorial.html 1.1 什么是Docker&#xff1f; Docker 是一个开源的容器化平台&#xff0c;它允许开发者将应用程序和其依赖项打包到…

FastPillars:一种易于部署的基于支柱的 3D 探测器

FastPillars&#xff1a;一种易于部署的基于支柱的 3D 探测器Report issue for preceding element Sifan Zhou 1 , Zhi Tian 2 , Xiangxiang Chu 2 , Xinyu Zhang 2 , Bo Zhang 2 , Xiaobo Lu11{}^{1}start_FLOATSUPERSCRIPT 1 end_FLOATSUPERSCRIPT11footnotemark: 1 Chengji…