HTML 5.0 - 文件結構

danielsir 曾在 2019年網誌，與大家分享HTML5的「簡介篇」及「網頁結構」。我嘗試用七天時間，與大家深談HTML5。

 今天先與大家談談 HTML 5.0  - 文件結構。

HTML 文件的根元素

HTML 文件可以包含多個元素，有些元素是屬於「父子」關係、有些元素是屬於「兄弟」關係。而根元素為 <html>元素，而起始標籤 <html>務必放在 <!doctype html> 的後面，接著才是 HTML 文件的標頭與主體，最後還要有結束標籤 </html> 。

例子如下 ：

<!doctype html> 
<html>
      現在是HTML文件的標頭與主題出場。
</html>

HTML 文件的標頭  - <head> 元素

使用<head>元素標示作為HTML文件的標頭，裡面可以使用 <title> 、<meta> 、<link> 等元素來指定文件標題、文件相關資訊、文件之間的關聯、甚至是URL的路徑、JavaScript 程式碼、CSS 樣式等資訊。

<head> 元素會放在<html>元素裡面，而且有結束標籤 </head> 。

例子如下 ：

<!doctype html> 
<html>
      <head>
             現在是HTML文件的標頭與主題出場。
      </head>
</html>

HTML 文件的標題 - <title> 元素

<title> 元素是用來指定HTML文件的標題，此標題會顯示在瀏覽器的標題列或索引標籤，有助於搜尋引擎優化，提升網頁被搜尋引擎找到的機率。<title> 元素務必放在 <head> 的元素裡面，而且有結束標籤 </title> 。

例子如下 ：

<!doctype html> 
<html>
      <head>
             現在是HTML文件的標頭與主題出場。
      </head>
      <title>
              danielsir 的網頁
       </title>
</html>

文件相關資訊 - <meta> 元素

<meta> 元素是用來指定HTML文件的相關資訊，稱為metadata，例如編碼方式，內容類型、作者、搜尋引擎關鍵字、版權宣告等。<meta> 元素務必放在 <head> 的元素裡面，</title> 元素的前面，沒有結束標籤  。

例子如下 ：

  • charset = "..." : 指定編碼方式。例如下面的敍述是指定HTML文件的字元集為 UTF-8 。

     <meta charset = "utf-8">

  • name ＝" (application name, author, generator, keywords,desceiption) " : 指定metadata 的名稱，這些值分別表示網頁應用程式的名稱、作者的名稱、編輯程式、關聯的聯鍵字、描述文字可供搜尋引擎使用，提升搜尋引擎。

  • content = "..." : 指定metadata 的內容。例如下面的敍述是指定metadata的名稱為"author" ： 內容為 "danielsir" ，即HTML 文件的作者為 danielsir。

    <meta name = "author" content = "danielsir"


  • 例如下面的敍述是指定metadata的名稱為"generator" ： 內容為 "Notepad ++" ，即HTML 文件的編輯程式為Notepad ++。
     <meta name = "generator" content = "Notepad ++">

  • http-equip = "..." : 這個屬性是用來取代name屬性，因為HTTP伺服器是使用http-equip屬性蒐集HTTP標頭，例如下面的敍述是指定HTML文件的內容為 text/html。
      <meta a http-equip = "cotent-type" content = "text/html">


文件之間的關聯 - <link> 元素

<link> 元素用來指定目標文件的關聯。<link> 元素務必放在 <head> 的元素裡面，而且沒有結束標籤  。

  • href = "url" : 指定欲關聯之共其他資訊的相對或絕對的位置。
  • hreflang = "language code" : 指定href屬性值的語系。
  • rel = "....." : 指定目前文件與其他資源的關聯。
  • rev = "....." : 指定目前文件與其他資源的反向關聯。舉一個例，假設目前文件為 ex2.htm，則下面第一個敘述表示目前文件與上一個文件ex1.htm的關聯和反向關聯。而第二個敘述表示目前文件與下一個文件ex3.htm的關聯和反向關聯。

例子如下 ：

     <link href = "ex1.htm" rel = "prev" rev = "next">
     <link href = "ex3.htm" rel = "next" rev = "prev">

  • type = "content type" : 指定內容類型。以下例子是表烈目前文件會連結一個名稱為 style.css 的 CSS 樣式表檔案。
例子如下 ：


       <link rel = "stylesheet" type = "text/css" href = "style.css">

HTM 文件的主體 - <body> 元素

<body> 元素標示HTML文件的主體，裡面可以包括文字、圖片、影片、聲音等內容。<body> 元素務必放在 <html> 的元素裡面， <head>元素 的後面，而且有結束標籤 </body> 。

例子如下 ：

      <! doctype html>
      <html>
            <head>
                  <meta charset ="utf-8">
                  <title> danielsir 的網頁 </title>
            </head>
            <body>
                  Hello World !
            </body>
       </html>


例子如下 ：

