HTML5 - 新增的結構元素

HTML5  - 新增的結構元素

區塊結構 ：

<articel><article>元素用來標示網頁的本文或獨立的內容。
例子 - 部落格的一篇討論文章、新聞網站的一則新聞報導。
<section><section>元素用來標示通用的區塊。
例子 - 將網頁的本文分割為不同的主題區塊、或將一篇文章分割為不同的章節或段落。

例子 ：


01 : <!doctype html>
02 : <html>
03 :        <head>
04 :              <meta charset = "utf-8">
05 :              <title>旅遊資訊</title>
06 :         </head>
07 :         <body>
08 :            <article>
09 :                  <hgroup>
10 :                          <h1>旅遊報導</h1>
11 :                           <h2>日本</h2>
12 :                   </hgroup>
13 :                   <p>日本是日本列島、琉球群島和伊豆－小笠原群島嶼所組成。</p>
14 ：                <section>
15 :                       <h1>東京</h1>
16 :                       <p>東京人口數達1394萬，是目前全球規模最大的都會區。</p>
17 ：                 </section>
18 :                    <section>
19 :                       <h1>大板</h1>
20 :                       <p>大板超過353萬人，位居日本第二。</p>
21 :                     </section>
22 :               </article>
23 :          </body>
24 :  </html>


例子瀏覽結果如下 :

______________________________________________________________

旅遊報導

日本

日本是日本列島、琉球群島和伊豆－小笠原群島嶼所組成。

東京

東京人口數達1394萬，是目前全球規模最大的都會區。

大板

大板超過353萬人，位居日本第二。


_______________________________________________________________


注釋 ：

08 、 22

  • 網頁的主體是由 <article> 元素所組成的本文。
  • 裡面有標題 ：旅遊報導
  • 裡面有簡單抽述 ：日本
  • 還有2個<section>元素所構成的區塊 (東京、大板)。每一個區塊有各自標題和內容。
09 - 12
  • <hgroup> 是 HTML5新增的區塊元素。
  • 用來製作一個區塊群組的標題和副標題。
14 - 17
  • 這是第一個<section>元素標示第一個區塊。

18- 22

  • 這是第二個<section>元素標示第二個區塊。



留言

張貼留言

這個網誌中的熱門文章

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

圖片
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 基礎部份。 增加了處理錯誤文件的具體細節，使所有瀏覽器和客戶端程式能夠一致地處理語化錯誤。
閱讀完整內容