html內容結構
現代化行動網頁設計基礎入門班 DAY 1
講師:張凱迪(KD.Chang)
Copyright © 2013 All rights reserved
提醒您鍵盤左右鍵可以移動投影片
Sorry, PPT is not suitable for Hackers : (
HTML 發展簡史
HTML由Tim Berners-Lee所建立
W3C(全球資訊網協會)為制定標準的組織
1991年發佈HTML tags,發展初期十分鬆散
1993年(IETF)發行HTML第一版(非標準)
歷經多次版本更迭,發展成HTML4.01和XHTML雙軌
HTML 發展簡史
WHATWG(網頁超文本技術工作小組)
提出Web Applications 1.0 -> HTML 5
(已經被W3C接納,2014年底前發行HTML5推薦標準)
HTML5 目標取代HTML 4.01和XHTML 1.0標準
(XHTML過嚴格,且不符實際發展需求)
HTML5已經是現在、未來發展趨勢
HTML5主要目標
減少瀏覽器對於需要外掛程式,
使網路標準達到符合當代的網路應用需求
http://www.atizo.com/docs/
廣義來說Html5包含CSS3 + js
http://www.virtualsciences.nl/
Html 是一種標記語言,非程式語言
全名叫:HyperText Markup Language
但要寫好HTML沒有你想像簡單
那…Html 是什麼?
超文件標示語言(英文:HyperText Markup Language)
為「網頁建立和其它可在網頁瀏覽器中看到的訊息」設計
HTML是一個網頁的主架構,負責架構和內容
一般標準大寫也可以,但實務上使用小寫撰寫
用文字編輯器即可編輯,檔名一般存.html或.htm
HTML 長這樣
網頁上構成的基本元素
通常用<…></…>『標籤(tag)』搭配『屬性(attr)』表示
Ex. <p class="poetry">月落烏啼霜滿天</p>
(name) (value)
標籤通常成對出現,但也有單一出現
(如:<img>、<hr>、<br>)
HTML 5 引入並加強一系列功能
更彈性的解析規則,包容性更大
更加結構化和語義化,增新屬性,不支援部分舊版元素
減少外掛使用,提供多媒體應用語法
加強表單控制語法
結合JavaScript的應用程序接口(APIs),功能更強大
寫好HTML第一步就是認識各標籤意涵
經常用手刻,可訓練思考,寫出語義化HTML
傳統的HTML用法...
樣式和結構混雜在一起使用,HTML除了結構也定義樣式(大小、顏色等)
EX.使用 <b>、<font> 、<frame>、<center>、<big> 標記
使用table來進行排版(table用於呈現資料,非使用於排版)
現在樣式統一由CSS檔案來定義管理,HTML不管樣式!
為何要寫語義化(sematic) HTML ?
看起來才專業!
容易被搜尋引擎檢索(利於SEO,網頁排名提昇)
檔案相對較小、瀏覽器渲染速度較快
可閱讀性高、團隊維護方便
第一個html5網頁
<!doctype html> <!--宣告DTD,告訴瀏覽器屬於哪種文件-->
<html lang="en"> <!--文件使用的語系(給搜尋引擎看),繁中zh-tw-->
<head>
<!--Head內放說明使用的編碼(給瀏覽器看,UTF-8是一種針對Unicode的可變長度字元編碼)、標題、關鍵字、引用等頁面相關資訊-->
<meta charset="UTF-8">
<title>Hello HTML5</title>
</head>
<body>
<h1>Hello HTML5</h1> <!--文件內容-->
</body>
</html>
練習一(sample 1-1)
第一個HTML5網頁,Hello world!
DOCTYPE宣告
1. 嚴格標準模式 ( HTML 4 Strict )
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://ww.w3.org/TR/html4/strict.dtd">
2. 近似標準模式 ( HTML 4 Transitional )
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
3. 近似標準但支援框架模式 ( HTML 4 Frameset )
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
4. HTML5
<!doctype html>
Meta 設定
網頁作者
<meta name="author" content="KD.Chang”>
關於網站的內容描述
<meta name="description" content="Teach Mobile Web ">
關鍵字,對搜尋引擎無明顯效果
<meta name="keywords" content="Mobile Web App”>
網路爬蟲檢索設定
<meta name="robots" content="noindex”>
自動轉跳頁面
<meta http-equiv="refresh" content="0; url=" />
註解 <!-- -->
<!-- 使用者你在瀏覽器看不到,看不到我^^ ,適當的註解可以提昇程式的可閱讀性,在團隊合作的時候也十分重要-->
DIV 和 span 標籤
這兩個標籤並不像其他一般的 HTML 標籤一樣,有著某種特殊的功能和語意,主要是搭配CSS來進行排版
<div></div>標籤
屬於
block level
(<h1>、<p>、<ul>、<li>),會換行
將文字和元素群組在區塊中,讓CSS控制其樣式
<span></span>標籤
屬於
inline level
(<a>、<em>、<img>),不會換行
作用就像<div>行內版,讓CSS控制其樣式
按這看結果
iframe
全稱:inline-frame,可於網頁上切出小視窗,嵌入其他網頁
Ex.Youtube嵌入影片
<iframe width="640" height="360" src=”http://www.youtube.com/embed/BeyFh1Es_Hc?feature=player_detailpage" frameborder="0" allowfullscreen>
</iframe>
全域(global)屬性
作為所有元素的共通屬性
class:常用於CSS群組設定樣式
id:同一頁面唯一不能重複使用,常用控制元素
HTML 標籤簡介 1 - 文字
結構性標籤
可以用來描述標題和段落的元素
EX: <h1>、<p>
語法標籤
提供語氣、強調或是引述的額外資訊
EX: <strong>、<em>
標題
<h1></h1>用於主標題(最大)、
<h2></h2>
用於次標題
<h1>至<h6>
權重依此類推
按這看結果
段落
<p></p>
用來標記文字段落,兩個段落預設會有一些空間
按這看結果
斷行
<br>不用成對標籤出現,用於斷行
按這看結果
水平線
<hr>
不用成對標籤出現,用於分隔
按這看結果
強調語氣
用於強調語氣,
<strong></strong>
代表
內容很重要
,瀏覽器會以
粗體
顯示,
<em></em>
代表稍有文字
轉折強調之意
,瀏覽器會以
斜體
表示
按這看結果
引述
<blockquote>
</blockquote>
用於佔了較長篇幅的引述,瀏覽器大多會縮排
按這看結果
空白壓縮
當瀏覽器遇到兩個或以上的空白字元時,它只會顯示一個空白字元,而不會空多行。遇到斷行會
視為單一空白來處理
按這看結果
HTML 標籤簡介 2 - 清單
編號清單
每個項目依序編號,適用於有順序性項目
項目清單
每個項目前為實心圓點,為無序排列
定義清單
由其定義和項目組成
編號清單
有序清單(ordered list)由<ol>開頭</ol>結束,<li></li>內放置其項目,有其順序性,預設會縮排
按這看結果
項目清單
項目清單是用<ul></ul>製作的無序清單(unordered list),<li>為其項目,預設會縮排
按這看結果定義清單
由<dl></dl>所包覆,<dt></dt>為其所要定義的名詞,<dd></dd>放入其定義
按這看結果
巢狀清單
清單可以放入另一清單中,成為巢狀清單
按這看結果HTML 標籤簡介 3 – 連結
連結是網頁間的橋樑,透過連結串起整個全球資訊網
超連結
超連結<a></a>是網頁最重要的特性,藉由超連結串起不同的網頁,進而形成全球資訊網
<a href="連結網址" target="開啟方式">帶我走</a>
href常見屬性值 target常見屬性值
mailto:abc@gmail.com
_blank(開新視窗)
tel:02-33667979(撥電話)
_self(原來視窗)
#移動到對應id
按這看結果
相對位置、絕對位置
絕對位置
https://www.google.com.tw/
相對位置
父資料夾:. . /father/father.html
子資料夾:sample/son.html
同資料夾:index.html
HTML 標籤簡介 4 – 影像
圖片是網頁設計非常重要的一環,所以選圖十分重要,有質感的圖片可以為網頁增色不少,<img>
通常單獨出現,這裡只定義圖片來源和說明,至於樣式大小交給CSS
<img src="圖存放位置" alt="破圖說明" title="滑鼠移至圖上說明" >
按這看結果
練習二(sample 1-2)
找張圖把它加入<img>標籤!
HTML 標籤簡介 5 – 表格
<table></table>表格用於呈現有系統的資料,通常用於節目單、議程、時間表等,以列為方式呈現
按這看結果
HTML 標籤簡介 6 – 表單
<form></form>表單是撰寫動態網站和資料庫互動的重要一環,常用於客戶端(Client)蒐集資訊,透過提交表單可以讓資料傳送到給後端程式處理。在HTML5中新增了許多控制表單的控制項
EX. Google 表單
http://goo.gl/eKCFJt
表單運作
填寫->提交->傳送到後端程式->存取資料庫
<form action="index.php" method="post">
<!--action放置後端程式位置,method為傳送方式,GET會顯示提交內容於網址列,POST則不會-->
<input type="text" name="query">搜尋
<input type="submit" value="提交">
</form>
參考資料 : 淺談 HTTP Method:表單中的 GET 與 POST 有什麼差別?
表單運作
瀏覽的網頁傳遞參數給 Server 端主要有兩種方法:
GET 傳遞時網址會帶有 HTML form 表單的參數名稱與值。
由於是透過 URL 傳遞資料,有長度限制。
表單參數與填寫內容可在 URL 看到,較不安全,但
GET 的執行速度比較快,可加入書簽 (Bookmark) 中
。
一般用於獲取/查詢資源資訊
POST 資料傳遞時,網址並不會更動。 由於不透過 URL 帶參數,所以不受限於 URL 長度。 透過 HTTP message body夾帶,故參數與值不會顯示於 URL,常用於更新資源、登入
參考資料:GET 與 POST 的區別與優缺點
文字輸入、密碼輸入
<form action="index.php" method="post">
<div><input type="text" name="id">帳號</div>
<div><input type="password" name="pwd">密碼</div>
<div><input type="hidden" name="token"></div>
<div><input type="submit"></div>
<!--type屬性決定input的輸入內容,一般單行文字text,password為密碼,輸入顯示黑色圈圈。name屬性為所傳送欄位的值的名稱,後端接收程式以此名稱接收-->
<!--hidden 可以在 form 中記錄一些參數值,並隨著其他的輸入值傳送給伺服器端的程式。這些資料並不會顯示在瀏覽器上,使用者是看不到的(除非檢視原始碼)-->
</form>
按這看結果
文字區塊
<textarea name="comment" id="comment" cols="30" rows="10">
</textarea>
<!--cols為列數/寬,rows為行數/高-->
按這看結果
單選鈕、勾選框
<form action="index.php">
<input type="radio" name="hero" value="1">曹操
<input type="radio" name="hero" value="2">劉備
<input type="radio" name="hero" value="3">孫權
<input type="submit">
</form>
<form action="index.php">
<input type="checkbox" name="man" value="a">張飛
<input type="checkbox" name="man" value="b">趙雲
<input type="checkbox" name="man" value="c">關羽
<input type="submit">
</form>
<--!同一個問題name選項的群組名稱需相同,vaue為該選項的值-->
按這看結果
下拉式選單
<form action="index.php">
<select name="hero" id="hero">
<option value="yang">楊過</option>
<option value="kuo" selected="selected">郭靖</option>
<option value="lin">令狐冲</option>
<option value="di">狄雲</option>
</select>
</form>
<!--同一問題select的name值相同,value值為各選項值。selected為預設選項-->
按這看結果
多選
<form action="index.php">
<select name="hero" id="hero" multiple="multiple" size="4">
<option value="yang">楊過</option>
<option value="kuo" selected="selected">郭靖</option>
<option value="lin">令狐冲</option>
<option value="di">狄雲</option>
</select>
</form>
<!--同一問題select的name值相同,value值為各選項值。selected為預設選項,按control鍵可以多選-->
按這看結果
上傳檔案
<form action="index.php">
<div><input type="file"></div>
<input type="submit" />
</form>
按這看結果
送出、重置、按鈕
<form action="index.php">
<input type="text">
<input type="submit" value="送出">
<input type="reset" value="重置">
<input type="button" value="按鈕">
<button><img src="http://kdchang.cc/mobile-web-dev/img/html5-logo.png" alt="">方便改外觀的按鈕</button>
</form>
<!--reset可以清除輸入框,button是方便改外觀的按鈕-->
按這看結果
表單標籤、群組表單
<form action="index.php" method="post">
<fieldset>
<legend>會員登入系統</legend>
<label for="id">
<div>帳號:<input type="text" id="id"></div>
</label>
<label for="pwd">
<div>密碼:<input type="password" id="pwd"></div>
</label>
<input type="submit" value="送出">
<input type="reset" value="重設">
</fieldset>
</form>
<!--用fieldset可以群組起整個表單,legend是標題。label的for屬性值對應相對id的輸入框,點擊可移動到輸入框-->
按這看結果
HTML5 :進階表單
<form action="">
<label for="id">
<div>電話:<input type="tel" required="required"></div>
</label>
<label for="email">
<div>Email:<input type="email" id="email"></div>
</label>
<label for="date">
<div>日期:<input type="date" id="date"></div>
</label>
<label for="url">
<div>網址:<input type="url" id="url"></div>
</label>
<input type="submit" value="送出">
</form>
<!--HTML5增強表單控制項,增添require驗證方法,也多了許多type-->
按這看結果
HTML5 :進階表單
HTML5 :搜尋輸入
<form action="index.php">
<label for="id">
<div>搜尋:<input type="search" id="search" required="required" placeholder="請輸入文字"></div>
</label>
<input type="submit" value="送出">
</form>
<!--placeholder屬性為預設輸入框文字-->
按這看結果
練習三(sample 1-3)
請製作一份包含文字輸入、文字區塊、單選鈕、勾選框、下拉選單、送出和重置按鈕的表單
測試用後端程式,放置於action屬性:http://aiolus.tw/form_test.php
以前這樣寫兩欄版面...
http://readwrite.com/files/files/files/
html5 後這樣寫...
http://sandraharrison.co.uk/com522/
HTML 5新增版面標籤
過去我們用<div></div>搭配class和id屬性來切割版面,套用樣式,HTML5後,定義了語意化的版面元素,產生大綱
<div id="container">
<header>
版頭
<nav></nav>
導覽列,主選單
</header>
<section>
將相關內容群組在一起
<article></article>
<article></article>
放置頁面上可以獨立存在的內容
</section>
<aside>側邊欄,存放最新文章、相關連結等資訊</aside>
<footer>頁尾填寫版權宣言或是聯絡方式</footer>
</div>
HTML5 版面標籤有什麼用?
大綱清楚,易於團隊合作、同事接手
符合標準、較乾淨的原始碼
易於被瀏覽器和搜尋引擎剖析
Html5 shiv 解決老IE不支援
<!--[if lt IE 9]> 讓IE8以下的舊版瀏覽器可以支援html5語意標籤
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"> </script>
<![endif]-->