在製作網頁時,可以將網頁製作的內容分為兩個部分:文件結構與外表呈現。先利用HTML的規範製作文件結構,再利用CSS的方式來美化網頁外觀的呈現。
html是由元素(element)所構成,而元素包含標籤(Tag)、內容(Content)、屬性(Attribute)。
標籤可分為:容器形式標籤、單一形式標籤。
- 容器標籤:
在html中使用成對的標籤將要顯示的內容元素包圍起來,起始與結束標籤的名稱相同,但結束標籤在開始時會加上「/」符號。
格式:<起始標籤名稱>...網頁顯示內容...</結束標籤名稱>
例如:<h1>這是標題h1的設定</h1> - 單一標籤:
在html中只有起始標籤,沒有結束標籤。例如<br>、<img>、<hr>。
在html中的標籤還可以藉由設定標籤的屬性賦予標籤執行時的相關格式設定與相關資訊。屬性設定時:
- 屬性必須設定在起始標籤當中,且一個標籤中可以設定多個屬性。
例如:<a href="https://www.google.com" target="_blank">Google</a>
這個<a>標籤我們設定了href、target兩個屬性後,會在網頁中顯示Google ,若點擊後可以在瀏覽器中開啟新分頁並連結到google。 -
屬性包含了名稱與值。
格式:屬性名稱="屬性值"
如上例<a>標籤中href、target為屬性名稱,https:www.google.com、_blank為屬性值。
在設定標籤、屬性時的注意事項:
- 標籤、屬性使用小寫英文字母編輯:
雖然html沒有區分英文字母大小寫,但為了可以與XHTML銜接,建議使用英文字母小寫編輯。 - 設定屬性值時要使用成對(單、雙)引號:
若屬性值中有空白或有多個屬性值,成對引號可以避免辨識上的困擾。另外,若屬性值中含有單引號,則外部成對引號的部分需使用雙引號。
網頁結構
HTML頁面結構如下所示:綠色文字為註釋 (點擊觀看測試結果)
<!doctype html>--------------html文件必須在檔案一開始即設定文件類型宣告
<html lang="zh-tw">----------在文件中宣告正確的語系,瀏覽器就不會在顯示時產生亂碼
在<head></head>標籤中放置這份文件的資料,例如標題、語系、編碼、套用的樣式表,這些內容絕大多數都不會顯示在網頁上讓瀏覽者觀看。
<head>
<meta charset="UTF-8">----------在文件中宣告正確的編碼,瀏覽器就不會在顯示時產生亂碼
<title>html分頁標題</title>--------html標題會顯示在瀏覽器的分頁標籤中
</head>
<body>----------------在<body></body>標籤中放置網頁顯示的內容
這是html文件在網頁中顯示的內容。
</body>
</html>