HTML學習筆記
-
HTML不是一種程式語言，它是一種超文字標記語言(Hyper Text Markup Language)，標記語言是一套標記標籤(Markup tag)，瀏覽器通過HTML標記標籤描述網頁。
-
HTML 文件包含了HTML 標籤及文字內容，也叫做 web 頁面
HTML 網頁結構
-
HTML文件的檔名一般為“檔名.htm”或者“檔名.html”，HTML文件由文件宣告和html元素組成，html元素內，只能包含head元素和body元素，如：
-
<!DOCTYPE html>宣告為 HTML5 文件，避免瀏覽器的錯誤解析 -
<html>元素是 HTML 頁面的根元素，html元素內，只能包含head元素和body元素 -
<head>元素包含了文件的元（meta）資料，如<meta charset="utf-8">定義網頁編碼格式為 utf-8。 -
<title>元素描述了文件的標題，顯示在瀏覽器的標籤頁 -
<body>元素包含了可見的頁面內容 -
<h1>元素定義一個大標題 -
<p>元素定義一個段落
注：
HTML 基礎
-
HTML 標題（Heading）是通過
<h1> - <h6>標籤來定義的。數字越大字號越小注: 瀏覽器會自動地在標題的前後新增空行。
-
HTML 水平線是通過標籤
<hr>來建立水平線。 -
HTML 段落是通過標籤
<p>來定義的 -
HTML 連結是通過標籤
<a>來定義的，如<a href="https://www.google.com">這是一個連結</a>注：在 href 屬性中指定連結的地址。
-
HTML 影象
是通過標籤<img>來定義的，如<img loading="lazy" src="/images/logo.png" width="258" height="39" />注：影象的名稱和尺寸是以屬性的形式提供的。
-
HTML 文字格式化通過標籤如
<b>("bold") 與<i>("italic") 對輸出的文字進行格式, 如：粗體 or 斜體 -
HTML 註釋寫法：
<!-- 這是一個註釋 -->
什麼是HTML 標籤？什麼是HTML 元素?
HTML 標記標籤通常被稱為 HTML 標籤 (HTML tag)，HTML 標籤 和 HTML 元素 通常都是描述同樣的意思.
-
HTML標籤是由尖括號包圍的關鍵詞，如：
<html> -
HTML標籤通常是成對出現的，分別叫做開始標籤和結束標籤也被稱為開放標籤和閉合標籤，結束標籤和開始標籤的內容一樣，只是在關鍵詞前新增/正斜槓表示結束，如：
<b> 和</b> -
某些 HTML 元素具有空內容（empty content），空元素在開始標籤中進行關閉（以開始標籤的結束而結束），如：
<br /> -
大多數 HTML 元素可擁有屬性
-
大多數 HTML 元素可以巢狀（HTML 元素可以包含其他 HTML 元素）,HTML 文件由相互巢狀的 HTML 元素構成
注：推薦使用小寫標籤，在未來 (X)HTML 版本中強制使用小寫
HTML 屬性
屬性是 HTML 元素提供的附加資訊。
-
HTML 元素可以設定屬性
-
屬性可以在元素中新增附加資訊
-
屬性一般描述於開始標籤
-
屬性總是以名稱/值對的形式出現，比如：name="value"
-
屬性值應該始終被包括在引號內
例項：
<a href="http://www.google.com">這是一個連結</a>
HTML 頭部
-
<head>元素包含了所有的頭部標籤元素:<title>, <style>, <meta>, <link>, <script>, <noscript> ,<base>
HTML <title> 元素
-
<title>標籤定義了不同文件的標題q -
<title>在 HTML/XHTML 文件中是必須的
<title> 元素的作用：
-
定義了瀏覽器工具欄的標題
-
當網頁新增到收藏夾時，顯示在收藏夾中的標題
-
顯示在搜尋引擎結果頁面的標題
HTML <base> 元素
-
<base>標籤描述了基本的連結地址/連結目標，該標籤作為HTML文件中所有的連結標籤的預設連結
<head>
<base href="http://www.google.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 元素通常用於指定網頁的描述，關鍵詞，檔案的最後修改時間，作者，和其他元資料。
-
元資料可以使用於瀏覽器（如何顯示內容或重新載入頁面），搜尋引擎（關鍵詞），或其他Web服務。
-
<meta>一般放置於<head>區域
例項：
-
編碼格式：
<meta charset="utf-8"> -
定義關鍵字：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> -
每30秒鐘重新整理當前頁面：
<meta http-equiv="refresh" content="30">
HTML <script> 元素
-
<script>標籤用於載入指令碼檔案，如： JavaScript
HTML 樣式- CSS
CSS (Cascading Style Sheets，層疊樣式表) 用於渲染HTML元素標籤的樣式。新增方式：
-
內聯樣式- 在HTML元素中使用"style" 屬性
-
內部樣式表 -在HTML文件頭部
<head>區域使用<style>元素 來包含CSS -
外部引用 - 使用外部 CSS 檔案
內聯樣式
-
當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。 使用內聯樣式的方法是在相關的標籤中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下例項顯示出如何改變段落的顏色和左外邊距。
<p style="color:blue;margin-left:20px;">這是一個段落。</p>
HTML樣式例項 - 背景顏色
-
背景色屬性（background-color）定義一個元素的背景顏色：
<body style="">
<h2 style="">這是一個標題</h2>
<p style="">這是一個段落。</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>
內部樣式表
-
當單個檔案需要特別樣式時，就可以使用內部樣式表。可以在
<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 影象
-
載入圖片是需要時間的，慎用圖片
-
正確設定影象的位置，瀏覽器才能載入圖片，否則影象標籤就會顯示一個破碎的圖片。
影象標籤 <img>和源屬性（src）
在 HTML 中，影象由<img> 標籤定義
-
<img>是空標籤，沒有閉合標籤 -
要在頁面上顯示影象，需要使用源屬性（src），src 指 "source"。源屬性的值是影象的 URL 地址。
<img src="url" alt="some_text">
Alt屬性
-
alt 屬性用來為影象定義一串預備的可替換的文字
-
在瀏覽器無法載入影象時，替換文字屬性告訴讀者她們失去的資訊
如：
<img src="url" alt="some_text">
設定影象的高度與寬度
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>
效果：
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
邊框屬性
| 屬性 | 說明 |
|---|---|
| border-color | 設定邊框的顏色 |
| border-style | 設定邊框的樣式，可選值有solid、dashed、double等 |
| border-width | 設定邊框的寬度 |
HTML 表格表頭
-
表格的表頭使用
<th>標籤進行定義 -
大多數瀏覽器會把表頭顯示為粗體居中的文字
如：
| Header 1 | Header 2 |
|---|---|
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
HTML 列表
HTML無序列表
-
無序列表是一個專案的列表，此列專案使用粗體圓點（典型的小黑圓圈）進行標記。
-
無序列表使用
<ul>標籤<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
HTML 有序列表
-
同樣，有序列表也是一列專案，列表專案使用數字進行標記
-
有序列表始於
<ol>標籤。每個列表項始於<li>標籤<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
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 區塊
HTML <div> 和<span>
-
HTML 可以通過 <div> 和 <span>將元素組合起來
HTML 區塊元素
-
大多數 HTML 元素被定義為塊級元素或內聯元素
-
塊級元素在瀏覽器顯示時，通常會以新行來開始（和結束）
例項: <h1>, <p>, <ul>,<table>
HTML 內聯元素
-
內聯元素在顯示時通常不會以新行開始。
例項:<b>, <td>, <a>,<img>
HTML<div> 元素
-
HTML <div> 元素是塊級元素，它可用於組合其他 HTML 元素的容器
-
<div>元素沒有特定的含義。除此之外，由於它屬於塊級元素，瀏覽器會在其前後顯示折行。 -
如果與 CSS 一同使用，
<div>元素可用於對大的內容塊設定樣式屬性。 -
<div>元素的另一個常見的用途是文件佈局。它取代了使用表格定義佈局的老式方法。使用<table>元素進行文件佈局不是表格的正確用法。<table>元素的作用是顯示錶格化的資料。
HTML<span>元素
-
mHTML
<span>元素是內聯元素，可用作文字的容器 -
<span>元素也沒有特定的含義 -
當與 CSS 一同使用時，
<span>元素可用於為部分文字設定樣式屬性
HTML 佈局
網頁佈局對改善網站的外觀非常重要。。。
HTML 指令碼
JavaScript 使 HTML 頁面具有更強的動態和互動性。
HTML<script> 標籤
-
<script>標籤用於定義客戶端指令碼，比如 JavaScript -
<script>元素既可包含指令碼語句，也可通過 src 屬性指向外部指令碼檔案 -
JavaScript 最常用於圖片操作、表單驗證以及內容動態更新
下面的指令碼會向瀏覽器輸出"Hello World!"：
<script>
document.write("Hello World!");
</script>
HTML<noscript> 標籤
-
只有在瀏覽器不支援指令碼或者禁用指令碼時，才會顯示 <noscript> 元素中的內容
-
<noscript>元素可包含普通 HTML 頁面的 body 元素中能夠找到的所有元素。
<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的瀏覽器不支援 JavaScript!</noscript>
HTML 字元實體
-
HTML 中的預留字元必須被替換為字元實體
-
一些在鍵盤上找不到的字元也可以使用字元實體來替換
HTML 實體
-
在 HTML 中，某些字元是預留的
-
在 HTML 中不能使用小於號（<）和大於號（>），這是因為瀏覽器會誤認為它們是標籤。
-
如果希望正確地顯示預留字元，我們必須在 HTML 原始碼中使用字元實體（character entities）。 字元實體類似這樣：
&entity_name;
或
&#entity_number;
如需顯示小於號，我們必須這樣寫：
< 或 < 或 <
效果：< 或 < 或 <
不間斷空格(Non-breaking Space)
-
HTML 中的常用字元實體是不間斷空格(
) -
瀏覽器總是會截短 HTML 頁面中的空格。如果在文字中寫 10 個空格，在顯示該頁面之前，瀏覽器會刪除它們中的 9 個。如需在頁面中增加空格的數量，您需要使用