Day 02
Author : ScorpioDong
1. HTML 文本格式化
1.1 文本格式化標籤
| 標籤 |
描述 |
<b> |
粗體文本 |
<em> |
着重文字 |
<i> |
斜體 |
<strong> |
加重語氣 |
<small> |
小號字體 |
<sub> |
下標 |
<sup> |
上標 |
<ins> |
插入字 |
<del> |
刪除字 |
1.2 計算機輸出標籤
| 標籤 |
描述 |
<code> |
計算機代碼 |
<kbd> |
鍵盤碼 |
<samp> |
計算機代碼樣本 |
<var> |
變量 |
<pre> |
預格式文本 |
1.3 引用，引文和標籤定義
| 標籤 |
描述 |
<abbr> |
定義縮寫 |
<address> |
定義地址 |
<bdo> |
定義文字方向 |
<blockquote> |
定義長引用 |
<q> |
定義短引用 |
<cite> |
定義引用、引證 |
<dfn> |
定義一個定義項目 |
2. HTML 超鏈接
- HTML使用標籤
<a> 來設置超文本鏈接。
- 超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。
- 當您把鼠標指針移動到網頁中的某個鏈接上時，箭頭會變爲一隻小手。
- 在標籤
<a> 中使用了href屬性來描述鏈接的地址。
- 默認情況下，鏈接將以以下形式出現在瀏覽器中：
- 一個未訪問過的鏈接顯示爲藍色字體並帶有下劃線。
- 訪問過的鏈接顯示爲紫色並帶有下劃線。
- 點擊鏈接時，鏈接顯示爲紅色並帶有下劃線。
- target屬性可以定義被連接的文檔在何處顯示
- id可以創建一個HTML文檔書籤，可以使用另一個超鏈接連接到這個書籤
<a herf="www.google.com">Google</a>
<a herf="www.google.com" target="_blank">Google</a>
<a id="hello">Hello</a>
<a herf="#hello">Link Hello</a>
3. HTML <head>
<head> 元素包含了所有的頭部標籤元素- 在
<head> 中可以插入腳本、樣式文件以及各種meta信息
| 標籤 |
描述 |
| <<head> |
定義了文檔的信息 |
| <title> |
定義了文檔的標題 |
| <base> |
定義了頁面鏈接標籤的默認鏈接地址 |
| <link> |
定義了一個文檔和外部資源之間的關係 |
| <meta> |
定義了HTML文檔中的元數據 |
| <script> |
定義了客戶端的腳本文件 |
| <style> |
定義了HTML文檔的樣式文件 |
3.1 <title>
<title> 標籤定義了不同文檔的標題。<title> 在 HTML/XHTML 文檔中是必須的。<title> 元素:
- 定義了瀏覽器工具欄的標題
- 當網頁添加到收藏夾時，顯示在收藏夾中的標題
- 顯示在搜索引擎結果頁面的標題
3.2 <base>
<base> 標籤描述了基本的鏈接地址/鏈接目標，該標籤作爲HTML文檔中所有的鏈接標籤的默認鏈接
3.3 <link>
<link> 標籤定義了文檔與外部資源之間的關係<link> 標籤通常用於鏈接到樣式表
3.4 <style>
<style> 標籤定義了HTML文檔的樣式文件引用地址.- 在
<style> 元素中你也可以直接添加樣式來渲染 HTML 文檔
3.5 <meta>
<meta> 標籤描述了一些基本的元數據。<meta> 標籤提供了元數據.元數據也不顯示在頁面上，但會被瀏覽器解析。- META 元素通常用於指定網頁的描述，關鍵詞，文件的最後修改時間，作者，和其他元數據。
- 元數據可以使用於瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他Web服務。
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<meta name="author" content="ScorpioDong">
<meta http-equiv="refresh" content="30">
3.6 <script>
<script> 標籤用於加載腳本文件，如： JavaScript。
4. HTML 表格
<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>
| 標籤 |
描述 |
| <table> |
定義表格 |
| <th> |
定義表格的表頭 |
| <tr> |
定義表格的行 |
| <td> |
定義表格單元 |
| <caption> |
定義表格標題 |
| <colgroup> |
定義表格列的組 |
| <col> |
定義用於表格列的屬性 |
| <thead> |
定義表格的頁眉 |
| <tbody> |
定義表格的主體 |
| <tfoot> |
定義表格的頁腳
|
5. HTML 列表
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
- Coffee
- Milk
6. HTML 區塊
<div> 元素通常作爲容器使用，本身沒有特殊含義，可以通過樣式文件定義其屬性<span> 元素可用作文本的容器，本身沒有特殊含義，可以通過樣式文件定文本樣式<div> 和 <table> 也常用於網頁頁面的佈局使用
7. HTML 框架
<iframe> 元素可以讓一個網頁內顯示另一個網頁的內容- 語法：
<iframe src="URL"></iframe>
- height 和 width屬性可以設置iframe高度和寬度
- frameborder屬性可以設置iframe的邊框
- name屬性配合
<a>的target屬性可以是iframe顯示a的鏈接
8. HTML 表單
8.1 文本域
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
First name:
Last name:
8.2 密碼
<form>
Password: <input type="password" name="pwd">
</form>
Password:
8.3 單選按鈕
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
Male
Female
8.4 複選按鈕
<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>
I have a bike
I have a car
8.5 提交按鈕
- 當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件
<form name="input" action="target.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
Username:
