[Day6]HTML-架構 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2023 iThome 鐵人賽

DAY 6

0

Modern Web

從零寫出捷運美食介紹網頁(HTML/CSS)系列第 6 篇

[Day6]HTML-架構

15th鐵人賽

2023-09-21 21:28:28

208 瀏覽

分享至

今天要講的是每個HTML檔案一定會有的一個宣告和三個元素。

介紹

`<!DOCTYPE html>`

一個宣告，用來讓瀏覽器知道這是HTML檔案
若少打這個宣告瀏覽器會處於怪異模式（quirks mode），可能造成渲染（render）CSS排版時和自己所想的不太一樣

`<html>`

整個HTML檔案的根元素（root element）
整個網頁中所有的HTML元素都包含在<html>標籤裡。

`<head>`

一個存放「寫給電腦看的內容」的容器，裡面包含一至多個不同用途的元素
用來說明關於該網頁的元資訊（metadata），像是指定網頁的標題，或指定網頁所使用的編碼等
常見寫在<head>中的元素有<title>、<meta>、<link>、<style>、<script>

`<body>`

一個存放「使用者從螢幕上看到的內容」的容器
用來呈現網頁的主要內容，也就是要顯示在網頁上的所有HTML元素都會寫在<body>裡

小實作

接下來我們就先來產生這些基本架構吧！

當然可以一個字一個字慢慢打，但VS Code內建Emmet，所以只要打!再按tab鍵，一整串就出來了輕輕鬆鬆！以下附上影片範例。
再小修一下，因為我們還不一定需要這麼多東西。
- 語言從英文改成中文
- 刪掉第二個<meta>元素
- 將<title>裡的內容改成「練習頁面」
  （<title>裡的內容就是視窗上會顯示的名字）
- 加上<h1>標題
```
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
    <meta charset="UTF-8">
    <title>練習頁面</title>
</head>
<body>
    <h1>成功產生一個HTML頁面!</h1>
</body>
</html>
```
顯示結果：

今天也是講基本的內容，之後會慢慢進入可以親自嘗試的部分！我是YQ，明天見。

[Day5]HTML-簡介及元素(下)

[Day7]HTML-屬性及值(上)

系列文

從零寫出捷運美食介紹網頁(HTML/CSS) 共 30 篇

目錄

RSS系列文訂閱系列文

1 人訂閱

完整目錄

直播研討會

{{ item.subject }}

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

{{ formatDate(item.duration) }}

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22195 篇

完賽人數

600 人

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

IT邦幫忙