HTML菜鳥教程學習筆記
阿新 • • 發佈：2019-01-26
最近想學習學習前端相關，先從基礎吧；
本文主要是在菜鳥筆記上的html教程中的筆記或者總結，主要給自己查詢；
參考連結：http://www.runoob.com/
HTML 教程
超文字標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用於建立網頁的標準標記語言。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head> - 注意:HTML中不支援 空格、回車、製表符，它們都會被解析成一個空白字元。
- 只有在MySQL中可以使用”utf-8”的別名”utf8”，但是在其他地方一律使用大寫”UTF-8”
- 推薦使用長字尾名 html. htm 是歷史遺留的8.3字元限制命名方式.從 htm 和 html 中選擇時，也應該選擇無限制長度命名方式的 html 。
HTML簡介
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body> <h1>我的第一個標題</h1> <p>我的第一個段落。</p> </body> </html> <!DOCTYPE html> 宣告為 HTML5 文件 <html> 元素是 HTML 頁面的根元素 <head> 元素包含了文件的元（meta）資料 <title> 元素描述了文件的標題 <body> 元素包含了可見的頁面內容 <h1> 元素定義一個大標題 <p> 元素定義一個段落
什麼是HTML?
- HTML 指的是超文字標記語言: HyperText Markup Language
- HTML 不是一種程式語言，而是一種標記語言
- 標記語言是一套標記標籤 (markup tag)
- HTML 使用標記標籤來描述網頁
- HTML 文件包含了HTML 標籤及文字內容
- HTML文件也叫做 web 頁面
HTML 標籤
HTML 標記標籤通常被稱為 HTML 標籤 (HTML tag)。
HTML 標籤是由尖括號包圍的關鍵詞，比如
HTML 標籤通常是成對出現的，比如 和
標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤
開始和結束標籤也被稱為開放標籤和閉合標籤
HTML 元素
“HTML 標籤” 和 “HTML 元素” 通常都是描述同樣的意思.
但是嚴格來講, 一個 HTML 元素包含了開始標籤與結束標籤
Web 瀏覽器
Web瀏覽器（如谷歌瀏覽器，Internet Explorer，Firefox，Safari）是用於讀取HTML檔案，並將其作為網頁顯示。
瀏覽器並不是直接顯示的HTML標籤，但可以使用標籤來決定如何展現HTML頁面的內容給使用者：
* head 裡面不顯示，只有 區域 (白色部分) 才會在瀏覽器中顯示。
宣告
宣告有助於瀏覽器中正確顯示網頁。
網路上有很多不同的檔案，如果能夠正確宣告HTML的版本，瀏覽器就能正確顯示網頁內容。
doctype 宣告是不區分大小寫的，以下方式均可：
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
中文編碼
目前在大部分瀏覽器中，直接輸出中文會出現中文亂碼的情況，這時候我們就需要在頭部將字元宣告為 UTF-8。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>頁面標題</title>
</head>
<body>
<h1>我的第一個標題</h1>
<p>我的第一個段落。</p>
</body>
</html>
HTML基礎
- HTML 標題（Heading）是通過標籤來定義的.
- HTML 段落是通過標籤 < p> 來定義的.
HTML 連結是通過標籤 < a> 來定義的.
<a href="http://www.runoob.com">這是一個連結</a>HTML 影象是通過標籤 < img> 來定義的.
<img src="/images/logo.png" width="258" height="39" />
HTML元素
- 開始標籤常被稱為起始標籤（opening tag），結束標籤常稱為閉合標籤（closing tag）。
- HTML 元素以開始標籤起始，HTML 元素以結束標籤終止
- 元素的內容是開始標籤與結束標籤之間的內容
- 某些 HTML 元素具有空內容（empty content），空元素在開始標籤中進行關閉（以開始標籤的結束而結束）
- 大多數 HTML 元素可擁有屬性
- 元素可以巢狀
- 不要忘記結束標籤
- 沒有內容的 HTML 元素被稱為空元素。空元素是在開始標籤中關閉的。比如
，HTML、XHTML 和 XML 都接受這種方 - 使用小寫標籤；
HTML 屬性
- 屬性是 HTML 元素提供的附加資訊。
- 屬性一般描述於開始標籤
- 屬性總是以名稱/值對的形式出現，比如：name=”value”。
- 屬性值應該始終被包括在引號內。雙引號是最常用的，不過使用單引號也沒有問題。比如屬性值本身就含有雙引號，那麼您必須使用單引號，
- 推薦標準中推薦小寫的屬性/屬性值。
class 為html元素定義一個或多個類名（classname）(類名從樣式檔案引入)
id 定義元素的唯一id
style 規定元素的行內樣式（inline style）
title 描述了元素的額外資訊 (作為工具條使用)HTML 標題
標題（Heading）是通過 <h1> - <h6> 標籤進行定義的.
瀏覽器會自動地在標題的前後新增空行
檢視原始碼:右鍵，然後選擇"檢視原始檔"（IE）或"檢視頁面原始碼";
<html> 定義 HTML 文件
<body> 定義文件的主體
<h1> - <h6> 定義 HTML 標題
<hr> 定義水平線
<!--...--> 定義註釋
1到6號標題與1到6號字型逆序對應，比如1號字型對應6號標題，2號字型對應5號標題。HTML 段落
段落是通過 <p> 標籤定義的
<p>這是一個段落 </p>
不要忘記結束標籤
如果您希望在不產生一個新段落的情況下進行換行（新行），請使用 <br /> 標籤;
當顯示頁面時，瀏覽器會移除原始碼中多餘的空格和空行。所有連續的空格或空行都會被算作一個空格。
<p> 定義一個段落
<br> 插入單個折行（換行）HTML 文字格式化
<b> 與<i> 定義粗體或斜體文字。
<strong> 或者 <em>意味著你要呈現的文字是重要的，所以要突出顯示;
文字格式化:
<b> 定義粗體文字
<em> 定義著重文字
<i> 定義斜體字
<small> 定義小號字
<strong> 定義加重語氣
<sub> 定義下標字
<sup> 定義上標字
<ins> 定義插入字
<del> 定義刪除字
"計算機輸出" 標籤
<code> 定義計算機程式碼
<kbd> 定義鍵盤碼
<samp> 定義計算機程式碼樣本
<var> 定義變數
<pre> 定義預格式文字
HTML 引文, 引用, 及標籤定義
<abbr> 定義縮寫
<address> 定義地址
<bdo> 定義文字方向
<blockquote> 定義長的引用
<q> 定義短的引用語
<cite> 定義引用、引證
<dfn> 定義一個定義專案。
css:文字顯示為單行，超過部分隱藏並使用省略號，例項:
div {
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
width:120px;
}HTML 連結
HTML使用標籤 <a>來設定超文字連結。
一個未訪問過的連結顯示為藍色字型並帶有下劃線。
訪問過的連結顯示為紫色並帶有下劃線。
點選連結時，連結顯示為紅色並帶有下劃線。
<a href="url">連結文字</a>
使用 target 屬性，你可以定義被連結的文件在何處顯示。
下面的這行會在新視窗開啟文件：
<a href="http://www.runoob.com/" target="_blank">訪問菜鳥教程!</a>
HTML 連結- id 屬性
id屬性可用於建立在一個HTML文件書籤標記。
請始終將正斜槓新增到子資料夾。
圖片連結
<a href="http://www.runoob.com/html/html-tutorial.html">
<img border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a>
跳出框架
<a href="http://www.runoob.com/" target="_top">點選這裡!</a> HTML head
<head> 定義了文件的資訊
<title>定義了文件的標題
<base> 定義了頁面連結標籤的預設連結地址
<link> 定義了一個文件和外部資源之間的關係,常用於連結到樣式表
<link rel="stylesheet" type="text/css" href="mystyle.css">
<meta> 定義了HTML文件中的元資料
為搜尋引擎定義關鍵詞:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
定義網頁作者:
<meta name="author" content="Runoob">
每30秒鐘重新整理當前頁面:
<meta http-equiv="refresh" content="30">
<script> 定義了客戶端的指令碼檔案,<script>標籤用於載入指令碼檔案，如： JavaScript。
<style> 定義了HTML文件的樣式檔案HTML 樣式CSS
CSS (Cascading Style Sheets) 用於渲染HTML元素標籤的樣式.
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>如何使用CSS
- 內聯樣式- 在HTML元素中使用”style” 屬性
當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。 使用內聯樣式的方法是在相關的標籤中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。
如何改變段落的顏色和左外邊距。
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
背景色屬性（background-color）定義一個元素的背景顏色：
<body style="background-color" >
我們可以使用font-family（字型），color（顏色），和font-size（字型大小）屬性來定義字型的樣式:
使用 text-align（文字對齊）屬性指定文字的水平與垂直對齊方式：- 內部樣式表
當單個檔案需要特別樣式時，就可以使用內部樣式表。
你可以在<head> 部分通過 <style>標籤定義內部樣式表:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>- 外部引用 - 使用外部 CSS 檔案;
當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個檔案來改變整個站點的外觀。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
不建議使用的標籤有: <font>, <center>, <strike>
不建議使用的屬性: color 和 bgcolor.對於大部分標籤，以上兩種方法均可，且修改父級標籤，子級標籤特性也會改變。但某些標籤確無法通過修改父級標籤來改變子級標籤特性，如a標籤，修改其顏色特性，必須直接修改 a 標籤的特性才可。
<a href="#" style="color：red;" rel="nofollow">只能使用"內聯"方式</a>
HTML 影象
1 影象標籤（<img>）和源屬性（Src）
<img> 是空標籤，意思是說，它只包含屬性，並且沒有閉合標籤。
<img src="url" alt="some_text">
2 Alt屬性
alt 屬性用來為影象定義一串預備的可替換的文字。
<img src="boat.gif" alt="Big Boat">
3 設定影象的高度與寬度,屬性值預設單位為畫素
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
注意: 載入頁面時，要注意插入頁面影象的路徑，如果不能正確設定影象的位置，瀏覽器無法載入圖片，影象標籤就會顯示一個破碎的圖片。
<img> 定義影象
<map> 定義影象地圖
<area> 定義影象地圖中的可點選區域HTML 表格
表格由 <table> 標籤來定義。每個表格均有若干行（由 <tr> 標籤定義），每行被分割為若干單元格（由 <td> 標籤定義）。
<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>
1 表格和邊框屬性
border="1"
2 表格表頭
<th> 標籤,大多數瀏覽器會把表頭顯示為粗體居中的文字;
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<table> 定義表格
<th> 定義表格的表頭
<tr> 定義表格的行
<td> 定義表格單元
<caption> 定義表格標題
<colgroup> 定義表格列的組
<col> 定義用於表格列的屬性
<thead> 定義表格的頁首
<tbody> 定義表格的主體
<tfoot> 定義表格的頁尾
eg
<h4 style="text-align:center">課程表</h4>
<table border="1" cellpadding="10" width="100%">
<tr>
<th colspan="2">時間\日期</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
</tr>
<tr>
<th rowspan="2">上午</th>
<th>9:30-10:15</th>
<th>語文</th>
<th>語文</th>
<th>語文</th>
<th>語文</th>
<th>語文</th>
</tr>
<tr>
<th>10:25-11:10</th>
<th>語文</th>
<th>語文</th>
<th>語文</th>
<th>語文</th>
<th>語文</th>
</tr>
<tr>
<th colspan="7"></th>
</tr>
<tr>
<th rowspan="2">下午</th>
<th>14:30-15:15</th>
<th>語文</th>
<th>語文</th>
<th>語文</th>
<th>語文</th>
<th>語文</th>
</tr>
<tr>
<th>15:25-16:10</th>
<th>語文</th>
<th>語文</th>
<th>語文</th>
<th>語文</th>
<th>語文</th>
</tr>
</table>
HTML 列表
HTML 支援有序、無序和定義列表
1 無序列表
無序列表是一個專案的列表，此列專案使用粗體圓點（典型的小黑圓圈）進行標記。
無序列表使用 <ul> 標籤
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
2 有序列表
同樣，有序列表也是一列專案，列表專案使用數字進行標記。 有序列表始於 <ol> 標籤。每個列表項始於 <li> 標籤。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
3 自定義列表
自定義列表不僅僅是一列專案，而是專案及其註釋的組合。
自定義列表以 <dl> 標籤開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
<ol> 定義有序列表
<ul> 定義無序列表
<li> 定義列表項
<dl> 定義列表
<dt> 自定義列表專案
<dd> 定義自定列表項的描述HTML div和span
HTML 可以通過 <div> 和 <span>將元素組合起來。
大多數 HTML 元素被定義為塊級元素或內聯元素。
1 區塊元素
塊級元素在瀏覽器顯示時，通常會以新行來開始（和結束）。
例項: <h1>, <p>, <ul>, <table>
2 內聯元素
內聯元素在顯示時通常不會以新行開始。
例項: <b>, <td>, <a>, <img>
3 <div> 元素
<div> 元素是塊級元素，它可用於組合其他 HTML 元素的容器。
<div> 元素沒有特定的含義。除此之外，由於它屬於塊級元素，瀏覽器會在其前後顯示折行。
如果與CSS一同使用，<div> 元素可用於對大的內容塊設定樣式屬性;
<div> 元素的另一個常見的用途是文件佈局;
4 <span> 元素
<span> 元素是內聯元素，可用作文字的容器;
<span> 元素也沒有特定的含義。
<span> 元素可用於為部分文字設定樣式屬性。HTML 佈局
大多數網站會把內容安排到多個列中（就像雜誌或報紙那樣）。
大多數網站可以使用 <div> 或者 <table> 元素來建立多列。CSS 用於對元素進行定位，或者為頁面建立背景以及色彩豐富的外觀。
雖然我們可以使用HTML table標籤來設計出漂亮的佈局，但是table標籤是不建議作為佈局工具使用的 - 表格不是佈局工具。
<!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 表單和輸入
HTML 表單用於蒐集不同型別的使用者輸入。
表單元素是允許使用者在表單中輸入內容,比如：文字域(textarea)、下拉列表、單選框(radio-buttons)、複選框(checkboxes)等等。
表單使用表單標籤 <form> 來設定
多數情況下被用到的表單標籤是輸入標籤（<input>）,輸入型別是由型別屬性（type）定義的。
1 文字域（Text Fields）
文字域通過<input type="text"> 標籤來設定，當用戶要在表單中鍵入字母、數字等內容時，就會用到文字域。
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
注意:表單本身並不可見。同時，在大多數瀏覽器中，文字域的預設寬度是20個字元。
2 密碼欄位
<form>
Password: <input type="password" name="pwd">
</form>
3 單選按鈕（Radio Buttons）
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
4 複選框（Checkboxes）
<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>
5 提交按鈕(Submit Button)
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
<form> 定義供使用者輸入的表單
<input> 定義輸入域
<textarea> 定義文字域 (一個多行的輸入控制元件)
<label> 定義了 <input> 元素的標籤，一般為輸入標題
<fieldset> 定義了一組相關的表單元素，並使用外框包含起來
<legend> 定義了 <fieldset> 元素的標題
<select> 定義了下拉選項列表
<optgroup> 定義選項組
<option> 定義下拉列表中的選項
<button> 定義一個點選按鈕
<datalist>New 指定一個預先定義的輸入控制元件選項列表
<keygen>New 定義了表單的金鑰對生成器欄位
<output>New 定義一個計算結果
HTML 框架
通過使用框架，你可以在同一個瀏覽器視窗中顯示不止一個頁面。
<iframe src="URL"></iframe>
1 設定高度與寬度
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
2 移除邊框
frameborder 屬性用於定義iframe表示是否顯示邊框,設定屬性值為 "0" 移除iframe的邊框:
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
3 使用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 顏色
HTML 顏色由一個十六進位制符號來定義，這個符號由紅色、綠色和藍色的值組成（RGB）。
每種顏色的最小值是0（十六進位制：#00）。最大值是255（十六進位制：#FF）。
三種顏色 紅，綠，藍的組合從0到255，一共有1600萬種不同顏色(256 x 256 x 256)。
相對於使用rgb(255,255,0)，使用rgba(255,255,0,0.5)可以實現設定顏色透明度的功能，這裡的0.5表示透明度，範圍0~1。
141個顏色名稱是在HTML和CSS顏色規範定義的（17標準顏色，再加124）。下表列出了所有顏色的值，包括十六進位制值。
HTML 指令碼
JavaScript 使 HTML 頁面具有更強的動態和互動性。
<script> 標籤用於定義客戶端指令碼，比如 JavaScript。
<script> 元素既可包含指令碼語句，也可通過 src 屬性指向外部指令碼檔案。
JavaScript 最常用於圖片操作、表單驗證以及內容動態更新。
<noscript> 標籤提供無法使用指令碼時的替代內容，比方在瀏覽器禁用指令碼時，或瀏覽器不支援客戶端指令碼時。
<noscript>元素可包含普通 HTML 頁面的 body 元素中能夠找到的所有元素。
HTML 字元實體
HTML 中的預留字元必須被替換為字元實體。
在 HTML 中，某些字元是預留的,不能使用小於號（<）和大於號（>），這是因為瀏覽器會誤認為它們是標籤,如果希望正確地顯示預留字元，我們必須在 HTML 原始碼中使用字元實體（character entities）。 字元實體類似這樣：
&entity_name;
或
&#entity_number;
不間斷空格(Non-breaking Space)
不間斷空格( )
實體名稱對大小寫敏感！HTML 統一資源定位器(Uniform Resource Locators)
URL 是一個網頁地址，一個統一資源定位器(URL) 用於定位全球資訊網上的文件。
scheme://host.domain:port/path/filename
說明:
scheme - 定義因特網服務的型別。最常見的型別是 http
host - 定義域主機（http 的預設主機是 www）
domain - 定義因特網域名，比如 runoob.com
:port - 定義主機上的埠號（http 的預設埠號是 80）
path - 定義伺服器上的路徑（如果省略，則文件必須位於網站的根目錄中）。
filename - 定義文件/資源的名稱
URL 只能使用 ASCII 字符集；
HTML 速查列表
你可以列印它，以備日常使用。
HTML 基本文件
<!DOCTYPE html>
<html>
<head>
<title>文件標題</title>
</head>
<body>
可見文字...
</body>
</html>
基本標籤（Basic Tags）
<h1>最大的標題</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的標題</h6>
<p>這是一個段落。</p>
<br> （換行）
<hr> （水平線）
<!-- 這是註釋 -->
文字格式化（Formatting）
<b>粗體文字</b>
<code>計算機程式碼</code>
<em>強調文字</em>
<i>斜體文字</i>
<kbd>鍵盤輸入</kbd>
<pre>預格式化文字</pre>
<small>更小的文字</small>
<strong>重要的文字</strong>
<abbr> （縮寫）
<address> （聯絡資訊）
<bdo> （文字方向）
<blockquote> （從另一個源引用的部分）
<cite> （工作的名稱）
<del> （刪除的文字）
<ins> （插入的文字）
<sub> （下標文字）
<sup> （上標文字）
連結（Links）
普通的連結：<a href="http://www.example.com/">連結文字</a>
影象連結： <a href="http://www.example.com/"><img src="URL" alt="替換文字"></a>
郵件連結： <a href="mailto:[email protected]">傳送e-mail</a>
書籤：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>
圖片（Images）
<img src="URL" alt="替換文字" height="42" width="42">
樣式/區塊（Styles/Sections）
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文件中的塊級元素</div>
<span>文件中的內聯元素</span>
無序列表
<ul>
<li>專案</li>
<li>專案</li>
</ul>
有序列表
<ol>
<li>第一項</li>
<li>第二項</li>
</ol>
定義列表