[ 學習筆記系列 ] 網頁本質 (一) - HTML 篇

#html #新手 #初心者 #Web

Posted by ClayGao on 2020-03-20

前言

這篇包括接下來的三篇筆記都是當時第一次接觸到網頁時寫的，其實在這之前也有相關的筆記，所以這些筆記已經算是整理第二次之後的，所以第一次寫的就不會再放上來。

內容其實也蠻基礎的，已經有經驗的人應該找不到什麼可以參考的部分，不過對於剛入門的人而言應該多少還是有點參考價值。

網頁本質

網頁的本質其實就是純文字檔案，你所看到的「畫面」是經由瀏覽器將純文字檔案的內容「渲染」而成。

也不要忘記，瀏覽器之所以可以處理網頁，是因為瀏覽器其可以辨識 ( 看得懂 ) 裡面的結構。

HTML ( HyperText Markup Language )

HTML 為「超文本標記語言」，這些文字語言轉換到瀏覽器渲染成你的所見所聞，這邊所指為 HTML 語法，而非副檔名。

從這邊可以了解它不是程式碼，通常來說，你可以看到一份 HTML 有很多標籤。

這邊就來一一介紹這些標籤，但很基本的地方不會講太細，盡量寫出值得討論的部分和重點。

<!DOCTYPE HTML>

不一定要加，但不加可能會碰到一些 Bug

基本上，這個標籤的 DOCTYPE 是 Document Type 的縮寫，是在 HTML 4.01 版本時出現，簡單來說就是定義文件類型。
它的作用是要告訴各個瀏覽器，當瀏覽器在對其做識別時，看到 <!DOCTYPE HTML> 就會依照規範去對該文檔做處理，所以這個標籤的目的是為了統一規格，也就是標準化。

參考資料：http://www.webpage.idv.tw/maillist/maillist4/new/02/02.htm

<html>

象徵所包起來的為 html 語法。

<header> 與 <head>

<header> 是 HTML 5 之後新添加的標籤，意思同於 <div id="header">，根據 2016 年的參考資料，有些老瀏覽器不支援這樣的標籤寫法。

而 <head> 則是過去就一直使用的，我們在此區塊引入各種 CSS 和 JS 庫，也可以使用 title 與 meta 標籤等等。可以理解成語言中的頭文件。

至於兩者的差別，目前已知在這篇文章之中，使用起來是沒有差別，但實質上他們還是不同的，之所以可以運行，是代表瀏覽器對語法限制較寬鬆，而 還是依然是代表 html 結構之一的主要標籤。

<meta>

這個元素提供有關頁面的訊息，有很大的一個功能是在它的屬性 name，其中的 keyword 可以使這個網頁有利於搜尋引擎的關鍵字搜索。

在最早的使用上，我們加入 charset 這個屬性定義該網頁的編碼。

<body>

網頁的本體，通常來說，大部分的編寫都在這個區塊。

<nav> 與 <footer>

其實本質是 <div> ，之所以賦予新標籤名稱是因為在檢視 html 語法結構時可增加易讀性。

<!-- 與 -->

網頁的註解，可以當作是 JS 的 /* 與 */

以下我們會介紹 <body/> 內的標籤

<h1> 至 <h6>

標題的意思，被這個標籤包住的字體會變大變粗，隨著數字越大，級別越小。

<p>

內文的意思，可以想像成段落，內中的段落會無視段落預設的空格與換行

<pre>

也是內文，但格式會與編碼內的格式相同，也就是預設的格式，所以即使加入空白也會顯示在頁面上

<br>

換行的意思，段落中只要 <br> 一出現，就會直接斷句並換行

<div> 和 <span>

body 內最常見的兩個標籤，就是包起來的東西為一個區塊，被包起來的東西是不會有任何變化，但實際上已經被包起來，這邊可以用 CSS 套用該區塊，對其做視覺上的變化。

<div> 會讓相鄰的元素垂直排列下來，<span> 則是會與相鄰的元素並排，若相鄰的元素也是 <span> 的話。

另外就是 <span> 也可以包住一個段落內的文字或句子，可以對一段特定文字用 CSS 做特殊處理。

在 HTML 5 之後，出現了語意化標籤 ( 一說為語義化 ) ，是將 <div> 用其他的名稱替代，一些新版標籤除了增加易讀性外，也會加入一些預設效果，如 <aside> 與 <article> ( 見參考資料 )

但目前我還是繼續使用 <div> ，等未來更熟練之後再考慮使用語義化標籤

比較有趣的一個討論是當實作按鈕時到底要用 <button> 還是 <div>，一說是看專案類型，也有一說是 <button> 可以自動將按鈕上的文字垂直置中。

<img>

也就是我們常用的圖片

  • src

    可以是網址與檔案位置

  • title

    滑鼠移上去會顯示該屬性內容

  • alt

    當圖片沒有顯示時會顯示該屬性內容作為替代文字

<ul> 和 <ol>

兩種標籤內部都是使用 <li>

簡單來說，<ul> 標籤包起來的就是無序列內容，<ol> 包起來的就是有序列，看 o 代表的意思為 order 就知道了

包起來的內容每一個元素都是使用 <li> 包起來，不要搞混

<ul> 示範

<ul>
    <li>一</li>
    <li>二</li>
    <li>三</li>
</ul>
  • 一
  • 二
  • 三

<ol> 示範

<ol>
    <li>一</li>
    <li>二</li>
    <li>三</li>
