---
title: Astro課程 0702 - HTML(Day1)
tags: astro, html
---

# 0702 - HTML

## 回家必看
[CSS選取器](https://ithelp.ithome.com.tw/articles/10228196)
[切版-直播](https://www.youtube.com/watch?v=SnsAxb4-gHA)

(查詢目前瀏覽器是否可以支援語法)
[Can I use? 網站+語法](https://caniuse.com/#search=border-radius)

未來上課重點

HTML & CSS

HTML
概念
語法

CSS
概念
語法
選取器
切版


RWD

手刻
框架 bootstrap

## 時間軸

10:58 正課開始
11:02 HTML5
11:14 拿到一份文字資料，如何變成把它網頁？(HTML語法由來)
11:20 括號
11:23 SEO

11:38 一個網頁內有多少種資料?
11:50 標籤
12:00 `引用`的標籤撰寫方式
12:06 超連結的撰寫方式
12:18 VS code換行快速鍵教學

13:40 圖片
13:50 區域
14:00 頁面
14:10 Demo各種網站的清單頁和切版

14:41 表單實作
15:30 用vs code產生html
15:48 表格

# HTML

語意
eg. 判定網頁裡面是標題還是內文

## HTML5
廣義是HTML. CSS. JavaScript的組合
精確的說：HTML裡的HTML5版本

優點：
1. 添加了`<video>`等可以放多媒體的標籤
(~~所以flash就死了~~)
2. 讓網頁內文字的含義更加明確 eg. `<section>`, `<article>`
3. 標準化`<a>`,`<menu>`等標籤的定義

## 拿到一份文字資料，如何變成把它網頁？

加上`標記`（Markup）：變成有結構的資料
在HTML，標記用`tag`和`element`來稱呼。

`標記`的意義：
- 是為了抓出網頁的重點！
- 正確的`標記`可以幫助`SEO（搜尋引擎最佳化）`，讓使用者快速找到需要的資訊。

（主標題開始）
Lorem ipsum dolor sit amet
（主標題結束）

(段落開始) 
um dolor sit amet, consectetur adipisicing elit. Laborum quibusdam blanditiis illo totam obcaecati
（段落結束）

(段落開始) 
nsectetur adipisicing elit. Laborum quibusdam blanditiis illo totam obcaecati ex nemo dolorem nostrum. Facilis earum e
（段落結束）

以上是HTML語法由來

標題：`<title> </title>`
段落：`<p> </p>`
字體大小：`<h1>`到`<h6>`

## 一個網頁內有多少種資料? (brainstorming)

WEB網站架構圖。(若有缺漏請指正) - AMOS老師課堂筆記 / 02JUL2020

# 標籤

## 文字
- 標題 `h1`,`h2`,`h3`,`h4`,`h5`,`h6`
- 內文 `p`
- 列表/清單 `<li>`, `<ol>`, `<ul>`, `<dl>`,`<dt>`,`<dd>`
- 強調內容:
- 粗體`<strong>含義的強調`,`<b>只有視覺上的強調`
- 斜體`<em>含義的強調(較弱)`,`<i>只有視覺上的強調`
- 引用 `<blockquote>`
- 刪除 `del`
- 超連結 `link`,`a`

引用的標籤：

<blockquote>
  <del>客戶口袋的深度</del>合作的契合度
  <footer>
    by <cite>Amos</cite>
  </footer>
</blockquote>

超連結的標籤：
`<a href="" target="">`
標籤`<a>` 屬性`href`, `target` 值`"裡面的內容"`

為什麼要有屬性？
=> 因為只有標籤的話，資訊量不足

注意：屬性和值中間的等號不能加空格！

## 圖片

主要使用：`<img>`

html5才有的：（可以先自己查用法）

figure
figcaption

picture
source

## 影音

`<video>`
`<audio>`
`<source>`

邊播邊傳、串流

## 頁首、頁尾
`<header>`
`<footer>`

## 導覽列
`menu`
`nav`

## 區域

`div` division的概念，把一組資料群組起來
`span` 區段
`article` 主要內文區：為了明確定義網頁資料的意義
`section` [MDN的解釋](https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/section)
`aside` 側邊欄

article和section對SEO很重要！這兩個沒有位階之分。

Eg. `article`裡面可以包多個`section`，每一段`section`各有不同的主題。

但是如果沒有特定主題的話，用`div`即可。
=>因為餵給Google也沒什麼好分析的

## 頁面的分類

- 首頁
- 清單頁
- 卡片清單（有圖也有文字）
- 列表清單（檔案列表）
- 相簿清單（以圖為主）
- 分類清單（以類型區分）
- 內容頁
- 搜尋頁 / 搜尋清單頁 / 進階搜尋頁
- 聯絡頁

[chrome 看版面切版的外掛](
https://chrome.google.com/webstore/detail/pesticide-for-chrome/bblbgcheenepgnnajgfpiicnbbdmmooh)

## 表單

重點：設計時避免表單送出後、做檢查後又退回來

- `form`

- `input` 的各種`type`
- text
- tel
- number
- email
- url
- color
- range
- date
- time
- search
- checkbox
- radio
- button
- textarea (留言區)
- option

表單語法：
把`label for`的值和`input id`的值設為一樣，點表單label時就會自動跳到input欄位

        <form action="">
            <label for="username">姓名</label>
           <input type="text" id="username" name=""> 
        </form>

表單實作練習：

<style type="text/css">
	input{
		margin-bottom: 20px;
	}
</style>
<form>
	<label for="userName">姓名</label>
	<input type="text" id="userName" name="">

	<br>

	<label for="usertel">電話</label>
	<input type="tel" id="usertel" name="">

	<br>

	<label for="usertel">年齡</label>
	<input type="number" min="18" max="200" id="usertel" name="">

	<br>

	<label for="usertel">信箱</label>
	<input type="email" id="usertel" name="">

	<br>

	<label for="usertel">網址</label>
	<input type="url" id="usertel" name="">

	<br>

	<label for="usertel">色彩</label>
	<input type="color" id="usertel" name="">

	<br>

	<label for="usertel">年收入</label>
	<input type="range" min="0" max="100" id="usertel" name="">

	<br>

	<label for="usertel">生日</label>
	<input type="date" id="usertel" name="">

	<br>

	<label for="usertel">時間</label>
	<input type="time" id="usertel" name="">

	<br>

	<label for="usertel">上傳大頭照</label>
	<input type="file" id="usertel" name="">

	<br>

	<label for="usertel">搜尋</label>
	<input type="search" id="usertel" name="">

	<br>

	<label for="usertel">性別</label>
	<input type="radio" id="usertel" name="sex">男
	<input type="radio" id="usertel" name="sex">女

	<br>

	<label for="usertel">興趣</label>
	<input type="checkbox" id="usertel" name="">釣魚
	<input type="checkbox" id="usertel" name="">買東西
	<input type="checkbox" id="usertel" name="">賣東西
	<input type="checkbox" id="usertel" name="">在釣魚

	<br>

	<label for="usertel">留言</label>
	<textarea></textarea>
</form> <script data-prepros-origin-host="10.8.8.105" src="http://10.8.8.105:7882/__prepros-server__/prepros.js"> </script>

## 表格
主題`caption`
表頭`thead`
表身`tbody`
表尾`tfoot`

`tr*3>td{data}*4`

## VS code

### 換行快速鍵

`command ⌘` + `shift ⇧` + `P` 叫出命令列
輸入wrap
使用縮寫換行，再輸入需要的標籤
eg. `span(區段)`, `a`, `li*`
就可以使用特定標籤把文字包起來

### 快速產生html檔

`commmad ⌘` + `N` 新增檔案

畫面右下角設定檔案類型為 HTML
或按 `commmad ⌘` + `K` 放掉後按 `m` 然後輸入 html

`!` 後按 `tab`

### 快速生成多行清單
輸入: `ul>li{content}*數量`

### 多行游標
* `option` + `左鍵`
* `command` + `option` + `上下鍵`

### 快速加上註解

`command` + `/`