md.nchuit.cc/html/

HTML 簡介
與基礎語法

VJ

呈現方式

記事本

Word

FB 社團 - 發文

網絡論壇 - 發帖

巴哈姆特哈啦區 - 發文

巴哈姆特攻略百科 - 發文/編輯

巴哈姆特我的小屋 - 創作

迷思

首先，HTML 不是程式語言，而是標記語言。
~~Progarm~~ Code

HTML

HyperText Markup Language (超文本標記語言)，縮寫：HTML，是一種用於建立網頁的標準標記語言。
瀏覽器可以讀取HTML檔案，並將其彩現成視覺化網頁。

HTML描述了一個網站的結構語意隨著線索的呈現，使之成為一種標記語言而非程式語言。

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

最新版本： 5.2/ 5.3（工作草案）; 2017年12月14日，4年前
初始版本： 1993年，28年前

HTML 元素

HTML 中，一個 HTML 元素是 HTML 檔案(或訊息)的一個基本組成單元。HTML 檔案採用採用樹狀結構安排 HTML 元素。
常見的 HTML 元素有標題、段落、連結、列表、嵌入媒體等等。

例子(標題)

段落連結紅色

清單項目甲
清單項目乙

列表項目甲
列表項目乙

動動手: 檢查方法1 - 選單>檢查

Chrome	Edge
Image Not Showing Possible Reasons The image file may be corrupted The server hosting the image is unavailable The image path is incorrect The image format is not supported Learn More →	Image Not Showing Possible Reasons The image file may be corrupted The server hosting the image is unavailable The image path is incorrect The image format is not supported Learn More →

🕹快捷鍵: 在 Chrome 或 Edge 瀏覽器中按下 F12 或 Ctrl + Shift + I 可以在 Elements 頁面檢視所有 HTML 元素。

動動手: 檢查方法2 - 選取工具

Chrome	Edge
Image Not Showing Possible Reasons The image file may be corrupted The server hosting the image is unavailable The image path is incorrect The image format is not supported Learn More →	Image Not Showing Possible Reasons The image file may be corrupted The server hosting the image is unavailable The image path is incorrect The image format is not supported Learn More →

🕹快捷鍵: 在 Chrome 或 Edge 瀏覽器中按下 Ctrl + Shift + C 可以直接啟動選取模式。

HTML Tag `<tag>...</tag>`

很多，特別又想用的要自己找，本次教學只介紹常用的

`*.html` 基礎框架












<html>
  <head>
    <title>網頁標題</title>
    <meta name="description" content="網頁描述">
    <link rel="icon" href="https://hackmd.io/favicon.png">
    <!--以及更多-->
  </head>
  <body>
    我才是一般內文
    <!--網頁內容-->
  </body>
</html>

