|D2| HTML - HTML標籤 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2019 iT 邦幫忙鐵人賽

DAY 2

自我挑戰組

前端菜焦阿日記系列第 2 篇

|D2| HTML - HTML標籤

2019鐵人賽

mangoSu

團隊好想工作室第二屆鐵人賽

2018-10-17 16:31:26

4169 瀏覽

分享至

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)，如class，id等等

圖片來源：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，請愛用快捷鍵(用Atom或Visual Studio Code編輯器下）
1. 打驚嘆號
2. 按tab鍵

|D1| 轉職工程師小魯妹的血淚告白

|D3| CSS - CSS3的關鍵字學習法

系列文

前端菜焦阿日記共 30 篇

RSS系列文訂閱系列文

33 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 則留言

Arel

iT邦新手 5 級 ‧ 2018-10-17 20:24:50

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

回應 1
檢舉

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

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

登入發表回應

TomasLin

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

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

回應 1
檢舉

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

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

登入發表回應

小趙

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

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

-Day2 簽到-

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

----------------------------------------HTML標籤結構說明
Element由三大部分組成，順序如下
opening tag >> content >> closing tag

----------------------------------------HTML標籤的屬性
Element裡面可以放屬性(Attribute)

----------------------------------------本次練習成品