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>標籤，它既是文本標籤，又是塊級標籤

相關文章

相關標籤/搜索

Web 前端開發

WEB前端教室

Web Services 教程

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<