html標簽中元素顯示模式

素顯示模式就是元素（標簽）以什么方式進行顯示，比如div標簽自己占一行，一行可以放多個span標簽。

HTML 元素分為塊元素、行內元素、行內塊元素，它們具體的用法和區別如下：

塊元素：

塊元素是用于定義一個獨立的區域，比如一個段落、一個標題、一個表格等。

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

特點

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

行內元素：

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

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

特點：

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

注意：

鏈接里面不能再放鏈接。
特殊情況下a標簽中可以放塊級元素，但給a標簽轉換一下塊級模式最安全。

行內塊元素：

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

常用的行內塊元素有：

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

特點：

在行內元素中有幾個特殊的標簽，img、input、td，它們同時具有行內元素和塊元素的特點。

這三種元素的主要區別是：

1.塊元素定義了一個獨立的區域，不會和其他元素融合在一起，而行內元素和行內塊元素都屬于行內元素，它們都可以包含其他元素。

2.塊元素可以設置高度和外邊距，而行內元素和行內塊元素都不能設置高度和外邊距。

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

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

顯示模式轉換

特殊情況下，我們需要元素模式的轉換，比如要增加a標簽鏈接的觸發范圍。

轉換為塊元素：display:block;
轉換為行內元素：display:inline;
轉換為行內塊：display:inline-block;

我們訪問網站成功后,網站服務器會發送給我們網頁代碼,瀏覽器看到代碼后,就解釋成,我們平時看到的,有文字、圖片、視頻等的網頁了.

上面這個過程,可以簡單理解為我們訪問網站,網站服務器發送給我們普通人看不懂的數據,瀏覽器這個時候充當我們的翻譯官,給我們翻譯成了我們最終看到的網頁.

服務器發送過來的網頁數據主要由三個部分組成HTML、CSS、JavaScript

HTML是描述網頁的一種語言,這種語言是程序員和瀏覽器溝通的語言,全名叫超文本標記語言.

它有很多標簽,網頁中的文字、按鈕、圖片、視頻等等復制元素都可以用標簽表達,如圖片就用img標簽,視頻用video標簽等

網頁的結構來決定網頁內容顯示的先后,網頁的結構則需要div標簽來布局,一般用div標簽的嵌套和各種標簽組合來構建網頁結構.

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

只有HTML網頁是不美觀的,而CSS就決定了網頁的顏值.

JavaScript,簡稱JS,是一種腳本語言,它用來做一些和我們互動的行為,如進度條、提示框等.

總的來說,HTML定義顯示的內容和結構,CSS描述網頁外觀和布局,JavaScript完成網頁的行為.

網頁基本結構的源代碼

瀏覽器的網頁顯示

avaScript 沒有任何打印或者輸出的函數。

JavaScript 顯示數據

JavaScript 可以通過不同的方式來輸出數據：

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

使用 window.alert()

代碼練習：

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

運行結果：

在線咨詢

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商