搜尋

認識 HTML

HTML 是所有網頁的基礎,不論是透過軟體設計網頁,還是直接撰寫程式碼,甚至是透過後端伺服器產生網頁,最後都一定是透過 HTML 來呈現,而且因為 HTML 屬於「標記語言」,只要熟悉規則,就可以非常快速的做出一個簡單的網頁。

快速導覽:

HTML 教學 - 認識 HTML

HTML 是什麼?

HTML 又稱作超文本標記語言 ( HyperText Markup Language ),從字面上來看是一種「透過文字進行標記的語言」,意思是指「透過不同的元素標記出整個網頁架構」,不同的元素在網頁中擁有各自不同的意義,例如標記表格的元素負責呈現表格結構,標記清單的元素負責呈現清單的長相,標記圖片或影片的元素則可以在網頁裡顯示圖片或影片。

HTML 是所有網頁的基礎,不論用何種程式開發網頁,最終輸出的結果一律使用 HTML 呈現,只要是網頁裡可以看到的任何東西,例如圖片、影片、音樂、地圖、圖表...等,都是使用 HTML 呈現,但有些元素需要額外搭配 CSS 或 JavaScript 輔助,才能達到更理想的效果。

HTML 教學 - 認識 HTML

HTML5 又是什麼?

HTML5 是 2014 年 10 月所推出的 HTML 最新修訂版本,廣義的 HTML5 時,指的是涵蓋 HTML、CSS 和 JavaScript 的一套技術組合,HTML5 加入了許多新的語法,其中包括 video、audio 和 canvas 元素,搭配 SVG 內容之後,使得許多影音圖形效果,能夠更完美的在網頁中呈現。此外,HTML5 也加入許多新的標籤,例如 section、main、header、nav...等,透過標籤文字的提示,讓網頁更具結構性與可讀性

目前所有的主流瀏覽器都支援 HTML5,大多數的網站也都使用 HTML5 的規範進行網頁的開發,也因為 HTML5 的出現,原本像是透過 flash 等動畫軟體所設計的網頁也都逐漸淘汰,網頁 HTML 也變成了目前主流的學習項目之一。

HTML 教學 - 認識 HTML

查看 HTML 檔案

單純的 HTML 網頁編輯完成後 ( 不是後端動態產生的網頁 ),透過任何一個瀏覽器 ( Chrome、Firefox、Safari...等 ),都可以開啟 HTML 檔案,通常只要用滑鼠在該檔案上方連點兩下,電腦就會使用預設的瀏覽器開啟。

但如果要使用不同的電腦或行動裝置瀏覽,就必須將 HTML 上傳到「網頁空間」,過去在網頁剛起步的年代,網頁空間非常盛行,隨著時空環境移轉,各個網頁空間開始逐漸凋零,因此除了自己架設在本機網頁環境,免費網頁空間可能要參考 Google Blogger、WordPress.com、Github...等服務,或是使用付費的網頁空間服務。

HTML 教學 - 認識 HTML

HTML 和 CSS、JavaScript 的關係

雖然 HTML 可以獨立建構出一個網頁,但通常需要搭配 CSS 與 JavaScript,才能完整建構出一個視覺與功能兼具的網頁。如果將整個網頁看作是一個「人」,HTML 和 CSS、JavaScript 的關係如下表所示:

  • HTML:靜止的「全裸人體」( 純粹網頁架構和內容 )。
  • CSS:替全裸的人體加上「膚色、髮色、化妝、衣物...等」裝扮 ( 增加顏色、樣式、動畫效果...等 ),CSS 教學參考:CSS 教學
  • JavaScript:賦予「認知能力、社交能力、互動能力...等」超能力 ( 互動程式、各種服務串接、後端串接、...等 )。

HTML 教學 - 認識 HTML

小結

HTML 雖然看起來是程式語言,但實際上卻是「標記語言」的一種,只要熟悉規則,就可以很快速的掌握其開發技巧,而且所有的網頁都是由 HTML 構成,只要熟悉 HTML,就可以更輕鬆的跨入網頁設計或網頁開發的領域!

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~

HTML 教學

基本介紹

認識 HTML 使用 HTML 編輯器

基礎知識

HTML 標籤與架構 HTML 格式規範 HTML 縮排與註解 HTML 元素顯示類型 HTML 元素屬性 HTML 特殊字元 HTML 色彩表示法 HTML 尺寸單位 HTML 網址與路徑 HTML 套用 CSS 樣式 HTML 套用 JavaScript 如何觀察 HTML 原始碼

網頁資訊元素

網頁標題 <title> 網頁資訊 <meta> 載入外部資源 <link> 重設根目錄 <base>

常用元素

標題 <h1>~<h6> 段落 <p> 行內容器 <span> 區塊容器 <div> 超連結 <a> 圖片 <img> 換行 <br> 水平分隔線 <hr> 內嵌頁框 <iframe>

文字樣式元素

粗體字 <strong><b> 斜體字 <em><i> 刪除線文字 <del> 插入 ( 底線 ) 文字 <ins> 小型文字 <small> 上標下標 <sup><sub> 凸顯文字 <mark> 引用 <blockquote><q> 預先格式化 <pre> 程式碼內容 <code> 收折文字內容 <details> 標示注音 <ruby><rt> 標示聯絡方式 <address> 標示鍵盤按鍵 <kbd> 標示時間日期 <time> 標示縮寫 <abbr> 標示可換行位置 <wbr>

表格&清單元素

無序清單 <ul><li> 有序清單 <ol><li> 自訂清單 <dl><dt><dd> 表格 <table><tr><td> 表格 <th><caption> 表格 <thead><tbody> 表格 <colgroup><col>

表單元素

表單 <form> 輸入 <input> 按鈕 <button> 多行文字輸入 <textarea> 下拉選單 <select> 進度條 <progress> 欄位標題 <label> 欄位資料清單 <datalist> 表單元素分組 <fieldset>

語意結構元素

頁首區塊 <header> 主要區塊 <main> 章節區塊 <section> 文章區塊 <article> 側邊欄區塊 <aside> 引用區塊 <figure> 導航連結區塊 <nav> 頁尾區塊 <footer>

影音&圖形元素

播放影片 <video> 播放聲音 <audio> 響應式圖片 <picture> 點陣畫布 <canvas> 向量圖形 <svg>

彈出視窗

alert() 警告視窗 confirm() 確認視窗 prompt() 輸入視窗

網頁嵌入應用

嵌入 YouTube 影片 嵌入 Google 地圖 嵌入 Google 日曆 嵌入 Google 表單 嵌入 Google 簡報 嵌入 Google 文件 嵌入 Google 試算表 嵌入 Google 試算表圖表 嵌入 Twitter 推文 嵌入 Facebook 粉絲團 嵌入 Facebook 影片 嵌入 Canva 簡報 嵌入 Scratch 創作