---
# System prepended metadata

title: 20200702 Astro camp HTML
tags: [Astro Camp, ' html']

---

---
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"
 

