# 0、進入前端 - 網頁背後秘辛 ###### tags: `FE101` `HTML+CSS` `2020八月第三周` `進度筆記` `Lidemy心得` 08/19 --- 以 https://html5up.net/ 為例子，可以看模板的樣子。 - index.html => 主要頁面，看到的視覺化呈現，可直接以瀏覽器開啟。 - 用文字編輯器 (推薦 Notepad++ 或是 Sublime ) ， 可以看到網頁本體。 - 修改` <h1> 內容的 </h1> `的部分可以改掉標題 ， `` <p>文字</p> `` 可修改內容，是文字格式。 - html 有結構的文字檔，是透過瀏覽器渲染後才能呈現 GUI 、 視覺化內容。 - 可以透過 F12 開發者工具來檢視網頁元素，如果沒在網路伺服器更改，因此只能在本機上修改。 --- # 1-1、 HTML 基礎 - 標籤 、 頭過身就過 ###### tags: `FE101` `HTML+CSS` `2020八月第三周` `進度筆記` `Lidemy心得` 08/19 ## 超文本標記語言 (HyperText Markup Language) : - 不是程式語言，但有很多標籤。 成對的標籤，如課程中介紹的 `<meta charset="utf-8" />` ， 最後面反斜線像香菜一樣可以加可不加，也可寫成 `<meta charset="utf-8">` 也是可以的，但課程建議加; 更詳細的討論可以參考課程附的這篇：https://stackoverflow.com/questions/1946426/html-5-is-it-br-br-or-br 。 --- ## 用最新的 HTML 格式 <!DOCTYPE HTML> : 用最新、最標準的 HTML 格式 。 - 不加也可以，但不加的時候可能會發生渲染結果跟預期不同。 - 瀏覽器可能會自定義渲染結果，因此告訴瀏覽器這個標準。 ## 一組的標籤 ``` <!DOCTYPE HTML> <html> <head> 網頁資訊。 <TITLE>網頁標題</TITLE> <meta charset="utf-8" /> </head> <body> 網頁主要呈現內容。 <!-- 註解 不會顯示在網頁視覺呈現，閱讀程式碼、文字檔才會看到。 --> </body> </html> ``` 指定網頁的語言編碼格式，可以指定萬國碼: `<meta charset="utf8"></meta>` 可以簡化成 `<meta charset="utf8" />` ， 自己一組。 --- 參考資料: [HTML 語 法 教 學 ](http://www.dlps.tc.edu.tw/html_teach/) [HTML標籤列表](http://web.thu.edu.tw/hzed/www/tag.htm) [HTML語法教學](http://linzy.csj.ks.edu.tw/materials/html_use.htm) --- # 1-2、 HTML 基礎 - 存在的意義，甚麼是自我 ###### tags: `FE101` `HTML+CSS` `2020八月第三周` `進度筆記` `Lidemy心得` 08/19 ## 超文本標記語言 (HyperText Markup Language) 主要用途 : - 最早的功能用途是顯示文章、資訊。 ## 標籤: ``<h1>內容</h1>`` ， h1 會一路到 h6 有不同大小字體級別: ``` <!DOCTYPE HTML> <html> <head> 網頁資訊。 <TITLE>網頁標題</TITLE> <meta charset="utf-8" /> </head> <body> 網頁主要呈現內容。 <h1>內容</h1> <h2>內容</h2> <h3>內容</h3> <h4>內容</h4> <h5>內容</h5> <h6>內容</h6> <!-- 註解 不會顯示在網頁視覺呈現，閱讀程式碼、文字檔才會看到。 --> </body> </html> ``` - 通常 h1 用下去不太會一路用到 h6 。 ## ``<p> 文字分段 </p>`` - P for Paragraph. 文字分段會塞在 body 內: ``` <!DOCTYPE HTML> <html> <head> 網頁資訊。 <TITLE>網頁標題</TITLE> <meta charset="utf-8" /> </head> <body> 網頁主要呈現內容。 <h1> 網頁前端 </h1> <h2> HTML </h2> <p> HTML 的介紹... </p> <h2> CSS </h2> <p> CSS 的介紹... </p> <!-- 註解 不會顯示在網頁視覺呈現，閱讀程式碼、文字檔才會看到。 --> </body> </html> ``` ## 文章、字型排版 [Lorem ipsum] (https://www.lipsum.com/) ， 可以用來測試版面的呈現狀態，可以貼在 `<p> 貼在這 </p>` 分段位置。 --- # 1-3、 HTML 基礎 - 常見的標籤 `<div>` `<span>` ###### tags: `FE101` `HTML+CSS` `2020八月第三周` `進度筆記` `Lidemy心得` 08/19 - 在 HTML 內分組的用法。 ## div for Division. 加入 `<div>` 基本上不會有視覺變動: ``` <!DOCTYPE HTML> <html> <head> 網頁資訊。 <TITLE>網頁標題</TITLE> <meta charset="utf-8" /> </head> <body> 網頁主要呈現內容。 <h1> 網頁前端 </h1> <div> <h2> HTML </h2> <p> HTML 的介紹... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed volutpat turpis, in feugiat purus. Nunc accumsan arcu ac tellus porta aliquet. Ut in augue quis diam tristique pretium. Duis vestibulum nisi tellus, quis porttitor ipsum tincidunt faucibus. Praesent nunc arcu, mattis id suscipit id, pretium consectetur odio. Curabitur eget turpis ligula. Suspendisse posuere, enim id dignissim luctus, est neque fringilla dolor, eget iaculis justo sapien at neque. Sed nec euismod mauris. Suspendisse tincidunt velit non lorem accumsan gravida. Cras rhoncus felis quis dui blandit dapibus. Curabitur quam turpis, volutpat vitae ex non, fringilla venenatis sem. Proin accumsan non nisl nec mattis. Fusce ex lectus, congue quis dui ut, porttitor sollicitudin metus. Aliquam a nulla lacus. In pulvinar nisi nec ipsum rutrum pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et dapibus lectus. </p> </div> <h2> CSS </h2> <p> CSS 的介紹... </p> <!-- 註解 不會顯示在網頁視覺呈現，閱讀程式碼、文字檔才會看到。 --> </body> </html> ``` ![](https://i.imgur.com/qLgAdIj.png) - 在 CSS 時會有好處，對某標籤處裡的時候，分組就會很有效果。 ## span for 跨度 span 是用在文字內的分組，讓不同文字有不同的顏色或 Style : - 在 `<div></div` 分組的內容內用 `<div></div` 會直接換行。 - 而 `<sapn></sapn>` 不會換行，會保持文章結構。 --- # 1-4、 HTML 基礎 - 顯示圖片 img ###### tags: `FE101` `HTML+CSS` `2020八月第三周` `進度筆記` `Lidemy心得` 08/19 - 在 HTML 內放圖片。 - 會放在標籤內的東西為內容。 ## 標籤 `<img/` 用法 但圖片的話裡面不會有內容，跟 meta 一樣是自成一組的標籤: - ``<img src="網址"/>`` ， 用雙引號表示為字串，還有另外兩個屬性: - ``<img title="Something Logo" src="網址"/>`` ， 加了 title 後滑鼠移到圖片上會顯示 "Something Logo" 的字樣。 - ``<img alt="I am a image" title="Something Logo" src="網址"/>`` ， 當圖片無法顯示就會替代文字: I am a image 。 --- # 1-5、 HTML 基礎 - 顯示清單內的元素 ###### tags: `FE101` `HTML+CSS` `2020八月第三周` `進度筆記` `Lidemy心得` 08/19 - `<li>` list item : 列出一個一個 item 的元素。 - `<ul>` unordered list : 無排序。 - `<ol>` ordered list : 有排序，但不是讓元素排序，顯示序號。 --- ## 顯示清單 tag 用法: 1. 沒有排序，顯示點點: ``` <ul> <li>h1</li> <li>h2</li> <li>h3</li> </ul> ``` 2. 有排序，顯示數字: ``` <ol> <li>h1</li> <li>h2</li> <li>h3</li> </ol> ``` ![](https://i.imgur.com/DZXpoVc.png) --- # 1-6、 HTML 基礎 - 保留完整格式 ###### tags: `FE101` `HTML+CSS` `2020八月第三周` `進度筆記` `Lidemy心得` 08/19 - 換行或多的空白都會被 html 格式，在瀏覽器上解讀成一個空白，因此要用: - 保留完整格式 `<pre></pre>` : preformatted text ， 將想要的格式直接呈現，像是程式碼、區塊。 - 換行 `` <br>`` : line break ， "/" 可加可不加，直接使用 `` <br>`` 就可以換行。 --- # 1-7、 HTML 基礎 - 難免需要列個清單 ###### tags: `FE101` `HTML+CSS` `2020八月第三周` `進度筆記` `Lidemy心得` 08/19 ## 表格元素 - `<table>` 表格，以每列為單元，細分又有: - `<tr>` : table row ， 一列。 - `<td>` : table cell ， row ， 可以用在表格首行。 - `<th>` : table header ， 讓表格首行 row 變粗體字。 預設就會經過排版，範例如下: --- ``` <!DOCTYPE HTML> <html> <head> 網頁資訊。 <TITLE>網頁標題</TITLE> <meta charset="utf-8" /> </head> <body> 網頁主要呈現內容。 <h1> 網頁前端 </h1> <table> <tr> <th>Name</th> <th>English Grade</th> <th>Chinese Grade</th> </tr> <tr> <td>AAAA</td> <td>69</td> <td>77</td> </tr> <tr> <td>BBB</td> <td>60</td> <td>70</td> </tr> </table> <div> <h2> HTML </h2> <p> HTML 的介紹... </p> </div> <h2> CSS </h2> <p> CSS 的介紹... </p> <!-- 註解 不會顯示在網頁視覺呈現，閱讀程式碼、文字檔才會看到。 --> </body> </html> ``` 之後學到 CSS 可以幫表格上框線、樣式。 --- # 1-8、 HTML 基礎 - 大船下錨囉，錨點 ###### tags: `FE101` `HTML+CSS` `2020八月第三周` `進度筆記` `Lidemy心得` 08/19 ## `<a>` anchor 錨點 - 是超連結，可以連網內外~~互打~~ 的位置。 --- ## 連到外部指定地方的方法 - href : hypertext reference - `<a href="網址" target='_self'>文字</a>` ， 可以在現在的頁面去連到其他網頁(不開新分頁)。 - `<a href="網址" target='_blank'>文字</a>` ， 可以開個新頁面去連到其他網頁(不開新分頁)。 --- ## 網頁連到內部指定的地方 - 需要在有頁面文字的狀況下。 - ``<a href="#p2"> take me to p2</a>`` 通常置於文章頁首跟頁尾，方便快速移動首尾，像是頁面導覽列，可跳到文章某段。 ``` <!DOCTYPE HTML> <html> <head> 網頁資訊。 <TITLE>網頁標題</TITLE> <meta charset="utf-8" /> </head> <body> 網頁主要呈現內容。 <h1> 網頁前端 </h1> <a href="https://www.google.com.tw/maps/" target='_self'>take me to somewhere</a> <div> <a href="#p2"> take me to p2</a> <h2 id="p1"> HTML </h2> <p> HTML 的介紹... <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed volutpat turpis, in feugiat purus. Nunc accumsan arcu ac tellus porta aliquet. Ut in augue quis diam tristique pretium. Duis vestibulum nisi tellus, quis porttitor ipsum tincidunt faucibus. Praesent nunc arcu, mattis id suscipit id, pretium consectetur odio. Curabitur eget turpis ligula. Suspendisse posuere, enim id dignissim luctus, est neque fringilla dolor, eget iaculis justo sapien at neque. Sed nec euismod mauris. Suspendisse tincidunt velit non lorem accumsan gravida. Cras rhoncus felis quis dui blandit dapibus. Curabitur quam turpis, volutpat vitae ex non, fringilla venenatis sem. Proin accumsan non nisl nec mattis. Fusce ex lectus, congue quis dui ut, porttitor sollicitudin metus. Aliquam a nulla lacus. In pulvinar nisi nec ipsum rutrum pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et dapibus lectus. </p> </div> <h2 id="p2"> CSS </h2> <div> <p> CSS 的介紹... <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed volutpat turpis, in feugiat purus. Nunc accumsan arcu ac tellus porta aliquet. Ut in augue quis diam tristique pretium. Duis vestibulum nisi tellus, quis porttitor ipsum tincidunt faucibus. Praesent nunc arcu, mattis id suscipit id, pretium consectetur odio. Curabitur eget turpis ligula. Suspendisse posuere, enim id dignissim luctus, est neque fringilla dolor, eget iaculis justo sapien at neque. Sed nec euismod mauris. Suspendisse tincidunt velit non lorem accumsan gravida. Cras rhoncus felis quis dui blandit dapibus. Curabitur quam turpis, volutpat vitae ex non, fringilla venenatis sem. Proin accumsan non nisl nec mattis. Fusce ex lectus, congue quis dui ut, porttitor sollicitudin metus. Aliquam a nulla lacus. In pulvinar nisi nec ipsum rutrum pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et dapibus lectus. </p> <a href="#p1"> take me to p1</a> </div> <!-- 註解 不會顯示在網頁視覺呈現，閱讀程式碼、文字檔才會看到。 --> </body> </html> ``` --- # 1-9、 HTML 基礎 - 口語化的 UI Tag ###### tags: `FE101` `HTML+CSS` `2020八月第三周` `進度筆記` `Lidemy心得` 08/19 ## HTML5 語意化元素 (sementic elements) __可用與 `<div></div>` 區別，讓機器或編寫者可以辨識，可以辨識說這是導覽列的標籤。__ - `<main>` : `<main> 把網頁內最主要元素包起來 </main> ` ， 直接包不會有變化。 - ``<nav>`` : navigation 網頁的導覽列。 - ``<footer>`` : 網頁最底的所有權或是其他資訊。 - 還有其他的語意化標籤與元素，可參考如: - [MDN Semantics](https://developer.mozilla.org/en-US/docs/Glossary/Semantics) - [HTML Semantic Elements](https://www.w3schools.com/html/html5_semantic_elements.asp) - [[新手前端] HTML5的新tag 語意化標籤](https://ithelp.ithome.com.tw/articles/10108537) - [Day14：小事之 HTML 語意化標籤 上篇](https://ithelp.ithome.com.tw/articles/10195356) --- # 1-10、 HTML 基礎 - 借我框架用一下 `<iframe >` ###### tags: `FE101` `HTML+CSS` `2020八月第三周` `進度筆記` `Lidemy心得` 08/19 - 設定在頁面中嵌入並顯示其他網頁: ``<iframe src="網址" width="100%"" height="500px"/>`` 。 - 但要注意的是 ， set X-Frame-Options 的網頁並無法被借來嵌入，可以防止存取。 - 比較不常用，除非自己的網頁自己嵌。 --- # 1-11、 HTML 基礎 - 表單相關使用標籤 ###### tags: `FE101` `HTML+CSS` `2020八月第三周` `進度筆記` `Lidemy心得` 08/19 __表單相關的標籤:__ - form - input - textarea ``` <input> 輸入框 text password email date radio checkbox ``` --- ``` <!DOCTYPE HTML> <html> <head> 網頁資訊。 <TITLE>網頁標題</TITLE> <meta charset="utf-8" /> </head> <body> 網頁主要呈現內容。 <form> <div> Name: <input type="text" /> </div> <div> Password: <input type="password" /> </div> <div> Email: <input type="email" /> </div> <div> Date: <input type="date" /> </div> <div> Gender: <input type="radio" name="gender" id="male"/><label for="male">Male</label> <input type="radio" name="gender" id="female"/><label for="female">Female</label> <input type="radio" name="gender" id="other"/><label for="other">Other</label> </div> <div> Interest: <input type="checkbox" id="sports"/><label for="sports">Sports</label> <input type="checkbox" id="reading"/><label for="reading">Reading</label> </div> <div> <input type="submit" value="送出表單" /> </div> </form> <h1> 網頁前端 </h1> <div> <h2> HTML </h2> <p> HTML 的介紹... <br> </p> </div> <h2> CSS </h2> <div> <p> CSS 的介紹... <br> </p> </div> <!-- 註解 不會顯示在網頁視覺呈現，閱讀程式碼、文字檔才會看到。 --> </body> </html> ``` --- __Tag 資訊__ ``<input />`` 的用法: ``` <div> => 分組後可以讓送出表單顯示在輸入框下側。 Name: <input type="text" /> => "text" 內可以輸入文字。 </div> <div> Password: <input type="password" /> => 會隱藏密碼輸入，但 Server 還是會收到資訊。 </div> <div> Email: <input type="email" /> => 瀏覽器會幫你驗證 email 格式，但有些不會驗證。 </div> <div> Date: <input type="date" /> => 輸入日期。 </div> <div> Gender: <input type="radio" name="gender" id="male"/>< label for="male">Male</label> => 如果沒有 mame="gender" 會變成複選; <input type="radio" name="gender" id="female"/>< label for="female">Female</label> => id & label 可以點選字體就選擇; <input type="radio" name="gender" id="other"/>< label for="other">Other</label> => 這樣可以增加使用者體驗。 </div> <div> Interest: <input type="checkbox" id="sports"/><label for="sports">Sports</label> => 可以複選。 <input type="checkbox" id="reading"/><label for="reading">Reading</label> </div> <div> <input type="submit" value="送出表單" /> => 提交; 用 value 可以更改送出表單的文字。 </div> ``` --- 相關參考資料: [<input>: The Input (Form Input) element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) --- # 1-12、 HTML 基礎 - 搜尋引擎優化 ###### tags: `FE101` `HTML+CSS` `2020八月第三周` `進度筆記` `Lidemy心得` 08/19 ## 搜尋引擎優化 (Search Engine Optimization) - 幫助搜尋引擎了解網頁內容。 - 我們也可以主動提供資訊給搜尋引擎，可能有完整的 team 負責。 ## 以 [貓途鷹網頁](https://www.tripadvisor.com.tw/Restaurant_Review-g13808515-d2244808-Reviews-Din_Tai_Fung_101_Branch-Xinyi_District_Taipei.html) 為例 檢視原始碼可以看到: - `meta name="keywords" content=""` & `meta name="description" content=""` 。 - 可以告訴 SEO 網頁的簡介、關鍵字和標題。 - `meta property="og:title" content=""` ， og (Open Graph Protocol)，幫助 Search Media 了解頁面。 - 關於 [ og 的介紹](https://ogp.me/) ， 指定 property 是 og ， 通常是 FaceBook 在用。 - 可以用 [FaceBook 的偵錯工具](https://developers.facebook.com/tools/debug/?locale=zh_TW) 來看。 - ``</script> <script type="application/ld+json">{}`` script 包起來的 JSON 格式，內容很多元。 - [JSON ld (JSON for Linking Data)](https://json-ld.org/) ， 用固定的格式化內容讓機器看得懂內容、結構。 - 甚至能主動告訴搜尋引擎自身網站評分 "ratingValue" ， 給的資訊越完整，在讓消費者在搜尋上來達到 SEO ， 排名就可能上升。 - `<link rel="alternate" hreflang="en">` ， 告訴搜尋引擎有給其他國家的語言，同頁面不同語言，搜尋引擎給的分數就不分散。 - `<meta property="al:ios:app_name" content="">` & `<meta property="al:ios:app_store_id" content="">` ， 除了給 ios 也有給其他像是 Twiter 的分享。 - robots.txt : 給網頁爬蟲看的檔案內容，通常放在根目錄底下。 1. Disallow: 會要求你別爬網頁內容 ; Allow: 可以爬的部分，某些 API ，甚至藏徵才資訊(?)。 2. Sitemap: 給搜尋引擎網站的連結地圖，有些 Sitemap 很大，可能每個都是網址，幫助搜尋引擎知道頁面的存在。 - 在網址後加上 /robots.txt ， 以 https://www.tripadvisor.com.tw/robots.txt 為例就能看到內容: ``` \# Hi there, # \# If you're sniffing around this file, and you're not a robot, we're looking to meet curious folks such as yourself. # \# Think you have what it takes to join the best white-hat SEO growth hackers on the planet? ``` 大部分是給機器看的標籤，格式化後讓搜尋引擎了解頁面，甚至排名上升。 可以用 [Google Search Console](https://search.google.com/search-console/welcome?hl=zh-TW) 看 ， SEO team 看 ， SEO 會和工程師配合。 甚至有原生(自然)流量和付費流量。 --- 參考資料: [使用 JSON-LD 處理 SEO，並讓 Google 針對不同形式網站做獨特的搜尋結果呈現](https://medium.com/@z3388638/%E4%BD%BF%E7%94%A8-json-ld-%E8%99%95%E7%90%86-seo-%E4%B8%A6%E8%AE%93-google-%E9%87%9D%E5%B0%8D%E4%B8%8D%E5%90%8C%E5%BD%A2%E5%BC%8F%E7%B6%B2%E7%AB%99%E5%81%9A%E7%8D%A8%E7%89%B9%E7%9A%84%E6%90%9C%E5%B0%8B%E7%B5%90%E6%9E%9C%E5%91%88%E7%8F%BE-9c74783c017a) --- # 1-13、 HTML 基礎 - 網頁內顯示 Tag ###### tags: `FE101` `HTML+CSS` `2020八月第三周` `進度筆記` `Lidemy心得` 08/20 ## 如果想在網頁中顯示 ``<div></div>`` 標籤: - 用其他方式來顯示這個標籤，稱為 Escape 逃脫，符號有三種: - ``&`` => 用 ``&amp`` 置換。 - ``<`` => 用 ``&lt`` 置換。 - ``>`` => 用 ``&gt`` 置換。 例如: ``&lt;div&gt;&lt;/div&gt`` 會用純文字來顯示內容，而不是一組標籤。 ---