HTML 區(qū)塊

2022-04-18 17:18 更新

HTML <div> 和<span>


HTML 可以通過(guò) <div> 和 <span> 將元素組合起來(lái)。


HTML 區(qū)塊元素

大多數(shù) HTML 元素被定義為塊級(jí)元素內(nèi)聯(lián)元素

塊級(jí)元素在瀏覽器顯示時(shí),通常會(huì)以新行來(lái)開(kāi)始(和結(jié)束)。

實(shí)例: <h1>, <p>, <ul>, <table>


HTML 內(nèi)聯(lián)元素

內(nèi)聯(lián)元素在顯示時(shí)通常不會(huì)以新行開(kāi)始。

實(shí)例: <b>, <td>, <a>, <img>


HTML <div> 元素

<div> 標(biāo)簽可以把文檔分割為獨(dú)立的、不同的部分。

HTML <div> 元素是塊級(jí)元素,它是可用于組合其他 HTML 元素的容器。

<div> 元素沒(méi)有特定的含義。除此之外,由于它屬于塊級(jí)元素,瀏覽器會(huì)在其前后顯示折行。

如果與 CSS 一同使用,<div> 元素可用于對(duì)大的內(nèi)容塊設(shè)置樣式屬性。

<div> 元素的另一個(gè)常見(jiàn)的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用 <table> 元素進(jìn)行文檔布局不是表格的正確用法。<table> 元素的作用是顯示表格化的數(shù)據(jù)。

如果要熟悉 <div> 元素是如何進(jìn)行文檔布局的,您可以在編程測(cè)試中進(jìn)行練習(xí)使用 <div> 元素組合其他 HTML 元素!


HTML <span> 與元素

HTML <span> 元素是內(nèi)聯(lián)元素,可用作文本的容器

<span> 元素也沒(méi)有特定的含義。

當(dāng)與 CSS 一同使用時(shí),<span> 元素可用于為部分文本設(shè)置樣式屬性。


HTML 分組標(biāo)簽

標(biāo)簽 描述
<div> 定義了文檔的區(qū)域,塊級(jí) (block-level)
<span> 用來(lái)組合文檔中的行內(nèi)元素, 內(nèi)聯(lián)元素(inline)


<span>實(shí)例

HTML  <span> 實(shí)例

<p>我有一雙

<span style="color:gold">金色</span> 的

<span style="font-size:50px">大眼睛</span>和 

<span style="color:blue">藍(lán)色的頭發(fā)</span>。

</p> 


嘗試一下 ?

<div>實(shí)例

HTML  <div> 實(shí)例

<p>這是一些文本。</p>

<div style="color:#00FFFF">

<h3>這是一個(gè)在 div 元素中的標(biāo)題。</h3>

<p>這是一個(gè)在 div 元素中的文本。</p>

</div>

<p>這是一些文本。</p>


嘗試一下 ?



以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)