</ol>
  1. 一
  2. 二
  3. 三

<table>

<table> 包住你的元素，<tr> 為橫列，<td> 為直行

而 <td> 的另外一個型態是 <th> ，意思一樣，只是包起來的部分會變粗體

<table>
    <tr>
        <th>課程</th>
        <th>姓名</th>
        <th>課程時間</th>
    </tr>
    <tr>
        <td>英文課</td>
        <td>老皮</td>
        <td>一小時</td>
    </tr>
    <tr>
        <td>國文課</td>
        <td>老趙</td>
        <td>一小時</td>
    </tr>
</table>

出來就是這樣

課程 姓名 課程時間
英文課 老皮 一小時
國文課 老趙 一小時

<a> 連網頁外面 ( 超連結 ) 和裡面 ( 錨點 )

連結的意思，被 <a> 包起來的內文會變成一個連結，可以點下去

介紹幾個屬性

  • href

    有兩種用法

    第一種為超連結，直接在屬性寫上網址就好

    這邊搭配第二個屬性 target

  • target

    內中有 _self ( 預設值 )，直接從當下網頁連過去新網頁

    _blank 則是新開分頁至超連結

    第二種為錨點

    寫一個語法 <a href=#go>haha</a>

    然後在妳要前往的目的地加上 #IDname

    如此 haha 點下之後就可以到達該標籤了

語意化 UI 標籤

概念在上面有介紹過了，這邊提一下，在實質效果上，使用原本的 <div> 與語義化標籤是沒有任何差別的，但使用語義化標籤會更好

這邊有一個討論我覺得很棒　https://www.zhihu.com/question/271997896

簡單來說，使用語義化標籤可以讓你的 html 程式碼質感提升，而更重要的是對於 SEO 來說，語義化標籤的重要性就重要得多。

或許語義化標籤的份量會越來越重，全 <div> 的編寫方式可能也會被取代。

<iframe> 嵌入網頁

跟 <img> 概念很像，使用 src 屬性做 source

  • src

    填入要嵌入的網址，要注意的是不是每個網頁都可以嵌入，大部分網站都會將引用功能關掉，阻擋客戶端嵌入

<form>　表單

很重要的一個標籤，被表單包住的各種 <input> 都是預備要被表單輸出的元素

<input>

常用的 <input> 很多，可以使用 type 決定種類，type 預設為 text，是一個文字輸入框

type 還有 password 和 email 與 date 可以使用，可讓輸入框被限制於僅現於 Email 的格式或者讓使用者輸入的密碼內容為不可見

創造一個 <input> type 為 submit 可以將這個表單內所有的 input 內容送出 (發 request)

多介紹一下這次在作業多使用的一些屬性

  • placeholder

    輸入框致中預設的字，比如說：「請輸入電子郵件」

  • list

    當使用這個屬性，<input> 會變成下拉式選單，也可以輸入文字

    會讀取與該署性值相同的 <datalist> 元素，比如說

      <input  placeholder="Game's Name" list="data">

    下面可以用對應的 <datalist id="data">

    而 <datalist> 內中就可以有很多的 <option> 包住的文本內容，可以讓你的輸入框可以自動連接到預設選項

      <input  placeholder="Game's Name" list="data"/>
  <datalist id="data">
    <option>League of Legends</option>
    <option>Counter-Strike: Global Offensive</option>
    <option>Apex Legends</option>
    <option>World of Warcraft</option>
  </datalist>
  <button class="search__btn">Search</button>

  • radio

    多個 radio 預設為複選，若要單選，則將他們的 name 指定為同一個

    如果要連 <input> 後面的文字點選也能選到 radio，必須將文字以 <label> 包住，然後內使用屬性 for，值為 <input> 內的 id

      <form>
  <div>
    <input type="radio" name="gender" id="male" /><label for="male">男性</label>
    <input type="radio" name="gender" id="female" /><label for="female">女性</label>
    <input type="radio" name="gender" id="other" /><label for="other">第三性</label>
  </div>
  </form>

  • checkout

    基本上比照 radio，但由於通常使用於複選，所以不會有如 radio 般指定回同一個 name 的做法，

    而經過實測，加了 name 也沒有作用

    另外介紹 <form> 很重要的兩個屬性，action 與 method

    • action

      即這個表單要提交到哪裏，值為 URL

    • method

      要使用何種方法提交，比如說 GET 和 POST

結語

是說使用框架之後，就真的很少直接在 HTML 檔案做編輯了，但不論是使用 React 寫 jsx 還是 Vue 的 template 都一定會使用到。

當然 HTML 標籤絕對不只上面幾種，比如說 <code> 這個標籤可以讓你在頁面上顯示程式碼區塊，又或是 <vedio> 標籤可以嵌入影片等等。

若有興趣，可以上網搜尋一下，有些時候搞不好一些功能都已經被標籤給做掉了，我自己當初也是在學習完之後才發現，原來還有很多自己沒看過而且很酷的標籤。

下一篇將會是 CSS 的部分，繼續整理。


#html #新手 #初心者 #Web

ClayGao
前端初心者




Related Posts

關於 React 小書：可把函式當作參數傳入 setState

關於 React 小書：可把函式當作參數傳入 setState

 YongChenSu
反射方法操作

反射方法操作

 jnjjiu-wei
測試替身(上篇)

測試替身(上篇)

 TechBridge 技術週刊

Comments