HTML 標題 段落

HTML 標題

在 HTML 文件中,標題很重要。

標題(Heading)是透過 <h1> - <h6> 等標籤定義的。

<h1> 定義最大的標題。 <h6> 定義最小的標題。


實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
</body>
</html>

程式運行結果:

2.png

註解:瀏覽器會自動地在標題的前後新增空白行。

註解:預設情況下,HTML 會自動地在區塊級元素前後新增一個額外的空白行,例如段落、標題元素前後。


標題很重要

#請確保將HTML heading 標籤只使用於標題。不要只是為了產生粗體或大號的文字而使用標題。

搜尋引擎使用標題為您的網頁的結構和內容編制索引。

因為使用者可以透過標題來快速瀏覽您的網頁,所以用標題來呈現文件結構是很重要的。

應該將 h1 用作主標題(最重要的),其後是 h2(次重要的),再其次是 h3,以此類推。


HTML 水平線

#<hr />標籤在HTML頁面中建立水平線。

hr 元素可用來分隔內容。


範例

#下面的程式碼會輸出標題和水平線

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>php.cn</title>
 </head>
 <body>
 
 <h1>这是第一个标题</h1>
 <hr/>
 <h2>这是第二个标题</h2>
 <hr/>
 
 </body>
 </html>

程式運行結果:

6.png


#上面的程式碼輸出了<h1>標題和<h6>標題,還有兩條水平線


HTML 段落

#段落是透過<p> 標籤定義的。

直接看範例

實例

#
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<body>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
</body>
</html>

程式執行結果:

這是第一個段落。

這是第二段。

註解:瀏覽器會自動地在段落的前後新增空白行。 (<p> 是區塊級元素)

提示:使用空白的段落標記 <p></p> 去插入一個空白行是個壞習慣。用 <br /> 標籤代替它! (但不要用<br /> 標籤去建立清單。不要急,您將在稍後的篇幅學習到HTML 清單。)


#不要忘記結束標籤

即使忘了使用結束標籤,大多數瀏覽器也會正確地將HTML 顯示出來,就像下面一樣:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<body>
<p>忘记了结束标签
<p>忘记了结束标签
</body>
</html>

程式運作結果:

忘了結束標籤

#忘了結束標籤   


#上面的範例在大多數瀏覽器中都沒問題,但不要依賴這種做法。忘記使用結束標籤會產生意想不到的結果和錯誤。


註解
:在未來的 HTML 版本中,不允許省略結束標籤。


提示

:透過結束標籤來關閉 HTML 是一種經得起未來考驗的 HTML 編寫方法。清楚地標記某個元素在何處開始,並在何處結束,不論對您還是對瀏覽器來說,都會使程式碼更容易理解。

HTML 換行

如果您希望在不產生一個新段落的情況下進行換行(新行),請使用<br /> 標籤

<br /> 元素是空的HTML 元素。由於關閉標籤沒有任何意義,因此它沒有結束標籤。 實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<body>
<p>
    如果<br />需要<br />换行<br />段落,<br />请使用 br 标签.
</p>
</body>
</html>

#程式執行結果:

如果

需要7.png換行

段落,
請使用br 標籤. 


HTML 空格####### #################通常情況下,HTML會自動截斷多餘的空格。不管你加多少空格,都被看做一個空格。例如你在兩個字之間加了10個空格,HTML會截去9個空格,只保留一個。為了在網頁中增加空格,你可以使用### ###;表示空格。 ##################實例################在原始碼中使用空格###
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<body>

<h1>春晓</h1>

 <p>春眠不觉晓,</p>
     <p>处处闻啼鸟。</p>
        <p>夜来风雨声,</p>
            <p>花落知多少。</p>

<p>注意,浏览器忽略了源代码中的排版<br/>(省略了多余的空格和换行)。</p>
</body>
</html>
###### ###程式運行結果:#####################下面是使用 表示空格。 ######
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<body>
<h1>春晓</h1>
<p>春眠不觉晓,</p>
<p>&nbsp&nbsp&nbsp&nbsp处处闻啼鸟。</p>
<p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp夜来风雨声,</p>
<p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp花落知多少。</p>
<p>使用了&nbsp空格</p>
</body>
</html>
#########程式運行結果:###

5.png

提示:  表示一個空格



繼續學習
||
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <h1>春晓</h1> <p>春眠不觉晓,</p> <p>&nbsp&nbsp&nbsp&nbsp处处闻啼鸟。</p> <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp夜来风雨声,</p> <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp花落知多少。</p> <p>使用了&nbsp空格</p> </body> </html>