web前端之HTML中元素的区分

时间 2019-12-05

标签 web 前端 html 元素区分栏目 HTML 繁體版

原文原文链接

做为前端人员，咱们就是要与各类超文本标记打交道，用到各类不一样的标签元素。在使用的时候不知道有没有注意到他们的分类归属？如今就来讲一说博主的看法:html

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

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

双标签也就是封闭标签，咱们常常写的<html></html>、<div></div>等等成对出现的都是双标签，通常也叫标签对儿。单标签不是说不须要封闭，通常单标签里放的都是文本内容，可在第二个尖括号前加一个反斜线表示封闭，好比<hr />、<img src="1.jpg" />、<input type="text" />，也能够不加。浏览器

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

所谓文本级标签就是标签里面只能放文字、图片、连接等等，好比<p>、<a>、<em>、<b>等等。而容器级标签就是标签里面还能够继续使用标签，好比<div>、<li>、<h1>、<pre>等等。通常都是容器级标签和文本级标签组合使用来知足咱们编写代码的需求的。spa

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

不太好理解，先来讲说他他们的特色吧htm

块级元素具备如下特色：图片

①老是在新行上开始，占据一整行；文档

②高度，行高以及外边距和内边距均可控制；input

③宽带始终是与浏览器宽度同样，与内容无关；io

④它能够容纳内联元素和其余块元素。class

行内元素的特色：

①和其余元素都在一行上；

②高，行高及外边距和内边距部分可改变；

③宽度只与内容有关；

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

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

块级标签和行级标签可使用 display 属性经过设置不一样的值来相互转换，

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

全部的文本标签都是行内标签，全部的容器级标签都是块级标签

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