透過<body> 元素的onload 事件屬性指定當瀏覽器發生load事件時（即載入網頁），就呼叫JavaScript 的 Window.alert() 方法，在對話方塊中顯示 Hello World !

      <! doctype html>
      <html>
            <head>
                  <meta charset ="utf-8">
                  <title> danielsir 的網頁 </title>
            </head>
            <body unload = "javascript : window.alert ('Hello World !')">
            </body>
       </html>












留言

張貼留言

這個網誌中的熱門文章

利用第三方軟體來改變硬碟磁區空間

圖片
danielsir 近期因疫情稍為缓和，教書工作量稍為增加，很久沒有更新網誌了。 近期因富士通 Fujitsu 筆電主機板用久了，有些零件老化經常自動關機。只好用$1,200在新高登商場買了一部二手看來有9成新的華碩筆電，CPU(i3) 回來，將富士通 Fujitsu 筆電的CPU(i7) 切換到華碩筆電使用。在貧困的danielsir來說，不失為一個解決方法。因華碩筆電現存使用的是SSD。只好再利用$20買了一個2.5吋的硬碟機殼將Fujitsu 筆電的硬碟機改成可携的USB硬碟機。 因Fujitsu 筆電的硬碟機早期劃分了兩個硬碟磁區，一個硬碟磁區作為安裝系統軟件 (Window 10)，另一個硬碟磁區用來儲存資料。為了將2個硬碟磁區合併起來，竟然發現 Windows 10 所吹噓的免裝軟體改變硬碟磁區空間的功能，對於我的硬碟機完全不能產生有效作用。 只好在網路上找尋第三方軟體來改變硬碟磁區空間。網路上找到很多到位的軟件。但所有軟件都要付款購買。對貧困的danielsir而言，實感無奈。當danielsir萬念俱灰之時，竟然在網上發現以下網址 : https://www.partitionwizard.com/download-free-from-cnet.html?p=pw&e=pw-free&r=download danielsir頓覺踏破鐵鞋無覓處，得來全不費工夫的感覺。踏破鐵鞋無覓處 跟 得來全不費工夫 的關係是什麼？既然都踏破鐵鞋了，怎麼會不費工夫呢？ 原來這句話出自【警世通言】第二十八回「白娘子永鎮雷峰塔」。 話說許宣（許仙）半醉回去之時，從某處屋檐經過，被人從樓上倒下的熨斗灰，撲得滿頭。 結果抬頭一看，竟是白娘子。 作者馮夢樓於是說：「正是：踏破鐵鞋無覓處，得來全不費工夫。」 這句諺語多用來形容：無意間輕易得見渴求已久的人或物。踏破鐵鞋固然費盡工夫，但是最後得到的原因，卻與當初的踏破鐵鞋，完全無關。
閱讀完整內容

利用iPhone或iPad來開設icloud電郵和建立APPLE ID

圖片
iPhone或iPad開設icloud電郵和建立APPLE ID danielsir曾經在自己網誌介紹Apple ID。如果要設立自己的 Apple ID ，首先要建立一個屬於自己的電郵。需然如今gmail或者yahoo的信箱都可當作APPLE ID。但我認為用iCloud的信箱作為 Apple 的 ID 比較妥善。因為 整體全部都是 APPLE 自家的。 1.開啟【設定】應用程式。 2.  選【密碼與帳號】。 3.  選【加入帳號】。 4.  選取【icloud】。 5.    選取【建立新的Apple ID】。 6.   輸入你的名稱、電郵地址、密碼以及帳戶的描述。  點一下「下一步」。「郵件」會嘗試尋找電郵設定，並為你完成帳戶設定。如果「郵件」找到你的電郵設定，請點一下「完成」以完成帳戶設定。
閱讀完整內容

HTML5 - 簡介篇

danielsir會在往後的網誌，與大家分享多一些HTML5的知識。今天先與大家先談談HTML5的新功能。 進化的HTML5，有以下的新功能 :  是包括HTML、CSS 和 JavaScript在內的一套技術組合。 減少瀏覽器對於需要外掛程式的網路應用服務 (plug - in based, rich internet application，RIA)，如 Adobe Flash, Microsoft Silverlight, 與 Oracle JavaFx 的需求。 讓瀏覽器能更容易在網頁添加和處理多媒體和圖片內容的相關標籤，包括<Video>、<audio>、和 <canvas>標籤。 整合了 <SVG>內容，降低了網頁中使用圖片，音效，動畫等多媒體內容的難度。 新增了包括<section>、<article>、<header> 和 <nav>等相關標籤的屬性。 一些屬性和標籤版被移除，例如 <font> 和 <center> 被移除。 <a>、<cite> 和 <menu>等標籤重新定義或標準化了。 APIs 和 DOM 已經成為HTML 5 基礎部份。 增加了處理錯誤文件的具體細節，使所有瀏覽器和客戶端程式能夠一致地處理語化錯誤。
閱讀完整內容