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


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>

<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> 很重要的兩個屬性,actionmethod

    • action

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

    • method

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


結語

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

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

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

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


#html #新手 #初心者 #Web







Related Posts

VSCode安裝

VSCode安裝

淺談 檔案格式

淺談 檔案格式

預備修煉:開發團隊需要什麼?六項修煉如何幫助團隊?

預備修煉:開發團隊需要什麼?六項修煉如何幫助團隊?



Comments