最新消息 活動公告．card
01-04 semantic elements
<header>頁首區塊
<main>主要區塊
<section>章節區塊
<article>文章區塊
<aside>側邊欄區塊
<details>、<summary>收折文字內容
<figure>、<figcaption>引用區塊
<footer>頁尾區塊
<nav>導覽連結區塊
<time>標示時間日期
筆記
序
跨平台跨裝置 ( Write-Once, Run Anywhere )
- jQueryMobile 解決介面設計。
- HTML5 網頁應用程式的 API 與 JavaScript 搭配使用。
範例「甜點坊、記事本」實作方式
(1) jQueryMobile 製作 Mobile APP ( 行動應用程式 )。
(2) Web Storage + Web SQL Database 存取資料。
(3) Apache Cordova 網頁封裝成 Android APP。
1-1 認識 HTML5
HTML5
- <!DOCTYPE html> 宣告為 HTML 文件。
- 內嵌影音使用 <video> 或 <audio>，不需安裝外掛。
- 新增結構標記「<header>、<footer>、<section>、<article>」有利於 SEO。
- 廢除網頁美化標記「<font>、<big>、<u>…」但會拿來當結構給 javascript 呼叫。
- 全新的表單元件＆屬性 ( input type )、<form> 增加許多屬性。
- 利用<canvas>標記繪出圖形，搭配 JavaScript 在網頁上畫出線條、圖形。
- 提供 API 開發網頁應用程式，例如「Web SQL Database」可離線存取本地端的資料庫。
HTML5 廢除的標記
- <applet>：改用 <embed> 或 <object> ( 內嵌 Java Applet )
- <acronym>：改用 <abbr> ( 縮寫字詞 )
- <dir>：改用 <ul> ( 符號清單 )
- <frame><frameset><noframes>：改用 CSS 搭配 <iframe> ( 頁框設定/頁框宣告/瀏覽器不支援框架時顯示 )
- <bgsound>：插入背景音樂，改用 <audio>
網頁美化標記 ( 改用 CSS 負責樣式美化 )：
- <basefont> 指定基本字體
- <big> 放大字體
- <center> 置中
- <font> 文字格式設定
- <marquee> 跑馬燈文字
- <s>、<strike> 刪除線
- <spacer> 插入空白
- <tt> 等寬字體顯示
- <u> 加底線
補充
- HTML5 新增的表單元件＆屬性 - by Sandy (UI/UX練功坊)
- HTML5專案筆記2：離線系統表單設計 - Hello-Brand
- 簡單明確的了解HTML 表單使用方式 - 網頁東東
1-2 學習 HTML 前的準備工作
建立 HTML
- 瀏覽器 ( Chrome … )。
- 文字編輯軟體 ( Notepad++ … )。
- HTML 文件 ( index.html )：
<!doctype html>
<html lang="zh-TW">
<head>
<meta charset="utf-8">
<title>我的第一個網頁</title>
</head>
<body>
Hello World ~
</body>
</html>
預覽 HTML
將 index.html 拖曳到瀏覽器 ( Chrome … ) 內瀏覽
1-3 HTML 語法概念與架構
HTML 標記
- 圍堵標記 ( Container Tags )：<起始標記>…</終止標記> 例如 <html>…</html>。
- 單一標記( Single Tag )：起始標記有「<hr>、<img>」、終止標記有「<hr />、<img />」
HTML 組成
- <html>：HTML 文件的根元素
- <head>：<head>元素放置網頁相關資訊，裡面常用的標記有 <title>、<meta>、<link>、<script>、<style>
- <body>：<body>元素放置網頁內容
標記屬性 ( 以空白隔開不同屬性 )
<起始標記 屬性名稱1=設定值1 屬性名稱2=設定值2 ………>
<meta name="keywords” content="html5, css3, jquery mobile”>
tips
- HTML 標記不分大小寫，建議以小寫為佳。
- 標記屬性同樣不區分大小寫。
1-4 HTML5 文件結構與語意標記
W3C 網頁開發標準
(1) 結構 Structure (HTML)
(2) 表現 Presentation (CSS)
(3) 行為 Behavior (JavaScript)
結構化的語意標記
- <header> 顯示網站名稱、主題或是主要資訊
- <nav> 網站的連結選單
- <aside> 使用於側邊欄
- <article> 用於定義主內容區
- <section> 用於章節或段落
- <footer> 位於頁尾，用來放置版權宣告、作者等資訊
補充
- Semantics - MDN Web Docs Glossary: Definitions of ... - Mozilla
- Section 的用法 - SC Tuan
- ( Day 15.4 ) HTML 收折文字內容 <details>、<summary> - oxxo - iThome
- 引用區塊<figure>、<figcaption> - HTML 教學 - oxxo.studio
- <hgroup>：標題群組元素- HTML：超文本標記語言 - MDN Web Docs
結構
<main>
<!--頁頭-->
<header>
<hgroup>
<h1><!--標題--></h1>
<h4><!--次要內容( <mark>、<time> )--></h4>
</hgroup>
<nav>
<ul><!--導覽列項目--></ul>
<details><!--收折項目--></details>
</nav>
</header>
<!--內容-->
<section>
<article>
<section><!--文字區塊--></section>
<aside><!--圖片側邊欄( <figure>、<figcaption> )--></aside>
</article>
<article>…</article>
<article>…</article>
</section>
<!--頁尾-->
<footer><!--聯絡資訊( <address> )--><footer>
</main>
樣式
…
/* 畫面置中 */
main{
width: 640px;
border: 1px solid var(--black-50);
margin: var(--space) auto;
…
}
…
/* 導覽列項目橫向排列 */
#header nav {
height: 1.5em;
…
}
#header nav ul {
overflow: hidden;
…
}
#header nav li {
float: left;
…
}
…
/* 收折項目橫向排列 */
#header nav ul, #header nav details {
float: left;
position: relative;
…
}
#header nav details p {
width: 100px;
position: absolute;
left: 0;
top: 1.2em;
…
}
…
/* 內容左右排版 */
article {
overflow: hidden;
text-align: justify;
}
article>section{ /* 文字靠左 */
float: left;
width: 51%;
}
article>aside { /* 圖片靠右 */
margin-left: 53%;
}
…