HTML 基本介紹

超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用於建立網頁的標準標記語言。HTML是一種基礎技術，常與CSS、JavaScript一起被眾多網站用於設計網頁、網頁應用程式以及行動應用程式的使用者介面[3]。網頁瀏覽器可以讀取HTML檔案，並將其彩現成視覺化網頁。HTML描述了一個網站的結構語意隨著線索的呈現，使之成為一種標記語言而非程式語言。目前已經到了 5.0 版。

標籤元素

使用標籤元素來呈現網頁內容，通常為 “區塊級” 或是 “行內”。瀏覽器預設以在元素前後換行(另起一行)的方式，表現區塊級元素。視覺上會呈現為一排縱向堆疊的方塊。行內元素是與鄰近元素保持在同一行。

元素組成可以加入屬性及屬性值，可以同時有多種屬性及值，每個標籤都可以有 id 及 class 屬性。

id=”名稱”：識別單一元素用，可利用 id 來跟特定元素互動，名稱不能相同。
class=”名稱”：識別同類別元素，可利用 class 來跟同類別元素互動，多元素可以同一個 class 類別。

屬性也可以自訂，使用方式為 date-* 。

e.g.

data-timezone="Europe/London"

利用 getAttribute 方法可取出值。

let timezone = tz.getAttribute('data-timezone');

標籤種類

網頁頁面資訊

版本宣告(HTML5)

<!DOCTPYE html>

網頁語系

<html lang="en">

網頁資訊

<head></head> 裡面通常包含 <meta>

<meta> 提供網頁內容資訊給瀏覽器或搜尋引擎通常有以下屬性：

用來寫網頁的簡短描述

name="description" content="網頁簡短描述"

放置網頁關鍵字

name="keywords" content="網頁關鍵字"

內容種類及編碼

<meta http-equiv="Content-Type" content="text/html"; charset="uft-8″>

使用語言

<meta http-equiv="Content-Language" content="zh-TW">

自動更新時間

<meta http-equiv="Refresh" content="time">

避免瀏覽器儲存快取

<meta http-equiv="pragma" content="no cache">

瀏覽器頂端或該頁面標題列

<title></title>

連結外部資源

<link>
ps. 一般有 rel、type、href 屬性。

rel=”stylesheet”：連結樣式。
type=”text/css”：連接類型。(不一定要加上)
href=”URL”：連結位置。
crossorigin＝”anonymous”：屬性是否使用CORS(不一定要加)，anonymous：發起跨域請求，但不發送認證訊息。

e.g.

Code

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

script 外部引用

<script src="/path/to/your.js"></script>
ps. 另外可加上 async 、 defer 屬性(必須搭配 src)。

async：下載後會先執行，但執行此 js 同時也繼續載入頁面及執行其他 js。
defer：要整個頁面都下載及分析完成後才會執行，非常類似於把 js 放在頁尾的情況。
integrity: 驗證完整性。

e.g.

Code

1	<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/solid.js" integrity="sha384-+Ga2s7YBbhOD6nie0DzrZpJes+b2K1xkpKxTFFcx59QmVPaSA8c7pycsNaFwUK6l" crossorigin="anonymous"></script>

網頁內容標籤

body 標籤包含的元素會顯示在瀏覽器視窗，標籤組成有分成語意及無語意，來描述頁面資料及結構，視覺效果用 CSS 處理。

<body></body>

div 區塊標籤，可當做無語意的 `<header>`、`<article>`，無明顯含義的區塊或為了排版目的

<div></div>

span 行內標籤，可當做無語意的 `<strong>`、`<em>`。將文字與元素群組組在行內中。

<span></span>

樣式標籤，使用 css 樣式(內部宣告用)。

<style type="text/css"></style>

語意標籤

用來排版及了解網頁區塊的設計目的，語意標籤和 <div>、<span> 在排版上具有完全一樣的特性，雖可用 <div>、<span> 來快速排版，但最好用以下語意標籤來替代。使用 HTML5 語意化標籤的優點有可以快速抓到網頁架構和每個區塊的位置，對於 SEO 優化有幫助。

HTML5 語意標籤(大多是區塊標籤)

