---
# System prepended metadata

title: 'HTML '

---

💡[HTML教學影片](https://youtu.be/CLUPkcLQm64?si=_1wcsnKbg11-eaSJ)
📑[CSS筆記](https://hackmd.io/@boboshi/BJi6fYcth)
📑[JAVA SCRIPT 筆記](/81IfLDHpQMSeq1MkP6P5dQ)

# 基本架構

```htmlembedded=
<!DOCTYPE html>  //告訴瀏覽器這個檔案是html，只要是要創建html就要加
    <html> //開始標籤 //代表整個網站
        <head> //代表網頁內的資訊
            <meta charset="UTF-8"></meta> //編碼方式
            <title> shibobo.web </title>  //網頁標題
        </head>
        <body> //真正看到的網頁內容
            哈囉你好
        </body>
        
    </html> //關閉標籤

```
> 執行結果
![](https://hackmd.io/_uploads/HJisz4DO2.png)
:::danger
可以看到網頁標題跟內容
:::

# 基本標籤
## 標題＜h1~h6＞
```htmlmixed=
<!DOCTYPE html>  
    <html>
        <head> 
            <meta charset="UTF-8"></meta> 
            <title> shibobo.web </title>  
        </head>
        <body> 
            <h1>第一篇</h1>
            <h2>第二篇</h2>
            <h3>第三篇</h3>
            <h4>第四篇</h4>
            <h5>第五篇</h5>
            <h6>第六篇</h6>
        </body>
    </html>
```
>執行結果
![](https://hackmd.io/_uploads/rJqPu4wOh.png)
:::danger
依照需求分類標籤大小
:::
## 段落內容及文字編輯
```htmlembedded=
<!DOCTYPE html>  
    <html>
        <head> 
            <meta charset="UTF-8"></meta> 
            <title> shibobo.web </title>  
        </head>
        <body> 
            <h2>第一篇</h2>
            <p>今天好無聊</p>
            <br></br>
            <h2>第二篇</h2>
            <p>今天好<b>無聊</b></p>
            <br/>
            <h2>第三篇</h2>
            <p>今天好<i><b>無聊</b></i</p>
        </body>
    </html>
```
> 執行結果
![](https://hackmd.io/_uploads/HkDM3VDOn.png)
* >  p 為段落文字內容
* >  b 為文字粗體
* >  i 為文字斜體
* >  br為空格換行
* >  hr為一直線
:::danger
如果執行<>中間沒有文字可以寫成
EX.`<br></br>` -> `<br/>`
:::
## 註解
```htmlmixed=!
<!---註解內容--->
```
:::danger
適當的使用註解，讓自己更容易理解自己的程式碼
:::
# 連結
使用a標籤，href為標籤的屬性
可以連外部網站，也可以是自己的網站，也可以是檔案(圖片之類的)
```htmlmixed=
<!DOCTYPE html>  
    <html>
        <head> 
            <meta charset="UTF-8"></meta> 
            <title> shibobo.web </title>  
        </head>
        <body>
            <a href="page2.html">打開看看</a>
        </body>
    </html>
```
> 執行結果
> ![](https://hackmd.io/_uploads/S1NuFo5un.png)
* > page2.html 為自身創建網站(跟主頁要在同一資料夾下才可以)，也可以放上外部網址
:::warning
注意!! 若是分頁在不同資料夾底下，必須附上路徑
如同一個A資料夾，內有index.html和page2.html和B資料夾
而B資料夾內有page3.html
EX.
(1)在主頁附第三頁
index ->`<a herf="B/page3.html" >第三頁</a>`
(2)在第三頁附主頁
page3 ->`<a herf="../index.html">homepage</a>`
 . ./ 為跳出B資料夾，跳出之後便會找到index.html


:::
:::danger
網頁應該不只一個頁面，會常常用到:)
:::
# 圖片
使用標籤img，src為標籤屬性
**和上述的連結結構相似**
```htmlmixed=
<!DOCTYPE html>  
    <html>
        <head> 
            <meta charset="UTF-8"></meta> 
            <title> shibobo2.web </title>  
        </head>
        <body> 
           <img src="sunrise.JPG" width="400"/>
        </body>
    </html>
```
> 執行結果
> ![](https://hackmd.io/_uploads/SyPppuT_2.png)
* > sunrise.JPG為資料夾內的照片，也可使用外部圖片位址
* > 若覺得圖片太大或太小，可使用width寬度及height高度屬性
* > 若只使用其中一屬性，則可以等比例的放大或縮小
:::danger
圖片也很重要，可以增加網頁的豐富度!
:::
# 影片&YT影片
使用video標籤，src屬性
```htmlmixed=
<!DOCTYPE html>  
    <html>
        <head> 
            <meta charset="UTF-8"></meta> 
            <title> shibobo2.web </title>  
        </head>
        <body> 
           <img src="sunrise.JPG" width="400"/>
           <video src="my_video.mp4" controls>無法載入內容</video>
        </body>
    </html>
```
* > my_video.mp4為資料夾內的照片影片
* > 加上controls 才能播放影片
* > 若覺得影片太大或太小，可使用width寬度及height高度屬性
* > 若只使用其中一屬性，則可以等比例的放大或縮小
* > 中間的文字是如果影片載入失敗跑出的提示字
:::warning
若是要加入youtube的影片
則先按下影片下方的分享
![](https://hackmd.io/_uploads/HJqz7Y6On.png)
選擇嵌入，再複製程式碼放入即可
:::
:::danger
影片沒有範例，因為我YT的影片載入失敗XDD
:::
> 執行結果
> ![](https://hackmd.io/_uploads/ryCcEYadn.png)
:::danger
結果換了一個影片似乎就行了，不知道是不是版權(??
放個我推"轟焦凍"
:::
# 列表
分成標籤ul與ol，而內容標籤為li
1. 標籤ul
```htmlmixed=
<!DOCTYPE html>  
    <html>
        <head> 
            <meta charset="UTF-8"></meta> 
            <title> shibobo.web </title>  
        </head>
        <body> 
            <a href="page2.html">打開看看</a>
            <ul>
                <li>這個世界太難了</li>
                <li>過好每天的生活</li>
                <li>珍惜當下</li>
            </ul>
        </body>
    </html>
```
> 執行結果
>![](https://hackmd.io/_uploads/ryeMxcJkt3.png)
* >旁邊列點為黑色點點
2. 標籤ol
```htmlmixed=
<!DOCTYPE html>  
    <html>
        <head> 
            <meta charset="UTF-8"></meta> 
            <title> shibobo.web </title>  
        </head>
        <body> 
            <a href="page2.html">打開看看</a>
            <ol>
                <li>這個世界太難了</li>
                <li>過好每天的生活</li>
                <li>珍惜當下</li>
            </ol>
        </body>
    </html>
```
> ![](https://hackmd.io/_uploads/B1qqq1JYn.png)
* >旁邊列點為數字
:::warning
若想更改數字為羅馬數字或者是英文，則可以在標籤ol中使用**type**屬性
EX1. 英文字母(可為大寫或小寫)
```htmlmixed=
<!---以上省略--->
<ol type="A">
    <li>這個世界太難了</li>
    <li>過好每天的生活</li>
    <li>珍惜當下</li>
</ol>
```
![](https://hackmd.io/_uploads/HJZJkxyF3.png)
EX2. 羅馬數字(可為大寫或小寫)
```htmlmixed=
<!---以上省略--->
<ol type="i">
    <li>這個世界太難了</li>
    <li>過好每天的生活</li>
    <li>珍惜當下</li>
</ol>
```
![](https://hackmd.io/_uploads/SJbWkeyth.png)
:::
:::danger
列點部分好像很普通(ㄏ
:::
# 表格
使用table標籤，橫列tr標籤，內容td標籤
```htmlembedded=!
<!---以上省略--->
<table width="200">
    <tr>
        <td>學期</td>
        <td>系排名</td>
        <td>GPA</td>
    </tr>
    <tr>
        <td>111-1</td>
        <td>2</td>
        <td>4.37</td>
    </tr>
    <tr>
        <td>111-2</td>
        <td>3</td>
        <td>4.32</td>
    </tr>
</table>
```
> 執行結果
> ![](https://hackmd.io/_uploads/Bk32BxkY2.png)
* > 使用width屬性可調整間距
* > 以上為製作3x3表格
:::danger
前面太多真的不想放，我還以為表格會有格子線 `¯\_(ツ)_/¯`
然後...我居然公開了我的成績 ( 快逃
:::
# 容器
容器分為div及span標籤，在這兩標籤內，可以放入多種標籤，所呈現的也會是一樣的
```htmlmixed=
<!---以上省略--->
 <div>
    <ul>
        <li>這個世界太難了</li>
        <li>過好每天的生活</li>
        <li>珍惜當下</li>
    </ul>
</div>
```
* > 執行結果會與上述相同
* > span也是相同使用方式
## div與span差異在哪?
在提到div與span的差別時，先來說說關於佔空間的問題
看個例子:
```
<!---以上省略--->
<a href="page1.html">link1</a>
<a href="page2.html">link2</a>
<hr/>
<p>hello</p>
<p>hihi</p>
```
> 執行結果
> ![](https://hackmd.io/_uploads/rygRGnbY3.png)
:::warning
你可以看到，像a標籤為內容多少就佔多少空間
而p標籤則為不管內容多長，空間就是佔一整行
:::
div與span的差異點就是佔的空間
**div ->佔一整行
span ->用多少佔多少**

> 你可能會說，為甚麼要這麼麻煩多用一個標籤來包，直接分開一個一個寫不好嗎?
:::danger
有了容器，在之後學CSS美化網頁或是排版會方便許多
:::
# 輸入標籤
使用input標籤，配合type屬性，以下會介紹幾種常用的type
## 1.text
輸入純文字
```htmlmixed=
<input type="text" placeholder="請輸入帳號"/>
```
> 執行結果
> ![](https://hackmd.io/_uploads/BJr1b2fF3.png)
* > 以上為兩個輸入帳號的範例
* > placeholder屬性可以加上提示文字
## 2.password
會將我們輸入的文字隱藏起來
```htmlembedded=
<input type="password" placeholder="請輸入密碼"/>
```
> 執行結果
>![](https://hackmd.io/_uploads/BJkRyhGK3.png)
* > 以上為兩個輸入密碼的範例
* > placeholder屬性可以加上提示文字

## 3.date
可以讓我們選擇日期
```htmlmixed=
<input type="date"/>
```
> 執行結果
> ![](https://hackmd.io/_uploads/Skktb2GF3.png)
* > 以上為兩個輸入日期的範例
* > ㄏㄏ是我的生日啦XDD
## 4.range
可以調整範圍
```htmlmixed=
<input type="range"/>
```
> 執行結果
> ![](https://hackmd.io/_uploads/BybvP2MF2.png)
* > 自行調整，好像很好玩
## file
可上傳檔案
```htmlmixed=
<input type="file"/>
```
> 執行結果
> ![](https://hackmd.io/_uploads/S1K2E6zY3.png)
* >按下會跑出讓你選擇檔案的小頁面
## checkbox
打勾勾~
```htmlmixed=
<input type="checkbox"/>
```
>執行結果
>![](https://hackmd.io/_uploads/Skv3P6Mt3.png)
* > 以上為兩個輸入勾勾的範例
* > 常用在同意聲明之類的
* > 好像也可以用在Todo List呢~
## 標籤textarea
可以輸入很多很多文字，文章當然也行
```htmlmixed=
<textarea></textarea>
<textarea></textarea>
<textarea>hello</textarea>
```
> 執行結果
> ![](https://hackmd.io/_uploads/By6yqafY2.png)
* > 方框右下可自行調整大小，如同第二個
* > 在標籤中間加上文字會變成預設文字，如同第三個
* > 精心挑選的歌詞:)

# meta標籤
從最一開始，基本架構內就有出現meta標籤，我們知道，head標籤內所放的是"一個網站的資訊"
:::warning
例如最開頭所使用的`<meta charset="UTF-8"></meta>`，就是在告訴瀏覽器說明這個網頁的編碼方式
:::
以下還會介紹幾種meta標籤
> 1. `<meta name="description" content="shibobo 的網頁筆記，覺得好難QQ"/>`

這告訴我們的瀏覽器或是搜尋引擎這個**網頁的描述**，讓搜尋引擎更了解我們網頁。

舉個例子，當我們在Google瀏覽器搜尋"東華大學"
![](https://hackmd.io/_uploads/HyN1txQtn.jpg)
紅框便是那個網頁的描述
> 2.`<meta name="author" content="shibobo"/>`

這告訴我們的瀏覽器或是搜尋引擎這個**網頁的作者**
> 3.`<meta name="keywords" content="shibobo, 筆記， 學習"/>`

這告訴我們的瀏覽器或是搜尋引擎這個**網頁的關鍵字**
> 4.`<meta name="viewport" content="width=device-width,initial-scale=1.0"/>`

viewport是視口之意
我們在瀏覽網頁的時候，會用不同的裝置，像是電腦或是手機，畫面大小就會不同，而此標籤就會**依裝置的大小做調整**。
```
width=device-width 就會依照裝置的不同坐不同的調整
```
```
initial-scale=1.0 進入網頁時，初始縮放比是100%
```
:::danger
緊接著就需要學習CSS與JAVA囉
:::
心很累沒錯，用暑假做點有趣的事吧XDD
阿其實也不知道筆記做這樣自己看不看得懂
總之加油吧~~

點擊快速連結
📑[CSS筆記](https://hackmd.io/@boboshi/BJi6fYcth)
