html標(biāo)簽中元素顯示模式

素顯示模式就是元素（標(biāo)簽）以什么方式進(jìn)行顯示，比如div標(biāo)簽自己占一行，一行可以放多個(gè)span標(biāo)簽。

HTML 元素分為塊元素、行內(nèi)元素、行內(nèi)塊元素，它們具體的用法和區(qū)別如下：

塊元素：

塊元素是用于定義一個(gè)獨(dú)立的區(qū)域，比如一個(gè)段落、一個(gè)標(biāo)題、一個(gè)表格等。

常見的塊元素有：h1-h6、div（最典型）、p、ol、ul、li等。

特點(diǎn)

塊元素獨(dú)占一行。
高度、寬度、外邊距、內(nèi)邊距都可以控制。
寬度默認(rèn)是容器（父級(jí)寬度）的100%。
是一個(gè)容器及盒子，里面可以放行內(nèi)或者塊級(jí)元素。
文字類的塊元素內(nèi)不能使用塊級(jí)元素，如h1-h6 和 p 標(biāo)簽，里面不能放其他類型的塊級(jí)元素。

行內(nèi)元素：

行內(nèi)元素是用于在同一行內(nèi)顯示文本，并不需要包含在其他元素內(nèi)。

常用的行內(nèi)元素有：a、strong、em、del、ins、b、i、u、span（最典型）等。

特點(diǎn)：

相鄰行內(nèi)元素在一行上，一行可以顯示多個(gè)行內(nèi)元素。
寬、高直接設(shè)置是無效的。
默認(rèn)寬度就是它本身內(nèi)容的寬度。
行內(nèi)元素只能容納文本和其他行內(nèi)元素。

注意：

鏈接里面不能再放鏈接。
特殊情況下a標(biāo)簽中可以放塊級(jí)元素，但給a標(biāo)簽轉(zhuǎn)換一下塊級(jí)模式最安全。

行內(nèi)塊元素：

行內(nèi)塊元素是用于在同一行內(nèi)顯示文本，并不需要包含在其他元素內(nèi)，但是可以包含圖片或其他多個(gè)文本元素。

常用的行內(nèi)塊元素有：

<blockquote>：用于引用其他文檔中的文本，可以設(shè)置引用文本的樣式。
<figure>：用于在同一行內(nèi)顯示圖片或其他多個(gè)文本元素，可以設(shè)置圖片或其他多個(gè)文本元素的樣式。

特點(diǎn)：

在行內(nèi)元素中有幾個(gè)特殊的標(biāo)簽，img、input、td，它們同時(shí)具有行內(nèi)元素和塊元素的特點(diǎn)。

這三種元素的主要區(qū)別是：

1.塊元素定義了一個(gè)獨(dú)立的區(qū)域，不會(huì)和其他元素融合在一起，而行內(nèi)元素和行內(nèi)塊元素都屬于行內(nèi)元素，它們都可以包含其他元素。

2.塊元素可以設(shè)置高度和外邊距，而行內(nèi)元素和行內(nèi)塊元素都不能設(shè)置高度和外邊距。

3.塊元素只能包含文本或其他圖片等元素，而行內(nèi)元素和行內(nèi)塊元素都可以包含其他任意類型的元素。

4.塊元素的外邊距、填充、寬度等屬性可以根據(jù)實(shí)際需求設(shè)置，而行內(nèi)元素和行內(nèi)塊元素的樣式則完全根據(jù)實(shí)際需求設(shè)置。

顯示模式轉(zhuǎn)換

特殊情況下，我們需要元素模式的轉(zhuǎn)換，比如要增加a標(biāo)簽鏈接的觸發(fā)范圍。

轉(zhuǎn)換為塊元素：display:block;
轉(zhuǎn)換為行內(nèi)元素：display:inline;
轉(zhuǎn)換為行內(nèi)塊：display:inline-block;

我們?cè)L問網(wǎng)站成功后,網(wǎng)站服務(wù)器會(huì)發(fā)送給我們網(wǎng)頁(yè)代碼,瀏覽器看到代碼后,就解釋成,我們平時(shí)看到的,有文字、圖片、視頻等的網(wǎng)頁(yè)了.

上面這個(gè)過程,可以簡(jiǎn)單理解為我們?cè)L問網(wǎng)站,網(wǎng)站服務(wù)器發(fā)送給我們普通人看不懂的數(shù)據(jù),瀏覽器這個(gè)時(shí)候充當(dāng)我們的翻譯官,給我們翻譯成了我們最終看到的網(wǎng)頁(yè).

服務(wù)器發(fā)送過來的網(wǎng)頁(yè)數(shù)據(jù)主要由三個(gè)部分組成HTML、CSS、JavaScript

HTML是描述網(wǎng)頁(yè)的一種語(yǔ)言,這種語(yǔ)言是程序員和瀏覽器溝通的語(yǔ)言,全名叫超文本標(biāo)記語(yǔ)言.

它有很多標(biāo)簽,網(wǎng)頁(yè)中的文字、按鈕、圖片、視頻等等復(fù)制元素都可以用標(biāo)簽表達(dá),如圖片就用img標(biāo)簽,視頻用video標(biāo)簽等

網(wǎng)頁(yè)的結(jié)構(gòu)來決定網(wǎng)頁(yè)內(nèi)容顯示的先后,網(wǎng)頁(yè)的結(jié)構(gòu)則需要div標(biāo)簽來布局,一般用div標(biāo)簽的嵌套和各種標(biāo)簽組合來構(gòu)建網(wǎng)頁(yè)結(jié)構(gòu).

CSS它的全名叫層疊樣式表,可以指定網(wǎng)頁(yè)中的文字大小、顏色、間距-即元素之間的距離、元素的排列等

只有HTML網(wǎng)頁(yè)是不美觀的,而CSS就決定了網(wǎng)頁(yè)的顏值.

JavaScript,簡(jiǎn)稱JS,是一種腳本語(yǔ)言,它用來做一些和我們互動(dòng)的行為,如進(jìn)度條、提示框等.

總的來說,HTML定義顯示的內(nèi)容和結(jié)構(gòu),CSS描述網(wǎng)頁(yè)外觀和布局,JavaScript完成網(wǎng)頁(yè)的行為.

網(wǎng)頁(yè)基本結(jié)構(gòu)的源代碼

瀏覽器的網(wǎng)頁(yè)顯示

avaScript 沒有任何打印或者輸出的函數(shù)。

JavaScript 顯示數(shù)據(jù)

JavaScript 可以通過不同的方式來輸出數(shù)據(jù)：

使用 window.alert() 彈出警告框。
使用 document.write() 方法將內(nèi)容寫到 HTML 文檔中。
使用 innerHTML 寫入到 HTML 元素。
使用 console.log() 寫入到瀏覽器的控制臺(tái)。

使用 window.alert()

代碼練習(xí)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用 window.alert()</title>
</head>
<body>
<script>
    window.alert(5 + 6);
</script>
</body>
</html>

運(yùn)行結(jié)果：

在線咨詢

上一篇：做HTML5，需要哪些工具？
下一篇：5 個(gè)頂級(jí)的 JavaScript Ajax 組件和

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商