<header>：網頁的標頭，通常放置網站標題。
<nav>：網頁的選單、導覽。
<main>：網頁的主要內容。
<aside>：網頁的側欄、附加內容。
<article>：一篇文章內容。
<section>：自訂的區塊，例如數篇摘要組成的空間。
<footer>：網頁的頁尾，通常放置聯絡方式、著作權宣告等等。
<mark>：強調一小塊內容。
<time>：顯示日期時間。 //不是區塊
<mark>：如黃色螢光筆的方式畫出重點，強調內容。 //不是區塊
<details>：描述文章的細節。 //不是區塊
<figure>、<figcaption>：<figure>用於圖像，<figcaption>用於圖像標題。
<hgroup>：當內容有主標題及次標題等多個標題的狀況下使用。
<cite>：引用其他文獻或作品(例如書籍、歌曲、電影、繪畫、雕塑等）的標題。 ps.也可當做屬性用 //不是區塊

e.g.

首先是使用 <div> 可能的網頁結構，除了基本元素之外，主內容展示一篇文章和側欄，頁尾則顯示網頁最後更新的時間：

Code

<div class="header"></div>
<div class="nav"></div>
<div class="main">
    <div class="article"></div>
    <div class="aside"></div>
</div>
<div class="footer">
    Updated on <span class="time"></span>
</div>

接著改用語意標籤，語意標籤和 <div>、<span> 一樣，沒有預設樣式。

Code

<header></header>
<nav></nav>
<main>
    <article></article>
    <aside></aside>
</main>
<footer>
    Updated on <time></time>
</footer>

空白：

原始碼可用空白字元來排版，因為瀏覽器有空白壓縮功能，
兩個或以上的空白字元，瀏覽器畫面上只會顯示一個空白，
原始碼內的斷行也視為單一空白字元。

標題 //區塊標籤

<h1></h1> ~ <h6></h6>

段落 //區塊標籤

<p></p>

粗體

<b></b>

斜體

<i></i>

上標

<sup></sup>

下標

<sub></sub>

斷行

<br>

水平線 //區塊標籤

<hr>

加強，通常標記為重要

<strong></strong>

斜體，強調元素內容

<em></em>

編號清單 //區塊標籤

Code

<ol>      
  <li>a</li>
  <li>a</li>
</ol>

項目清單 //區塊標籤

Code

<ul>
  <li>a</li>
  <li>a</li>
</ul>

定義清單 //區塊標籤

Code

<dl>     
  <dt>a</dt>     //被定義名詞
  <dd>bb</dd>    // 定義
</ul>

巢狀清單

Code

<ul>           
  <li>a</li>
       <ul>      
         <li>cc</li>
         <li>dd</li>
        </ul>
  <li>a</li>
</ul>

將內容縮排，通常作為引述區塊標籤

<blockquote></blockquote>

引號

<q></q>

ps.<blockquote>及<q>通常會加上 cite=”url” 屬性標明來源。

縮寫及縮略字

<abbr></abbr>

ps. 可加上 title 屬性來註記全名

email or 地址 //區塊標籤

<address></address>

插入字，會加上底線

<ins></ins>

刪節線，元素內容會加上刪節線

<del></del>

元素內容加上刪節線，標示不正確但不刪除的內容

<s></s>

畫 canvas //區塊標籤

<canvas></canvas>

置中，標籤內元素會置中

<center></center>

顯示標籤內資料的原始格式

<pre></pre>

旁註標記

Code

<ruby>
 漢 <rt> ㄏㄢˋ </rt>  漢 字的上面會標示 ㄏㄢˋ
 漢 <rr> ㄏㄢˋ </rr>  漢 字的旁邊會標示 ㄏㄢˋ
</ruby>

插入圖片

<img src="圖片位置" alt="沒有圖片時的替代文字" title="圖片資訊">

HTML5 用法可放置一張以上的圖

Code

<figure>  
<img src="圖片位置" alt="沒有圖片時的替代文字" > 
<br>
<figcaption>圖片說明</figcaption>
</figure>

超連結

<a href="url" target="_blank">連結名稱</a>

ps.

href：可用絕對或相對路徑
target=”_blank”：連結另開新視窗
title=”提示”：加入滑鼠游標提示
href=”#id：連結到同網頁的某個部份
href=”url#id”：連結到另一個網頁的某個部份
href=”mailto:aa@example.org“：Email 連結

絕對路徑
/img/logo.png 根目錄下的圖片
page.html 同層目錄中的 html 檔

相對路徑 (通常用在自己的網站中)
./css/all.css 同層目錄中的 css 資料夾裡的 css 檔
../img/logo.png 上層目錄中的 img 資料夾裡的圖檔

音訊

<audio src="url"></audio>

屬性：

control 提供撥放控制鈕
preload=”none or auto or metadata” 頁面載入時是否載入視訊
control 提供撥放控制鈕
autoplay 自動播放
loop 結束後從頭播放

多重音訊 HTML5

Code

<audio>
<source src="檔案路徑" type="視訊格式" >
<source src="檔案路徑" type="視訊格式" >
</audio>

播放視訊(HTML5) //區塊標籤

<video src="url"></video>
ps.video 標籤的屬性不需要值，屬性存在選項就會開啟，如果不存在選項就關閉。

屬性：

src=”檔案路徑”
height=”200”
width=”100”
preload=”none or auto or metadata” 頁面載入時是否載入視訊
control 提供撥放控制鈕
autoplay 自動播放
loop 結束後從頭播放
poster=”圖片位置” 視訊下載時或播放前所顯示的影像

放數個視訊

Code

<video>
<source src="檔案路徑" type="視訊格式" code="編碼" >
<source src="檔案路徑" type="視訊格式" code="編碼" >
<source src="檔案路徑" type="視訊格式" code="編碼" >
</video>

表格：不要用來排版，只要顯示資料就好。用 CSS 處理排版。

Code

<table>
  <thead>  <!--表頭-->
    <tr>   <!--列的起始  row - - -  column(行,欄)  | | |  -->
      <th>Month</th>   <!--表格標題-->
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>  <!--內容-->
    <tr>
      <td>January</td>    <!--表格內容-->
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>  <!--註腳-->
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

<td colspan="2">$180</td>  資料超過一欄 (跨欄)
<td rowspan="2">$180</td>  資料超過一列 (跨列)

表單

<form action="按下後接收送出資訊的url" method="get or post" id="a"></from>

get：搜尋框 or 只想從伺服器取得資料(普通資料)。
post：上傳檔案 or 表單很長 or 有敏感資料(密碼) or 資料加到資料庫或從資料庫刪除。

name 跟 value 屬性欄位的值有些會傳給伺服器
任何文字輸入欄位可以使用 placeholder 屬性，placeholder=”顯示在欄位內的文字”

e.g.

Code

<form action="按下後接收送出資訊的url" method="get or post" id="a">
 <p>username 文字輸入
 <input type="text" name="username" maxlength="限制字元數"> 
 </p>
  <!--多行文字輸入欄位標籤-->
 <textarea name="Content"></textarea>
  <!--密碼輸入-->
 <input type="password" name="username" maxlength="限制字元數">
  <!--單選-->
 <input type="radio" name="username" value="傳到伺服器的值，每個單選鈕都不應相同" checked="checked(預先選好)">
  <!--勾選(可取消)-->
 <input type="checkbox" name="username" value="傳到伺服器的值，每個單選鈕都不應相同" checked="checked(預先選好)">
 <!--下拉式選單 (若都沒 selected 屬性的話，會顯示第一個選項)-->
 <select name="Location" size="3" multiple="multiple(可多選)">
   <option value="Taipei" selected="selected(預先選好)">台北</option>
   <option value="Taoyuan">桃園</option>
 </select>
   <!--檔案輸入 (method 必須使用 post)-->
   <input type="file" name="username">
   <!--送出按鈕 (name 跟 value 欄位可用可不用)-->
   <input type="submit" name="username" value="顯示按鈕文字">
   影像按鈕
   <input type="image" src="url">
</from>


<input type="hidden" name="" value=""> 隱藏控制項，用隱藏欄位來記錄資訊

ps.表單驗證
HTML5 有驗證功能，加入 required 屬性(不需要值)，由瀏覽器來做。)，HTML5 才有(不支援 HTML5 的瀏覽器會當作文字框)。

