Try   HackMD

HTML

tags: web html frontend

關於HTML

一個網頁最基本由HTML開始，而HTML並非一成不變，他會隨著時間持續更新規格，目前最新的版本為HTML 5，於2014年10月28日，W3C正式發布，它並不是全新的規格，而是基於HTML 4上面來新增功能，也刪除了一些過時的元素，例如：applet、center等等。

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

將內容與樣式分開

HTML、CSS與Javascript都是有不同目的的語言，HTML用來提供內容與資訊，CSS用來決定網頁上一切事物的外觀，如：字體、字型、顏色、尺寸等等，而Javascript用來讓網頁有功能、邏輯與動作效果，如：顯示時間、判斷使用者輸入直是否正確、數學計算與根據使用者動作決定畫面的隱藏與顯示等等。

雖然在HTML裡面可以直接嵌入CSS與Javascript程式碼，但這將會造成HTML原始碼本身變得複雜且難以閱讀，甚至在找問題時更加困難，將這三種語言分開來會是比較好的做法，盡量保持網頁結構的單純。

Web標準

W3C（World Wide Web Consortium）是網頁技術標準的組織，它雖然是網頁標準的一個官方組織，但是其納入的網頁標準卻不是強制性的，瀏覽器可以自行決定要如何解譯網頁文件，但大致上來說，瀏覽器都會遵循W3C的標準規格，因為如果該瀏覽器顯示出來的網頁跟大家都不一樣，那就沒人會願意使用，但即使瀏覽器大部份都依照W3C的規格來開發，但仍然不盡相同，因此最令前端設計師頭痛的，莫過於瀏覽器的相容性；例如：某些標籤可能A瀏覽器可以辨識，但B瀏覽器卻無法辨識，使用者使用的瀏覽器因為版本不同，而無法支援最新的CSS效果等等。

W3C官方網頁：

W3School有HTML、CSS與Javascript學習的一切資源，請多加善用。

HTML語法規則

  • 規則１：所有的HTML元素都有「開始」標籤和「結束」標籤，而該元素的內容放在兩個標籤內，例如：

    ​​<開始標籤>元素內容</結束標籤>

    雖然瀏覽器有時很聰明，當你沒有加上結束標籤時仍然可以正常顯示，但仍請保持正確的標籤規則。

  • 規則二：如果該標籤內不需要元素內容，則稱為空標籤，可以將「開始」標籤與「結束」標籤簡寫為：

    ​​<空標籤 />

  • 規則三：巢狀標籤，HTML元素內可以標含其它元素，但必須將其完整包圍，也就是不可以將被包圍的元素的「結束」標籤放到包圍該元素的「結束」標籤下面，例如：

    正確：

    ​​<article>
​​   <h1>文章</h1>
​​</article>

    錯誤：

    ​​<article>
​​   <h1>文章
​​</article>
​​   </h1>

  • 規則四：屬性，有些標籤需要透過屬性來設定其特殊功能，例如: <a>標籤為超連結標籤，需要透過href屬性來設定要前往的目的地，範例：

    ​​<a href="https://www.google.com">前往Google首頁</a>

  • 規則五：標籤名稱使用小寫英文，雖然這個規則不是強制的，也就是說HTML元素名稱並不會區分大小寫，

    和

    都是一樣的意義，但W3C仍建議HTML內全部使用英文小寫來作為標籤名稱，因為小寫英文字母會比大寫來的容易閱讀。

HTML結構

文件類型宣告（DOCTYPE）

HTML檔案第一個元素就是「文件類型宣告（doctype）」，doctype告訴瀏覽器這個頁面使用哪一版的HTML，對HTML 5來說，doctype為：

<!DOCTYPE html>

這個元素較為特別，不需要結束標籤，也是唯一一個不需要的。

HTML結構

接著doctype後面則為HTML的全部內容，劃分為兩個部分：<head>與<body>，這兩個部分被<html>元素包圍：

<!DOCYPTE html>
<html>
    <head>
        ...這裡是head元素內的內容，用來放置該HTML文件的資訊或設定，不會顯示在瀏覽器上...
    </head>

    <body>
        ...這裡是body元素內的內容，所有顯示在網頁上的資料都放在body裡面...
    </body>
</html>

網頁編碼

我們必須在<head>元素內使用<meta>元素的charset屬性來設定該HTML文件的文字編碼，如果設定了錯誤的文字編碼，使用者在瀏覽器上可能會見到亂碼，網頁建議使用支援多國語言且節省網路流量的UTF-8編碼，例如一個一般的HTML 5網頁編碼通常會這樣設定：

