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>
    标题元素，占据一行/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="1.png" width="100px" />
    		img src="1.png" width="100px" />
    		p>
    换一行看看文字效果，我是一段测试代码，b>
    被b标签加粗/b>
    。我是一段测试代码，i>
    被i标签变成斜体/i>
    。/p>
    /html>
    

效果图：

行内块状元素

特点：

1、和其他元素都在一行上，不会自动换行，默认排列方式为从左到右；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

行内块状元素综合了行内元素和块状元素的特点，但是各有取舍。因此行内块状元素在日常的使用中，由于其特点，使用的次数也比较多，在很多方面都很有用。

总结：以上就是本篇文章所介绍的html标签元素的三个类型，分别为：块状元素，行内元素，行内块状元素；以及常用的块状元素与行内元素介绍。每种类型的标签都有每种的特点，大家可以自己动手尝试，看看不同标签的使用，加深理解，根据需要在不同的情况下使用不同的标签。希望能对大家的学习有所帮助，更多相关教程请访问： HTML视频教程，HTML5视频教程，bootstrap视频教程！

以上就是html标签元素有哪些种类？html的常用标签元素的介绍的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！