前端HTML回顧
<html>標簽：定義HTML文檔
<body>標簽：定義文檔主體
<h1> - <h6> 標簽：定義HTML標題
<hr> 標簽：創建水平線
<!-- 這是一個註釋 --> 註釋
<p> 標簽：段落
<br />標簽：換行
HTML 鏈接
<a> 標簽：鏈接
默認情況下，鏈接將以以下形式出現在瀏覽器中：
一個未訪問過的鏈接顯示為藍色字體並帶有下劃線。
訪問過的鏈接顯示為紫色並帶有下劃線。
點擊鏈接時，鏈接顯示為紅色並帶有下劃線。
（1）href屬性：來描述鏈接的地址
<a href="url">鏈接文本</a>
（2）target 屬性：定義被鏈接的文檔在何處顯示
例：target="_blank"： 鏈接將在新窗口打開
（3）id屬性：在一個HTML文檔書簽標記
例：插入ID <a id="tips">文字</a>
文檔中創建一個鏈接到ID部分 <a href="#tips">文字</a>
創建一個鏈接到其它文檔ID部分<a href="http://www.baidu.com/html-links.html#tips">文字</a>
註釋： 請始終將正斜杠添加到子文件夾。
例：href="http://www.baidu.com/html/
HTML <head> 元素
頭部區域的元素標簽為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>
<title> 標簽：定義了不同文檔的標題
定義了瀏覽器工具欄的標題
當網頁添加到收藏夾時，顯示在收藏夾中的標題
顯示在搜索引擎結果頁面的標題
<base> 標簽：描述了基本的鏈接地址/鏈接目標，該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接:
<base href="http://www.baidu.com/images/" target="_blank">
<link> 標簽：鏈接到樣式表(CSS)
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style> 元素：直接添加CSS樣式來渲染 HTML 文檔
<head><style type="text/css">body {background-color:yellow}p {color:blue}</style></head><meta> 標簽：提供了元數據不顯示在頁面上，但會被瀏覽器解析。
為搜索引擎定義關鍵詞:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
為網頁定義描述內容:
<meta name="description" content="免費 Web & 編程 教程">
定義網頁作者:
<meta name="author" content="Runoob">
每30秒中刷新當前頁面:
<meta http-equiv="refresh" content="30">
<script>標簽：用於加載腳本文件，如： JavaScript
HTML 圖像- 圖像標簽（ <img>）和源屬性（Src）
<img> 是空標簽，只包含屬性，沒有閉合標簽。
<img src="url" alt="some_text">
（1）src 屬性： "source"源屬性的值是圖像的 URL 地址
（2）alt 屬性：用來為圖像定義一串預備的可替換的文本。
（3）height（高度） 與 width（寬度）屬性：用於設置圖像的高度與寬度。
HTML 表格
<table> 標簽：表格
<tr> 標簽：行
<th> 標簽：表頭
<td> 標簽：單元格
colspan="2"：鏈接行的兩個段元格
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr></table>
HTML 列表
<ul> 標簽：無序列表
<ol> 標簽：有序列表
<li> 標簽：每個列表項的開始
<ul><li>Coffee</li><li>Milk</li></ul><ol><li>Coffee</li><li>Milk</li></ol>
<dl>標簽：自定義例表
<dl><dt>自定義列表項</dt><dd>自定義列表項的定義<dd><dt>自定義列表項</dt><dd>自定義列表項的定義<dd></dl>
HTML 區塊
<div> 元素：塊級元素，可用於組合其他 HTML 元素的容器。
<span> 元素：內聯元素，可用作文本的容器。
<table> 元素：作用是顯示表格化的數據。
塊級元素(block-level)：在瀏覽器顯示時，通常會以新行來開始（和結束）。例: <h1>, <p>, <ul>, <table>
內聯元素(inline)：在顯示時通常不會以新行開始。例: <b>, <td>, <a>, <img>
HTML 布局
<div>塊級元素或是<table>表格化的數據
HTML 表單和輸入
<form>標簽：表單
<input>標簽：輸入
文本域（Text Fields）：缺省寬度是20個字符
<form>First name: <input type="text" name="firstname"><br>Last name: <input type="text" name="lastname"></form>
密碼字段：<input type="password">——密碼不會顯示，以星號或圓點替代
<form>Password: <input type="password" name="pwd"></form>
單選按鈕：<input type="radio">
<form><input type="radio" name="sex" value="male">Male<br><input type="radio" name="sex" value="female">Female</form>
復選框：<input type="checkbox">
<form><input type="checkbox" name="vehicle" value="Bike">I have a bike<br><input type="checkbox" name="vehicle" value="Car">I have a car </form>
提交按鈕：<input type="submit">
<form name="input" action="html_form_action.php" method="get">Username: <input type="text" name="user"><input type="submit" value="Submit"></form>
HTML 框架
<iframe>框架：在同一個瀏覽器窗口中顯示不止一個頁面。
iframe語法：<iframe src="URL"></iframe>
height 和 width 屬性：用來定義iframe標簽的高度與寬度。——屬性默認以像素為單位,
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
frameborder 屬性：是否顯示邊框——屬性值為 "0" 移除iframe的邊框
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
例：點擊鏈接，鏈接地址頁面顯示在iframe框架中
<iframe src="demo_iframe.htm" name="iframe_a"></iframe><p><a href="http://www.baidu.com" target="iframe_a">baidu.com</a></p>
註：name和target名字相同。
前端HTML回顧