1 / 172

HTML5 與 CSS3

HTML5 與 CSS3. 教材. 陳會安 著（ 2013 ）， PHP+MySQL 與 jQuery Mobile 跨行動裝置網站開發， 碁峰資訊股份有限公司， ISBN 9789862768563 （書號 ACL037900 ） 楊仁和 譯（ 2012 ）， 深入淺出行動網站開發， 碁峰資訊股份有限公司， ISBN 9789862765005 （書號 A310 ）

caroun
Download Presentation

HTML5 與 CSS3

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5 與 CSS3

  2. 教材 陳會安 著（2013）， PHP+MySQL 與 jQuery Mobile 跨行動裝置網站開發， 碁峰資訊股份有限公司， ISBN 9789862768563 （書號 ACL037900） 楊仁和 譯（2012）， 深入淺出行動網站開發， 碁峰資訊股份有限公司， ISBN 9789862765005 （書號 A310） 榮欽科技、陳婉凌(2012)， 網頁設計必學的程式實作技術-HTML5+CSS3+JavaScript， 博碩文化， ISBN: 978-986-201-664-0 （書號 PG31237 ）

  3. 大綱 頁面結構 文字編排標籤 圖片與超連結標籤 表格和容器標籤 語意與結構元素 層級式樣式表 選擇器和樣式屬性 反應式網站設計與 Media Queries

  4. 內容與樣式分離 • HTML 只負責內容結構 • 樣式由 CSS 負責 • 不要在網頁裡使用下列標籤 • <font>設定字型、<big>大字、<small>小字、<b>加粗、<i>斜體、<u>底線、<s>刪除線、<center>中間對齊 • 行為由 JavaScript 實現 • 團隊合作、專業分工 • 撰寫文稿、美術設計、程式設計 • 快速更換網站風格，不影響網站內容與行為

  5. HTML5 的頁面結構

  6. 關於 Tag <div hidden> <div id="hold"> • Tag：標籤/標記，以 < 和 > 符號括住 • <標籤名稱> • <標籤名稱 屬性名稱> • <標籤名稱 屬性名稱="屬性值"> • 成對標籤： • 容器：Container • 起始（Start Tag）與結束（End Tag）夾住內容 • 例如： <body> … </body> • 單一標籤：Single • 例如： <br>

  7. HTML5 的頁面結構 • <!DOCTYPE html> 標示文件類型（Document Type） • <head> 檔頭 • 提供文件資訊 • 引入外部參考 • 設定標題 <title> • <body> 文件主體 • 文件主要的內容

  8. <!DOCTYPE> • <!DOCTYPE>不是 HTML 標籤 • 標示 HTML 版本

  9. <html>標籤 • 網頁的根元素（Root Element） • 容器元素（Container Element） • <head> • <body> • 使用 lang 屬性指定網頁使用的語言 • <html lang="zh-TW"> • zh（中文）、en（英文）、fr（法文）、de（德文）、it（義大利文）和ja（日文）等。 • en-US 美式英文、zh-TW 台灣繁體中文

  10. <head>標籤 • 檔頭元素 • <title>、<meta>、<script>、<style>標籤。<meta>

  11. <head> 檔頭元素 <meta name="description" content="摘要描述"> <meta name="keywords" content="關鍵字1, keyword2"> <meta name="author" content="作者姓名"> <meta charset="UTF-8"> <meta> 宣告 metadata

  12. <head> 檔頭元素 <base href="http://csie.cust.edu.tw" target="_blank"> <link rel="stylesheet" type="text/css" href="theme.css"> <base> 設定超連結的基底或預設目標 <link> 連結外部樣式檔案

  13. <head> 檔頭元素 <style type="text/css"> body { color:red; } </style> <style> 樣式設定

  14. <head> 檔頭元素 <script> document.write("Hello World!"); </script> <script src="javascript.js"></script> <script> 內嵌 JavaScript 程式 <script> 引入外部 JavaScript 程式檔

  15. <head> 檔頭元素 <title>Awesome page title</title> <title> 設定文件主旨

  16. 範例 <!DOCTYPE html> <html lang="zh-TW"> <head> <meta charset="utf-8" /> <meta name="keywords" content="關鍵字1, 關鍵字2" /> <meta name="description" content="摘要描述" /> <link rel="stylesheet" href="stylesheet.css" type="text/css" /> <link rel="alternate" title="Website Feed" href="rss.php" type="application/rss+xml" /> <link rel="icon" href="favicon.ico" type="image/x-icon" /> <title>文件主旨</title> </head> <body> 文章內容 </body> </html>

  17. <body>標籤 • 網頁文件的內容 • 包含文字、超連結、圖片、表格、清單和表單等

  18. HTML5 基本語法 • 元素和屬性不區分英文大小寫，<html>、<Html>、<HTML>都是相同標籤。 • 元素不一定需要「結尾標籤」（End-Tag），如果是沒有內容的元素，也不需要使用「/>」符號代替結尾標籤 • <p>這是一個測試</p> • <p>這是一個測試 • <br> • <br />

  19. HTML5 基本語法 • 標籤屬性值的引號也是可有可無 • <img src="sample.jpg" width=20 height=30 /> • 屬性沒有屬性值，只需使用屬性名稱即可 • <option selected> • <input type="radio" checked>

  20. HTML5 共同屬性

  21. HTML5 語意與結構標籤

  22. 文件主體頁面結構 頁首/頁眉 導覽 文章/短文 區段 區段頁首 側邊欄 章節 區段頁尾 頁尾/頁腳

  23. 章節與段落 • 標題 Heading • <h1> 第一層大標題 • <h2> 第二層標題 • … • <h6> • 獨立一行，字體較粗大 • 文章結構 • <article> 文章 • <section> 章節 • <header> 頁眉 • <footer> 頁腳 • <aside> 側邊欄 • <hgroup> 標題群組 • <p> 段落 Paragraph

  24. 章節與段落 <article> <h1>蘋果</h1> <p>蘋果是一種香甜多汁的水果，通常長在寒冷的地區…</p> ... </article> • <article> • 一段獨立的文章 • 例如：一篇貼文、一則新聞、一篇部落格文章、一則回應

  25. 章節與段落 • <section> 章、節 • 有主題的一段文字 • 通常有標題 • 標題不只一個時，以 <hgroup> 設定標題區 • 一個 <article> 裡面有許多個 <section> • 一個 <section> 裡面也可以包含許多個 <article>

  26. <section>範例 <article> <hgroup> <h1>蘋果</h1> <h2>風味絕佳，可口的水果！</h2> </hgroup> <p>蘋果是一種長得像梨子的水果，生長在蘋果樹上。</p> <section> <h1>紅蘋果</h1> <p>紅蘋果是市場上最常見的品種，香甜好吃。</p> </section> <section> <h1>青蘋果</h1> <p>青蘋果外皮呈現綠色，味道偏酸，口感爽脆。</p> </section> </article>

  27. 章節與段落 • <aside> 側邊欄 • 也是 <section> • 和文章主題相關，但是關係比較薄弱，屬於補充材料 • <p> 段落 • 段落與段落之間存在大約一行的間距

  28. <body> <header> <h1>My Blog</h1> </header> <article> <h1>My Blog Post</h1> <p>然而，這個頁面，但我給偶爾的情況下發生的辛勞和痛苦促使他一些偉大的作品。</p> <aside> <!-- 位於 article 裡面的 aside，和這一篇 article 相關的資料。--> <h1>Glossary</h1> <dl> <dt>產品</dt> <dd>種植、製造或加工後的產出。</dd> </dl> </aside> </article> <aside> <!-- 位於 article 外的 aside，和 article 無關，但是和這一個文件相關。 --> <h2>Blogroll</h2> <ul> <li><a href="#">My Friend</a></li> <li><a href="#">My Other Friend</a></li> <li><a href="#">My Best Friend</a></li> </ul> </aside> </body>

  29. 文字編排 • 標題文字 • 段落、換行與水平線 • 標示文字內容 • 清單

  30. 標題文字 • 標示章節的標題 • Heading • <h1> 第一層大標題 • <h2> 第二層標題 • … • <h6> • 獨立一行，字體較粗大

  31. 段落與換行 • 段落標籤 <p> • Paragraph • 段落之間留白較大，約有一行的間隔。 • 編輯文字時，按下 Enter 鍵換段落 • 換行不換段落須使用 <br> • Break • 編輯文字時，按下 Shift+Enter 鍵換行不換段落 • <hr> 畫一條水平線，並且隔開段落 • Horizontal Rule

  32. 練習：唐詩

  33. 練習：唐詩以 CSS 排版

  34. 練習：唐詩以 CSS 排版 • 在 <head> 裡面加入 <style>

  35. 標示文字內容

  36. 清單 • <ul> 符號清單 • 無編號，Unordered List • <ol> 編號清單 • Ordered List • <dl> 定義清單 • Definition List • <li> 清單項目 • List Item • <dt> 定義項目 • Definition term • <dd> 資料描述 • Definition description

  37. 清單 我曾經住過的城市 <ul> <li>台北</li> <li>桃園</li> <li>新竹</li> <li>台中</li> <li>高雄</li> </ul> 符號清單

  38. 清單 <h2>教材章節</h2> <ol> <li>資料庫管理核心能力認證</li> <li>資料庫的核心觀念</li> <li>建立資料庫物件</li> <li>處理資料</li> <li>資料儲存方式</li> <li>管理資料庫</li> <li>概念與指令介紹實作簡例</li> </ol> 編號清單

  39. 清單 <h2>預防食物過敏5撇步</h2> <dl> <dt>遠離有過敏原的食物</dt> <dd>許多食品裡可能有導致過敏的成分，包括牛奶、蛋、花生等，儘量少吃標示不全、不清楚的食品。</dd> <dt>少吃加工食品</dt> <dd>加工食品中的添加物，會誘發氣喘，有氣喘疾病的人購買時一定要注意標示。</dd> <dt>只吃新鮮的海鮮</dt> <dd>不新鮮的海產會提高致敏物質的濃度，更容易誘發過敏，就算健康的人吃了也可能過敏。</dd> <dt>服用益生菌 </dt> <dd>益生菌為促進腸道微生物平衡、有益於人體的活菌，可以調節並增強腸道內的免疫機制。</dd> <dt>多吃蔬果</dt> <dd> 蔬果致敏性低，均衡而完整的飲食菜單則可以防範發生過敏機會。</dd> </dl> 定義清單

  40. 清單 巢狀清單（Nested List）

  41. 練習：巢狀清單

  42. 練習：巢狀清單

  43. 練習：巢狀清單

  44. 練習：巢狀清單

  45. 圖片 <img> • <img src="filename" width="value" height="value" alt="替代文字"/> • src和alt是必須屬性 • 支援gif、jpg或png格式的圖片檔案。

  46. 超連結<a> • Anchor • <a href="URL" target="frame_name">名稱</a> • 中間可以夾文字 • 也可以夾<img>做成圖片超連結

  47. 段落內的文字控制元素

  48. 段落內的文字控制元素（續）

More Related