HTML HTML5, CSS/LESS, jquery 新. 一代網頁設計
什麼是 HTML?
HTML 的演進 HTML 2.0:1995 年 11 月發布 HTML 3.2:1997 年 1 月發布為 W3C 推薦標準 (W3C Recommendation) HTML 4.0:1997 年 12 月發布為 W3C 推薦標準 HTML 4.01 ( 小幅修正 ):1999 年 12 月發布為 W3C 推薦標準 HTML 5:2012 年發布為 W3C 候選推薦
W3C HTML 5 官方網站 http://www.w3.org/tr/html5/ W3C 建立規格的流程
HTML 5 的新功能 簡化的文件類型定義 簡化的字元集指定方式 新增的元素 :HTML 5 增加了一些新的元素, 例如 <section> <article> <aside> <nav> <header> <footer> <hgroup> <video> <audio> <source> <embed> <figure> <figcaption> <canvas> <progress> <keygen> <output> <meter> <time> <menu> <command> <datalist> <details> <summary> <ruby> <rt> <rp> <mark> 等
修改的元素 :HTML 5 修改了一些既有的元素, 例如 <em> <i> <strong> <b> <address> <ol> 等 移除的元素 :HTML 移除了一些既有的元素, 例如 <frame> <frameset> <noframes> <font> <basefont> <big> <blink> <center> <strike> <tt> <nobr> <spacer> <marquee> <bgsound> <noembed> <acronym> <applet> <dir> <plaintext> <listing> <xmp> <rb> 等 新增的全域屬性 新增的表單驗證功能
HTML 文件的編輯工具 任何文字編輯器
常見編輯工具
直接點兩下 怎麼打開網頁?
用瀏覽器 瀏覽
網址列 file://... 瀏覽器直接開檔案 只有自己這台電腦能看得到 http://... 或 https://... 伺服器經由 HTTP 通訊協定所傳送的頁面 Google Yahoo
學習撰寫 HTML 文件 HTML (HyperText Markup Language) - 標記語言是所有 Web 技術的基礎 Markup 即為標籤之意 使用標籤 (Tag) 來標示功能單位, 簡單易學 容易上手
標籤 Tag 用小於 < 和大於 > 兩個符號所包住的文字, 我們稱為標籤 像是 <html> <body>,html 和 body 我們稱為標籤的名稱 標籤通常成對存在, 有開始標籤和結束標籤 夾在開始和結束標籤中的內容稱為標籤的內文 (inner HTML or inner Text) <b>this is bold text</b> <u> 這是有底線的文字 </u> 有些 element 僅由單一標籤構成, 如 <input><hr><img><br> 等 This is bold text 這是有底線的文字
標籤的內文 標籤的內文可以是純文字或者包含其他標籤 Example <body><b>hello World</b></body> 我們說 body 標籤包含 b 標籤 b 標籤中包含純文字串 Hello World
HTML 文件的基本要素 以下為基本 HTML 文件的格式, 所有網頁都建議套用此格式 <html> <head> 描述網頁用的資料 Metadata </head> <body> 實際顯示在畫面中的網頁內容 </body> </html> <! html 文件最上層必須是 html 標籤 -->
實機操作 我的第一份 HTML 文件 :Hello World
中文出現亂碼怎麼辦 網頁現在都是採用 UTF-8 編碼, 但是在某些瀏覽器呈現時, 卻是出現亂碼 ( 自動偵測語系 ) 於 HTML head 指定此頁編碼為 UTF-8: <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> < /head> 或簡化版 :
<br> : 換行 ex: 第一課 : 換行與空白 空白鍵預設會重疊 ex: s e p a r a t e<br> s e p a r a t e<br> : 可疊加的 空白 character entity s e p &n bsp; a r a&nbs p; t e<br> <!-- --> : 多行註解 ex: <!-- This is a comment not rendered. And the comment can span several lines.--> This line is<br> broken<br> However this is in the same line.<br> <br>
沒有內文的標籤 - 水平線標籤 有些功能性的標籤不需要內文, 則可以省略不寫, 如下 <hr></hr> 或者縮寫成 <hr/> 或 <hr> 功能 : 作為水平線來分隔文章
標籤的屬性 Attribute 標籤除了名稱和內文之外, 可能還有一些用來描述這個標籤的屬性 一個屬性是由屬性名稱和屬性的值所組成 寫法如下 Attribute-Name="Value" 屬性的值我們會用雙引號標示出來 Example <a href="http://www.yahoo.com">yahoo Kimo!</a> 我們說標籤 a 有一個屬性, 屬性名稱為 href
多個屬性 Attributes 標籤的屬性必須寫在開始標籤的 <> 中 一個標籤可以有多個屬性 屬性之間必須至少用一個空白分開 <div class="con" id="list">hello</div>
HTML 中定義的標籤 HTML 是一個大家共同制定的文件格式, 因此也定義了許多標準的標籤名稱和用法 我們將一一介紹較為重要的標籤用法
利用 title 標籤 <title> 必須放在 <head> 標籤中, 用來告訴瀏覽器網頁的標題是甚麼 不會顯示在主畫面中 <html> <head> <title>my Homepage</title> </head> <body>my name is Peng Peng</body> </html>
使用 h1 ~ h6 標題標籤 這些標籤用來表示他們所包含的內文是最主要的標題 (head number 1) 副標題 (h2) 還是更次要的 (h3 ~ h6) Example: <h3>this is my Title</h3> align="{left,center,right}" (Deprecated)
<p> 段落 <p> 元素用來標示段落, 屬性如下 :
語意標籤 - 內文系列 <h1>~<h6>: 標題 <p>: 段落 ; <blockquote>: 引文 <strong>: 重點 ;<em>: 強調
<hr>: 分隔線 語意標籤 - 列表 定義 <ol>,<ul>: 有序 / 無序列表 ;<li>: 列表的項目 <dl>: 定義列表 ; <dt>: 被定義的項目 ; <dd>: 定義
使用 b, u, i 標籤 <b>: 所包含的內文必須粗體顯示 (bold) <u>: 所包含的內文必須加底線 (underline) <i>: 所包含的內文必須斜體顯示 (italic) Example <b><u>bold and underline text</u></b>
建立超連結 Hyper Link 利用 <a> 建立超連結 標籤屬性 href 的值代表要連結的網址, 內文代表要顯示在畫面上的文字 Example <a href="http://www.yahoo.com">yahoo Kimo!</a>
URI 的類型 Universal Resource Identifier 超連結的定址方式稱為 URI (Universal Resource Identifier), 通常包含下列幾個部分 : 例如 :
絕對 URI 與相對 URI 絕對 URI (Absolute URI) 包含通訊協定 伺服器名稱 資料夾和文件名稱 相對 URI (Relative URI) 通常只包含資料夾和文件名稱, 有時甚至連資料夾都可以省略不寫 相對 URI 又分為下列兩種類型 : 文件相對 URI (Document-Relative URI) 伺服器相對 URI (Server-Relative URI)
加入圖片 利用 <img> 標籤加入圖片 屬性 src 代表欲顯示的圖片所在位址 (URL) <img> 是一個不需要內文的標籤 <img src="http://www.w3schools.com/images/h_logo.gif"></img> 或 <img src="http://www.w3schools.com/images/h_logo.gif" /> <img src="images/h_logo.gif" />
建立書籤
建立列表 利用 <ul> 和 <li> 標籤合力建立列表 <ul> <li>item 1</li> <li>item 2</li> </ul> 此為無順序的列表 如果希望有明確的順序標示, 您可以將 <ul> 換成 <ol>
list-style-type list-style-type 屬性是用來設定在清單中, 每一條之前的記號要用什麼 最常見的 list-style-type 設定值為 : none ( 沒有 ) disc ( 全黑圓圈 ) circle ( 空心圓圈 ) square ( 正方形 ) One may also wish to use ordered character sets. Common ones are: upper-latin ( 大寫拉丁文 ) lower-latin ( 小寫拉丁文 ) upper-roman ( 大寫羅馬文 ) lower-roman ( 小寫羅馬文 ) upper-alpha ( 大寫希臘文 ) lower-alpha ( 小寫希臘文 )
建立表格 我們用 <table> 表示要建立一個新的表格 用 <tr> 建立一個列 (Table Row),<tr> 必須被包在 <table> 標籤中 用 <td> 建立一個資料欄 (Table Data),<td> 必須被包在 <tr> 中
<Table> 建立表格 <tr> <tr> <tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tr> </tr> </tr> </Table>
表格的背景色彩與背景圖片 以下二圖是在 <table> 元素分別加上 bgcolor="lightyellow" background="bg.gif" 屬性的瀏覽結果
回家 / 課堂作業 請建立一個簡單的個人首頁, 最好能包含超連結 圖片 以及表格等用法
參考資料 W3School HTML Tags: http://www.w3schools.com/tags/
<Table> 進階巢狀表格, 結合欄 <tr> <tr> <tr> <tr> <td colspan="3"></td> <td></td> <td></td> <td></td> <td></td> </tr> </tr> </tr> </tr> </Table>
<Table> 進階巢狀表格, 結合列 <tr> <td></td> <td></td> </tr> <tr> <tr> <td rowspan="4"> </td> <td></td> <td></td> </tr> </tr> <tr> <td></td> </tr> </Table>
表格的對齊方式 <table> 元素的 align 屬性提供了 left ( 靠左 ) center ( 置中 ) right ( 靠右 ) 等對齊方式, 例如 : <table border="1" align="left"> <table border="1" align="center"> <table border="1" align="right">
儲存格的對齊方式
向使用者收集資料 - 表單元素 有一群特別的標籤, 可以用來向使用者收集資料 包括 <input> <select> <textarea> 通常我們會把這些標籤包裹在表單標籤 <form> 裡面
input 標籤 <input> 顧名思義向使用者要求輸入, 其中有三個屬性是最重要的 type: 用來表達不同種類的輸入 name: 輸入資料的名稱 value: 輸入資料的內容
單行文字輸入框 在 <input> 設定屬性 type 為 text 則表示一個單行輸入框 <input type="text" /> 為這個輸入取一個名字, 設定資料預設值 <input type="text" name="title" value ="Home" />
密碼輸入框 在 <input> 設定屬性 type 為 password 則表示一個密碼專用的輸入框 <input type="password" /> 為這個輸入取一個名字 <input type="password" name="password" />
按鈕 在 <input> 設定屬性 type 為 button 則表示一個按鈕 <input type="button" /> 設定按鈕上的文字 <input type="button" value=" 按我 " />
多重選取框 在 <input> 設定屬性 type 為 checkbox 則表示一個可勾選的選取框 <input type="checkbox" /> 設定選取框被預設選取 <input type="checkbox" checked="true" />
單選框 在 <input> 設定屬性 type 為 radio 則表示一個單選框 <input type="radio" />
單選框 單選框必須配合 name 屬性運作, 擁有同樣 name 屬性的單選框為一個 Group 使用者只能在一個 Group 中選擇一個 男 <input type="radio" name="sex" /> 女 <input type="radio" name="sex" /> <br/> 成年 <input type="radio" name="age" /> 未成年 <input type="radio" name="age" />
多行文字輸入框 使用 <textarea> 提供多行文字輸入 利用 rows 屬性指定高度 cols 屬性指定寬度 標籤內文為輸入文字內容 <textarea rows="3" cols="20" > My name is Chao-Wei Peng. Welcome to my home. </textarea>
下拉式選單 我們利用 <select> 和 <option> 配合製作下拉式選單 <select name="sex"> <option value="male"> 男 </option> <option value="female"> 女 </option> </select> <option> 的 value 屬性為真正有意義的資料, 內文則是顯示給使用者看的文字
兩個表示區塊的標籤 有兩個單純表示區塊的標籤, 未來會很常用到 通常包含內文, 只是標籤本身沒有其他特殊意義, 只表達一個區塊的意思 <span> 用來表示一個不會自動換行的區塊 (inline) <div> 用來表示一個會自動換行的區塊 (block)
實機練習 設計一個問卷調查表單, 並使用上述的功能 : 單行文字輸入框 按鈕 多重選取框 單選框 多行文字輸入框 下拉式選單
HTML5 語意標籤 <section>: 章節 / 小節 <article>: 一篇文章 兩者可以互包 <nav>: 導覽選單 <header> <footer>: 文章段落或頁面的開頭 結尾
網頁排版
無語意標籤 div 與 span 單純將元素群組起來 CSS 或 Javascript 的操作對象
通用屬性 大部分 element 都有下面屬性 class, id: 替該 element 加上一個 classname / unique ID 使 CSS 的 selector 能選取 JavaScript 方便操作 title: 工具提示 (tooltip) style: 加上 CSS Declaration
參考資料 MDN HTML Elements 標籤列表 屬性介紹