<meta charset="utf-8" />

網頁標題

在<head>元素內，我們還必須設定該HTML文件的標題，標題不會顯示在網頁上，而是用來在瀏覽器本身的視窗列或是標籤列顯示，或是當使用者將網頁加入書籤或我的最愛時，預設的網頁名稱。

<title>Aaron Ho部落格</title>

視埠（viewport）

viewport也是<meta>的元素，是RWD網頁可以運作的其中一個關鍵，在非RWD網頁的時代，並不需要設定這個屬性。

viewport屬性用來指示瀏覽器應該用裝置解析度來顯示網頁，而非使用螢幕的真實解析度，在沒有設定viewport的桌上型電腦，用的就是全尺寸的顯示方式，這是大家很習慣的方式，而在行動裝置上，如果使用這個方式來顯示網頁，網頁的字體將會被縮放的方長的小而難以閱讀。

與viewport屬性相關的設定有：

  • width：寬度，告訴瀏覽器如何縮放網頁，width=device-width表示使用瀏覽器的全尺寸來顯示，如果沒有設定，將會以設備的原始尺寸來顯示，例如：iPhone4的原始解析度寬為980像素，而瀏覽器顯示寬度為320像素。
  • initial-scale：初始縮放，告訴瀏覽器載入網頁後一開始要如何縮放，即縮放倍數，1為原始大小，2為兩倍，以此類推。
  • user-scalable：設定使用者是否可以自行縮放網頁，預設為yes，要禁止使用者縮放可以設為no。
  • maximum-scale：最大允許縮放倍數，如果是maximum-scale=2，表示使用者只能放大兩倍，如果為maximum-scale=1則表示完全無法縮放，意思等同於user-scalable=no。

雖然viewport也是<meta>元素的一個屬性，但是它必須單獨使用一個<meta>標籤來設定，而不可以與其它屬性（如：charset等）同時設定，有些瀏覽器或許可以支援，但並不保證。

一個常見的viewport設定：

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/>

特殊字元

網頁上有一些特殊字元，如：<或是&等等，因為它們是HTML語法的一部分，當你想顯示在網頁上時，必須使用特殊的方式來表示，否則瀏覽器會將它當成是HTML語法的一部分，而造成顯示問題。

特殊字 描述 文字表示方式 數字表示方式
空字元    
< 小於符號 < <
> 大於符號 > >
& 海錨符號 & &
" 雙引號 " "
' 單引號 ' '
¢ 美元分 ¢ ¢
£ 英鎊 £ £
¥ 日圓 ¥ ¥
€ 歐元 € €
© 版權符號 © ©
® 註冊商標符號 ® ®

組合字（變音符號）

標記 字元 HTML組合標記 結果
̀ a à à
́ a á á
̂ a â â
̃ a ã ã
̀ O Ò Ò
́ O Ó Ó
̂ O Ô Ô
̃ O Õ Õ

HTML5元素

HTML5新增的元素

HTML5新增了許多特定的語意標籤以支援網頁版面設計，用來取代了不具意義的div、span標籤，網頁設計師利用這些與義標籤建立具有明確架構定義的網頁，讓整個HTML的結構更有意義並且更容易被理解。

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
使用語意標籤來建立網頁版面(圖片來源：W3School)

網頁頁面的頂部，通常用來放置網站的主要標題、圖片與LOGO等主要的資訊。

hgroup

定義著一個區段或一份文件的標題，該元素是用來對 h1 到 h6 的標題群組化。其中最大的標題為區段的主要標題，其它則屬於次要標題。當標題擁有多個層級時，這個元素會被用來對 h1-h6 元素的集合做群組化。

通常為網站的主要功能選單。

article

網頁中的一個內容區塊，是獨立且完整的內容，在一個網頁中可以有很多個。

aside

主要內容之外的其他內容，可以為網站的側邊欄。

section

用於內容等等段落的區分，在一個內容中可以有許多個。

figure & figcaption

figure用來作為一段獨立的引用區域，用來在網頁內容旁說明或展示獨立的內容，而figcaption用來作為設定該區域的標題。

網頁下方，用來顯示網站相關資訊、著作權等等。

mark

文字高亮。

HTML5保留的元素

