html基礎筆記
1：
2：
HTML 標題
HTML 標題（Heading）是通過<h1> - <h6> 標籤來定義的.
<h1>這是一個標題</h1> <h2>這是一個標題</h2> <h3>這是一個標題</h3>
HTML 段落
HTML 段落是通過標籤 <p> 來定義的.
<p>這是一個段落。</p> <p>這是另外一個段落。</p>
HTML 鏈接
HTML 鏈接是通過標籤 <a> 來定義的.
<a href="http://www.runoob.com">這是一個鏈接使用了 href 屬性</a>
HTML 圖像
HTML 圖像是通過標籤 <img> 來定義的.
<img src="/images/logo.png" width="258" height="39" />
HTML 水平線
<hr> 標籤在 HTML 頁面中創建水平線。
hr 元素可用於分隔內容。
<p>hr 標籤定義水平線：</p>
<hr />
<p>這是段落。</p>
<hr />
<p>這是段落。</p>
<hr />
<p>這是段落。</p>
HTML 註釋
可以將註釋插入 HTML 代碼中，這樣可以提高其可讀性，使代碼更易被人理解。瀏覽器會忽略註釋，也不會顯示它們。
<!-- 這是一個註釋 -->
HTML 折行
如果您希望在不產生一個新段落的情況下進行換行（新行），請使用 <br> 標籤：
<p>這個<br>段落<br>演示了分行的效果</p>
HTML 格式化標籤
HTML 使用標籤 <b>("bold") 與 <i>("italic") 對輸出的文本進行格式, 如：粗體 or 斜體
這些HTML標籤被稱爲格式化標籤。
HTML 鏈接語法
鏈接的 HTML 代碼很簡單。它類似這樣：
<a href="url">鏈接文本</a>
HTML 鏈接 - target 屬性
使用 target 屬性，你可以定義被鏈接的文檔在何處顯示。
下面的這行會在新窗口打開文檔：
<a href="http://www.runoob.com/" target="_blank">訪問菜鳥教程!</a>
HTML <head> 元素
<head> 元素包含了所有的頭部標籤元素。在 <head>元素中你可以插入腳本（scripts）, 樣式文件（CSS），及各種meta信息。
可以添加在頭部區域的元素標籤爲: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
HTML <title> 元素
<title> 標籤定義了不同文檔的標題。
<title> 在 HTML/XHTML 文檔中是必須的。
<title> 元素:
- 定義了瀏覽器工具欄的標題
- 當網頁添加到收藏夾時，顯示在收藏夾中的標題
- 顯示在搜索引擎結果頁面的標題
一個簡單的 HTML 文檔:
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文檔標題</title> </head> <body> 文檔內容...... </body> </html>
HTML <base> 元素
<base> 標籤描述了基本的鏈接地址/鏈接目標，該標籤作爲HTML文檔中所有的鏈接標籤的默認鏈接:
<head> <base href="http://www.runoob.com/images/" target="_blank"> </head>
HTML <link> 元素
<link> 標籤定義了文檔與外部資源之間的關係。
<link> 標籤通常用於鏈接到樣式表:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
HTML <style> 元素
<style> 標籤定義了HTML文檔的樣式文件引用地址.
在<style> 元素中你也可以直接添加樣式來渲染 HTML 文檔:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
HTML <meta> 元素
meta標籤描述了一些基本的元數據。
<meta> 標籤提供了元數據.元數據也不顯示在頁面上，但會被瀏覽器解析。
META 元素通常用於指定網頁的描述，關鍵詞，文件的最後修改時間，作者，和其他元數據。
元數據可以使用於瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他Web服務。
<meta> 一般放置於 <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">
HTML <script> 元素
<script>標籤用於加載腳本文件，如： JavaScript。
<script> 元素在以後的章節中會詳細描述。
HTML 樣式- CSS
HTML樣式實例 - 背景顏色
背景色屬性（background-color）定義一個元素的背景顏色：
實例
<body style="background-color:yellow;"> <h2 style="background-color:red;">這是一個標題</h2> <p style="background-color:green;">這是一個段落。</p> </body>
HTML 樣式實例 - 字體, 字體顏色 ，字體大小
我們可以使用font-family（字體），color（顏色），和font-size（字體大小）屬性來定義字體的樣式:
實例
<h1 style="font-family:verdana;">一個標題</h1> <p style="font-family:arial;color:red;font-size:20px;">一個段落。</p>
HTML 樣式實例 - 文本對齊方式
使用 text-align（文字對齊）屬性指定文本的水平與垂直對齊方式：
實例
<h1 style="text-align:center;">居中對齊的標題</h1> <p>這是一個段落。</p>
內部樣式表
當單個文件需要特別樣式時，就可以使用內部樣式表。你可以在<head> 部分通過 <style>標籤定義內部樣式表:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
外部樣式表
當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個文件來改變整個站點的外觀。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
HTML 樣式標籤
| 標籤 | 描述 |
|---|---|
| <style> | 定義文本樣式 |
| <link> | 定義資源引用地址 |
HTML 圖像- 圖像標籤（ <img>）和源屬性（Src）
在 HTML 中，圖像由<img> 標籤定義。
<img> 是空標籤，意思是說，它只包含屬性，並且沒有閉合標籤。
要在頁面上顯示圖像，你需要使用源屬性（src）。src 指 "source"。源屬性的值是圖像的 URL 地址。
定義圖像的語法是：
<img src="url" alt="some_text">
URL 指存儲圖像的位置。如果名爲 "pulpit.jpg" 的圖像位於 www.runoob.com 的 images 目錄中，那麼其 URL 爲 http://www.runoob.com/images/pulpit.jpg。
瀏覽器將圖像顯示在文檔中圖像標籤出現的地方。如果你將圖像標籤置於兩個段落之間，那麼瀏覽器會首先顯示第一個段落，然後顯示圖片，最後顯示第二段。
HTML 圖像- Alt屬性
alt 屬性用來爲圖像定義一串預備的可替換的文本。
替換文本屬性的值是用戶定義的。
<img src="boat.gif" alt="Big Boat">
在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。爲頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助於更好的顯示信息，並且對於那些使用純文本瀏覽器的人來說是非常有用的。
HTML 圖像- 設置圖像的高度與寬度
height（高度） 與 width（寬度）屬性用於設置圖像的高度與寬度。
屬性值默認單位爲像素:
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
提示: 指定圖像的高度和寬度是一個很好的習慣。如果圖像指定了高度寬度，頁面加載時就會保留指定的尺寸。如果沒有指定圖片的大小，加載頁面時有可能會破壞HTML頁面的整體佈局。
HTML 表格
表格由 <table> 標籤來定義。每個表格均有若干行（由 <tr> 標籤定義），每行被分割爲若干單元格（由 <td> 標籤定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
表格實例
實例
<table border="1"> <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 表格和邊框屬性
如果不定義邊框屬性，表格將不顯示邊框。有時這很有用，但是大多數時候，我們希望顯示邊框。
使用邊框屬性來顯示一個帶有邊框的表格：
實例
<table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>
HTML 表格表頭
表格的表頭使用 <th> 標籤進行定義。
大多數瀏覽器會把表頭顯示爲粗體居中的文本：
實例
<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> 標籤
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
瀏覽器顯示如下：
- Coffee
- Milk
HTML 有序列表
同樣，有序列表也是一列項目，列表項目使用數字進行標記。 有序列表始於 <ol> 標籤。每個列表項始於 <li> 標籤。
列表項使用數字來標記。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
瀏覽器中顯示如下：
- Coffee
- Milk
HTML 自定義列表
自定義列表不僅僅是一列項目，而是項目及其註釋的組合。
自定義列表以 <dl> 標籤開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
瀏覽器顯示如下：
Coffee
- black hot drink
Milk
- white cold drink
HTML 佈局 - 使用<div> 元素
div 元素是用於分組 HTML 元素的塊級元素。
下面的例子使用五個 div 元素來創建多列布局：
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body> <div id="container" style="width:500px"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">主要的網頁標題</h1></div> <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"> <b>菜單</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;"> 內容在這裏</div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> 版權 © runoob.com</div> </div> </body> </html>
HTML 表單 - 輸入元素
多數情況下被用到的表單標籤是輸入標籤（<input>）。
輸入類型是由類型屬性（type）定義的。大多數經常被用到的輸入類型如下：
文本域（Text Fields）
文本域通過<input type="text"> 標籤來設定，當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域。
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
瀏覽器顯示如下：
First name:
Last name:
注意:表單本身並不可見。同時，在大多數瀏覽器中，文本域的缺省寬度是20個字符。
密碼字段
密碼字段通過標籤<input type="password"> 來定義:
<form>
Password: <input type="password" name="pwd">
</form>
瀏覽器顯示效果如下:
Password:
注意:密碼字段字符不會明文顯示，而是以星號或圓點替代。
單選按鈕（Radio Buttons）
<input type="radio"> 標籤定義了表單單選框選項
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
瀏覽器顯示效果如下:
Male
Female
複選框（Checkboxes）
<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>
瀏覽器顯示效果如下:
I have a bike
I have a car
提交按鈕(Submit Button)
<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>
瀏覽器顯示效果如下:
Username:
假如您在上面的文本框內鍵入幾個字母，然後點擊確認按鈕，那麼輸入數據會傳送到 "html_form_action.php" 的頁面。該頁面將顯示出輸入的結果。
HTML 框架
frame - 設置高度與寬度
height 和 width 屬性用來定義iframe標籤的高度與寬度。
屬性默認以像素爲單位, 但是你可以指定其按比例顯示 (如："80%")。
實例
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
Iframe - 移除邊框
frameborder 屬性用於定義iframe表示是否顯示邊框。
設置屬性值爲 "0" 移除iframe的邊框:
實例
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
使用iframe來顯示目標鏈接頁面
iframe可以顯示一個目標鏈接的頁面
目標鏈接的屬性必須使用iframe的屬性，如下實例:
實例
<iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>
\
HTML 顏色值
顏色由紅(R)、綠(G)、藍(B)組成。
顏色值
顏色值由十六進制來表示紅、綠、藍（RGB）。
每個顏色的最低值爲 0(十六進制爲 00)，最高值爲 255(十六進制爲FF)。
十六進制值的寫法爲 # 號後跟三個或六個十六進制字符。
三位數表示法爲：#RGB，轉換爲6位數表示爲：#RRGGBB。
<p style="background-color:#FFFF00">
通過十六進制設置背景顏色
</p>
<p style="background-color:rgb(255,255,0)">
通過 rbg 值設置背景顏色
</p>
<p style="background-color:yellow">
通過顏色名設置背景顏色
</p>
HTML <script> 標籤
<script> 標籤用於定義客戶端腳本，比如 JavaScript。
<script> 元素既可包含腳本語句，也可通過 src 屬性指向外部腳本文件。
JavaScript 最常用於圖片操作、表單驗證以及內容動態更新。
下面的腳本會向瀏覽器輸出"Hello World!"：
實例
<script> document.write("Hello World!"); </script>
Tip: 學習更多關於Javascript教程，請查看JavaScript 教程!
HTML<noscript> 標籤
<noscript> 標籤提供無法使用腳本時的替代內容，比方在瀏覽器禁用腳本時，或瀏覽器不支持客戶端腳本時。
<noscript>元素可包含普通 HTML 頁面的 body 元素中能夠找到的所有元素。
只有在瀏覽器不支持腳本或者禁用腳本時，纔會顯示 <noscript> 元素中的內容：
實例
<script> document.write("Hello World!") </script> <noscript>抱歉，你的瀏覽器不支持 JavaScript!</noscript>
JavaScript體驗(來自本站javascript教程)
JavaScript實例代碼:
JavaScript可以直接在HTML輸出:
document.write("<p>這是一個段落。</p>");
JavaScript事件響應:
<button type="button" onclick="myFunction()">點我！</button>
JavaScript處理 HTML 樣式:
document.getElementById("demo").style.color="#ff0000";
HTML字符實體
 |
實體名稱對大小寫敏感！ |
|---|
| 顯示結果 | 描述 | 實體名稱 | 實體編號 |
|---|---|---|---|
| 空格 | |   | |
| < | 小於號 | < | < |
| > | 大於號 | > | > |
| & | 和號 | & | & |
| " | 引號 | " | " |
| ' | 撇號 | ' (IE不支持) | ' |
| ￠ | 分 | ¢ | ¢ |
| £ | 鎊 | £ | £ |
| ¥ | 人民幣/日元 | ¥ | ¥ |
| € | 歐元 | € | € |
| § | 小節 | § | § |
| © | 版權 | © | © |
| ® | 註冊商標 | ® | ® |
| ™ | 商標 | ™ | ™ |
| × | 乘號 | × | × |
| ÷ | 除號 | ÷ | ÷ |