[第六週] HTML 常用標籤（下）

Semantic elements 語義化元素
- <main> </main>
  可以把想要當作主要內容的東西用 main 標籤包起來
- <nav> </nav> (navigation)
  導覽列
- <footer> </footer>
  網頁底部的區塊，通常放一些版權或作者資訊或聯絡方式
  更多的語義化元素可以參考
  MDN Semantics : MDN
  w3cschool : W3School

<iframe src="網址"/ width="" height="">
嵌入其他網頁，但大部分的網頁會擋，所以不是每個網頁都可以拿來嵌入

<form> </form> 表單

<input type="text" /> 輸入文字
<input type="password" /> 輸入密碼，輸入的東西會以*顯示
<input type="email" /> 輸入 email, 會自動驗證輸入是否為 email格式
<input type="date" /> 輸入日期
<input type="radio" name="gender" id="male"/><label for="male ></label> 選項按鈕 (單選）
- 加上 name: 表示同個 name 的為同一組，只能選一個選項
- 加上 id，後面放 label，游標在文字上即可選取該選項，不用一定要移到小圈圈上做選取。

<input type="submit" value="表單按鈕的文字" /> 送出表單

<form>
    <div>
      姓名：<input type="text" />
    </div>
    <div>
        生理性別：<input type="radio" name="gender" id="male" /><label for="male">男性</label>
        <input type="radio" name="gender" id="female" /><label for="female">女性</label>
        <input type="radio" name="gender" id="other" /><label for="other">其他</label>
    </div>
    <div>
      <input type="submit" value="送出">
    </div>
</form>

<input type="checkbox" id="sports"/><label for="sports ></label> 選項按鈕 (復選）

<div>
興趣：<input type="checkbox" id="sports" /><label for="sports">運動</label>
    <input type="checkbox" id="reading" /><label for="reading">閱讀</label>
    <input type="checkbox" id="music" /><label for="music">音樂</label>
</div>

SEO (Search Engine Optimization) 搜尋引擎優化
1. <meta keywords>
2. <meta description>
3. <meta property ="og:title/description/type/image" content:內容> Open Graph Protocol
  是 Facebook 推出的技術，可以藉由編輯 og 裡的東西，來達成開發者想讓什麼樣的資訊出現在臉書上。
4. Json-ld: (Json for Linking Data)
  通常是給 google 看的
5. robots.txt
  給網頁爬蟲看的檔案，用法：網址/robots.txt
  會讓網路爬蟲知道什麼東西可以爬，什麼東西不要爬
6. sitemap.xml
Escape
在網頁裡顯示標籤
& => &amp
< => &lt
> => &gt
所以
<div></div> => <div;&gt</div;&gt