html內容結構 


Front End 101 網頁前端入門

講師：張凱迪（KD Chang）







Copyright © 2016  All rights reserved

Outline

HTML 發展簡史 

HTML標籤簡介 

HTML 5 版面標籤簡介

關於HTML 5的一些好用工具













HTML 發展簡史

Here we talk Web not Internet !



補充連結：The Difference Between the Internet and World Wide Web

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 標籤簡介



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”> 
自動轉跳頁面(屬性內容如下) 
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）屬性


作為所有元素的共通屬性，常搭配 CSS 和 JS 做使用

class：常用於CSS群組設定樣式

id：同一頁面唯一不能重複使用，常用控制元素

HTML 標籤簡介 1 - 文字


結構性標籤 
可以用來描述標題和段落的元素
 EX: <h1>、<p> 

語法標籤
提供語氣、強調或是引述的額外資訊
EX: <strong>、<em> 


標題


<h1></h1>用於主標題(最大)、 <h2></h2> 用於次標題
<h1>至<h6> 權重依此類推


按這看結果

段落


<p></p> 用來標記文字段落，兩個段落預設會有一些空間


按這看結果

斷行


<br>不用成對標籤出現，用於斷行



按這看結果

水平線


<hr> 不用成對標籤出現，用於分隔


按這看結果

空白壓縮


當瀏覽器遇到兩個或以上的空白字元時，它只會顯示一個空白字元，而不會空多行。遇到斷行會 視為單一空白來處理 

按這看結果

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" enctype="multipart/form-data" method="post">
    <div><input type="file" name="img"></div>
    <input type="submit" />
  </form>
注意：上傳檔案 enctype="multipart/form-data"，一般情況為 application/x-www-form-urlencoded

按這看結果

送出、重置、按鈕 


   <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屬性為預設輸入框文字-->

按這看結果

更多的HTML 元素請參考...



Mozilla Developer Network HTML 元素 

練習三（sample 1-3）


請製作一份包含文字輸入、文字區塊、單選鈕、勾選框、下拉選單、送出和重置按鈕的表單

 測試用後端程式，放置於action屬性：http://aiolus.tw/form_test.php
提示 : <input type="text" name="username"></input> 
<input type="password" name="password"></input>







HTML5 版面標籤簡介

以前這樣寫兩欄版面...

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 的一些好用工具


Html5 shiv 解決老IE不支援



 

<!--[if lt IE 9]> 讓IE8以下的舊版瀏覽器可以支援html5語意標籤 <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]-->

HTML 5 Outliner 大綱分析工具


html5 快速開發模版

Html5 rock 教學資源






Q & A

[Front End 101] HTML 內容結構

By 張凱迪(KD Chang)

Made with Slides.com

[Front End 101] HTML 內容結構

101一般是國外入門課程的課程代號，希望藉由這次的 Front End 101 Workshop 能讓對於網頁前端程式設計有興趣的朋友可以有一個和藹可親的入門管道，啟發學習興趣並認識志同道合的朋友。工作坊目標希望帶大家從基礎開始，最後完成一個瀏覽器外掛(extenstion)！

  • 1,624

More from 張凱迪(KD Chang)