[第六週] 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>
      

更多 input 種類: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

  • 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> => &lt;div;&gt&lt;/div;&gt
#form #input #text #main #footer #SEO #meta #tag #Open Graph #iframe #escape






你可能感興趣的文章

[Python] Using pre-commit to improve Code Readability Easily

[Python] Using pre-commit to improve Code Readability Easily

建立可重複使用的虛擬機器(Hyper-V)硬碟檔案(VHD)

建立可重複使用的虛擬機器(Hyper-V)硬碟檔案(VHD)

寫什麼

寫什麼






留言討論