# T1-new-v3 code review ###### tags: `好想工作室` 2022.03.10（Thu.）（Andy） ``` CSS： Html： 1.<main>的範圍 2.<head></head>研究一下 CSS： 1.container中的width可以用百分比 2.把一些沒用的css移除掉 3.命名注意：image-container > image-content 4.image的width、height記得設定（去符合外容器） 5.margin、padding使用情境 6.了解一下vertical-align 其他： 1.<h1></h1>的位置 ``` **** # <font color="#3881a1">HTML</font> ## 1. `<main>`的範圍 `<main>` ## 2. `<head></head>`研究一下 > 參考網站： > 1. [w3s-HTML head](https://www.w3schools.com/html/html_head.asp) > 2. [HTML 與 CSS (9) - head](https://ithelp.ithome.com.tw/articles/10252381) > 3. [HTML <meta name="viewport" content=""> 標籤 (tag) - 設定](https://www.fooish.com/html/meta-viewport.html) * **`<title>`** 決定了文件的標題，只能是文字，而且他會顯示在瀏覽器上的bar或tab上。而且他的內容對於search engine optimization (SEO)是非常重要的。 * **`<style>`** 可以在`<style>`中下CSS。 * **`<meta>`** character set, page description, keywords, author of the document, and viewport settings. 用來描述`<head>`中的元資訊 1. `<meta charset="UTF-8">`：指定網頁編碼 2. `<meta http-equiv="X-UA-Compatible" content="IE=edge">`：tell Microsoft Internet Explorer to use the latest rendering engine (edge) 3. `<meta name="viewport" content="width=device-width, initial-scale=1.0">`：通過設置viewport，來控制螢幕的寬度和縮放比例 * width=device-width： 指定瀏覽器頁面的寬度同裝置 (device) 的寬度 * initial-scale=1.0： 指定畫面初始縮放比例為 100%，即不放大也不縮小 * minimum-scale=1, maximum-scale=1： 加上以上兩個參數，可以防止使用者用手指做畫面的縮放 * user-scalable=no： 功能同上（可以防止使用者用手指做畫面的縮放） * **`<link>`** 用來定義現在的文件與外部資源關係。 * **`<script>`** 可以在`<script>`中下JS。 **** # <font color="#3881a1">CSS</font> ## 4. image的width、height記得設定 ## 5. margin、padding使用情境 ## 6. 了解一下vertical-align > 1. [Deep dive CSS: font metrics, line-height and vertical-align](https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align#fnref-1) > 2. [Vertical-Align: All You Need To Know (CSS)](https://christopheraue.net/design/vertical-align) **** # <font color="#3881a1">其他</font> ## 1. `<h1></h1>`的位置