標籤 說明
<!–..–> HTML文件註解
<!DCOTYPE> 定義HTML文件類型
<head> 定義與網頁文件有關之資訊，其內容不會顯示在瀏覽器上
<body> HTML主要內容最外層的元素
<abbr> 定義縮寫文字
<address> 定義內容為地址
<area> 定義帶有可點擊影像地圖區域
<base> 定義網頁中所URL的連接基準
<bdo> 定義文字顯示方向
<blockquote> 定義額外註解或較長的引文
<br> 換行符號
<button> 定義一個按鈕
<caption> 定義一個表格標題
<cite> 定義著作的標題
<dd> 在列表中定義條目的定義
<div> 定義網頁內的一個區塊（自動換行）
<span> 定義網頁內的一個區塊（不換行）
<dl> 用於一個列表的定義
<dt> 用於一個項目的定義
<em> 用於強調文字
<form> 建立表單
<h1>~<h6> 定義標題文字，有１～６個等級
<input> 定義一個可輸入的區域
<ins> 定義為插入的文字
<del> 定義為刪除的文字
<map> 定義一個影像地圖的範圍
<object> 定義一個嵌入物件
<ol> 定義一個有數字順序的清單
<ul> 定義一個無順序的清單
<li> 定義一個表單的項目
<p> 定義一個段落
<pre> 定義一段非HTML格式的文字區塊
<select> 定義一個下拉式選單
<textarea> 定義一個文字輸入區域
<var> 定義一個變數

完整HTML元素：https://www.w3schools.com/tags/

HTML5保留下來但改變用法的元素

標籤 說明 HTML4的用法 HTML5的用法
<a> 定義內容為一個超連結 須有href=”#”屬性才能連結 該標籤永遠表示超連結，只是當沒有href的情況下，就只是一個佔位符號
<b> 定義文章區塊以外的內容，通常用於內容相關的邊欄 表現粗體 除了表現粗體，其他特別但不太重要的內容，想要特別強調時
<hr> 定義為音效內容 做為水平分隔線 更換段落主題時使用的水平分隔線
<i> 定義網頁上的繪圖區塊 表現斜體 除了表現斜體，無重要資料的其他內容，但想要另外標示時使用
<menu> 定義一個指令按鈕 - 定義複雜的選單或表單結構
<small> 定義一個下拉式選單 表現較小字體 備註或是其他法律特殊字體需要小字時使用
<strong> 定義一個元件的細項 表現較大字體 除了表現較大字體，也可標示重要資訊

HTML5移除的元素

移除的元素 替代元素
<acronym> <abbr>
<applet> <object>
<basefont> CSS
<big> CSS
<center> CSS
<dir> <ul>
<font> CSS
<frame> 無
<frameset> 無
<noframes> 無
<strike> CSS, <s>, or <del>
<tt> CSS

一個使用HTML5語意標籤的範例：



























































<!DOCTYPE html>
<html>
    <head>
        <title>HTML5 網頁範例</title>
    </head> 

    <body>
        <header>
        <hgroup>
            <h1><a href="#">網站主標題</a></h1>
            <h2><a href="#">網站次標題</a></h2>
        </hgroup>
        <p>其它說明文字</p>
        </header>
    
        <nav>                                  
            <ul>
            <li><a href="index.html">首頁</li>
            <li><a href="life.html">生活心得</a></li>
            <li><a href="travel.html">旅遊新知</a></li>
            <li><a href="about.html">關於我</a></li>
            </ul>
        </nav>       

        <section>
            <article>                             
                <header>                             
                <h3><a href="#">內容標題１</a></h3>                   
                </header>

                <section>
                    <p>內容段落１</p>
                    <p>內容段落２</p>
                </section>
            </article>

            <article>                           
                <header>                           
                <h3><a href="#">內容標題２</a></h3>
                </header>

                <section>
                <p>內容段落１</p>
                <p>內容段落２</p>
                <p>內容段落３</p>
                <p>內容段落４</p>
                </section>
            </article>
        </section>

        <aside>                           
            <h2><a href="#">aside</a></h2>
            <p>補充資料／子選單</p>
        </aside>

        <footer>版權宣告</footer>
    </body>
</html>
Last changed by 
 
aaronlife
0
1145

Read more

健行科技大學 網頁全端養成班 上課筆記

Install OpenSSH Server用來遠端連線用，安裝時必須打勾

Apr 6, 2025
Java程式設計師養成班 專題

https://codepen.io/robstinson/pen/PoGyRgyhttp://www.cssmoban.com/cssthemes/25954.shtml欄位項目：1.編號（主）2.名稱3.種類4.開發商5.價格6.庫存量7.最後異動日期

Mar 25, 2025
Java 上課記錄

開發一個猜數字遊戲:

Mar 25, 2025
Python入門實作班 上課記錄

Python入門實作班 上課記錄

Mar 25, 2025
Read more from aaronlife
Published on HackMD