html css教學css教學html教學網站html基本架構

HTML 基礎- 學習該如何開發Web

文章推薦指數： 80 %
投票人數：10人

HTML（Hypertext Markup Language），中文全名為「超文字標示語言」，是一種用來組織架構並呈現網頁內容的程式語言。

網頁內容的組成，可能包含了 ... SkiptomaincontentSkiptosearchSkiptoselectlanguage學習該如何開發WebWeb入門HTML基礎ArticleActions正體中文(繁體)ThispagewastranslatedfromEnglishbythecommunity.LearnmoreandjointheMDNWebDocscommunity.HTML到底是什麼？圖片標記文字連結(link)結論InthismoduleRelatedTopics 全新手請從這開始！ Web入門 Web概述 安裝基本軟體 自己的網站會是什麼樣子？ 處理檔案 HTML基礎概念 CSS基礎概念 JavaScript基礎概念 發佈自己的網站 Web運作的方式 HTML—架構Web HTML介紹 HTML概述 HTML入門 標題裡是什麼？HTML中的後設資料(Metadata) HTML文字基礎概念 建立超連結 進階文字格式 文件與網站架構 HTML除錯 親和度：設個字母 親和度：架構出具備內容的網頁 多媒體與嵌入 多媒體與嵌入的概述 HTML中的圖片 視訊與音訊內容 從物件到iframe—其他嵌入技巧 為Web新增向量圖 適應性圖片 親和度：Mozilla形象頁面 HTML表格 HTML表格概述 HTML表格基礎 HTMLtableadvancedfeaturesandaccessibility Assessment:Structuringplanetdata CSS—設計Web的風格 初探CSS 初探CSS（概述） CSS是什麼？ CSS入門 HowCSSisstructured CSS怎麼運作 Assessment:Stylingabiographypage CSS組件 CSSbuildingblocksoverview Cascadeandinheritance CSSselectors Theboxmodel Backgroundsandborders Handlingdifferenttextdirections Overflowingcontent CSSvaluesandunits SizingitemsinCSS Images,media,andformelements Stylingtables DebuggingCSS OrganizingyourCSS Assessment:FundamentalCSScomprehension Assessment:Creatingfancyletterheadedpaper Assessment:Acool-lookingbox 樣式化文字 樣式化文字概述 基礎的文字與字型樣式化 樣式化列表 樣式化連結 Web字型 親合度：設定社區大學首頁的版面 CSS版面配置 CSS版面配置概述 IntroductiontoCSSlayout NormalFlow 彈性區塊 格線 浮動 定位 Multiple-columnlayout Responsivedesign Beginner'sguidetomediaqueries Legacylayoutmethods Supportingolderbrowsers Assessment:Fundamentallayoutcomprehension JavaScript—動態的用戶端指令 JavaScript第一步 JavaScript第一步概述 什麼是JavaScript？ 初次接觸JavaScript 出了什麼問題？JavaScript疑難排解 儲存你所需的資訊—變數 JavaScript基礎概念—數字與運算子 處理文字—JavaScript中的字串 有用的字串函式 陣列 親合度：傻瓜故事產生器 JavaScript基礎要件 JavaScript基礎要件概述 於程式碼中決策—條件 程式碼迴圈 函式—可重複使用的程式碼區塊 建立自己的函式 函式回傳值 事件介紹 親合度：圖庫 JavaScript物件介紹 JavaScript物件概述 物件基礎概念 物件原型 Object-orientedprogrammingconcepts ClassesinJavaScript 使用JSON資料 物件建構實作 親合度：為彈跳球展示新增功能 非同步的JavaScript AsynchronousJavaScriptoverview IntroducingasynchronousJavaScript Howtousepromises Implementingapromise-basedAPI Introducingworkers Assessment:sequencinganimations 客戶端webAPIs 客戶端webAPIs IntroductiontowebAPIs 文件操作 Fetchingdatafromtheserver ThirdpartyAPIs Drawinggraphics VideoandaudioAPIs Client-sidestorage 網頁表單-與使用者資料合作 核心的表單學習途徑 網頁表單概述 Yourfirstform 如何建構網頁表單 Basicnativeformcontrols TheHTML5inputtypes Otherformcontrols Stylingwebforms Advancedformstyling UIpseudo-classes Client-sideformvalidation Sendingformdata 深入網頁表單 Howtobuildcustomformcontrols SendingformsthroughJavaScript CSSpropertycompatibilitytableforformcontrols 無障礙網頁—每個人都可以使用的網頁 無障礙網頁指南 無障礙網頁概述 何謂無障礙網頁？ HTML:Agoodbasisforaccessibility CSSandJavaScriptaccessibilitybestpractices WAI-ARIA基礎 Accessiblemultimedia 行動裝置上的無障礙 無障礙網頁評估 Assessment:Accessibilitytroubleshooting 工具與測試 Client-sidewebdevelopmenttools Client-sidewebdevelopmenttoolsindex Client-sidetoolingoverview Commandlinecrashcourse Packagemanagementbasics Introducingacompletetoolchain Deployingourapp 介紹前端框架 前端框架簡介 Frameworkmainfeatures React GettingstartedwithReact BeginningourReacttodolist ComponentizingourReactapp Reactinteractivity:Eventsandstate Reactinteractivity:Editing,filtering,conditionalrendering AccessibilityinReact Reactresources Ember GettingstartedwithEmber Emberappstructureandcomponentization Emberinteractivity:Events,classesandstate EmberInteractivity:Footerfunctionality,conditionalrendering RoutinginEmber Emberresourcesandtroubleshooting Vue 開始學Vue CreatingourfirstVuecomponent RenderingalistofVuecomponents Addinganewtodoform:Vueevents,methods,andmodels StylingVuecomponentswithCSS UsingVuecomputedproperties Vueconditionalrendering:editingexistingtodos FocusmanagementwithVuerefs Vueresources Svelte Svelte入門 StartingourSvelteTodolistapp DynamicbehaviorinSvelte:workingwithvariablesandprops ComponentizingourSvelteapp AdvancedSvelte:Reactivity,lifecycle,accessibility WorkingwithSveltestores TypeScriptsupportinSvelte Deploymentandnextsteps Angular Angular新手入門 開始開發我們的Angular待辦事項應用程式 使用樣式點綴我們的Angular應用程式 建立一個item元件 篩選我們的待辦事項項目 建構Angular應用程式與更多資源 GitandGitHub GitandGitHub概述 HelloWorld GitHandbook ForkingProjects Aboutpullrequests MasteringIssues 跨瀏覽器測試 跨瀏覽器測試概述 跨瀏覽器測試介紹 測試執行策略 處理常見的HTML與CSS問題 處理常見的JavaScript問題 處理常見的親合度問題 建置功能偵測 自動化測試介紹 設定自己的自動化測試環境 伺服端網站程式設計 第一步 第一步概述 伺服端介紹 用戶端概述 伺服端網路框架 網站安全 Django網站框架(Python) Django網站框架(Python)概述 介紹 設定開發環境 線上教學：本地圖書館網站 線上教學2：建立網站骨架 線上教學3：使用模型 線上教學4：Django管理網站 線上教學5：建立我們的首頁 線上教學6：泛型清單與細節檢視 線上教學7：會話(Sessions)框架 線上教學8：使用者授權與許可 線上教學9：搭配表單 線上教學10：測試Django的WebApp 線上教學11：佈署Django至產品 WebApp安全性 親合度：DIY迷你部落格 Express網站框架(node.js/JavaScript) Express網站框架(Node.js/JavaScript)概述 Express/Node介紹 設定Node(Express)的開發環境 Express教學1:本地圖書館網站 Express教學2:建立骨架網站 Express教學3:使用資料庫(Mongoose) Express教學4:路由與控制器 Express教程5:呈現圖書館的資料 Express教學6:使用表單 Express教學7:佈署到正式環境 更多資源 常見問題 HTML問題 CSS問題 JavaScriptquestions Web的運作方式 工具與設定 設計與親合度 HTML到底是什麼？圖片標記文字連結(link)結論InthismoduleHTML基礎 前頁 Overview:Gettingstartedwiththeweb 次頁 HTML（HypertextMarkupLanguage），中文全名為「超文字標示語言」，是一種用來組織架構並呈現網頁內容的程式語言。