日期輸入
<input type="date" name="date">
EMAIL 輸入
<input type="email" name="email">
URL 輸入
<input type="url" name="website">
搜尋輸入
<input type="search" name="search">

label 協助使用者在點選到該標籤時，可以透過 for 的屬性值，去連動具有相同 id 屬性值的標籤。或是直接將 `<input>` 元素包圍起來。

<label for="某id值"></label>

e.g.

Code

1
2
3

<label><input type="radio" name="booktype" value="1" id="booktype1" checked ></label>
<input type="radio" name="booktype" value="2" id="booktype2" checked >
<label for="booktype1">html 書</label>

按鈕(可添加圖片)

<button type="button"><img src="url" alt=""></button>

iframe 顯示別的 url 的網頁內容在本身網頁的某區塊上

<iframe src="url" height="20" width="10"></iframe>

註解

符號顯示

補充

使用編輯器小技巧(emmet)：

若檔案為 *.HTML 的話，在開啟檔案後，打 ! ，可產生出以下標籤。

Code


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
```  

+ 打 link:css：快速產生 `<link rel="stylesheet" href="style.css">`

+ 打 lorem300，可以產生 300個假字。

+ 使用 `標籤名稱.class名稱*數量>要包覆的標籤1+要包覆的標籤2` 方式，按下 enter，可以快速產生標籤。

e.g.

`div.test*2>p+img`

產生

Code

1
2
3



### 簡單網頁範例：

<!DOCTYPE html>

Document

標題1

標題2

標題3

標題4

標題一

lorem

js後的標題

123

參考：
https://zh.wikipedia.org/wiki/HTML
http://cychiang719.blogspot.com/2008/08/html.html
http://n.sfs.tw/content/index/10323
https://ithelp.ithome.com.tw/articles/10160131
http://www.dlps.tc.edu.tw/html_teach/

HTML 基本介紹

標籤元素

標籤種類

網頁頁面資訊

版本宣告(HTML5)

網頁語系

網頁資訊

瀏覽器頂端或該頁面標題列

連結外部資源

script 外部引用

網頁內容標籤

body 標籤包含的元素會顯示在瀏覽器視窗，標籤組成有分成語意及無語意，來描述頁面資料及結構，視覺效果用 CSS 處理。

div 區塊標籤，可當做無語意的 <header>、<article>，無明顯含義的區塊或為了排版目的

span 行內標籤，可當做無語意的 <strong>、<em>。將文字與元素群組組在行內中。

樣式標籤，使用 css 樣式(內部宣告用)。

語意標籤

HTML5 語意標籤(大多是區塊標籤)

空白：

標題 //區塊標籤

段落 //區塊標籤

粗體

斜體

上標

下標

斷行

水平線 //區塊標籤

加強，通常標記為重要

斜體，強調元素內容

編號清單 //區塊標籤

項目清單 //區塊標籤

定義清單 //區塊標籤

巢狀清單

將內容縮排，通常作為引述 區塊標籤

引號

縮寫及縮略字

email or 地址 //區塊標籤

插入字，會加上底線

刪節線，元素內容會加上刪節線

元素內容加上刪節線，標示不正確但不刪除的內容

畫 canvas //區塊標籤

置中，標籤內元素會置中

顯示標籤內資料的原始格式

旁註標記

插入圖片

超連結

音訊

播放視訊(HTML5) //區塊標籤

表格：不要用來排版，只要顯示資料就好。用 CSS 處理排版。

表單

label 協助使用者在點選到該標籤時，可以透過 for 的屬性值，去連動具有相同 id 屬性值的標籤。或是直接將 <input> 元素包圍起來。

按鈕(可添加圖片)

iframe 顯示別的 url 的網頁內容在本身網頁的某區塊上

註解

符號顯示

補充

標題一

js後的標題

div 區塊標籤，可當做無語意的 `<header>`、`<article>`，無明顯含義的區塊或為了排版目的

span 行內標籤，可當做無語意的 `<strong>`、`<em>`。將文字與元素群組組在行內中。

將內容縮排，通常作為引述區塊標籤

label 協助使用者在點選到該標籤時，可以透過 for 的屬性值，去連動具有相同 id 屬性值的標籤。或是直接將 `<input>` 元素包圍起來。