iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 2
0
自我挑戰組

前端菜焦阿日記系列 第 2

|D2| HTML - HTML標籤

tags: 2019年鐵人賽html

學習來源

  • MDN Web Docs
    MDN 是由Mozilla 基金會維護。 Mozilla 基金會是非營利組織,旨在支持 Open Source ,像 Firefox 瀏覽器也是他們 Product。 MDN 的開發技術文件比較有系統和詳細。
  • w3schools
    學前端都知道,也有很多範例可以看。
  • Chris 技術筆記Chris-2018鐵人賽
    好想工作室 Web Team 的 Mentor。

HTML標籤(Tags)

  • 元素組成如下

    圖片來源:MDN

    1. Tag有開始和結束(大部分),但有些Tag不用結束
      (如<img src="http://www.example.com/image.gif">)
    2. 開始和結束Tag之間可放文字或再放入Tag
  • 標籤裡可以放入屬性(Attribute),如classid等等

    圖片來源:MDN

  • 空白的webpage

    <!DOCTYPE html>  
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Hi,我是mangoSu</title>
    </head>
    <body>
    
    </body>
    </html>
    
    1. <!DOCTYPE>聲明
      • 第一行是告訴瀏覽器我們這檔案是用哪種HTML版本編寫
      • HTML5版本聲明只有一種寫法(如上),而4.01中有三種不同的
        <!DOCTYPE>聲明。
    2. viewport
      • width=device-width
        代表設定頁面寬度為裝置的寬度
      • initial-scale=1
        代表頁面第一次載入的初始比例為1

眉眉角角小技巧

  • 產生一個空白的webpage,請愛用快捷鍵(用AtomVisual Studio Code編輯器下)
    1. 打驚嘆號
    2. tab

上一篇
|D1| 轉職工程師小魯妹的血淚告白
下一篇
|D3| CSS - CSS3的關鍵字學習法
系列文
前端菜焦阿日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
1
Arel
iT邦新手 5 級 ‧ 2018-10-17 20:24:50

這是一篇很棒的博士文,感謝小魯妹大大分享

mangoSu iT邦新手 5 級 ‧ 2018-10-17 22:48:53 檢舉

謝謝看倌支持~
我記得你全家也都是陳博士

0
TomasLin
iT邦新手 5 級 ‧ 2018-10-17 21:26:30

陳博 士的小粉屍到此一遊!!!!!

mangoSu iT邦新手 5 級 ‧ 2018-10-17 22:49:16 檢舉

謝謝看倌支持~
我記得你跟樓上一樣全家也都是陳博士

0
小趙
iT邦新手 5 級 ‧ 2019-03-22 20:48:43

凡走過必留下痕跡,寫下我的理解。


-Day2 簽到-

存在三個學習管道
分別是"MDN Web Docs"、"w3schools"、"Chris 技術筆記"

----------------------------------------HTML標籤結構說明
Element由三大部分組成,順序如下
opening tag >> content >> closing tag
https://ithelp.ithome.com.tw/upload/images/20190322/20116355cRXEPgIFQg.png
----------------------------------------HTML標籤的屬性
Element裡面可以放屬性(Attribute)
https://ithelp.ithome.com.tw/upload/images/20190322/20116355R6kFq3OiQx.png
----------------------------------------本次練習成品
https://ithelp.ithome.com.tw/upload/images/20190322/20116355JTlmc1GS8P.png

我要留言

立即登入留言