網頁內容的組成，可能包含了段落、清單、圖片或表格...等。

透過這篇文章，希望能幫助大家對HTML及其功能有基本的認識。

HTML到底是什麼？HTML是一種標記語言（markuplanguage），而非一般熟知的程式設計語言；它會告訴瀏覽器該如何呈現你的網頁──單純簡易或是極其複雜的頁面都沒問題。

HTML包含了一系列的元素（elements），而元素包含了標籤（tags(en-US)）與內容（content），我們用標籤來控制內容的呈現樣貌，例如字體大小、斜體粗體、在文字或圖片設置超連結等。

舉例來說，請看看以下這個句子： Mycatisverygrumpy 如果我們想讓這個句子自成一個段落，那麼可以在它前後分別加上段落標籤(

(en-US))，它就變成一個段落元素了：

Mycatisverygrumpy

HTML元素的組成讓我們來仔細的觀察一下，內容、標籤和元素的關係： 我們可以看到基本的架構： 起始標籤（Theopeningtag）：先打角括弧，也就是大於、小於的符號「<>」，裡面再放入元素名稱，如上面的例子「

」。

起始標籤代表這個元素從這裡開始。

結束標籤（Theclosingtag）：與起始標籤一樣，只是在元素名稱前面多了個前置斜線「/」。

