HTML 的必學基礎教學

HTML(Hypertext Markup Language),中文全名為「超文字標示語言」,使用「標記」(markup)來詮釋文字、圖像、或是其他能在瀏覽器裡面顯示的內容。HTML 標記還包括一些特殊「元素」(element),例如:<head><title><body><header><footer><article><section><p><div><span><img>……等等。

要怎麼入門呢?讓我們繼續看下去 …

編寫 HTML 基礎教學

在安裝 HTML 網頁編輯器(HTML editor)和設置文件夾後,你就可以開始創建你的網頁。一開始先建立一個名為 index.htm 或 index.html 的文件首頁。若沒有任何具體指定,所有瀏覽器基本上都會把 index 當作首頁。

首先先來的基本 HTML 架構:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

上面的編碼是一個非常基本、幫助每個網頁組成的例子。如您所見,這個編碼以<html> 開始,而這代表著 <html> 裡面的所有內容都是 HTML 編碼。接著是<head>,這是 HTML文件的標題。再來是 <title>,這是會顯示在瀏覽器上方的網頁標題。最後則是<body>,包含網頁內所有的內文。

標籤整理:

  • <!DOCTYPE html>:文件類型(doctype),用來連結一些應遵守的規則,有點像自動校正的功能
  • <html>:包住頁面所有內容,有時也被稱作根元素
  • <head>:放跟網頁有關的資訊
  • <meta>:用來提供網頁內容的資訊給瀏覽器或是搜尋引擎
  • <title>:用來標示網頁的標題
  • <body>:提供給使用者觀看的網頁內容,例如:文字、圖片、遊戲、可以播放的音樂或其他物件

記得把網頁內所有的內文標籤放在 <body>裡喔!

文件標題 (heading)

讓你呈現這些內容的主題,有 <h1><h6>,比較常使用 3 至 4 層,很少寫到 6 層,寫法如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>我是H1</h1>
  <h2>我是H2</h2>
  <h3>我是H3</h3>
  <h4>我是H4</h4>
  <h5>我是H5</h5>
  <h6>我是H6</h6>
</body>
</html>

顯示結果如下:

HTML 的必學關鍵

段落 (paragraph)

<p> 文字段落,在呈現一般文字時,這是我們最常用到的,基本上會寫滿一行畫面才會跳下一行,而使用 <p> 的話則可自動跳到下一段落,也就是中間會空一行。

<p>html很簡單</p>
<p>HTML 的必學關鍵</p>

顯示如下:

HTML 的必學關鍵



清單 (list)

清單至少會包含兩個元素,以下是最常見的清單類,無順序性與有順序性的

  • <ul>:代表這些項目的順序改變,不影響任何是
  • <ol>:代表這些項目的順序是有意義的
<ul> 
  <li>HTML 的必學關鍵</li>
  <li>HTML 的必學關鍵</li>
  <li>HTML 的必學關鍵</li>
</ul>

<ol>
  <li>HTML 的必學關鍵</li>
  <li>HTML 的必學關鍵</li>
  <li>HTML 的必學關鍵</li>
</ol>

顯示如下:

HTML 的必學關鍵



連結 (link)

對於網頁來說是非常重要的。要加上連結,我們需要用到這個元素 <a> (anchor 的意思)。

<a href="https://www.nonenglishengineer.com/how-to-become-a-front-end-engineer/">如何成為前端工程師?</a>

顯示如下:

HTML 的必學關鍵



區塊 (division)

可以把文檔分割為獨立的,不同的部分。它可以使用嚴格的組織工具,並且不使用任何格式伴隨關聯。

<div>
  HTML 的必學關鍵真厲害
</div>

<div>
  HTML 的必學關鍵好厲害
</div>

顯示如下:

HTML 的必學關鍵



小區塊 (span)

<span> 標籤是一個非常古老卻非常好用的標籤,透過 <span> 標籤可以讓我們輕易的修改網頁中的各種小區塊,例如替文章中的特定文字做出特效,包含修改文字顏色、修改文字大小、替文字增加底線、修改文字的字型、把文字變粗 … 等,都可以透過 HTML span 標籤把特定文字標示出來再賦予樣式的變化,來輕鬆達到網頁設計師所想要的風格,除此之外,<span> 標籤也經常被來來做一些網頁元件的樣式控制,使用非常便利。

<div>
  HTML 的<span style="color: red;">必學</span>必學關鍵真厲害
</div>

不知道 <span> 裡面的 style="color: red;" 是什麼沒關係,日後會再發一篇文章介紹,主要是讓文字變紅色,顯示如下:

HTML 的必學關鍵

是不是很好神奇,以上是介紹基本常用的標籤,日後會再介紹其他標籤介紹

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *