iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 7
0
自我挑戰組

前端成長日記系列 第 7

網頁的軀幹:HTML

今天開始會進入前端技術的各個環節,並配置一些簡單的實作。
如果想知道前端技能地圖,可以參考前兩天的文章:
課程地圖(上)
課程地圖(下)

HTML全稱叫做超文件標記語言(Hyper Text Markup Language),是由許多角括號前後包住的「標籤」(Tag)組成,我們直接來看範例吧!

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>HTML測試</title>
</head>
<body>
	<h1>標題一</h1>
	<h2>標題二</h2>
	<div>佔行元素</div>
	<span>行內元素</span>
	<a href="http://google.com">超連結</a>
	<table>
		<tr><td>11</td><td>12</td></tr>
		<tr><td>21</td><td>22</td></tr>
		<tr><td>31</td><td>32</td></tr>
	</table>
</body>
</html>

1.把上面這段HTML code複製貼到記事本,將檔案另存成index.html(檔名任意英文數字,副檔名.html),使用瀏覽器開啟記事本,這時就已經做出了一個網頁!

2.任意修改中文字,將瀏覽器刷新,這時候網頁內容也會改變

3.<!DOCTYPE html>告訴瀏覽器,這是一個html文件

4.<head>...</head>之間包住的區塊,紀錄一些網頁資訊,例如內的文字會顯示在頁籤上。之後引入CSS樣式設定也會寫在這邊。

5.<body></body>則是會呈現在瀏覽器的內容囉!之後引入JS程式碼的標籤會放在這裡

HTML看似簡單,但是在大型的頁面架構中,也可以變得相當複雜。


上一篇
課程地圖(下)
下一篇
美化網頁: CSS
系列文
前端成長日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言