很容易理解地，內容的最後加上結束標籤，代表這個元素的尾端。

在寫HTML時，很容易忘了最後的結束標籤，提醒大家要多注意唷！ 內容（Thecontent）：這個元素的內容，以上面的例子來說，內容就是這句文字。

元素（Theelement）：由起始標籤、結束標籤、內容所組成。

元素還可以有「屬性（Attribute）」，請大家看看下面的例子： 屬性能提供更多的資訊（當然，這個資訊是幫助我們更有效及方便編輯，不會呈現在網頁上），屬性包含了屬性名稱與值，你可以利用屬性設定這個元素的色彩、對齊方式、圖表的格線等等。

屬性的組成包含： 在元素名稱和屬性之間有一個空格（如果有多個屬性，屬性之間也需要有空格） 屬性名稱後面接著等於符號「=」 屬性包在起始標籤裡面，如範例所示 巢狀元素元素裡面可以在放進元素，我們稱之為「巢狀元素（nestingelement）」。

例如這個句子：「我的貓有夠無敵臭臉」，若你想強調「有夠無敵」，我們就可以把「有夠無敵」這四個字自成一個顯示為粗體的元素(en-US):

Mycatisverygrumpy.

要注意的是，每個元素都有自己的起始和結束標籤，一層一層的包覆。

所以最外層是

 ，接著；先結束strong元素，所以先寫，最外面才是

。

Mycatisverygrumpy.

 如果元素的起始和結束標籤錯置（如上方），那麼瀏覽器只能自行判斷你想呈現的樣子，可能會完全不如預期！所以在做巢狀元素時要多注意唷！空元素有些元素沒有內容，我們稱為「空元素（emptyelements）」。

以這個圖片元素(en-US)為例： 它有兩個屬性，但是沒有結束標籤，也沒有裡面的內容。

因為圖片元素是直接把圖檔嵌在HTML網頁上。

HTML文件的架構讓我們來看看一個完整的HTML頁面它所包含的要素（以下範例的程式碼出自這篇文章：Dealingwithfiles）： Mytestpage 我們可以看到： —文件類型（doctype）。

在HTML發展初期（約莫1991/2的年代）文件類型是用來連結一些應遵守的規則，有點像自動校正的功能。

然而，現在大家其實不太管文件類型，它就是個必須放在程式碼中的東西，現階段大家只需要知道這點就夠了。

—元素，又被視為根元素（rootelement），包含了所有顯示在這個頁面上的內容。

— 元素，裡面放的是你想涵括的重要資訊，但不會顯示於網頁瀏覽者眼前的。

例如，顯示於搜尋結果的關鍵字、頁面說明、CSS、字元實體集...等。

— 元素，包含了所有會顯示於網頁瀏覽者眼前的內容。

無論是文字、圖片、影面、互動遊戲...等。

—這個元素指定了你的文件使用utf-8這種字元編碼，建議大家都要使用這個元素，它會幫助你免去許多文字無法正確呈現的煩惱。

—呈現於網頁瀏覽者眼前的網頁標題。

