行銷、數據分析、與 Python

[學習筆記] 初識HTML+CSS入門教學

By MaxAll posts 最後更新時間 28 8 月, 2021

html_css

整理了慕課網的初識HTML+CSS課程筆記，針對HTML架構及標籤和CSS基本知識有更深入的了解，記錄下來學習中所獲得的重要筆記供大家學習。

Table

教學1：什麼是 HTML x CSS x JS ?

HTML(內容)：文字，圖片
CSS(外觀)：字體，背景，邊框
JS(行為)：特效

教學2：執行順序

字體修改優先順序以內連式 > 嵌入式 > 外部式，簡單來說就是就近原則。

字體修改(嵌入式，放置在head的style type內)

1

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<html>

<head>

<style type="text/css">

h1{

font-size:12px;

color:#930;

text-align:center;

}

</style>

</head>

<body>

<h1>Hello World!</h1>

</body>

</html>

字體修改(內連式，直接寫在現有的HTML標籤中)

1

2

3

4

5

6

7

<html>

<head>

</head>

<body>

<span style="color:blue">Color blue!</span>

</body>

</html>

字體修改(外部式，寫在一個單獨的文件中)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<html>

<head>

<link href="style.css" rel="stylesheet" type="text/css" />

</style>

</head>

<body>

<h1>Hello World!</h1>

</body>

</html>

# 單獨文件 "style.css"

span{

color:blue;

font-size:30px;

}

教學4：了解什麼是 div 區塊

增加 <div id="ListName"> 來讓邏輯更清楚 (如右圖，在開發上明顯比左圖來得更淺顯容易理解)

div_id

教學5：元素分類

塊級元素：<div>、<p>、<h1>、<form>、<ul>、<li>
內聯元素：<span>、<a>、<label>、<strong>、<em>
內聯塊狀元素：<img>、<input>

node_tree

延伸閱讀：

那 [學習筆記] 初識HTML+CSS入門教學就到這邊，感謝收看，有關Max行銷誌的最新文章，都會發佈在Max的Facebook粉絲專頁，如果想看最新更新，還請您按讚或是追蹤唷！