---
title: 20200702 Astro camp HTML
tags: Astro Camp, html
---

# 20200702 Astro camp HTML
> 黃金魚要先看完 再看選取器
> 選取器很重要 新手看完 看入門
> 我不會切版
> RWD ?
> bootstrap

can i use
查詢現在瀏覽器支不支援語法

10:58 正課開始(HTML 維基)
要大寫
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各種網站的清單頁和切版

SEO 搜尋引擎最佳化

表單是填完要送出的東西
清單：
dl
dd
dt

引用的標籤：

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

blockquote 看做是一個完整的section，次要資訊可以用footer包起來，這樣會放在最下面

span 把區段包起，但沒有視覺上的變化

圖片的標籤
`<img>`,`<figure>`,`<figcaption>`,`<picture>`,`<source>`

影音
`<video>`,`<audio>`,`<source>`
影音串流服務

頁首頁尾
`<header>`, `<footer>`

導覽列HTML5
`<nav>`

區域

<div>(一組資料群組起來)
<span>
<article> (HTML5)(文章主體)
<section> (HTML5)(獨立的區塊)
<aside> (HTML5)

網頁包含
首頁
清單頁
內容頁
搜尋頁
聯絡頁

表單`<form>`
- `<input>`屬性
- text
- number
- email
- color
- range
- date
- time
- search
- checkbox(大部分表定為複選)
- radio (name設定成一樣可以變成單選eg.男女)
- button
- url
type 在手機上會根據type的屬性切換鍵盤!
`<select>`

## 表格
tr table row 列
td 格子
輸入

 tr*4>td{data}*3

會生成4列3欄填滿Data的表格

th 欄或列的標題

## 合併儲存格
colspan="2"
rowspan="3"