圖片再讓我們複習一下圖片元素： 如同我們前面提到，圖片元素是直接把圖檔嵌在HTML網頁上，它是透過圖片來源（src，source）這個屬性，提供了連到圖片檔案的路徑。

我們也可以加上alt(alternative)這個屬性。

在網頁瀏覽者無法正確看到圖片時，你希望對他們呈現什麼樣的說明文字。

這種狀況會發生通常是因為: 許多視能障礙的網頁瀏覽者，會使用「ScreenReaders」這樣的工具，利用說明文字（alttext）來了解網頁要呈現的圖片內容。

就是有些東西出錯了。

例如，你誤植了圖片來源的路徑，你可能就會看到類似以下的文字： 說明文字應該要好好呈現這個圖片的內容，上面這個例子就很差。

好的例子像是：「Firefox Logo：有一隻狐狸繞著地球」 注意：你可以在MDN'sAccessibilitylandingpage查看無障礙頁面的資訊。

標記文字這個段落將為大家介紹如何標記文字（讓這些文字如何呈現）。

文件標題(heading)讓你呈現這些內容的主題，就像一本書有書名、章節名稱和副標題，一份HTML文件也有類似的概念。

HTML最多可以有六層的heading，

(en-US)–(en-US)，雖然通常我們只使用3至4層： Mymaintitle Mytoplevelheading Mysubheading Mysub-subheading 請試試在(en-US)上方，加上合適的heading。

段落(paragraph)如上面介紹過的，

(en-US)elements包含文字段落，在呈現一般文字時，這是我們最常用到的。

Thisisasingleparagraph

請試試在這裡Whatshouldyourwebsitelooklike?的圖片（element）下方，加上幾段文字。

清單(list)清單至少會包含兩個元素，以下是最常見的清單類，無順序性與有順序性的： 無順序性清單（Unorderedlists）代表這些項目的順序改變，不影響任何是，例如購物清單。

項目會包含在 
    (en-US)裡面。

    有順序性清單（Orderedlists）代表這些項目的順序是有意義的，例如食譜裡的製作步驟。

    項目會包含在
    (en-US)裡面。

    每個項目則分別放在
  1. (en-US)(listitem)element裡面。

    例如，我們想把以下這段文字變成清單：

    AtMozilla,we’reaglobalcommunityoftechnologists,thinkers,andbuildersworkingtogether...

    寫法如下：

    AtMozilla,we’reaglobalcommunityof

    • technologists
    • thinkers
    • builders

    workingtogether...

    請試試在練習網頁，加上一個清單。

    連結(link)連結對於網頁來說是非常重要的。

    要加上連結，我們需要用到這個元素—— a代表了「anchor」。

    要讓文字變成連結的步驟如下： 選擇一些文字，例如「MozillaManifesto」。

    把他們包在這個    元素裡： MozillaManifesto 在element中加上hrefattribute這個屬性： MozillaManifesto 屬性質就是你要連結網址： MozillaManifesto 網址的開頭使用https://或http://（網路文字傳送標準的不同）可能會給你不一樣的結果。

    因此，在寫連結時，請自己先點擊過，確認無誤。

    請試試在練習網頁加上一個超連結。

    href這個屬性名稱比較不直觀，不太好記，但它代表的是：hypertextreference的縮寫。

    結論看完了以上的介紹並依照各個步驟實做，你應該能自己寫出這樣的網頁（如下，viewithere): 如果哪裡卡關了，你可以隨時造訪Github上的finishedexamplecode，看看裡面的code和你寫的哪裡不同。

    這篇文章觸及的是非常基本的HTML介紹，若你有興趣想進一步了解，歡迎參考HTMLLearningpage。

    前頁 Overview:Gettingstartedwiththeweb 次頁 Inthismodule Installingbasicsoftware Whatwillyourwebsitelooklike? Dealingwithfiles HTMLbasics CSSbasics JavaScriptbasics Publishingyourwebsite Howthewebworks Foundaproblemwiththispage?EditonGitHubSourceonGitHubReportaproblemwiththiscontentonGitHubWanttofixtheproblemyourself?SeeourContributionguide.Lastmodified:2022年5月28日,byMDNcontributors

請為這篇文章評分？

延伸文章資訊