iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
自我挑戰組

邊工作邊進行前端學習之旅系列 第 7

[Day 7] 初學HTML

  • 分享至 

  • xImage
  •  

前言

我們終於要開使進入網頁世界,一開始會覺得好多標籤名稱要記得、時不時也會忘記放入結束標籤,而出現錯誤。
但至少使用HTML做出一個簡單的網頁架構,對初期剛接觸的我來說,也有不少成就感。

HTML 學習過程

  1. MDN
    從 MDN 可以學習 HTML 基礎,認識元素組成、標籤、網頁架構。
  2. w3schools
    在 w3schools 會有使用該標籤的範例,只要進入Try it Yourself,就能查看編輯器撰寫與網頁呈現的結果。
  3. udemy - The Complete 2021 Web Development Bootcamp
    這堂課在 HTML 的教學介紹的詳細、透過製作出簡單的版型,帶出很多基本HTML會使用到的標籤。

以上認識元素、練習如何使用,基本上就可以做出網頁的架構啦。那也完成了一個部分了,別忘記也要push 上 Github 喔。

說說HTML 如何與 CSS\JS 搭配

CSS 如何跟 HTML 搭配使用

1. inline CSS

在 HTML 中加入 style 屬性,來撰寫CSS

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>
  • 此方式不建議使用,會造成維護的困難

2. internal CSS

在 HTML 檔案中,建立<style></style>區塊

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

3. external CSS

用link的方式,連結到另一個css檔案

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
  /*This example links to a
  style sheet located in the same folder as the current page*/
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
  • <link rel="value">,"stylesheet"文檔的外部樣式表

HTML 中使用 javascript

在HTML的body尾端

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

創立.js檔案,並引入

//HTML4 與 (x)HTML
<script type="javascript.js"> </script>

//HTML5
<script src="javascript.js"> </script>


上一篇
[Day 6 ] 想發表作品,先學會使用 Github 生成靜態網頁吧!
下一篇
[Day 8] 學學CSS,讓網頁增加色彩
系列文
邊工作邊進行前端學習之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言