呈現方式
記事本
Word
FB 社團 - 發文
網絡論壇 - 發帖
巴哈姆特我的小屋 - 創作
迷思
首先，HTML 不是程式語言，而是標記語言。
Progarm Code
HTML
| HyperText Markup Language (超文本標記語言)，縮寫：HTML，是一種用於建立網頁的標準標記語言。 瀏覽器可以讀取HTML檔案，並將其彩現成視覺化網頁。 HTML描述了一個網站的結構語意隨著線索的呈現，使之成為一種標記語言而非程式語言。 |  |
- 最新版本： 5.2/ 5.3（工作草案）; 2017年12月14日，4年前
- 初始版本： 1993年，28年前
HTML 元素
HTML 中，一個 HTML 元素是 HTML 檔案(或訊息)的一個基本組成單元。HTML 檔案採用採用樹狀結構安排 HTML 元素。
常見的 HTML 元素有標題、段落、連結、列表、嵌入媒體等等。
動動手: 檢查方法1 - 選單>檢查
| Chrome | Edge |
|---|---|
 |
 |
🕹快捷鍵: 在 Chrome 或 Edge 瀏覽器中按下 F12 或 Ctrl + Shift + I 可以在 Elements 頁面檢視所有 HTML 元素。
動動手: 檢查方法2 - 選取工具
| Chrome | Edge |
|---|---|
 |
 |
🕹快捷鍵: 在 Chrome 或 Edge 瀏覽器中按下 Ctrl + Shift + C 可以直接啟動選取模式。
*.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>
我是第一段
我是第二段
段內
換行
首行縮排
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" ...>
標題四
標題五
標題六
練習: 試試將 任一標題 置中
<h4 style="text-align:center">置中標題四</h4>
置中標題四
段內區塊 <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>
插入圖片 <img>
*不用</img>
<img src="https://<網址>" title="提示文字"
width="寬度(單位:像素)" height="高度(單位:像素)">
練習: 圖片超連結
<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>
- parameters: http://…/x?k1=v1&k2=v2&…
- 自動播放?
mute=1 - 單曲循環?
loop=1&playlist=影片ID - YouTube 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" />
可以直接在觸發動作時使用
<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>
URL(網址)
Uniform Resource Locator(統一資源定位符)，俗稱網頁位址，簡稱網址，是網際網路上標準的資源的位址(Address)，如同在網路上的門牌。
統一資源定位符的完整格式如下：
[協定類型]://[使用者@][伺服器位址][:埠號]/[檔案路徑][?請求參數][#ID]
其中[使用者@]、[:埠號]、[檔案路徑]、[?請求參數]、[#ID]都屬於選填項。
請求與回應
HTTP 的基本運作方式就像上圖一樣，我們開啟網頁、或在網頁上做特定的操作的時候，其實都是在向伺服器發送請求(request)，而伺服器則會對應 request 給予我們回應(response)。
回應(response)的主要內容就是 HTML。
伺服器
「網路伺服器」(web server)可以指軟體、也可以指硬體、還可以指它們共同運作的狀態。
存放網路伺服器軟體(如 phpMyAdmin)、網站檔案（如*.html、*.css、*.js）的電腦。
它會連上網際網路(Internet)並能和其他連上網的設備做物理數據交換。
PHP
全稱：「PHP：Hypertext Preprocessor」，即「PHP：超文字預處理器」，是一種開源的通用電腦手稿語言。PHP的應用範圍相當廣泛，尤其是在網頁程式的開發上並可嵌入HTML中使用。
<?php
echo 'Hello World!';
?>
需存成*.php，只能在伺服器上跑
select D, count(C) group by D order by count(C) Desc limit 3 label count(C) "簽到次數"
MarkDown
# 標題1
## 標題2
- 無序清單
1. 有序清單
**粗體**
*斜體*
~~刪除線~~
這投影片跟網頁就是用 MarkDown 寫的
md.nchuit.cc/html/ HTML 簡介 與基礎語法 VJ
{"metaMigratedAt":"2023-06-16T18:46:03.215Z","metaMigratedFrom":"YAML","title":"HTML 簡介與基礎語法","breaks":true,"description":"從HTML到MarkDown1-講義簡報-資訊社主題社課","image":"https://i.imgur.com/1Q6Rm96.png","slideOptions":"{\"theme\":\"simple\"}","contributors":"[{\"id\":\"e86b6571-4dea-4aa4-ba20-ece559b0e015\",\"add\":23847,\"del\":6526},{\"id\":\"6d6e3ba2-6820-4c6f-9117-f09bccc7f7aa\",\"add\":4974,\"del\":2029}]"}