HTML:元素分类

HTML:元素分类

  • 概述
  • 块级元素(Block-level Elements)
  • 内联元素(Inline Elements)
  • 替换元素(Replaced Elements)
  • 表单元素(Form Elements)

概述

HTML(HyperText Markup Language)是网页开发中最基础的语言之一,它通过一系列的元素(或标签)来描述网页的结构和内容。HTML中的元素可以根据其功能和用途进行分类,这些分类有助于理解和使用HTML语言。本文将介绍HTML元素的主要分类及其特点,并提供相应的HTML代码示例。

块级元素(Block-level Elements)

块级元素是指在网页上以块的形式显示的元素,它们通常会独占一行或者一块区域。块级元素从新行开始,前后都会有额外的空白。

常见的块级元素包括

< div >:用于组织内容或创建页面区块。
< p >:定义段落。
< h1 > 到 < h6 >:定义标题,其中 < h1 > 是最高级别的标题。
< ul > 和 < ol >:分别定义无序列表和有序列表。
< li >:定义列表项,通常嵌套在 < ul > 或 < ol > 中。
< table >:定义表格。
< form >:定义表单,用于用户输入和提交数据。

<!DOCTYPE html>
<html>
<head>
    <title>Block-level Elements Example</title>
</head>
<body>
    <div>
        <h1>This is a heading</h1>
        <p>This is a paragraph inside a div.</p>
    </div>
    <p>This is another paragraph.</p>
</body>
</html>

在这里插入图片描述

内联元素(Inline Elements)

内联元素是在文本行内出现的元素,它们不会导致文本换行。内联元素通常用于包裹文本的一部分。

常见的内联元素包括
< span >:用于封装文本的小块。
< strong > 和 < em >:分别表示强调和强调斜体。
< a >:创建超链接。
< img >:插入图像。
< br >:插入换行。
< input >:通常用于表单,如文本框和复选框。

<!DOCTYPE html>
<html>
<head>
    <title>Inline Elements Example</title>
</head>
<body>
    <p>This is <strong>strong</strong> and <em>emphasized</em> text.</p>
    <p>Visit our <a href="https://www.example.com">website</a> for more information.</p>
</body>
</html>

在这里插入图片描述

替换元素(Replaced Elements)

替换元素是指其内容的显示不是由元素本身决定的,而是由元素的外部资源决定,比如图像、视频等。

常见的替换元素包括
< img >:插入图像。
< video >:播放视频。
< audio >:播放音频。

<!DOCTYPE html>
<html>
<head>
    <title>Replaced Elements Example</title>
</head>
<body>
    <img src="image.jpg" alt="Description of image">
    <video controls>
        <source src="video.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</body>
</html>

在这里插入图片描述

表单元素(Form Elements)

表单元素用于创建交互式表单,允许用户输入数据并提交到服务器。

常见的表单元素包括
< form >:定义表单。
< input >:输入框,如文本框、密码框、复选框等。
< label >:标签,用于关联表单元素。
< button >:按钮,用于提交表单或执行其他操作。
< select > 和 < option >:下拉列表。
< textarea >:多行文本输入框。

<!DOCTYPE html>
<html>
<head>
    <title>Form Elements Example</title>
</head>
<body>
    <form action="/submit-form" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name"><br><br>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email"><br><br>
        
        <input type="submit" value="Submit">
    </form>
</body>
</html>

在这里插入图片描述

这些是HTML中常见的元素分类及其具体的元素示例。通过这些示例,你可以更好地了解不同类型的HTML元素以及它们的用途和特点。

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

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

相关文章

如何使用Spring Boot导出数据到Excel表格

在开发应用程序时&#xff0c;经常会遇到将数据导出到Excel表格的需求。Spring Boot提供了简单而有效的方法来实现这个功能。本文将介绍如何使用Spring Boot和Apache POI库将数据导出到Excel表格&#xff0c;并提供一个示例代码来演示该过程。 1. 准备工作 首先&#xff0c;确…

从Paint 3D入门glTF

Paint 3D Microsoft Paint 3D是微软的一款图像编辑软件&#xff0c;它是传统的Microsoft Paint程序的升级版。 这个新版本的Paint专注于三维设计和创作&#xff0c;使用户可以使用简单的工具创建和编辑三维模型。 Microsoft Paint 3D具有直观的界面和易于使用的工具&#xff0…

C语言入门课程学习笔记-7

C语言入门课程学习笔记-7 第31课 - 初探程序中的函数实验-函数调用实验-函数求前n个正整数和 第32课 - 深入浅出函数调用第33课 - 函数定义细节剖析实验-返回int实验-返回void 第34课 - 函数参数深度剖析实验-形参实参实验-数组元素作为函数形参小结 第35课 - 编写函数对数组排…

WebAuthn 无密码身份认证

文章目录 WebAuthn简介工作原理组成部分架构实现注册认证应用场景案例演示 WebAuthn简介 WebAuthn&#xff0c;全称 Web Authentication&#xff0c;是由 FIDO 联盟&#xff08;Fast IDentity Online Alliance&#xff09;和 W3C&#xff08;World Wide Web Consortium&#x…

cisp证有用吗?

CISP证书肯定是有用的&#xff01;就像你说的&#xff0c;少一个证不如多一个证&#xff0c;总比“证到用时方恨少”的好&#xff01;既然你想往网络安全方向发展&#xff0c;考个CISP还是有必要的&#xff0c;CISP目前考试比较简单&#xff0c;拿证书还是比较容易的&#xff0…

【天龙怀旧服】攻略day8

