HTML/基礎

維基教科書,自由的教學讀本
跳至導覽 跳至搜尋

本頁面將介紹基本HTML格式,及常用標籤。

HTML格式[編輯]

HTML的基本格式:

<html>

<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>

<p>Paragraph 1.</p>

<p>Paragraph 2.</p>

</body>
</html>
HTML basic form example.png

HTML常用標籤[編輯]

<html>標籤[編輯]

<html></html>標籤之間的內容被瀏覽器識別為HTML代碼。有時HTML文件中還包含其他標記如<php></php>,其內容被識別為PHP等其他語言代碼。若沒有語言說明,瀏覽器往往默認為HTML代碼。一般HTML代碼都要放在<html></html>標籤內。

示例:

<html>
<body>

<h1>Heading In HTML Label</h1>

<p>Paragraph in HTML label.</p>

</body>
</html>

<h1>Heading Out of HTML Label</h1>

<p>Paragraph out of HTML label.</p>

顯示:

HTML html label example.png

<body>標籤[編輯]

<body></body>之間的內容是被顯示的可見的頁面內容。這意味着:

  • <body></body>包含全部可見的頁面元素。
  • 不顯示的頁面元素,如網頁標題,應該放在<body></body>之外。
  • <body></body>之外的可見元素,默認也會被顯示。

示例:

<html>

<head>
<title>The Title Of This Page</title>
</head>

<body>
<h1>Heading In Body Label</h1>
<p>Paragraph in body lable.</p>
</body>

<h1>Heading Out of Body Label</h1>
<p>Paragraph out of body lable.</p>

</html>

結果:

HTML body label example.png

<h1>-<h6>標籤[編輯]

<h1> - <h6>標籤是可使用的六個級別的標題。<h1>定義為等級最高的標題,字體最大。<h6>定義等級最低的標題字體最小。

<h1> - <h6>僅應當被用作標題,而不應該被用作格式化文本(瀏覽器和搜索引擎會將它們識別為標題,產生誤解)。

示例:

<html>

<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<p>Paragraph.</p>

</body>
</html>

結果:

HTML h1-h6 label example.png

<p>標籤[編輯]

<p>標籤定義段落。

  • 在HTML中,不能直接通過代碼來換行,所有連續的回車和空格都會被視為一個空格。
  • 默認為左對齊,可以由參數或者樣式設置其他格式類型。
  • 瀏覽器會自動在其前後設置空白。默認間距由瀏覽器決定,也可以由樣式決定。
  • 如果文本沒有被<p></p>包含,那麼它們將作為一個段落。
<html>
<body>

<p>You can't

go to a new line by typing Enter twice.</p>

<p>The text will be left-aligned. The text will be left-aligned. The text will be left-aligned. The text will be left-aligned. The text will be left-aligned. The text will be left-aligned.</p>

If you enter something between two p label,
they will be one paragraph.

<p align="right">Right align.</p>

<p align="center">Center align.</p>

<p>Any attributes of p label are not recommended. Please use style instead.</p> 

</body>
</html>

結果:

HTML p label example.png

<a>標籤[編輯]

<a> 標籤可定義錨。錨 (anchor) 有兩種用途:

  • 通過使用 href 屬性,創建指向另外一個文檔的鏈接(或超鏈接)
  • 通過使用 name 或 id 屬性,創建一個文檔內部的書籤(也就是說,可以創建指向文檔片段的鏈接)

前者就是我們所熟悉的超鏈接,是最基本的頁面元素之一;後者也稱作錨點,是較為複雜的高級用法,將會在後續介紹。

<a>元素最重要的屬性是 href 屬性,它指定鏈接的目標。屬性一般放在首標籤的尖括號內,用空格與標籤名分開,放於後面。例如: <a href="https://zh.wikibooks.org">Go to Wikibooks</a>

超鏈接文本的默認外觀是:

  • 未訪問鏈接:下劃線,藍色
  • 已訪問鏈接:下劃線,紫色

由於可以更改樣式來修改超鏈接外觀,有些網站的超鏈接可能是其他外觀樣式。

示例:

<html>
<body>

<a href="https://zh.wikibooks.org">Go to Wikibooks</a>

<p>Do you want to <a href="https://zh.wikibooks.org">go to Wikibooks</a>?</p>

</body>
</html>

結果:

HTML a label example.png

<!--...-->標籤[編輯]

<!--...-->標籤中的內容定義注釋,注釋不會顯示在網頁中。

<html>

<body>

<!--Comment won't show in your page.-->

<p>This is a paragraph.</p>

</body>
</html>

結果:

HTML comment tag example.png