[Day 7] 初學HTML

2021 iThome 鐵人賽

DAY 7

自我挑戰組

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

13th鐵人賽

Eva

2021-09-07 07:27:24

1157 瀏覽

分享至

前言

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

HTML 學習過程

MDN
從 MDN 可以學習 HTML 基礎，認識元素組成、標籤、網頁架構。
w3schools
在 w3schools 會有使用該標籤的範例，只要進入Try it Yourself，就能查看編輯器撰寫與網頁呈現的結果。
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 篇

RSS系列文訂閱系列文

6 人訂閱

完整目錄

直播研討會

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

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22201 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙

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