iT邦幫忙

2024 iThome 鐵人賽

DAY 1
0
自我挑戰組

前端基礎:HTML 和 CSS 的 30 天學習之旅系列 第 1

DAY 1:HTML 簡介與基本結構

  • 分享至 

  • xImage
  •  

HTML(HyperText Markup Language)是一種標記語言,用於創建和結構化網頁內容。它提供了一組標籤和屬性,幫助我們定義網頁的各個元素,如標題、段落、鏈接、圖像等。

!!要注意HTML是標記語言,不是程式語言(如:Python、C++)/images/emoticon/emoticon15.gif

基本結構可以參考下圖:
https://ithelp.ithome.com.tw/upload/images/20240915/20169395Tn1MkHAaFu.png

<!DOCTYPE html>:這是文件的聲明,告訴瀏覽器這是一個 HTML5 文件。
<html>:這是 HTML 文件的根元素,所有的內容都包含在這個標籤中。
<head>:包含文檔的元數據,如標題、字符集和外部資源的鏈接。常見標籤包括:

<title>:定義網頁的標題,顯示在瀏覽器標籤上。
<meta>:指定字符編碼或其他元數據。
<body>:包含實際顯示在網頁上的內容,如文本、圖片和鏈接。
<h1> 到 <h6>:標題標籤,用於定義不同層級的標題。
<p>:段落標籤,用於定義段落。
<a>:鏈接標籤,用於創建超鏈接。
<img>:圖像標籤,用於插入圖片。
實作:建立一個HTML文件

  • 打開一個文本編輯器(如 Notepad++、VSCode 等。
  • 複製上面的 HTML 代碼並粘貼到編輯器中。
  • 將文件保存為 index.html。
  • 打開瀏覽器,選擇“打開文件”,然後選擇你剛才保存的 index.html 文件,你應該會看到你的第一個網頁顯示在瀏覽器中。

結語:
今天學習了HTML 的基本概念和結構,也學會了如何建一個簡單的 HTML 頁面,並了解常見的 HTML 標籤及其作用。
/images/emoticon/emoticon69.gif


下一篇
DAY 2:HTML 元素與屬性
系列文
前端基礎:HTML 和 CSS 的 30 天學習之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言