HTML - HackMD

<style> a,h,p{ line-height: 1.5; letter-spacing: 1.5px; font-size: 110%; } </style> {%hackmd BJrTq20hE %} ###### tags: `WDA110` `HTML` [TOC] # HTML ## 良好習慣 1. 以w3schools和google為輔，把每行程式碼看懂代表甚麼意思。 2. 邊code邊看結果 3. XAMPP如需要重灌，可先備份htdocs資料夾（內含設定檔） ## 知識補充站 * [Normalize.css](https://necolas.github.io/normalize.css/8.0.1/normalize.css)格式化 * [鄭老師檔案區](http://220.128.133.15/php/%e9%84%ad%e5%85%89%e5%87%b1%e8%80%81%e5%b8%ab/) * [CSS Template](https://www.free-css.com/free-css-templates) * [mdn](https://developer.mozilla.org/zh-TW/docs/Web/HTML) (html攻略) * [w3school](https://www.w3schools.com/html/default.asp) * [Emmet Google](https://tinyurl.com/emmetgoogle/) * [codePen](https://codepen.io/pen/) * [W3Schools How To](https://www.w3schools.com/howto/default.asp) * [flexbox froggy](https://flexboxfroggy.com/) * [網頁設計丙級術科應試參考資料](https://techbank.wdasec.gov.tw/owInform/TestReferData.aspx) * [PDF一堆轉換功能](https://smallpdf.com/zh-TW/unlock-pdf) ## 資源－開源圖示 [Font Awesome](https://fontawesome.com/)：圖示 [Google Fonts](https://fonts.google.com/icons)：圖示 [ICOOON MONO](https://icooon-mono.com/?lang=en)：圖示 [Unsplash](https://unsplash.com/)：相片 [Collectui](https://collectui.com/)：介面樣式參考 [假圖片](https://tools.wingzero.tw/article/sn/347) [PICSUM](https://picsum.photos/images) ## VScode專區 #### VScode 快捷鍵 ![](https://i.imgur.com/4pi4o35.png) ## 標籤 ![](https://i.imgur.com/XwjR8uB.png) 標籤命名是讓瀏覽器曉得該提供何種處理預覽方式，舉例標題還是文字，表格還是圖片，換行還是水平線，這些都是標籤所宣告出來的。標籤的類型很多，這裡只舉例一些常用且基礎的標籤做練習介紹。 <br> ### 語意標籤 HTML5語意標籤的優點： 1. 可以快速抓到網頁架構和每個區塊的位置 2. 對於SEO優化有幫助 | Column 1 | Column 2 | | -------- | -------- | |頁首標籤\<header> | \<header>標籤如果是在\<body>內，它可以表示網頁的頁首，但如果位於\<article>或\<section>內，則可以表示文章或區塊內的首要區塊(但不要和title和heading混淆)。| |導覽列\<nav> | 只要是在網站內的導航區塊，都適合使用\<nav>標籤，像是主選單、頁尾選單等。| |主要區塊\<main> | 用來放置頁面主要資訊的區塊，展現頁面內容的獨特性。每個頁面只能有一個\<main>標籤，且理想狀態下，不能被放在\<nav>、\<article>、\<aside>、\<footer>和\<header>內。| |區塊或文章區塊\<article>\<section> | 過去需要建立一個區塊通常會使用\<div>，HTML5語意化標籤出現後，可以使用\<section>搭配\<h1~h6>的標題來呈現內容，而\<section>內一些無明顯含義的區塊或為了排版目的的區塊則使用\<div>來包，\<div>這時可以視作一個無意義的容器。\<article>標籤近似\<section>標籤，但\<article>主要用於包覆文章。要注意的是，\<article>可以有很多個\<section>，也可以是\<section>有很多\<article>，取決於內容。| |側欄\<aside> | \<aside>語意算是跟主要區塊內容無關的區塊，也就是額外資訊，像是側邊欄、廣告、其他連結、推薦文章等都蠻適合使用的，不一定是側邊位置才能使用。| |頁尾\<footer> | 表示頁尾或表尾部分，使用方式同\<header>。| |\<time> | 表示日期時間| |\<mark> | 如黃色螢光筆的方式畫出重點，強調一小塊內容| |\<details> | 描述文章的細節| |\<figure>\<figcaption> | \<figure>用於圖像，\<figcaption>用於圖像標題| |\<hgroup> | 當內容有主標題及次標題等多個標題的狀況下使用。| |\<cite> | 引用其他文獻或作品(例如書籍、歌曲、電影、繪畫、雕塑等）的標題| :::success :seedling:補充 ol後可加type= * "A"(表示用大寫A排列) * "a"(表示用小寫a排列) * "i"(表示用羅馬數字排列) * "I"(表示用大寫羅馬數字排列) ::: :::info :bulb:小技巧可以透過[emmet document](https://docs.emmet.io/cheat-sheet/)找到一些簡單的程式打法。例如：ol>li*4 ol下面生成出4個li ::: <br> ![](https://i.imgur.com/q2MnKej.png) ```htmlembedded= <input type="text"> //文字輸入欄位 <input type="password"> //密碼輸入欄位 <textarea></textarea> //文字輸入框 <select> //下拉選單 <option></option> </select> <input type="radio"> //選項按鈕 Radio Buttons <input type="checkbox"> //核取方塊 Checkboxes <button type="button"></button> //表單按鈕 HTML button <input type="hidden" name="隱藏欄位名稱" value="隱藏欄位值">//隱藏欄位 input hidden <input type="reset"> //重置按鈕 reset button ``` * id 選擇器一張網頁只能有一個id屬性值，不可重複。 * class 選擇器「.」開頭，名稱可自訂，可以在 HTML 檔中多處重複使用。 * ==<b>組合選擇器 (Combinator selectors)</b>== * A>B 子代選擇器，選擇A的子元素B * A B 後代選擇器，選取A的後代元素B * A+B 相鄰兄弟選擇器，選擇與A之後的第一個兄弟元素B * A~B 兄弟選擇器，選擇與A同層的所有元素B ```htmlembedded= div, p {A;} //所有<div>和<p>作用 div~ p {B;} //與<div>同等級的所有<p> div+ p {C;} //</div>後的<p>作用，僅限一次 div p {D;} //div內的所有<p> div> p {E;} //div內僅限下一等級的所有<p> <div> <p> A、D、E </p> <p> A、D、E </p> A <nav> <p> A、D </p> A </nav> </div> <p> A、B、C </p> <p> A、B </p> ``` attr 屬性選擇器 input\[type] 只要attar有type就抓 type="text type=number"全抓 input\[type=text] attar type=text 只會抓text [CSS Pseudo-classes](https://www.w3schools.com/css/css_pseudo_classes.asp) 偽類別選擇 (Pseudo Classes Selector)，部分的標籤會提供其他特殊情況下的條件，稱呼為偽類別並使用冒號 : 表示，下列舉例來說：連結偽類： ```css= a:link{color: red;} //連結狀態 a:visited{color: red;} //拜訪後的狀態 a:hover{color: red;} //移動到上面的狀態 a:active{color: red;} //點擊的狀態 ``` :::success Note: 如果要全指定 link4 個偽類，必須要按照 LvHa 原則來排否則效果可能會被覆蓋錯亂。舉例來說:link放在最後那麼所有的效果都會是:link（所覆蓋）。 ::: [否定選擇 :not(selector)](https://www.w3schools.com/cssref/sel_not.asp) 偽類別的一種，如果你需要某選擇 X 範圍排除某選擇 Y。可以這樣使用 [CSS :nth-child() Selector](https://www.w3schools.com/cssref/sel_nth-child.asp) 原則上就是找這群人之中的兄弟關係之對象 > nth-child主要是父級下的子級對象不管標籤；nth-of-type是等於找兄弟之間的相同標籤。前後差別是用 child 還是以 type 來計算。 | 選擇器 | 說明 | | | ------------------ |:------------------------------------------------ |:--- | | p:first-child | 找到這些 p 的父級之第 1 個兒子（大哥）。 | | | p:last-child | 找到這些 p 的父級之最後個兒子（老么）。 | | | ——————— | ———————————————— | | | p:nth-child(3) | 找到這些 p 的父級之第 3 個兒子。（索引最小為 1) | | | p:nth-child(3n+1) | 找到這些 p 的父級之第 1,4,7… 兒子。 | | | ———————————————— | ———————————————— | | | p:nth-of-type(3) | 找到這些 p 的父級之第 3 個兒子p。（索引最小為 1) | | | p:nth-of-type(odd) | 找到這些 p 的父級之偶數兒子p。 | | | p:nth-of-type(even | 找到這些 p 的父級之奇數兒子p。 | | | | | | | | | | ### CSS-flexbox (彈性盒子) * 切版方式之一 * 觀念： 1. display: flex; →　宣告彈性 2. flex-deriction: ; →　定義主軸方向 3. justify-content: ; →　定義主軸位置 4. align-items: ; →　定義次軸 * [:frog:玩青蛙:frog:](https://flexboxfroggy.com/) * https://www.w3schools.com/css/css3_flexbox.asp :::success 圖解 CSS Flex 屬性：https://wcc723.github.io/css/2017/07/21/css-flex/ ::: * display: * flex * inline-flex * flex-direction屬性：定義元素在容器裏擺放的方向==主軸，優先設定== * row: 元素擺放的方向和文字方向一致。 * row-reverse: 元素擺放的方向和文字的方向相反。 * column: 元素從上放到下。 * column-reverse: 元素從下放到上。 * justify-content屬性：定義元素在容器裏擺放的位置==軸方向轉換== * flex-start: 元素和容器的左端對齊。 * flex-end: 元素和容器的右端對齊。 * center: 元素在容器裏居中。 * space-between: 元素之間保持相等的距離。 * space-around: 元素周圍保持相等的距離。 * space-evenly: * align-items屬性：縱向對齊元素==交叉軸== * flex-start: 元素與容器的頂部對齊。 * flex-end: 元素與容器的底部對齊。 * center: 元素縱向居中。 * baseline: 元素在容器的基線位置顯示。 * stretch: 元素被拉伸以填滿整個容器。 * align-self屬性：控制<mark>單個元素</mark>，這個屬性接受和align-items一樣的那些值。 * order：決定flex元素的順序。 default value is 0 * flex-wrap：<mark>單行</mark>，超出範圍時是否換行的屬性，分為換行、不換行、換行時反轉。 * nowrap * wrap * wrap-reverse * align-content：<mark>多行</mark>，來決定行與行之間隔多遠。 * flex-start: 多行都集中在頂部。 * flex-end: 多行都集中在底部。 * center: 多行居中。 * space-between: 行與行之間保持相等距離。 * space-around: 每行的周圍保持相等距離。 * stretch: 每一行都被拉伸以填滿容器。 * flex-flow： * flex-direction和flex-wrap兩個屬性經常會一起使用，所以有縮寫屬性flex-flow。這個縮寫屬性接受兩個屬性的值，<u>兩個值中間以空格隔開</u>。 * 例子：可以用flex-flow: row wrap去設置列並自動換行。切版 (layout float) ![](https://i.imgur.com/R7CWgHt.png) https://www.w3schools.com/css/css3_flexbox_container.asp ### 網頁設計字型：襯線體與無襯線體 [參考文章](https://www.targets.com.tw/blog/more24-%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88%E5%AD%97%E5%9E%8B%E7%AF%87%EF%BC%9A%E7%B6%B2%E9%A0%81%E5%AD%97%E5%9E%8B%E8%A6%81%E5%A6%82%E4%BD%95%E9%81%B8%E6%93%87%EF%BC%9F.html) ### CSS display: inline、block、inline-block * **Inline 行內元素** ![](https://i.imgur.com/6bGN7t2.png) * 元素可在同一行內呈現，圖片或文字均不換行，也不會影響其版面配置。（行內元素即使設定上下margin/padding，排版也不會隨著設定改變） * 不可設定長寬，元素的寬高由它的內容撐開 <br> * **Block 區塊元素** ![](https://i.imgur.com/elzd9Qd.png =75%x) * 元素寬度預設會撐到最大，使其占滿整個容器 * 可以設定長寬/margin/padding，但仍會占滿一整行 <br> * **inline-block 行內區塊** ![](https://i.imgur.com/ddClqcK.png) * 以inline的方式呈現，但同時擁有block的屬性 * 可設定元素的寬高/margin/padding * 可水平排列 <br> | 預設為block屬性 | 預設為inline屬性 | |:---------------:|:----------------:| | \<div> | \<span> | | \<h1> - \<h6> | \<a> | | \<p> | \<img> | | \<form> | | | \<header> | | | \<footer> | | | \<section> | | <br><br> ## RWD Responsive Web Design (響應式網頁設計)：可以自動將網站顯示於各種不同裝置，包含桌機、手機、平板，根據不一樣的螢幕大小設計友善的閱讀介面。常用閱讀解析度：電腦版的寬度：至少1024px以上，平板裝置寬度720px ~ 1024px之間，手機裝置寬度：320px ~ 720px之間。 [什麼是響應式網頁設計？](https://www.ibest.tw/page01.php/) ## Bootstrap * 因應主流，會教4 & 5 ```clike 劉老喜歡稱呼<body>為天，</body>為地 ``` :question:嵌入的CSS為何擺在head? >其實無所謂。單純因個人習慣而異 >>主流共識為擺在head中，因為CSS的載入優先權大於所有物件 :question:JS為何擺在body尾端? >因為JS_script載入時會暫停dom樹解析和網頁渲染，使可見頁面載入時間增長 >>~~反正script又看不到，放最後給它跑也差~~ BS4切版公式：container>row>col BS4RWD用法：上述類別後方新增 .類別-sm/md/lg/xl/fluid，-n(比例，最多12分) ex: .container-fluid, .row-lg-2, .col-md-6 table-responsive: 針對table本身做RWD，未使用則整個網頁會跟著table滑動 ### Creative Tim [Creative Tim](https://www.creative-tim.com/bootstrap-themes/free) 多一種免費 Bootstrap 的選擇，有很多後台畫面 ## 常用的bs4 fixed-top：固定置頂 container->row->col-md-4