HTML
按 ESC 概覽
長這樣
用啥寫
任何文字編輯器
怎麼開
點兩下。
用瀏覽器「瀏覽」
網址列
file://...- 瀏覽器直接開檔案
- 只有自己這台電腦能看得到
標籤概念
HTML
"Markup Language"：標記語言
"Markup"：標籤
替文字標上「語意」
每個人都應該努力培養雅量。
<p>每個人都應該努力培養<strong>雅量</strong>。</p><p> 標出「段落」
<strong> 標出「重點」
HTML：勾勒內容與結構的「Formatting Language」
Tag, Element, Attribute
標籤、元素、屬性
<標籤名 屬性1="值1" 屬性2="值2">內容</標籤名>Tag, Element, Attribute
標籤、元素、屬性
-
<label for="chk-tos">：
有著forattribute 的 Start tag。 -
</label>： End tag -
<label for="chk-tos">我已……條款</label>：
Label element。 -
有些 element 僅由單一 tag 構成，如
<input>、<hr>、<img>等。
學 HTML 像學英文
- 一篇課文
- 很多生字要背
- 記文法、片語
- 組裝成英文作文
- 一個 HTML 範例
- 很多標籤要記
- 記語法、常用結構片段
- 組裝成完整網頁
第一課：換行與空白
<br> ：換行
空白鍵預設會重疊
：可疊加的「空白 character entity」
<!-- --> ：多行註解
標籤大觀
語意標籤 - 內文系列
<h1>~<h6>：標題。
<p>：段落； <blockquote>：引文。
<strong>：重點；<em>：強調。
語意標籤 - 列表、定義
<hr>：分隔線。
<ol>，<ul>：有序/無序列表；<li>：列表的項目。
<dl>：定義列表； <dt>：被定義的項目； <dd>：定義。
表格
<table> 表格（table）；<tr> 表格列（table row）；
<td> 資料格子（table data cell）； <th> 表頭格子（table header）。
<tr> 裡只能裝 <td> 或 <th>；<td> 裡啥都能裝。
有功能的標籤
<img> 圖，<a> 超連結，<iframe> 嵌入框
<img src="網址" alt="圖壞掉時顯示的字" (width="寬" height="高")>
<a href="網址" (target="_blank")>顯示的文字</a>
<iframe src="網址"></iframe>表單元素
<input type="text|file|submit|..." name="變數名字" value="值">表單 - 勾勾和點點
name 屬性一樣 → 同一組。
<label> 之 for 屬性和 <input> 之 id 屬性配對。
另外也可以用 <label> 包住 <input> 來配對。
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 標籤列表、屬性介紹
巢狀標籤
大腸包小腸
- HTML 標籤可以互相嵌套 (nesting)
- 但不能隨便包
發生什麼事？檢查元素先。
請在右邊按 右鍵 → 「檢查元素」
Permitted Contents
每個 element 有自己的 permitted contents。
<p>、<h1>~<h6>裡頭只能包 phrasing content。<ul>、<ol>裡面只能包<li>。<tr>裡面只能包<td>與<th>。
常見嵌套錯誤
<div> inside <p>
頁面架構
雅量部落格
綜合前述，我們可以做出這樣的網頁內容：
但這並不是完整的網頁架構。
HTML 文件架構
-
<!DOCTYPE html>告訴瀏覽器用最新標準解析此網頁 <html>包住<head>和<body>。-
<head>存放「不是網頁內文」的其他資訊。<title>瀏覽器分頁標題<meta charset="utf-8">設定網頁編碼<meta name="..." content="...">其他設定
<body>網頁內容
雅量部落格 (完整版)
IE 與 HTML5
在 <head> 與 <head> 中間加上
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->參考資料：html5shiv 官方說明。
HTML 文件架構（複雜版）
Boilerplate = 「樣板」
偵測 IE、瀏覽器支援度、標準化 CSS 等常用功能。