極客書

HTML - Blocks

所有的HTML元素可以分爲兩類：塊級元素（a）（b）內聯元素。

Block Elements

塊元素顯示在螢幕上，就好像它們前後都有換行符一樣。例如，<p>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<ul>、<ol>、<dl>、<pre>、<hr/>、<blockquote>和<address>元素都是塊級元素。它們都是從自己的新線開始的，任何跟隨它們的東西都會出現在自己的新線上。

Inline Elements

另一方面，內聯元素可以出現在句子中，而不必出現在它們自己的新行中。<b>、<i>、<u>、<em>、<strong>、<sup>、<sub>、<big>、<small>、<li>、<ins>、<del>、<code>、<cite>、<dfn>、<kbd>和<var>元素都是內聯元素。

Grouping HTML Elements

我們經常使用兩個重要的標記來對各種其他HTML標記進行分組（i）<div>標記和（ii）<span>標記

The <div> tag

這是非常重要的塊級標記，它在分組其他各種HTML標記和在元素組上應用CSS方面起著很大的作用。即使現在<div>標記也可以用於創建網頁布局，在其中，我們使用<div>標記定義頁面的不同部分（左、右、上等）。此標記不提供塊上的任何視覺更改，但當它與CSS一起使用時，它具有更大的意義。

Example

下面是一個簡單的<div>標記示例。我們將在單獨的一章中學習層疊樣式表（CSS），但是我們在這裡使用它來顯示<div>tag−的用法;

Live Demo 
<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML div Tag</title>
   </head>
	
   <body>
      <!-- First group of tags -->
      <div style = "color:red">
         <h4>This is first group</h4>
         <p>Following is a list of vegetables</p>
         
         <ul>
            <li>Beetroot</li>
            <li>Ginger</li>
            <li>Potato</li>
            <li>Radish</li>
         </ul>
      </div>

      <!-- Second group of tags -->
      <div style = "color:green">
         <h4>This is second group</h4>
         <p>Following is a list of fruits</p>
         
         <ul>
            <li>Apple</li>
            <li>Banana</li>
            <li>Mango</li>
            <li>Strawberry</li>
         </ul>
      </div>
   </body>
   
</html>

這將產生以下結果&負;

The <span> tag

HTML<span>是一個內聯元素，可用於對HTML文檔中的內聯元素進行分組。此標記也不會對塊提供任何可視更改，但在與CSS一起使用時具有更多含義。

<span>標記與<div>標記的區別在於，<span>標記與內聯元素一起使用，而<div>標記與塊級元素一起使用。

Example

下面是一個簡單的<span>標記示例。我們將在單獨的一章中學習層疊樣式表（CSS），但我們在這裡使用它來顯示<span>標記的用法;

Live Demo 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML span Tag</title>
   </head>
	
   <body>
      <p>This is <span style = "color:red">red</span> and this is
         <span style = "color:green">green</span></p>
   </body>
	
</html>

這將產生以下結果&負;