HTML ＆ SEO - HackMD

# HTML ＆ SEO ###### tags: `Tag(前端基礎)` >[參考資料](https://ithelp.ithome.com.tw/articles/10202562) 金魚都能懂網頁設計入門 >[參考資料](https://www.happycoder.org/2019/12/11/[%E6%96%B0%E6%89%8B%E6%9D%91%E7%B3%BB%E5%88%97]-markdown-html-%E5%9F%BA%E7%A4%8E%E8%AA%9E%E6%B3%95%E6%95%99%E5%AD%B8/) HTML 基礎語法教學 ``` 標籤屬性是甚麼？ HTML標籤因為用途的關係，每個標籤本都可能帶有不同的屬性跟值，作用目的與意義也都不同 🌝 像是圖片標籤會帶有 src 屬性以及 alt 屬性，而超連結則會帶有 href 屬性 ``` 語意化是甚麼? 使用HTML標籤來標記網頁內容，==讓網頁內容文字具備明確的含意==，就是語意化的一個過程 >[參考資料](https://www.happycoding.today/posts/27) HTML語法整理! 3分鐘快速弄懂常用語法！ >[參考資料](https://www.jungledisk.com/blog/2017/12/04/should-i-bother-with-semantic-html/) HTML Sematic Tags: Should I Bother With Semantic HTML? #### `區塊` ![](https://i.imgur.com/EbK5N0M.png) >[參考資料](https://www.happycoding.today/posts/27) HTML語法整理! 3分鐘快速弄懂常用語法！ ```htmlmixed= <header> 網頁標頭，經常包含 logo、標題、導航列 <main> 主要內容 <footer> 網頁結尾，經常包含版權資訊、聯絡方式 <article> 主要文章 <section> 段落 <nav> 導航列 <aside> 跟主要內文沒有太直接關係的側欄 ``` #### `內容` ```htmlmixed= <div> : 分組用 ( block ) <ul> 有序清單 & <ol> 無序清單 ``` #### `圖片` ```htmlmixed= <img> 圖片 <figcaption> 圖片說明文字 ``` #### `文字` ```htmlmixed= <h1> ~ <h6> 網頁標題 <p> 網頁內文 <span> 分組用 <em> 強調文字 <strong> 重要文字 <blockquote> 表示引用自其他內容 <a> 超連結 or 錨點 <pre> 保留格式 <hr> 分隔線 <br> 換行 <time> 日期與時間 ``` #### `嵌入內容` ```htmlmixed= <ifram> 內嵌網頁 <embed> 嵌入一個外部資源 <video> 一段影片檔 <audio> 一段聲音檔 <source> 可填入不同的 <video> or <audio> 類型 <canvas> 透過 JavaScript 實現繪圖功能，甚至是動畫、遊戲 <svg> 繪製一個向量圖 ``` ### 常見的 `<head>` 內容 >[參考資料](https://medium.com/@angela52799/%E4%BD%95%E8%AC%82-html-8306bb9bda2) 何謂 HTML ? ``` * 瀏覽器頁籤的標題和圖示 * 網頁的 Metadata（作者、關鍵字、Open Graph Data…..） * 連結的檔案（CSS、JS） ``` ```htmlmixed= <head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />  <title>網頁標題</title> </head> ``` ![](https://i.imgur.com/OCx2Fe5.png) #### `title` 用於更改網頁頁籤文字 ![](https://i.imgur.com/WQm5rVv.png) #### `Meta 標籤` ==敘述網頁的標籤==，包含作者、文字編碼、網站說明文字、關鍵字常用的屬性有： `charset 、 name 、 content 、 http-equiv` ### `nav` >[參考資料](https://medium.com/%E7%8B%97%E5%A5%B4%E5%B7%A5%E7%A8%8B%E5%B8%AB/7-%E5%80%8B%E4%BD%A0%E5%BF%85%E9%A0%88%E7%9F%A5%E9%81%93%E7%9A%84semantic-elements-ccc8bbad5d) 7 個你必須知道的semantic elements nav扮演的角色是==輔助使用者探索網頁== ### 常見的 `<body>` 標籤 >[參考資料](https://www.internetingishard.com/) HTML & CSS >🔥 [參考資料](https://docs.emmet.io/cheat-sheet/) Emmet縮寫大全 ### 1. 標題字 >[參考資料](https://www.internetingishard.com/) HTML & CSS ```htmlmixed= <body> <h1>Interneting Is Easy!</h1> <p>First, we need to learn some basic HTML.</p> </body> ``` ![](https://i.imgur.com/1jMYfgv.png) ### 2. 段落文字 >[參考資料](https://www.internetingishard.com/) HTML & CSS ```htmlmixed= <p>段落文字</p> ``` ![](https://i.imgur.com/uzN6FbT.png) ### 3. Unordered List 無序清單 >[參考資料](https://www.internetingishard.com/) HTML & CSS ```htmlmixed= <h2>Lists</h2> <p>This is how you make an unordered list:</p> <ul> <li>Add a "ul" element (it stands for unordered list)</li> <li>Add each item in its own "li" element</li> <li>They don't need to be in any particular order</li> </ul> ``` ![](https://i.imgur.com/fjTRfwO.png) ### 4. Ordered List >[參考資料](https://www.internetingishard.com/) HTML & CSS ```htmlmixed= <p>This is what an ordered list looks like:</p> <ol> <li>Notice the new "ol" element wrapping everything</li> <li>But, the list item elements are the same</li> <li>Also note how the numbers increment on their own</li> <li>You should be noticing things is this precise order, because this is an ordered list</li> </ol> ``` ![](https://i.imgur.com/8JFMBJ6.png) ### 5. div 規劃區塊 >[參考資料](https://www.internetingishard.com/) HTML & CSS `id`、`class` 是一種屬性，用來標註塊級元素套用特定的 CSS 樣式透過 `id`、`class` 屬性標注區塊，可讓 CSS 在該區塊進行排版 ![](https://i.imgur.com/H977bA6.png) ### 6. 表格 >[參考資料](https://www.internetingishard.com/) HTML & CSS ```htmlmixed= <table> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> <tbody> <tr> <td>Text</td> <td>Text</td> <td>Text</td> </tr> </tbody> </table> ``` ###### `效果如下` <table> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> <tbody> <tr> <td>Text</td> <td>Text</td> <td>Text</td> </tr> </tbody> </table> ### 7. strong 強調 >[參考資料](https://www.internetingishard.com/) HTML & CSS :::success 使用**強調和斜體**的重點==並非透過標籤調整樣式== 而是用來標示文字==賦予它意義讓瀏覽器看懂== ::: ```htmlmixed= <p>Other times you need to <strong>strong</strong>ly emphasize the importance of a word or phrase.</p> ``` ![](https://i.imgur.com/CggOPFJ.png) ### 8. em 斜體 >[參考資料](https://www.internetingishard.com/) HTML & CSS ```htmlmixed= <h2>Inline Elements</h2> <p><em>Sometimes</em>, you need to draw attention to a particular word or phrase.</p> ``` ![](https://i.imgur.com/rIa8NgG.png) ### 9. `a` 為 `anchor` 建立了通往其他頁面、檔案、Email 地址、或其他 URL 的超連結。 >[參考資料](https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/a) MDN >[參考資料](https://riptutorial.com/zh-TW/html/example/1076/%E9%8F%88%E6%8E%A5%E5%88%B0%E9%8C%A8%E9%BB%9E) 鏈接到錨點 ###### `<a>`標記可以指向具有id屬性的任何元素，可以通過引用頁面和錨名稱將網站從一個頁面鏈接到另一個頁面。 ``` html <h1>Table of Contents</h1> <a href='#Topic1'>Click to jump to the First Topic</a> <a href='#Topic2'>Click to jump to the Second Topic</a> <h2 id="Topic1">First topic</h2> <p>Content about the first topic</p> <h2 id="Topic2">Second topic</h2> <p>Content about the second topic</p> ``` ###### `href 屬性` ``` c href屬性不要留空，若暫時不需要寫地址，可以寫# <a href="#" >hello world</a> ``` :::warning ```htmlmixed= <a herf='images.html（檔名路徑）'> ：連結到網站的其他頁面 <a herf='https://www.medium.com（網址）'> ：連結到另一個網站 <a herf='#123（要連結段落的 id ）'> ：連結到另一個段落 ``` ::: ```htmlmixed= <p> This example is about links and <a href='images.html'>images</a>. </p> ``` ![](https://i.imgur.com/kGNwDPB.png) ### 10. <img> 標籤通常用於放置圖片，可支援 JPG 、PNG 、 GIF 、 SVG >[參考資料](https://www.internetingishard.com/) HTML & CSS ![](https://i.imgur.com/y0jyruV.png) :::success ``` src 、width 和 alt 是 <img>的屬性 src 是放檔案路徑，width 是調整檔案寬度，alt 是圖片的說明 ``` #### `alt` * 可以用於友善視障人士了解圖片內容，且==當圖片無法出現時也可以說明圖片內容== * 可以提升網站 SEO ::: ```htmlmixed= <img src="圖片網址" alt="圖片替代文字" title="圖片標題"> <img src='images/mochi.jpg' width='75' alt='A mochi ball in a bubble'/> ``` ### 11. 換行 >[參考資料](https://www.internetingishard.com/) HTML & CSS ```htmlmixed= <p>Regards,<br/> The Authors</p> ``` ![](https://i.imgur.com/hd2Kq7T.png) ### 12. 語意化元素 semantic elements >[參考資料](http://apolkingg8.logdown.com/posts/2014/02/04/note-of-semantic-html) HTML5 Semantic Elements ```htmlmixed= <header>：網頁的標頭，通常放置網站標題。 <nav>：網頁的選單、導覽。 <main>：網頁的主要內容。 <aside>：網頁的側欄、附加內容。 <article>：一篇文章內容。 <section>：自訂的區塊，例如數篇摘要組成的空間。 <footer>：網頁的頁尾，通常放置聯絡方式、著作權宣告等等。 <mark>：強調一小塊內容。 <time>：顯示日期時間。 ``` :::warning ##### `<header>` ```htmlmixed 用來表示區塊標題的區塊元素，這個區塊可以是一整個頁面、一個段落或一篇文章可以把它當成一個放置介紹內容的容器。一個頁面中可以有多個header。 ``` ##### `<nav>` ``` 導覽列 ``` ##### `<section>` ``` 文件中的一個專題群組或區塊像是文章中的章節不要把section當成div用，這大概是最常見的錯誤用法。 section內裝的應該是有意義且附帶標題的一段內容。 ``` ##### `<article>` ``` article跟section的區分是，article有更高的獨立性及完整性。最簡單的例子就是部落格、報紙與週刊等等。將任一篇文章拉出來，移至其他網站或是社群媒體時，可以發現它的原意並不受限於網路載體，因為他本身就具有獨立性。 ``` ##### `<aside>` ``` 當有些內容與當前的主文無關時，若需要呈現在畫面上，我們可以使用<aside>元素來包裹這些內容像是術語定義或相關連結 ``` ##### `<footer>` ``` 常包含站外聯絡資訊、服務條款、版權說明或使用者隱私權。 footer就是一個區塊的結尾，它並不是sectioning content，因此它不會有任何section被包在其中 ``` ##### `<figure>` ``` figure是一個有完整內容的區塊，他是主要內容的一部分，而且可以任意移動位置而不影響整體內容的表達。可以包含影音檔、圖表（可能是canvas或是svg）或是一段code。 🌝 他跟aside的差別在於： * aside和主內容有關，但不是主內容的一部分 * figure是主內容的一部分，但是他可以任意移動或刪除而不影響主內容的表達。 ``` ::: ``` article, section與div的階級關係 1. article: an independent, self-contained block of related content 2. section: only a block of related content 3. div: a block of content ``` ### 13. iframe 嵌入網頁可以設寬度跟高度 ###### `（伺服器可以設定防止別人存取網頁）` ```htmlmixed= <iframe src=" " width='' height=' '</iframe> ``` #### `範例：嵌入google map` ```htmlmixed= <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d57840.18805162603!2d121.52986417910155!3d25.03367519999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442abb6e9d93249%3A0xd508f7b3aa02d931!2z5Y-w5YyXMTAx6KeA5pmv5Y-w!5e0!3m2!1szh-TW!2stw!4v1594465650664!5m2!1szh-TW!2stw" width="100%" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe> ``` ![](https://i.imgur.com/uRT3Z3Q.jpg) ### 14. form 表單 >[參考資料](https://www.internetingishard.com/html-and-css/forms/) html forms >[參考資料](https://matthung0807.blogspot.com/2019/08/html-input-element.html) HTML <input> 輸入元素 Input element 簡介 >[參考資料](https://ithelp.ithome.com.tw/articles/10213503) 慢慢帶你了解Flask - Day4 網頁之間傳值 ![](https://i.imgur.com/9arKM4c.png) ```htmlmixed= <form action=”傳送目的地” method=”傳送方式”></form> <form action='' method='get' class='speaker-form'</form> ``` ![](https://i.imgur.com/9cEAKrV.png) ```htmlmixed= <div class='form-row'> <label for='email'>Email</label> <input id='email' name='email' type='email' placeholder='joe@example.com'/> </div> ``` ![](https://i.imgur.com/Wu0EABc.png) ``` * text inputs (for one or multiple lines) 單行輸入 * radio buttons * checkboxes * dropdowns ``` #### `Text inputs` ```htmlmixed=  <input type="text">  <input type="checkbox">  <input type="radio"> ``` #### `範例` ```htmlmixed= <div class="wrapper"> <div class="question">報名類型 <span>*</span></div> <label> <input class="choice_a" type="radio" name="status"> 躺在床上用想像力實作 </label> <br> <input class="choice_b" type="radio" name="status"> 趴在地上滑手機找現成的 </label> </div> <div class="wrapper"> <div class="question">怎麼知道這個活動的？ <span>*</span></div> <input class="feedback" type="text" placeholder="您的回答"> </div> ``` ![](https://i.imgur.com/KmwTOKy.png) #### `Placeholders` >輸入文字時placeholder內的「Enter your name」會消失 ```htmlmixed= <input type="text" placeholder="Enter your name"> ``` ![](https://i.imgur.com/TSLmc65.png) #### `Labels` 說明文字 ```htmlmixed= <label>Email</label> <input type="email"> ``` ![](https://i.imgur.com/YRkJJYL.png) #### `Checkboxes` ###### 🎄 `Checkboxe 常用在可以選擇許多項目的情況` ```htmlmixed= <div class='form-row'> <label class='checkbox-label' for='available'> <input id='available' name='available' type='checkbox' value='is-available'/> <span>I’m actually available the date of the talk</span> </label> </div> ``` ![](https://i.imgur.com/VvBQda4.png) #### `Radio buttons` ###### 🎄 `Radio Buttons 通常用單選` ###### ==`加上label的使用者體驗會好很多，點字也可以選到要選的東西`== ```htmlmixed= <fieldset class='legacy-form-row'> <legend>Type of Talk</legend> <input id='talk-type-1' name='talk-type' type='radio' value='main-stage' /> <label for='talk-type-1' class='radio-label'>Main Stage</label> <input id='talk-type-2' name='talk-type' type='radio' value='workshop' checked /> <label for='talk-type-2' class='radio-label'>Workshop</label> </fieldset> ``` ![](https://i.imgur.com/xQdpUDR.png) #### `Dropdown menus`下拉式的選單 ```html <div class='form-row'> <label for='t-shirt'>T-Shirt Size</label> <select id='t-shirt' name='t-shirt'> <option value='xs'>Extra Small</option> <option value='s'>Small</option> <option value='m'>Medium</option> <option value='l'>Large</option> </select> </div> ``` ![](https://i.imgur.com/3M5X4c0.png) :::warning #### 下拉式選單 >[color=#664ee0][code範例](https://codepen.io/Tiya_blank/pen/PqVdom?editors=1000) 下拉式選單 ![](https://i.imgur.com/YLVN3vV.png) ::: ###### `value屬性代表元素的值` ```htmlmixed=  <input type="hidden" value="123">  <input type="text" value="你好">  <input type="search" value="天氣預報">  <input type="tel" value="0932-333-333">  <input type="url" value="https://www.google.com.tw/">  <input type="email" value="someone@abc.com">  <input type="password" value="12345">  <input type="date" value="2019-08-08">  <input type="month" value="2019-08">  <input type="week" value="2019-W32">  <input type="time" value="09:10:15">  <input type="datetime-local" value="2019-08-08T09:20">  <input type="number" value="999">  <input type="range" value="90">  <input type="color" value="#ffff00">  <input type="checkbox" value="1">  <input type="radio" value="yellow">  <input type="submit" value="這是提交按鈕">  <input type="image" value="" src="https://lh3.googleusercontent.com/K9B0ocaZvhCU3j6PJLyTXngvZRDzAQQI-IeKv7O2IxyG63AHC0agRQp3lO-FFqgW4sdYqnBA9VKoBQowCDW39pjOIk30Q8HtXBNyTwvc6XsaZFUf2VkzmH-pAhZBFxoIEji6ZqTNnHJEPMQSNcjuUMr32AsGQge-_C0TV90tXfny66DCQ4YcNw9wAOIq21zlZftAO1oil213E0vjDwHoJsFILepHZ1dbP6qyJOD5gqCWCa174j_SAmGLA8LI96V1OmKzBveDgrNC4JSkYe3Eb4h0oML4aj9CpgMsDBmAwQBUnnik9aMAZBGz7lcGdv9AHKBWm30QKa7GuNfT2ZmojUpQS6x6SB8DZBECCNOMi-dhTfPx5_6cuSZ4UdKk-1jnyVdNQOWfhwEvBUfj26tXfrzqoQOqdLWBDNBxc82rdCzLu8zDz6W593l20t3BBR9rdXB2sILN-6zOxCAZf6ZjjDFEz2RtVMnx7oXgfV7RUoozEC-UAquC-o2nhoy4MhZ-7hdQf23DyhWrM7D-DkcHC8m8hiE9N4JNn7P_H9IHNaetpEwjv2q4_fyJFvdJYPeLHmVztBsYMv_a30FqE3sz3e3EiVJQ6zMLDvdNtWR_favW0HfumRfQ0y983fnqR2UxCcJ21EWuoSkIUMm90gBz27xZgMofigE=w119-h24-no">  <input type="reset" value="這是重置按鈕">  <input type="button" value="這是普通按鈕"> ``` ![](https://i.imgur.com/seiDOai.png) ![](https://i.imgur.com/1pqLE2v.png) ### 15. 如何在網頁顯示標籤?? ###### `escape 跳脫` ```htmlmixed= ＆ => & < => < > => > ``` ```htmlmixed= <div></div> ``` --- ### `SEO search engine optimization` 搜尋引擎優化 >[參考資料](https://sls.weco.net/node/16342) Open Graph Protocol * 主動提供資訊給搜尋引擎 * ==幫助搜尋引擎理解你的網頁==，網頁在搜尋結果就可以排名得更好 #### `og: open graph protocol ` ``` 🌔 為了讓搜尋引擎更了解你的網頁 🌓 og系列通常是給facebook使用 ``` `Open Graph Protocol `以 `HTML `的` META `標籤定義，一般都放置在` HTML` 中的 `<HEAD>` 標籤之下。 ###### `META 標籤的格式如下：` ```htmlmixed= <meta property="..." content="..."/> ``` 網頁的 meta 標籤可以替網頁設定屬性的值。 `Open Grap Protocol` 定義了許多屬性，其中有幾個是必要的屬性，包含： ```htmlmixed= og:title －此文件的標題，例如：「資料視覺化－使用 d3.js」 og:type －此文件的類型，例如：「website」 og:image －此文件的縮圖或是代表性的圖片 og:url －此文件的永久網址 ``` 🎄 如果需要確認網頁 `Open Graph `的內容，可以使用 [Facebook Debugger](https://developers.facebook.com/tools/debug/) ；將網址貼入 `Debugger` 後他便會把抓到的 `Open Graph Metadata `與縮圖顯示出來 >[參考資料](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) 使用 JSON-LD 處理 SEO ### `JSON-LD` `JSON-LD` 即是 JSON 格式的結構化資料，簡單來說就是在==描述這個網頁的型態及內容== 🍄 Google 會去讀取網頁中這樣的結構化資料，並能==針對不同的網頁型態做對應的搜尋結果呈現== #### `JSON for Linking Data ` 目的==讓你提供好的格式描述網頁==，==格式化的內容方便機器理解== #### 🎄 `robots.txt` 給爬蟲看的檔案 >[參考資料](https://www.awoo.com.tw/blog/robotstxt-crawl/) robots.txt用途與使用範例教學，釐清SEO收錄觀念 ``` 🌔 純文字檔 🌓 同常放在根目錄底下 🌖 會跟網頁爬蟲說你可以爬哪些 ``` >[參考資料](https://www.seoseo.com.tw/article_detail_637.html) Sitemap是什麼？網站地圖DIY教學與SEO應用 #### 🎄 `sitemap.xml ` 網站地圖，==讓搜尋引擎知道他可以爬哪些連結==

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.