本篇文章给大家带来的内容是介绍html标签元素的种类，让大家了解html中常用的标签元素有哪些？有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
首先我们来了解一下html标签元素可以分成哪些类型？
HTML中标签元素一般会分成三种不同类型，分别为：块状元素，行内元素，行内块状元素。
下面我们来详细介绍一下这三种类型元素的特点以及用处，并且让大家了解常用的块状元素与行内元素有哪些？
块状元素
特点：
1、独占一行，每一个块状元素都会从新的一行重新开始，从上到下排布
2、可以直接控制宽度、高度以及盒子模型的相关css属性（元素的高度、宽度、行高以及顶和底边距都可设置）
3、在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度
4、在不设置高度的情况下，块级元素的高度是它本身内容的高
因为它自身具有的这些特点，我们通常会使用块状元素来进行大布局（大结构）的搭建。
常用的块状元素：
1、普通元素
div（常用块状容器，也是css layout的主要标签）、p（段落）、hr（水平分隔线）、table（ 表格）、form（交互表单）
2、标题元素：
h1（大标题）、h2（副标题）、h3（三级标题）、h4 （四级标题）、h5 （五级标题）、h6（六级标题）
3、列表元素
menu（菜单列表）、ol（有序列表）、ul（无序列表）、li（列表项）、dl（定义列表）、dt（定义术语）、dd（定义描述）
我们通过简单代码来看看这些块状元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>块状元素</title>
<style>
div{
background-color: palegoldenrod;
}
p{
background-color:paleturquoise ;
}
h4{
background-color:papayawhip;
}
ul{
background-color: peru;
}
</style>
</head>
<body>
<div>div标签元素，占据一行</div>
<p>p标签元素，占据一行</p>
<h4 id="标题元素-占据一行">标题元素，占据一行</h4>
<ul>
<li>ul1 li 标签 元素</li>
<li>ul1 li 标签 元素</li>
</ul>
<ul>
<li>ul2 li 标签 元素</li>
<li>ul2 li 标签 元素</li>
</ul>
</body>
</html>效果图：
行内元素
特点：
1、和其他内联元素从左到右在一行显示
2、不能直接控制宽度、高度以及盒子模型的相关css属性，但是直接设置内外边距的左右值是可以的
3、内联元素的宽高是由本身内容的大小决定（文字、图片等）
4、内联元素只能容纳文本或者其他内联元素（此处请注意，不要在内联元素中嵌套块级元素）
因为它自身具有的这些特点，我们通常会使用行内元素来进行文字、小图标（小结构）的搭建。
常用的行内元素：
1、普通元素标签
span（常用内联容器，定义文本内区块），a（锚点，链接），img（引入图片），br（强制换行），sub（下标），sup（上标）
2、文本文字修饰标签
b（加粗），strong（加粗强调），i（斜体），em（斜体强调），，big（大字体文本），small（ 小字体文本），s（中划线（不推荐使用）），strike（中划线），del（文档中已被删除的文本），u（下划线）
3、表单内使用的标签元素
textarea（多行文本输入框），input（输入框），select（下拉列表），label input（元素定义标注（标记））
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行内元素</title>
<style>
span{
background-color: palegoldenrod;
}
p{
background-color:paleturquoise ;
}
</style>
</head>
<body>
<span>span标签元素1</span>
<span>span标签元素2</span>
<img src="/static/imghwm/default1.png" data-src="1.png" class="lazy" style="max-width:90%" / alt="html标签元素有哪些种类？html的常用标签元素的介绍" >
<img src="/static/imghwm/default1.png" data-src="1.png" class="lazy" style="max-width:90%" / alt="html标签元素有哪些种类？html的常用标签元素的介绍" >
<p>换一行看看文字效果，我是一段测试代码，<b>被b标签加粗</b>。我是一段测试代码，<i>被i标签变成斜体</i>。</p>
</html>效果图：
行内块状元素
特点：
1、和其他元素都在一行上，不会自动换行，默认排列方式为从左到右；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
行内块状元素综合了行内元素和块状元素的特点，但是各有取舍。因此行内块状元素在日常的使用中，由于其特点，使用的次数也比较多，在很多方面都很有用。
总结：以上就是本篇文章所介绍的html标签元素的三个类型，分别为：块状元素，行内元素，行内块状元素；以及常用的块状元素与行内元素介绍。每种类型的标签都有每种的特点，大家可以自己动手尝试，看看不同标签的使用，加深理解，根据需要在不同的情况下使用不同的标签。希望能对大家的学习有所帮助，更多相关教程请访问： HTML视频教程，Html5视频教程，bootstrap视频教程！
以上是html标签元素有哪些种类？html的常用标签元素的介绍的详细内容。更多信息请关注PHP中文网其他相关文章！
HTML超文本标记语言--超在那里？（文档分析）Aug 02, 2022 pm 06:04 PM本篇文章带大家了解一下HTML（超文本标记语言），介绍一下HTML的本质，HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单，希望对大家有所帮助！
html和css算编程语言吗Sep 21, 2022 pm 04:09 PM不算。html是一种用来告知浏览器如何组织页面的标记语言，而CSS是一种用来表现HTML或XML等文件样式的样式设计语言；html和css不具备很强的逻辑性和流程控制功能，缺乏灵活性，且html和css不能按照人类的设计对一件工作进行重复的循环，直至得到让人类满意的答案。
web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM总结了一些web前端面试（笔试）题分享给大家，本篇文章就先给大家分享HTML部分的笔试题（附答案），大家可以自己做做，看看能答对几个！
html中document是什么Jun 17, 2022 pm 04:18 PM在html中，document是文档对象的意思，代表浏览器窗口的文档；document对象是window对象的子对象，所以可通过“window.document”属性对其进行访问，每个载入浏览器的HTML文档都会成为Document对象。
HTML5中画布标签是什么May 18, 2022 pm 04:55 PMHTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。
html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PMhtml5废弃了dir列表标签。dir标签被用来定义目录列表，一般和li标签配合使用，在dir标签对中通过li标签来设置列表项，语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir，可使用ul标签取代。
Html5怎么取消td边框May 18, 2022 pm 06:57 PM3种取消方法：1、给td元素添加“border:none”无边框样式即可，语法“td{border:none}”。2、给td元素添加“border:0”样式，语法“td{border:0;}”，将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式，语法“td{border:transparent;}”，将td边框的颜色设置为透明即可。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
WebStorm Mac版
好用的JavaScript开发工具
Dreamweaver Mac版
视觉化网页开发工具
安全考试浏览器
Safe Exam Browser是一个安全的浏览器环境，用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问，并防止学生使用未经授权的资源。
VSCode Windows 64位 下载
微软推出的免费、功能强大的一款IDE编辑器
记事本++7.3.1
好用且免费的代码编辑器
