HTML的div、span標籤是什麼以及怎麼用

News:
我的編程學習筆記倉庫已經出爐上線,正在快速維護中……
地址:https://github.com/Github-Programer/LeetCode-Notes

學習HTML去網上搜索,<div>標籤和<span>標籤都沒有詳細解釋,我仔細看了W3Cschool和菜鳥教程才明白,我來說一下

Div和Span目錄:

<div>標籤

菜鳥教程中這一章叫做‘區塊’,第一反應是區塊鏈,第二次看才明白是設定區域

大多數 HTML 元素被定義爲塊級元素或內聯元素。

塊級元素在瀏覽器顯示時,通常會以新行來開始(和結束)。

實例:
文檔中的一個區域將顯示爲藍色:

<div style="color:#0000FF">
  <h3>這是一個在 div 元素中的標題。</h3>
  <p>這是一個在 div 元素中的文本。</p>
</div>

在這裏插入圖片描述
div標籤的瀏覽器支持
在這裏插入圖片描述
再來一個實例:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
</head>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的網頁標題</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜單</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
內容在這裏</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版權 © runoob.com</div>

</div>
 
</body>
</html>

在這裏插入圖片描述

<span>標籤

實例: 使用 <span> 元素對文本中的一部分進行着色:
<p>我的母親有 <span style="color:blue">藍色</span> 的眼睛。</p>

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章