HTML 簡介
HTML：Hyper Text Markup Language 超文本標籤語言
HTML：網頁的“源碼”
瀏覽器：“解釋和執行”HTML源碼的工具
編輯工具：記事本、Notepad++、 EditPlus、HBuild
HTML 文檔的結構
HTML 標記的語法
HTML 標記的作用
標記內容在瀏覽器中的顯示樣式
例如： <font color="red">您好</font>
HTML 標記的語法
一般形式：
<標記> 文檔內容 </標記>
標記類型：
單標記 ，不標記任何內容，例如<br>，<hr>
雙標記，例如：<p>段落內容</p>
標記屬性：
分類：一般屬性，事件屬性
<標記 屬性1="屬性值" 屬性2="屬性值" 屬性3="屬性值"…>
例如：<hr size="3" align="center" width="50%">
頁面元素的事件屬性
事件
事件可能是用戶在某些內容上的點擊、鼠標經過某個特定元素、按下鍵盤上的某些按鍵等動作
事件還可能是 Web 瀏覽器中發生的事情，比如說某個 Web 頁面加載完成，或者是用戶滾動窗口或改變窗口大小
響應事件
事件屬性的值往往是一個 JavaScript 函數，通過使用 JavaScript ，可以監聽特定事件的發生，並對這些事件做出響應。
例如： <body onload=“check()”>
文件頭標記及子標記
文件頭及其功能
<head>…</head>標記對之間的部分稱爲文件頭
功能：
- 告訴瀏覽器如何顯示頁面，例如字符集，有效期
- 爲搜索引擎提供支持
子標記
<title></title>標記
<meta>標記
<base>標記
<link>標記
<style>…</style>標記
<title>標記
網頁摘要信息利於瀏覽器解析和搜索引擎搜索：
使用<title>標籤
<head>
<title>中國最大的門戶網站</title>
</head>
<meta>標記
單標記，提供兩類元數據描述:
一類是關於 HTTP 頭的描述，向瀏覽器傳回信息，以正確顯示網頁內容
<meta http-equiv=“頭名” content=“頭值">
一類是關於頁面內容的描述，用於搜索引擎
<meta name=“內容名稱” content=“內容的值">
使用<meta>標籤
- 描述文檔類型和字符編碼
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
- 提供搜索關鍵字和內容描述
<head>
<meta name= "keywords" content= "網上購物" />
<meta name= "description" content= "亞洲最大、最安全的網上交易平臺，提供各類服飾、美容、家居、數碼、……" />
</head>
HTML 頁面中的塊和行
HTML標籤分類（方便後續的佈局設計）：
- 塊級標籤：顯示爲“塊”狀，前後換行
- 行級標籤：按行逐一顯示
分類好處：方便後續的佈局設計
塊級標籤
根據使用場合，塊級標籤又細分爲：
- 基本塊級標籤
- 常用於佈局的塊級標籤
標題標籤
<h1>標題</h1>
……
<h6>標題</h6>
示例：
<body>
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
</body>
一級標題
二級標題
三級標題
四級標題
五級標題
六級標題
段落標籤
<p>……</p>
示例：
<body>
<h1>北京歡迎你</h1>
<p>北京歡迎你，有夢想誰都了不起！</p>
<p>有勇氣就會有奇蹟。</p>
</body>
北京歡迎你
北京歡迎你，有夢想誰都了不起！
有勇氣就會有奇蹟。
水平線標籤
<hr />
示例：
<body>
<h1>北京歡迎你</h1>
<hr />
<p>北京歡迎你，有夢想誰都了不起！/p>
<p>有勇氣就會有奇蹟。</p>
</body>
北京歡迎你
北京歡迎你，有夢想誰都了不起！/p>
有勇氣就會有奇蹟。
有序列表標籤
<ol>
<li>列表項1</li>
… …
</ol>
示例：
<body>
<h3>註冊步驟：</h3>
<ol>
<li>填寫信息</li>
<li>收電子郵件</li>
<li>註冊成功</li>
</ol>
</body>
註冊步驟：
- 填寫信息
- 收電子郵件
- 註冊成功
無序列表標籤
<ul>
<li>列表項1</li>
……
</ul>
示例：
<body>
<h3>新人上路指南 </h3>
<ul>
<li>如何激活會員名？</li>
<li>如何註冊會員？</li>
<li>註冊時密碼設置有什麼要求？</li>
</ul>
</body>
新人上路指南
- 如何激活會員名？
- 如何註冊會員？
- 註冊時密碼設置有什麼要求？
定義描述標籤
<dl>
<dt>標題</dt>
<dd>描述1</dd>
……
</dl>
示例：
<body>
<dl>
<dt>咖啡</dt>
<dd>一種黑色的熱飲料，原料據說是咖啡豆，非洲盛產這類原料。</dd>
<dd>可以提神，刺激神經。</dd>
<dl>
</body>
- 咖啡
- 一種黑色的熱飲料，原料據說是咖啡豆，非洲盛產這類原料。
- 可以提神，刺激神經。
這種效果可以和無序列表互相替代，因dt是塊狀元素，所以常用於圖文混編的佈局場合
<body>
<dl>
<dt> 圖片的HTML代碼……<dt>
<dd>……</dd>
</dl>
</body>
表格
<table>–表格
<tr> --行
<td> --列（單元格）
示例：
<table>
<tr>
<td>百度</td>
<td>新浪</td>
</tr>
……
</table>
| 百度 | 新浪 |
表單
一般和table使用：
<form>
<table>
<tr>
<td>...</td>
<td>...</td>
</tr>
.....
</table>
</form>
分區標籤 <div>
div標籤可內嵌到
等標籤內，作爲普通塊狀元素使用
<div style="width:400px; height:300px; background:#9FF">
<p>……</p>
<h3>新人上路</h3>
<ul>…… </ul>
</div>
小結
實際開發中常用的4種塊狀結構：
1、div-ul(ol)-li ：常用於分類導航或菜單等
2、div-dl-dt-dd ：常用於圖文混編的場合
3、table-tr-td ：常用於圖文佈局或顯示數據
4、form-table-tr-td：常用於佈局表單
行級標籤
圖像標籤
<img src= "圖片地址" alt="提示文字" title="提示文字" />
示例：
<img src="images/drink.jpg" alt="精品熱賣" title="精品熱賣 />
爲了不同瀏覽器之間的兼容，推薦使用title屬性 ，確保能顯示提示文字
範圍標籤
<span> ：顯示某行內的獨特樣式
<span >文本等行級內容</span>
例：
<p>商品價格:僅售<span style="color:red;font-size:70px;">10</span>元</p>
換行標籤
<br/>
示例：
<p>
北京歡迎你，有夢想誰都了不起！<br />
有勇氣就會有奇蹟。<br />
</p>
W3C 標準
W3C：World Wide Web Consortium，萬維網聯盟
W3C的職能：負責制定和維護web行業標準
W3C標準包括：
- HTML內容方面：XHTML
- 樣式美化方面：CSS
- 結構文檔訪問方面：DOM
- 頁面交互方面：ECMAScript
XHTML 1.0 基本規範
- 標籤名和屬性名稱必須小寫
- HTML標籤必須關閉
- 屬性值必須用引號括起來
- 標籤必須正確嵌套
- 必須添加文檔類型聲明
1、聲明必須位於文檔的最前面
2、三種級別：Strict（嚴格類型） 、Trasitional（過度類型）、 Frameset（框架類型）