1029_htmlcss_day2

# 1029_htmlcss_day2 [![hackmd-github-sync-badge](https://hackmd.io/hz9_FQHpTXOy-bqUMKPUDA/badge)](https://hackmd.io/hz9_FQHpTXOy-bqUMKPUDA) --- #### 上課日期：1029 ###### tags: `html/css` ###### tags: `5xruby` --- # 相關連結: - 還沒看的，趕快去看啦!!! [AMOS老師 - 金魚都能懂的網頁教學](https://www.youtube.com/playlist?list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre) - 建議看:[金魚都能懂的CSS必學屬性](https://ithelp.ithome.com.tw/users/20112550/ironman/3803?sc=iThelpR) - [web心智圖](https://cdn.discordapp.com/attachments/748046752870826045/771393916825894942/web.xmind) - [課程影片](https://campus.5xruby.tw/courses/1136422/lectures/25361517) - [資源網站-MDN](https://developer.mozilla.org/zh-TW/docs/Web/HTML)：標籤等資訊查詢 - [資源網站-caniuse](https://caniuse.com/)：tag支援度查詢 --- # 0. 今日綱要 / 目錄 1. [表單](https://hackmd.io/3QgapOxBSk-Pg9nqGtSyHg?both#1-%E8%A1%A8%E5%96%AE) 2. CSS --- # 1. 表單 ### 以網站的會員資料為例：一個表單會有什麼資料？ > 怎樣的資料適合怎樣的呈現？使用者會怎樣使用？如何操作？ - 下拉選單： - 星座 - 最高學歷 - 單行文字： - 姓名 - 帳號 - 信箱 - 密碼 - 電話 - 職業 - 身分證字號 - 推薦人 - 商品名稱 - 地址： - 行政區的區分？ - 一般為下拉選單，北部都放前面、筆畫少的放前面。（有時會有拼音排序） - 台鐵的網站為另一種想法：先篩選區域，再進行細部選擇。雖然多一個動作，但單一操作上較為簡潔。 - checkbox： - 多行文字/textarea： - 留言 - 商品簡介 - 評論 - 自我介紹 - 對話框（chatbot） - 特殊： - `form`+`input` ```htmlmixed= <form action=""> <label for="user_name">姓名</label> <input type="text" id="user_name">  <br> <label> 姓名 <input type="text"> </label> ``` - 上面屬性裡面type的選擇，在電腦前看不出來，但在手機上差別就很明顯，填寫對應欄位時會挑出相應的虛擬鍵盤 - [HTML` <input> `type Attribute (W3SCHOOL參考整理)](https://www.w3schools.com/tags/att_input_type.asp) ### 在手機上預覽 1. VScode開啟Go Live（右下角），以伺服器模式進行，開啟後會顯示port號 2. 在左側網頁檔案上，右鍵可以live server模式在瀏覽器開啟 3. 確定ip為何 - mac：左上角蘋果 > 系統偏好設定 > 網路 > 狀態 > ip - pc：命令提示字元(cmd) > $ ip config > 查看ip v4 4. 把電腦的網址中`:`前的網址替換成剛剛找的ip 5. 安裝chrome套件 - [the QR code extension](https://chrome.google.com/webstore/detail/the-qr-code-extension/oijdcdmnjjgnnhgljmhkjlablaejfeeb?hl=zh-TW) 6. 手機與電腦調整成相同網域 7. 以手機掃描QRcode以進行檢視 ### 標籤的選擇 > 成對的標籤，對空間的分配會比較明確 ``` <input type="button" value="送出資料"> <button>送出資料</button> ``` - 同樣都是按鈕，但下面的較常使用，較適合CSS。 ### checkbox <label> <input type="checkbox" id="user_name"> 不睡覺 </label> - [ ] checkbox ### radio ``` <label> <input type="radio" name="aa"> 是 </label> ``` ### figure - `figcaption` 作敘述圖片，以區隔其他內文標籤，例如`<p>` ### picture - 某些功能RWD常用 *(02:00pm前)* --- - [tag支援度查詢-can i use](https://caniuse.com/) --- # 2. CSS > 負責處理視覺的部分 > 如何只用文字來描述網頁的長相、特徵（屬性） > (14:00pm) ## 2.1. 基本介紹 > 什麼是CSS > CSS撰寫方式及語法規則 - 設定完要使用分號(;)結尾 - 寫在html的tag內的屬性，也叫inline style `<p style="color:green; font-size: 20px;">` - 寫在head裡的style ```htmlmixed= <head> ...... <style> p{ color:red; font-size: 20px; } </style> </head> ``` - 參考範例 ![](https://i.imgur.com/i7R1lH1.png) > 紅色為html寫法，紫色為css寫法 ## 2.2 選取器 - `class` ([金魚](https://ithelp.ithome.com.tw/articles/10217192)) 在tag裡設定class，選取器以`.class名稱`選取；同一個class可指定給多個tag - `id` ([金魚](https://ithelp.ithome.com.tw/articles/10217585)) 在tag裡設定id，選取器以`#id名稱`選取；一個id只能指定給一個tag - 層疊式宣告 ([金魚](https://ithelp.ithome.com.tw/articles/10218978)) - `*`全選 ### 同時對標籤與屬性下命令 - 優先權：id > class > tag > - CSS設定或`<style>`裡，重複設定的對象，後面的設定會蓋掉前面的 - **優先權原則:明確性越高、獨特性越高，優先權越高** - id:可以用減號、底線、英數，但字首不可為數字 ### 常見錯誤 - 有時候沒有反應可能是多了空格，或是全形的問題 ### 課堂練習 - 練習 *(03:10pm)* - 練習使用不同階層的選取器 - 五個段落 - 第一段： - 淺灰色的背景：#ddd - 文字色彩：#666 - 強調strong = #fa0 - 其他段落： * 其他文字色彩：#666 * 強調strong = #333 - 老師示範多層框的控制（顏色、虛線實線、邊界距離等等屬性）（15:25） - 選取器的觀念很重要，後面javascript也會用到 ### 延伸閱讀 - [金魚都能懂的CSS必學屬性 page3](https://ithelp.ithome.com.tw/users/20112550/ironman/3803?page=3) --- ## 優先權 > 說明這部分是什麼 1. 常見優先順序：!important > inline style > id > class > tag > * > 繼承 - inline style：寫在tag裡面的屬性後面 - !important：有最高權限，不是通則，是特例，直接指定。 - 如果在class和id裡面都有!important，則會顯示id裡面的!important，因為id的權限比class高。 ```htmlmixed= #box{ color: pink !important; } .box{ color: maroon !important; } ``` --- ## 課堂作業 - 寫一個table (16:20) - 跟表格相關的標籤有什麼 - 這些標籤的功用是什麼 - 合併儲存格怎麼做（上下合併、左右合併） - 參考資料 - [(金魚)](https://ithelp.ithome.com.tw/articles/10222225) - [HTML 表格 (table) 結構化、合併和群組教學範例 - MIS 腳印](https://www.footmark.info/web-design/html/html-table-structured-merge-group/) ## 延伸閱讀 - [玩轉 CSS FLEX | CSS教學 | 網頁教學 | 網頁設計](https://youtu.be/_nCBQ6AIzDU)(youtube影片) - [什麼是16進位色彩?](http://csscoke.com/2015/01/01/rgb-hsl-hex/) --- # 附錄 - [Chrome內建QRCode產生器，免外掛將網址直接轉為QR碼](https://www.techbang.com/posts/80849-chrome-built-in-qr-code-generator) - [網頁色彩碼](http://csscoke.com/2015/01/01/rgb-hsl-hex/) ：RGB、HSL、Hex - [心智圖法：xmind](https://www.xmind.net/xmind8-pro/)

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.