你可能注意到了…
<head>內的元素都不需要用</*>關起來

練習: 找出上面代碼整個區域是什麼

一般內文

我不是一般內文

段落 `<p>`

<p>我是第一段</p>
<p>我是第二段</p>

我是第一段

我是第二段

段內換行 `<br>`

*不用</br>

<p>段內<br>換行</p>

段內
換行

首行縮排

style="text-indent:*"

<p style="text-indent:2em">如果沒有到第二行就看不出來(?)補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字</p>

如果沒有到第二行就看不出來(?)補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字

練習: 複製下面的文字，用HTML標記成下面的樣子

<p style="text-indent:2em">早上好中國，現在我有冰淇淋，我很喜歡冰淇淋。但是，速度與激情9比冰淇淋...↓<br>速度與激情9，我最喜歡。所以現在是音樂時間，準備，1、2、3...↲</p>
<p>兩個禮拜以後～速度與激情9～↓<br>兩個禮拜以↘後～速度與激情9～↓<br>兩個禮拜以後～～速度與激情9～↲</p>
<p style="text-indent:2em">不要忘記，不要錯過。去電影院看速度與激情9，因為非常好，電影動作非常好。↓<br>差不多一樣，冰淇淋，再見。↲</p>

早上好中國，現在我有冰淇淋，我很喜歡冰淇淋。但是，速度與激情9比冰淇淋...↓
速度與激情9，我最喜歡。所以現在是音樂時間，準備，1、2、3...↲

兩個禮拜以後～速度與激情9～↓
兩個禮拜以↘後～速度與激情9～↓
兩個禮拜以後～～速度與激情9～↲

不要忘記，不要錯過。去電影院看速度與激情9，因為非常好，電影動作非常好。↓
差不多一樣，冰淇淋，再見。↲

置中置右置左

style="text-align:center/right/left"

<p style="text-align:center">置中文字</p>
<p style="text-align:right">置右文字</p>
<p style="text-align:left">置左文字</p><!--預設-->

置中文字

置右文字

置左文字

屬性 (Attribute)

<TAG AAA="aaa" BBB="bbb" ...>

標題 `<h1><h2>...<h6>`

預設只有到h6，想新增就自己來

<h4>標題四</h4>
<h5>標題五</h5>
<h6>標題六</h6>

標題四

標題五

標題六

練習: 試試將 任一標題 置中

<h4 style="text-align:center">置中標題四</h4>

置中標題四

粗體斜體底線刪除線

<B> <I> <U> <S>

<b>粗體</b> <i>斜體</i> <u>底線</u> <s>刪除線</s>

粗體斜體底線 ~~刪除線~~

段內區塊 `<span>` & 文字顏色 `style="color:*"`

<p><span style="color:blue">藍色</span>
 <span style="color:red">紅色</span></p>

藍色紅色

練習: 我喜歡吃屎冰淇淋

<i><b><u style="color:red">我</u>喜歡吃</b><s>屎</s>冰淇淋</i>

無序清單`<ul>`

預設是實心圓點，其他符號可以在這找，有兩種方法:

可以直接把符號打在*的地方

<ul style="list-style-type:'🙏'">
<li>項目一</li><li>項目二</li><li>項目三</li>
</ul>

項目一
項目二
項目三

項目一
項目二
項目三

<ol type="1/a/A/i/I">
<li>項目一</li><li>項目二</li><li>項目三</li>
</ol>

有序清單`<ol>`

超連結 `<a>`

<a href="https://www.google.com" target="_blank">超連結</a>
<a href="https://www.google.com">我沒有 target="_blank"</a>

超連結

插入圖片 `<img>`

*不用</img>

<img src="https://<網址>" title="提示文字"
 width="寬度(單位:像素)" height="高度(單位:像素)">

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

練習: 圖片超連結

<a href='https://www.kindpng.com/picc/m/254-2547396_javascript-html-css-logo-hd-png-download.png' title="HTML5 JS CSS3" width='500'><img src="https://www.kindpng.com/picc/m/254-2547396_javascript-html-css-logo-hd-png-download.png"  title="HTML5 JS CSS3"></a>

嵌入 `<iframe>`

<iframe width="寬度(單位:像素)" height="高度(單位:像素)"
 src="https://<網址>">載入中…</iframe>

表格 `<table>`

<table>
    <thead>
        <tr><th>欄位標題A</th><th>欄位標題B</th></tr>
    </thead>
    <tbody>
        <tr><td>欄位A1</td><td>欄位B1</td></tr>
        <tr><td>欄位A2</td><td>欄位B2</td></tr>
    </tbody>
</table>

欄位標題A	欄位標題B
欄位A1	欄位B1
欄位A2	欄位B2

表單`<form>`

<form action="index.html" method="post">
帳號 <input type="text" name="id" placeholder="輸入帳號" required><br>
密碼 <input type="password" name="pwd" placeholder="輸入密碼" required><br>
<input name="ugly" value="true" hidden>
<input type="submit" value="登入">
</form>

`<div>`

<div>: style="display:block"
<span>: style="display:inline"

補充

CSS `<style>`

剛剛放在<tag *>開頭旁邊style="*"可一次寫完，但要指定哪些<tag>套用是門學問，像下面這樣。
另外也可以存成*.css檔使用，<style>就可以拔掉

<style>
.slides h1,.slides h2,.slides h3,
.slides h4,.slides h5,.slides h6,
.slides p{color:#656c73 !important}
.slides a{color:#337ab7 !important}
.slides img{border:0!important}
hr{display:none}
</style>

框架: Bootstrap

下面放<head>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

用按鈕來舉例，放<body>

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

框架: Semantic UI

<head>

<link async rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2/dist/semantic.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui-react/dist/umd/semantic-ui-react.min.js"></script>

<body>

<button class="ui red basic button">Red</button>
<button class="ui orange basic button">Orange</button>
<button class="ui yellow basic button">Yellow</button>
<button class="ui olive basic button">Olive</button>
<button class="ui green basic button">Green</button>
<button class="ui teal basic button">Teal</button>
<button class="ui blue basic button">Blue</button>
<button class="ui violet basic button">Violet</button>
<button class="ui purple basic button">Purple</button>
<button class="ui pink basic button">Pink</button>
<button class="ui brown basic button">Brown</button>
<button class="ui grey basic button">Grey</button>
<button class="ui black basic button">Black</button>

圖包

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

https://fontawesome.com/icons/google

JavaScript `<script>`

這才叫程式(Program')語言，讓使用者可以跟網頁互動，對資料進行流程控制等操作。

詳細請見(下學期?): JavaScript 教學

可以直接在觸發動作時使用

<button onclick="this.style='display:none';window.print()">Print this page</button>

也可以在網頁開啟時就跑起來

<html>
<body>
<p></p>
<script>
document.getElementsByTagName("p")[0].innerHTML="Hello world";
</script>
</body>
</html>

也可以存成*.js，<script>就可以拔掉

<script src="myScript1.js"></script>

HTTP

HyperText Transfer Protocol(超文本傳輸協定)，是全球資訊網絡數據通信的基礎。

HTTPS

HyperText Transfer Protocol Secure，是一種透過計算機網路進行安全通訊的傳輸協定。HTTPS經由實聯制進行通訊，但利用SSL/TLS來加密封包，更安全。

URL(網址)

Uniform Resource Locator(統一資源定位符)，俗稱網頁位址，簡稱網址，是網際網路上標準的資源的位址(Address)，如同在網路上的門牌。

統一資源定位符的完整格式如下：

[協定類型]://[使用者@][伺服器位址][:埠號]/[檔案路徑][?請求參數][#ID]

其中[使用者@]、[:埠號]、[檔案路徑]、[?請求參數]、[#ID]都屬於選填項。

請求與回應

HTTP 的基本運作方式就像上圖一樣，我們開啟網頁、或在網頁上做特定的操作的時候，其實都是在向伺服器發送請求(request)，而伺服器則會對應 request 給予我們回應(response)。

回應(response)的主要內容就是 HTML。

伺服器

「網路伺服器」(web server)可以指軟體、也可以指硬體、還可以指它們共同運作的狀態。

存放網路伺服器軟體(如 phpMyAdmin)、網站檔案（如*.html、*.css、*.js）的電腦。

它會連上網際網路(Internet)並能和其他連上網的設備做物理數據交換。

Image Not Showing Possible Reasons
The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported
Learn More →

PHP

全稱：「PHP：Hypertext Preprocessor」，即「PHP：超文字預處理器」，是一種開源的通用電腦手稿語言。PHP的應用範圍相當廣泛，尤其是在網頁程式的開發上並可嵌入HTML中使用。

<?php
     echo 'Hello World!';
?>

需存成*.php，只能在伺服器上跑

SQL

SQL（Structured Query Language:結構化查詢語言）是一種特定目的程式語言，用於管理關聯式資料庫管理系統（RDBMS），或在關係流資料管理系統（RDSMS）中進行流處理。MySQL?

SQL你的Google試算表

select D, count(C) group by D order by count(C) Desc limit 3 label count(C) "簽到次數"

MarkDown

# 標題1
## 標題2
- 無序清單
1. 有序清單
**粗體**	
*斜體*	
~~刪除線~~

這投影片跟網頁就是用 MarkDown 寫的

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`	在筆記中貼入程式碼
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.

HTML 簡介與基礎語法

目錄

呈現方式

記事本

Word

FB 社團 - 發文

網絡論壇 - 發帖

巴哈姆特哈啦區 - 發文

巴哈姆特攻略百科 - 發文/編輯

巴哈姆特我的小屋 - 創作

迷思

HTML描述了一個網站的結構語意隨著線索的呈現，使之成為一種標記語言而非程式語言。

例子(標題)

動動手: 檢查方法1 - 選單>檢查

動動手: 檢查方法2 - 選取工具

HTML Tag <tag>...</tag>

*.html 基礎框架

一般內文

段落 <p>

段內換行 <br>

首行縮排

置中 置右 置左

屬性 (Attribute)

標題 <h1><h2>...<h6>

標題四

標題五

標題六

置中標題四

粗體 斜體 底線 刪除線

段內區塊 <span> & 文字顏色 style="color:*"

無序清單<ul>

有序清單<ol>

超連結 <a>

插入圖片 <img>

嵌入 <iframe>

補充

CSS <style>

框架: Bootstrap

框架: Semantic UI

圖包

JavaScript <script>

其中[使用者@]、[:埠號]、[檔案路徑]、[?請求參數]、[#ID]都屬於選填項。

請求與回應

PHP

MarkDown

HTML 簡介
與基礎語法

HTML Tag `<tag>...</tag>`

`*.html` 基礎框架

段落 `<p>`

段內換行 `<br>`

置中置右置左

標題 `<h1><h2>...<h6>`

粗體斜體底線刪除線

段內區塊 `<span>` & 文字顏色 `style="color:*"`

無序清單`<ul>`

有序清單`<ol>`

超連結 `<a>`

插入圖片 `<img>`

嵌入 `<iframe>`

CSS `<style>`

JavaScript `<script>`

Image Not Showing Possible Reasons
The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported
Learn More →

PHP