每一個HTML元素都有一個默認的顯示值砚著,它都取決于元素的類型次伶。在CSS中,根據(jù)它的分類我們可以把HTML元素分為三種類型:塊狀元素(block)稽穆、內(nèi)聯(lián)元素(inline)以及內(nèi)聯(lián)塊狀元素(inline-block)冠王。
塊狀元素
- 標簽獨自占據(jù)一行,相鄰塊狀元素不會并列顯示舌镶,且它的順序是自上而下的排列柱彻;
- 在網(wǎng)頁中以塊的形式顯示為矩形區(qū)域;
- 所有塊狀元素都可以定義自己的寬度和高度餐胀;
- 作為其他元素的容器哟楷,可以容納其他內(nèi)聯(lián)和塊狀元素。
塊級元素總是從新的一行開始并占據(jù)可用的全寬度(進可能向左右延伸):
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
常見的塊級元素有(大多為結(jié)構(gòu)性標記):
<h1> ~ <h6>
骂澄、<p>
吓蘑、<div>
、<ul>
坟冲、<ol>
磨镶、<li>
、<dl>
健提、<dt>
琳猫、<dd>
、<table>
私痹、<form>
脐嫂、<hr>
、<pre>
紊遵、<blockquote>
账千、<marquee>
、<address>
暗膜、<article>
匀奏、<aside>
、<canvas>
学搜、<fieldset>
娃善、<figcaption>
论衍、<figure>
、<footer>
聚磺、<header>
坯台、<main>
、<nav>
瘫寝、<noscript>
蜒蕾、<section>
、<tfoot>
矢沿、<video>
滥搭、 等。
內(nèi)聯(lián)元素(行內(nèi)元素)
- 標簽在一行內(nèi)捣鲸,寬度和高度由內(nèi)容決定,只有在內(nèi)容超過HTML的寬度時闽坡,才會換行栽惶;
- 表現(xiàn)形式始終以行內(nèi)逐個進行顯示;
- 沒有自己的形狀疾嗅,不能定義寬高外厂,最小內(nèi)容單元也呈現(xiàn)矩形形狀;
- 遵循盒子模型基本規(guī)則代承。
內(nèi)聯(lián)元素不從新行開始汁蝶,只占用所需的寬度:
<span>內(nèi)聯(lián)元素</span>
常見的內(nèi)聯(lián)元素有(大多為描述性標記):
<span>
、<a>
论悴、<em>
掖棉、<abbr>
、<acronym>
膀估、<bdo>
幔亥、<b>
、<big>
察纯、<button>
帕棉、<bfn>
、<kbd>
饼记、<map>
香伴、<object>
、<output>
具则、<samp>
即纲、<script>
、<small>
乡洼、<sup>
崇裁、<sub>
匕坯、<time>
、<tt>
拔稳、<q>
葛峻、<var>
、<cite>
巴比、<code>
术奖、<label>
、<br>
轻绞、<i>
采记、<select>
、<strong>
等政勃。
內(nèi)聯(lián)塊狀元素
同時具備內(nèi)聯(lián)元素和塊狀元素的特點唧龄。
常見的內(nèi)聯(lián)元素有:<img>
、<input>
課后小練習
- HTML 元素類型我們可以分為哪幾類奸远?
- 分別寫說html不同類型元素(標簽最少不低于5個)
- 分別寫出多種元素類型的不同特點
- 通過對三種元素的認識與初步了解既棺,三者之間的差距和共同點有哪些呢?