web前端之HTML中元素的区分

时间:2024-11-11 13:34:14

作为前端人员,我们就是要与各种超文本标记打交道,用到各种不同的标签元素。在使用的时候不知道有没有注意到他们的分类归属?现在就来说一说博主的见解:

目前博主总结了三种分类方法:一是按封闭来划分,一是按显示内容来划分,一是按文档流来划分。

一、按封闭可分为双标签和单标签。

双标签也就是封闭标签,我们经常写的<html></html>、<div></div>等等成对出现的都是双标签,一般也叫标签对儿。单标签不是说不需要封闭,一般单标签里放的都是文本内容,可在第二个尖括号前加一个反斜线表示封闭,比如<hr />、<img src="1.jpg" />、<input type="text" />,也可以不加。

二、按显示内容可划分为容器级标签和文本级标签。

所谓文本级标签就是标签里面只能放文字、图片、链接等等,比如<p>、<a>、<em>、<b>等等。而容器级标签就是标签里面还可以继续使用标签,比如<div>、<li>、<h1>、<pre>等等。一般都是容器级标签和文本级标签组合使用来满足我们编写代码的需求的。

三、按文档流可分为块级标签和行级标签

不太好理解,先来说说他他们的特点吧

块级元素具有以下特点:

①总是在新行上开始,占据一整行;

②高度,行高以及外边距和内边距都可控制;

③宽带始终是与浏览器宽度一样,与内容无关;

④它可以容纳内联元素和其他块元素。

行内元素的特点

①和其他元素都在一行上;

②高,行高及外边距和内边距部分可改变;

③宽度只与内容有关;

④行内元素只能容纳文本或者其他行内元素。

常见的块级标签有<div>、<h1>、<dl>、<P>等等,常见的行级标签有<span>、<img>、<input>、<sub>等等。

块级标签和行级标签可以使用 display 属性通过设置不同的值来相互转换,

      display:block;转换为块元素;display:inline;转换为行内元素,而display:inline-block;转换为行内块元素。

      所有的文本标签都是行内标签,所有的容器级标签都是块级标签

    需要注意的是 <p>标签,它既是文本标签,又是块级标签