fbpx

這個333系列文章送給初踏入前端的小白們

也送給想創立網頁的朋友們… 

希望利用3分33秒(極短時間)就能輕鬆讓初學快速理解

小白們~  我們共勉之

 

1. 什麼是 HTML? & HTML 幹嘛用?

  • HTML 是 Hyper Text Markup Language 的簡稱,中文為「超文字標記語言」
  • 為「網頁的骨架」,專用來描述網頁長相(架構)[以便瀏覽器解讀如何呈現網站]

 

HTML 樣式 sample:

<!DOCTYPE html>        <!--第五版 HTML 宣告方式-->

<html>

<body>




<h1>小白們的 heading.</h1>

<p>小白們的 paragraph.</p>




</body>

</html>

 

2. 在哪寫 HTML?      .. HTML 編輯器

  • 最基本的話可以使用 Codepen 
  • 進階方便工具:VS Code & Sublime Text 3(附提示字)
  • 無腦瀏覽器開發模式:(Windows:F12;Mac 系統:Fn + F12)

 

3. 怎麼看其他網站的 HTML?

  • 點右鍵+選「檢查」
  • 在特定網站像是 Facebook  中不能使用以上功能(出現警訊)

 

4. HTML 基礎寫法:

a. 成對的 tag(標籤)  Ex: <></>   用兩個包含開放/關閉tags 包夾要呈現內容

b. 兩大必備架構 tags:head(頭) 和 body (身體)

    b-1: <head></head>搜尋用標籤

範例: <head> 大標籤包夾 <meta>、<title>、<link> 小標籤

<head>

<meta charset=”UTF-8”>

<title>學 HTML 看這篇就夠</title>    <!--頁籤-->

<meta name=”keywords” content=”程式小白 Iris”>  <!--搜尋關鍵字-->

<meta name=”description” content=”學習建造網頁必學的 HTML 基礎技術”> <!--搜尋簡短描述-->

<link rel=”stylesheet” type=”text/css”  hef=”https://pse.is/TX322”>  <!--導入連結-->

</head>

    b-2: <body></body>:真正會顯示在網頁上的內容

     🧠 現在… 想像你在使用 Word 文件

     字體:

   <p></p>   一般文字 (paragraph)

   <b></b>   粗體 (bold)

   <i></i>   斜體 (italic)

   <u></u>   底線 (underlined)

   字體大小:

   <h1>   最大字體 

   <h2> 

   <h3>

   … 

   <h6>   最小

   規格:

   <pre> 完整包存所有格式,意即「空白鍵」(縮排),通常用於表現原始碼

   <code> 等寬字體  全形的概念

 

c. 文本容器 (和 SEO 最相關)

   c-1: <div></div>

   c-2: <section></section> 

   c-3: <article></article> 

   (以上 3 者和文本大小、從屬無關)

   c-4: <span></span>  小區塊

 

d. 列表

   d-1: <ul> 無序列表 (unordered list)

   d-2: <ol> 有序列表 (ordered list) 

   d-3: <li> 列點  (list)

範例:  巢狀結構 demo

<ol>

  <li>

    Iris 粉絲

    <ul>

      <li>Willy</li>

      <li>Zan</li>

    </ul>

  </li>

  <li>粉絲留言</li>

    <ul>

      <li>讚唷</li>

      <li>不錯欸</li>

    </ul>

</ol>

 

e. 表格

    <table> 

      <thead> (表格標題 table header)  

      <tbody> (表格內容table body)  

      <tfoot> (表格註腳 table footer)

*補: <th> (table head; <tr> (table row) ; <td> (table data)

範例:

  1. <table border="1">
        <thead>
    
            <tr>
    
                <th>Iris 粉絲</th>
    
                <th>留言</th>          
    
            </tr>
    
        </thead>
    
        <tbody>
    
            <tr>
    
                <td>Willy</td>
    
                <td>讚唷</td>
    
            </tr>
    
            <tr>
    
                <td>Zan</td>
    
                <td>不錯欸</td>  
    
            </tr>
    
        </tbody>
    
        <tfoot>
    
            <tr>
    
                <th>total</th>
    
                <th>2</th>
    
        </tfoot>
    
    </table>
    
    

f. 插入媒體

   f-1: 相片 <img>

   f-2: 影片 <video>

   f-3: 音檔 <audio>

   f-4: 超連結 <a></a>

 

g. 功能

   <break> 換行

   <button></button>  按鈕

   <textarea></textarea>  留言區(多行文字輸入框) 

 

5. 時常看到的 ID 屬性是什麼鬼?

HTML 各種 tag 上都可以加入 id,譬如:<h1 id=”html”> HTML 簡單啦!</h1>。賦予獨一無二的 id 後,找尋 HTML 中元素就會變得更有效率。

說明:

撰寫 Javascript 時可以使用 getElemenyById,依循獨一無二的 id 位置對應找到元素

 

6. HTML 架構 ?

<header>、<main>、<footer>

總結:

HTML 概念和表示並不難,難的是如何把想像具體化體現在 HTML 中。因此,我們建造絢麗網頁不能只有最基礎的 HTML 知識(但 HTML 仍是基石,為非常重要的根本性存在),更需要一些妝點和修飾,否則你的網站就會猶如紙和黑筆的創作一般單調。所以緊接著在下一篇我們就會接續談談 CSS,幫我們的網頁上點妝!

 

如果你的入門還在單打獨鬥,歡迎來到快樂學程式找到志同道合的夥伴,你的自學之路不孤單。

 

更多 HTML 相關學習資訊

iris

iris

我是踏踏實實的程式小白🙆‍♀ 今年開始學習 JS 和 React~ 這邊專放我學習時的筆記和心得📒 如果喜歡我的文章不妨加入我一起學習💪 營造有趣學習程式大圈圈

Leave a Reply