張凱迪(KD Chang)
台灣大學,主修經濟學,臺大資管所。服務過上市電子公司、人工智慧新創公司、全球前三大瀏覽器製造商和電子商務平台,也曾參與數個組織的創辦。夢想是做出人們想用的產品和辦一所心目中理想的學校。
HackNTU 2015 Workshop
講師:張凱迪(KD.Chang)
Copyright © 2015 All rights reserved
HTML 發展簡史
HTML標籤簡介
HTML 5 版面標籤簡介
關於HTML 5的一些好用工具
HTML由Tim Berners-Lee所建立
W3C(全球資訊網協會)為制定標準的組織
1991年發佈HTML tags,發展初期十分鬆散
1993年(IETF)發行HTML第一版(非標準)
歷經多次版本更迭,發展成HTML4.01和XHTML雙軌
<!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>
<iframe width="640" height="360" src=”http://www.youtube.com/embed/BeyFh1Es_Hc?feature=player_detailpage" frameborder="0" allowfullscreen>
</iframe>
<a href="連結網址" target="開啟方式">帶我走</a>
<img src="圖存放位置" alt="破圖說明" title="滑鼠移至圖上說明" >
<form action="index.php" method="post">
<!--action放置後端程式位置,method為傳送方式,GET會顯示提交內容於網址列,POST則不會--> <input type="text" name="query">搜尋 <input type="submit" value="提交"> </form>
<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" enctype="multipart/form-data" method="post">
<div><input type="file" name="img"></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的輸入框,點擊可移動到輸入框-->
<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-->
<form action="index.php"> <label for="id"> <div>搜尋:<input type="search" id="search" required="required" placeholder="請輸入文字"></div> </label> <input type="submit" value="送出"> </form>
<!--placeholder屬性為預設輸入框文字-->
測試用後端程式,放置於action屬性:http://aiolus.tw/form_test.php
<div id="container"> <header>
版頭 <nav></nav>
導覽列,主選單 </header> <section>
將相關內容群組在一起 <article></article> <article></article>
放置頁面上可以獨立存在的內容 </section> <aside>側邊欄,存放最新文章、相關連結等資訊</aside> <footer>頁尾填寫版權宣言或是聯絡方式</footer> </div>
<!--[if lt IE 9]> 讓IE8以下的舊版瀏覽器可以支援html5語意標籤
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"> </script>
<![endif]-->
By 張凱迪(KD Chang)
HackNTU 2015 Workshop,希望能帶領初學者入門 HTML/CSS,培養自學能力和製作簡單的專案。
台灣大學,主修經濟學,臺大資管所。服務過上市電子公司、人工智慧新創公司、全球前三大瀏覽器製造商和電子商務平台,也曾參與數個組織的創辦。夢想是做出人們想用的產品和辦一所心目中理想的學校。