HTML 標(biāo)題 段落
HTML 標(biāo)題
在 HTML 文檔中,標(biāo)題很重要。
標(biāo)題(Heading)是通過(guò) <h1> - <h6> 等標(biāo)簽進(jìn)行定義的。
<h1> 定義最大的標(biāo)題。<h6> 定義最小的標(biāo)題。
實(shí)例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <h1>這是標(biāo)題 1</h1> <h2>這是標(biāo)題 2</h2> <h3>這是標(biāo)題 3</h3> <h4>這是標(biāo)題 4</h4> <h5>這是標(biāo)題 5</h5> <h6>這是標(biāo)題 6</h6> </body> </html>
程序運(yùn)行結(jié)果:
注釋:瀏覽器會(huì)自動(dòng)地在標(biāo)題的前后添加空行。
注釋:默認(rèn)情況下,HTML 會(huì)自動(dòng)地在塊級(jí)元素前后添加一個(gè)額外的空行,比如段落、標(biāo)題元素前后。
標(biāo)題很重要
請(qǐng)確保將 HTML heading 標(biāo)簽只用于標(biāo)題。不要僅僅是為了產(chǎn)生粗體或大號(hào)的文本而使用標(biāo)題。
搜索引擎使用標(biāo)題為您的網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容編制索引。
因?yàn)橛脩艨梢酝ㄟ^(guò)標(biāo)題來(lái)快速瀏覽您的網(wǎng)頁(yè),所以用標(biāo)題來(lái)呈現(xiàn)文檔結(jié)構(gòu)是很重要的。
應(yīng)該將 h1 用作主標(biāo)題(最重要的),其后是 h2(次重要的),再其次是 h3,以此類推。
HTML 水平線
<hr /> 標(biāo)簽在 HTML 頁(yè)面中創(chuàng)建水平線。
hr 元素可用于分隔內(nèi)容。
實(shí)例
下面的代碼會(huì)輸出標(biāo)題和水平線
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <h1>這是第一個(gè)標(biāo)題</h1> <hr/> <h2>這是第二個(gè)標(biāo)題</h2> <hr/> </body> </html>
程序運(yùn)行結(jié)果:
上面的代碼輸出了<h1>標(biāo)題和<h6>標(biāo)題,還有兩根水平線
HTML 段落
段落是通過(guò) <p> 標(biāo)簽定義的。
直接看例子
實(shí)例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <p>這是第一個(gè)段落。</p> <p>這是第二個(gè)段落。</p> </body> </html>
程序運(yùn)行結(jié)果:
這是第一個(gè)段落。
這是第二個(gè)段落。
注釋:瀏覽器會(huì)自動(dòng)地在段落的前后添加空行。(<p> 是塊級(jí)元素)
提示:使用空的段落標(biāo)記 <p></p> 去插入一個(gè)空行是個(gè)壞習(xí)慣。用 <br /> 標(biāo)簽代替它?。ǖ遣灰?<br /> 標(biāo)簽去創(chuàng)建列表。不要著急,您將在稍后的篇幅學(xué)習(xí)到 HTML 列表。)
不要忘記結(jié)束標(biāo)簽
即使忘了使用結(jié)束標(biāo)簽,大多數(shù)瀏覽器也會(huì)正確地將 HTML 顯示出來(lái),就像下面這樣:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <p>忘記了結(jié)束標(biāo)簽 <p>忘記了結(jié)束標(biāo)簽 </body> </html>
程序運(yùn)行結(jié)果:
忘記了結(jié)束標(biāo)簽
忘記了結(jié)束標(biāo)簽 ? ?
上面的例子在大多數(shù)瀏覽器中都沒(méi)問(wèn)題,但不要依賴這種做法。忘記使用結(jié)束標(biāo)簽會(huì)產(chǎn)生意想不到的結(jié)果和錯(cuò)誤。
注釋:在未來(lái)的 HTML 版本中,不允許省略結(jié)束標(biāo)簽。
提示:通過(guò)結(jié)束標(biāo)簽來(lái)關(guān)閉 HTML 是一種經(jīng)得起未來(lái)考驗(yàn)的 HTML 編寫方法。清楚地標(biāo)記某個(gè)元素在何處開(kāi)始,并在何處結(jié)束,不論對(duì)您還是對(duì)瀏覽器來(lái)說(shuō),都會(huì)使代碼更容易理解。
HTML 換行
如果您希望在不產(chǎn)生一個(gè)新段落的情況下進(jìn)行換行(新行),請(qǐng)使用 <br /> 標(biāo)簽
<br /> 元素是一個(gè)空的 HTML 元素。由于關(guān)閉標(biāo)簽沒(méi)有任何意義,因此它沒(méi)有結(jié)束標(biāo)簽。
實(shí)例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <p> 如果<br />需要<br />換行<br />段落,<br />請(qǐng)使用 br 標(biāo)簽. </p> </body> </html>
程序運(yùn)行結(jié)果:
如果
需要
換行
段落,
請(qǐng)使用 br 標(biāo)簽.?
HTML 空格
通常情況下,HTML會(huì)自動(dòng)截去多余的空格。不管你加多少空格,都被看做一個(gè)空格。比如你在兩個(gè)字之間加了10個(gè)空格,HTML會(huì)截去9個(gè)空格,只保留一個(gè)。為了在網(wǎng)頁(yè)中增加空格,你可以使用 表示空格。
實(shí)例
在源代碼中使用空格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <h1>春曉</h1> <p>春眠不覺(jué)曉,</p> <p>處處聞啼鳥(niǎo)。</p> <p>夜來(lái)風(fēng)雨聲,</p> <p>花落知多少。</p> <p>注意,瀏覽器忽略了源代碼中的排版<br/>(省略了多余的空格和換行)。</p> </body> </html>
程序運(yùn)行結(jié)果:
下面是使用 表示空格。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <h1>春曉</h1> <p>春眠不覺(jué)曉,</p> <p>    處處聞啼鳥(niǎo)。</p> <p>      夜來(lái)風(fēng)雨聲,</p> <p>        花落知多少。</p> <p>使用了 空格</p> </body> </html>
程序運(yùn)行結(jié)果:
提示:  表示一個(gè)空格