HTML/基礎
< 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常用標籤
編輯<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>
顯示:
<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>
結果:
<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>
結果:
<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>
結果:
<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>
<body>
<!--Comment won't show in your page.-->
<p>This is a paragraph.</p>
</body>
</html>
結果: