程式語言教學誌 FB, YouTube: PYDOING: HTML 4.01 快速導覽

HTML 由標籤 (tag) 與內容構成元素 (element) ，標籤有成對標籤與獨立標籤，成對標籤所圍住的便是內容，這也可以是標籤，獨立標籤由屬性設定所屬內容

網頁文件的基本結構就是由 <html> 以及 <head> 、 <body> 三個標籤所組成，簡單說，整個網頁也就是一個 <html> 元素，文件資訊在 <head> 元素中，網頁內容則是在 <body> 元素裡。

下例中 <head> 裡只有一個 <title> 元素，而 <body> 裡則有兩個 元素

<html>
<head>
<title>網頁標題</title>
</head>
<body>
<p title="p1">單純的文字內容</pgt;
<p title="p2"><a href="http://www.google.com.tw/">具有連結的文字內容</a></p>
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：example16.html
     功能：示範 HTML 4.01 標記語言的使用 
     作者：張凱慶
     時間：西元 2011 年 5 月 -->

<title> 元素的內容為「網頁標題」，其為 <title></title> 成對標籤圍起來的文字內容

<title>網頁標題</title>

這會顯示在網頁視窗的標題列

元素為顯示成段落的元素， example16.html 分成兩個段落，第一個段落為

<p title="p1">單純的文字內容</pgt;

我們在 元素使用共通標籤 title ，這表示元素的標題， title 的效果是游標移到該元素上頭的時候，會顯示標題出來，例如

共通標籤也就是每個元素都可使用的標籤，這樣的標籤共有四種

標籤	功能
title	元素標題
style	元素樣式
id	識別碼，供 JavaScript 使用
class	樣式類別，對照 CSS 樣式表中定義的類別名稱

第二個 元素中，我們使用了另外一個 <a> 元素， <a> 用為連結， <a></a> 圍住的內容是文字，該文字就具有連結功能，若是圖片，該圖片也就具有連結功能。同樣的，游標移過去就可以看見 元素的 title 屬性值

標籤具有結構與功能的雙重作用，因此像是 便是呈現出結構，而 <a> 則是以功能為主。

以上 、 <a> 都是成對標籤，若是獨立標籤，元素內容就由屬性指定，例如，下例中的 <img>

<html>
<head>
<title>網頁標題</title>
</head>
<body>
<img src="example.jpg" />
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：example01.html
     功能：示範 HTML 4.01 標記語言的使用 
     作者：張凱慶
     時間：西元 2011 年 5 月 -->

瀏覽器 (broswer) 開啟如下