关键字&#xff1a; 高血祭学习、角色伤害、幻魂升级 1】高血祭学习是否需要花费99金 珍兽手动技能分为分开阳类/破军类 高血祭属于开阳类 当已学会开阳类&#xff08;如肉墙&#xff09;学习高血祭&#xff0c;仅需1.70金&#xff0c;属于替换 而已学会破军类&#xff08;…

GitLab常用指令!(工作中常用的)

目录 克隆代码创建分支切换分支将代码提交到分支当中Merge合并 克隆代码 复制完地址&#xff0c;打开Git Bash&#xff0c;然后 git clone “复制的地址”创建分支 创建new_test分支 git branch new_test切换分支 切换到new_test分支 git checkout new_test将代码提交到分…

element的el-table 解决表格多页选择数据时,数据被清空

问题&#xff1a;切换页码时&#xff0c;勾选的数据会被清空 重点看我圈出来的&#xff0c;直接复制&#xff0c;注意&#xff0c;我这里 return row.productId;一般大家的是 return row.id,根据接口定的唯一变量 :row-key"getRowKeys"​​​​​​​:reserve-sele…

预编码算法学习笔记

文章目录 1. 基本原理2. 常见应用2.1 自编码器2.2 变分自编码器2.3 稀疏自编码器 3. 学习笔记 在机器学习领域&#xff0c;预编码算法是一种强大的工具&#xff0c;用于将高维数据映射到低维表示&#xff0c;从而提取数据中的重要特征。本文将介绍预编码算法的基本原理、常见应…

Spring - 9 ( 10000 字 Spring 入门级教程 )

一&#xff1a; MyBatis XML 配置文件 Mybatis 的开发有两种方式&#xff1a; 注解XML 我们已经学习了注解的方式, 接下来我们学习 XML 的方式 MyBatis XML 的方式需要以下两步: 配置数据库连接字符串和 MyBatis写持久层代码 1.1 配置连接字符串和 MyBatis 此步骤需要进…

04 Docker练习赛从0开始到 docker 镜像提交

1.1 本地安装 docker 工具 这里以ubutun下安装docker为例,其他操作系统安装命令略有不同,可自行百度。(建议使用阿里源安装速度快) sudo apt install docker.io如果你本地有gpu,请继续执行如下命令以支持gpu调用: 注意: 英伟达对 docker 支持的 linux 发行版:https:/…

虹科Pico汽车示波器 | 免拆诊断案例 | 起动机免拆诊断故障 2 例

电磁开关、换向器烧蚀及炭刷磨损均会导致起动机偶尔不工作&#xff0c;使发动机偶尔无法起动。由于故障是偶发的&#xff0c;且没有故障代码&#xff0c;这往往会让维修人员无从下手&#xff0c;而用Pico示波器测量起动电流&#xff0c;就会让这些“亚健康状态”一目了然。 案例…

逆向第一步 去掉debugger(无任何门槛小白可学习)

准备工具 1.ReRes 地址&#xff1a;ReRes 用法&#xff1a; 用法 2.nodepad 地址&#xff1a;nodepad 注意下载后缀为.x64.exe版本的 我这里下的npp.8.6.5.Installer.x64.exe 3给nodepad装上JSTool插件 下载 可省略下叙详细步骤点此链接直接下载 JSToolNpp 然后到导…

Instal IIS on Windows Server 2022 Datacenter

和以往版本一样&#xff0c;没有什么不同&#xff0c;So easy&#xff01; WinR - ServerManager.exe 打开服务器管理器&#xff0c;点击【添加角色和功能】&#xff0c;选择自己想要的角色和功能。 一、开始之前&#xff1a;帮助说明&#xff0c;点击【下一步】&#xff1b;…

GZIP格式解析和Deflate静态Huffman解压缩

GZIP是封装了Deflate压缩的格式文件&#xff0c;Deflate使用了无压缩、HuffmanLZ77进行压缩&#xff0c;Huffman包括静态Huffman和动态Huffman。 Java实现了GZIP格式解析&#xff0c;静态Huffman解压缩&#xff0c;CRC32校验 gzip文件格式解析代码&#xff1a; BinaryInputSt…

Docker容器---docker-Consul部署

一、Docker-consul简介 1、概述 consul是google开源的一个使用go语言开发的服务管理软件。支持多数据中心、分布式高可用的、服务发现和配置共享。采用Raft算法&#xff0c;用来保证服务的高可用。内置了服务注册与发现框架、分布一致性协议实现、健康检查、Key/Value存储、多…

Java Maven 编译资源文件拷贝错误 dirCompressed.zip failed with MalformedInputException:

完整的错误信息为&#xff1a; [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.3.1:resources (default-resources) on project core-java-io: filtering C:\WorkDir\Repository\iSharkfly-Docs\java-tutorials\core-java-modules\core-ja…

基于ssm+vue+Mysql的房屋租赁系统求租合同

开发语言&#xff1a;Java框架&#xff1a;ssmJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;Maven3.…

JAVA前端快速入门基础_javascript入门(02)

写在前面:本文用于快速学会简易的JS&#xff0c;仅做扫盲和参考作用 1.JavaScript函数 什么是函数:执行特定任务的代码块 1.1定义&#xff1a; 使用function来进行定义(类似于python里面的def 或者java和c里面的void&#xff0c;int这些返回类型开头)。定义规则如下: func…

【17】JAVASE-集合专题【从零开始学JAVA】

Java零基础系列课程-JavaSE基础篇 Lecture&#xff1a;波哥 Java 是第一大编程语言和开发平台。它有助于企业降低成本、缩短开发周期、推动创新以及改善应用服务。如今全球有数百万开发人员运行着超过 51 亿个 Java 虚拟机&#xff0c;Java 仍是企业和开发人员的首选开发平台。…