基本HTML 文字- 學習該如何開發Web | MDN

HTML 的其中一件核心工作，就是給出文件的結構和含義（又稱semantics (en-US)），以便瀏覽器正確顯示。

本文章旨在說明HTML 可透過增加標題、章節、 ... SkiptomaincontentSkiptosearchSkiptoselectlanguage學習該如何開發Web學習HTML：指南與教學HTML介紹基本HTML文字ArticleActions正體中文(繁體)ThispagewastranslatedfromEnglishbythecommunity.LearnmoreandjointheMDNWebDocscommunity.基本：標題與段落ListsEmphasisandimportance總結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的運作方式 工具與設定 設計與親合度 基本：標題與段落ListsEmphasisandimportance總結Inthismodule基本HTML文字 前頁 Overview:IntroductiontoHTML 次頁 HTML的其中一件核心工作，就是給出文件的結構和含義（又稱semantics(en-US)），以便瀏覽器正確顯示。

本文章旨在說明HTML可透過增加標題、章節、強調、建立清單等，建立結構化的頁面。

需求： 熟悉基本HTML、在GettingstartedwithHTML有講解。

目標： 學習如何標記一個具有文字的基礎頁面賦予它結構及含義—包含段落,標題,列表,強調文字,以及引用句 基本：標題與段落多數結構化的文字由標題及段落構成，不論你是在閱讀故事，翻閱報紙，讀教科書，翻閱雜誌，等等。

充滿結構性的文字內容讓閱讀經驗變得輕鬆且更加愉悅。

在HTML裡，每個段落都被包在 

(en-US)元素中，就像：

Iamaparagraph,ohyesIam.

而每個標題需要被包在標題元素中：

Iamthetitleofthestory.

在HTML裡有六種標題元素：

(en-US),(en-US),(en-US),(en-US),(en-US)，跟(en-US).每個元素分別代表著在文件中的不同層級;代表主標題,代表副標題,代表更次級的副標題,依此類推。

實作架構化階層舉例來說，在一個故事裡，將用來代表整個故事的標題，則代表每個章節的標題，而代表每個章節中的副標題，依此類推下去。

TheCrushingBore

ByChrisMills

Chapter1:Thedarknight

Itwasadarknight.Somewhere,anowlhooted.Therainlasheddownonthe...

Chapter2:Theeternalsilence

Ourprotagonistcouldnotsomuchasawhisperoutoftheshadowyfigure...

Thespecterspeaks

Severalmorehourshadpassed,whenallofasuddenthespectersatboltuprightandexclaimed,"Pleasehavemercyonmysoul!"

只要層次結構有意義，要一個元件顯示什麼取決於你。

當你在建立類似的文字結構時，只要記得以下幾點： 一個頁面最好只用一個

元素：這是頂層標題，所有其他標題都位於層次結構的下方。

在使用標題元素的時候，要注意層級的順序。

不要在前使用來標示副標題，這要很容易造成意外的結果。

每次使用標題元素時，雖有六個層級可使用，但應該以使用少於三個層級為目標，除非你真的覺得有必要用到三個以上。

有過多層級的文件變得很笨重且很難導航文件架構。

在這種情況下，可以考慮把文件內容劃分到多個頁面。

為何我們需要架構？為了回答這個問題，我們先看看text-start.html這個文章（鷹嘴豆泥食譜）的最前端。

請先下載這個文件的副本到你的電腦，等一下練習時會用到。

這個文件目前包含很多不同的內容，並沒有被標記出架構，唯一的排版只有換行而已。

所以當你在瀏覽器中打開這份文件時，你將會看到這些文字看起來擠成一團！ 這是因為文件內沒有元素去標示出文件的架構，所以瀏覽器不知道怎麼排版。

此外： 使用者造訪一個網站時，時常只是快速的瀏覽內容以找尋他們正在找的相關內容，更常時候，使用者只有看一個頁面內的標題而已（來源：spendaveryshorttimeonawebpage）。

如果他們沒在短時間內找到實用的資訊，他們就會放棄這個頁面而去其他網頁尋找。

搜尋引擎會把標題作為重要關鍵字來排序搜尋結果。

所以如果一個頁面沒有標題，就很難被搜尋引擎排在上方。

換句話說，就是沒有達到搜尋引擎最佳化（SearchEngineOptimization(SEO)）。

視力嚴重受損的使用者通常無法閱覽網頁，而透過螢幕閱讀器（screenreader）聽頁面。

螢幕閱讀器軟體提供使用者能夠更快速的取得頁面資訊。

其中一個方式是透過朗誦出文件的架構，能讓使用者更快地獲得他們在尋找的資訊。

所以假如一個頁面沒被恰當地標記架構，就會迫使使用者必須聆聽完整個頁面以取得尋找的資訊。

若要用CSS裝飾頁面，或者讓瀏覽器透過JavaScript做特效，也要用特別的元素來做標記。

這樣CSS/JS才知道哪一部分是屬於他們的文件。

以上原因說明為何我們要為內容標示出架構。

Activelearning:GivingourcontentstructureLet'sjumpstraightinwithaliveexample.Intheexamplebelow,addelementstotherawtextintheInputfieldsothatitappearsasaheadingandtwoparagraphsintheOutputfield. Ifyoumakeamistake,youcanalwaysresetitusingtheResetbutton.如果你中途卡關，點擊按鈕來查看答案。

Whydoweneedsemantics?Semanticsarereliedoneverywherearoundus—werelyonpreviousexperiencetotelluswhatthefunctionofaneverydayobjectis; whenweseesomething,weknowwhatitsfunctionwillbe.So,forexample,weexpectaredtrafficlighttomean"stop",andagreentrafficlighttomean"go".Thingscangettrickyveryquicklyifthewrongsemanticsareapplied(Doanycountriesuseredtomean"go"?Ihopenot.) Inasimilarvein,weneedtomakesureweareusingthecorrectelements,givingourcontentthecorrectmeaning,function,orappearance.Inthiscontextthe(en-US)elementisalsoasemanticelement,whichgivesthetextitwrapsaroundtherole(ormeaning)of"atoplevelheadingonyourpage." Thisisatoplevelheading Bydefault,thebrowserwillgiveitalargefontsizetomakeitlooklikeaheading(althoughyoucouldstyleittolooklikeanythingyouwantedusingCSS).Moreimportantly,itssemanticvaluewillbeusedinmultipleways,forexamplebysearchenginesandscreenreaders(asmentionedabove). Ontheotherhand,youcouldmakeanyelementlooklikeatoplevelheading.Considerthefollowing: Isthisatoplevelheading? Thisisa(en-US)element.Ithasnosemantics.YouuseittowrapcontentwhenyouwanttoapplyCSStoit(ordosomethingtoitwithJavaScript)withoutgivingitanyextrameaning(you'llfindoutmoreabouttheselateroninthecourse).We'veappliedsomeCSStoittomakeitlooklikeatoplevelheading,butsinceithasnosemanticvalue,itwillnotgetanyoftheextrabenefitsdescribedabove.ItisagoodideatousetherelevantHTMLelementforthejob.ListsNowlet'sturnourattentiontolists.Listsareeverywhereinlife—fromyourshoppinglisttothelistofdirectionsyousubconsciouslyfollowtogettoyourhouseeveryday,tothelistsofinstructionsyouarefollowinginthesetutorials!ListsareeverywhereontheWebtoo,andwe'vegotthreedifferenttypestoworryabout.UnorderedUnorderedlistsareusedtomarkuplistsofitemsforwhichtheorderoftheitemsdoesn'tmatter—let'stakeashoppinglistasanexample. milk eggs bread hummus Everyunorderedliststartsoffwitha(en-US)element—thiswrapsaroundallthelistitems: milk eggs bread hummus Thelaststepistowrapeachlistitemina(en-US)(listitem)element: milk eggs bread hummus Activelearning:Markingupanunorderedlist TryeditingthelivesamplebelowtocreateyourveryownHTMLunorderedlist. OrderedOrderedlistsarelistsinwhichtheorderoftheitemsdoesmatter—let'stakeasetofdirectionsasanexample: Drivetotheendoftheroad Turnright Gostraightacrossthefirsttworoundabouts Turnleftatthethirdroundabout Theschoolisonyourright,300metersuptheroad Themarkupstructureisthesameasforunorderedlists,exceptthatyouhavetowrapthelistitemsinan(en-US)element,ratherthan: Drivetotheendoftheroad Turnright Gostraightacrossthefirsttworoundabouts Turnleftatthethirdroundabout Theschoolisonyourright,300metersuptheroad Activelearning:Markingupanorderedlist TryeditingthelivesamplebelowtocreateyourveryownHTMLorderedlist. Activelearning:MarkingupourrecipepageSoatthispointinthearticle,youhavealltheinformationyouneedtomarkupourrecipepageexample.Youcanchoosetoeithersavealocalcopyofourtext-start.htmlstartingfileanddotheworkthere,ordoitintheeditableexamplebelow.Doingitlocallywillprobablybebetter,asthenyou'llgettosavetheworkyouaredoing,whereasifyoufillitintotheeditableexample,itwillbelostthenexttimeyouopenthepage.Bothhaveprosandcons. Ifyougetstuck,youcanalwayspresstheShowsolutionbutton,orcheckoutourtext-complete.htmlexampleonourgithubrepo.NestinglistsItisperfectlyoktonestonelistinsideanotherone.Youmightwanttohavesomesub-bulletssittingbelowatoplevelbullet.Let'stakethesecondlistfromourrecipeexample: Removetheskinfromthegarlic,andchopcoarsely. Removealltheseedsandstalkfromthepepper,andchopcoarsely. Addalltheingredientsintoafoodprocessor. Processalltheingredientsintoapaste. Ifyouwantacoarse"chunky"hummus,processitforashorttime. Ifyouwantasmoothhummus,processitforalongertime. Sincethelasttwobulletsareverycloselyrelatedtotheonebeforethem(theyreadlikesub-instructionsorchoicesthatfitbelowthatbullet),itmightmakesensetonesttheminsidetheirownunorderedlist,andputthatlistinsidethecurrentfourthbullet.Thiswouldlooklikeso: Removetheskinfromthegarlic,andchopcoarsely. Removealltheseedsandstalkfromthepepper,andchopcoarsely. Addalltheingredientsintoafoodprocessor. Processalltheingredientsintoapaste. Ifyouwantacoarse"chunky"hummus,processitforashorttime. Ifyouwantasmoothhummus,processitforalongertime. Trygoingbacktothepreviousactivelearningexampleandupdatingthesecondlistlikethis.EmphasisandimportanceInhumanlanguage,weoftenemphasisecertainwordstoalterthemeaningofasentence,andweoftenwanttomarkcertainwordsasimportantordifferentinsomeway.HTMLprovidesvarioussemanticelementstoallowustomarkuptextualcontentwithsucheffects,andinthissection,we'lllookatafewofthemostcommonones.EmphasisWhenwewanttoaddemphasisinspokenlanguage,westresscertainwords,subtlyalteringthemeaningofwhatwearesaying.Similarly,inwrittenlanguagewetendtostresswordsbyputtingtheminitalics.Forexample,thefollowingtwosentenceshavedifferentmeanings. Iamgladyouweren'tlate. Iamgladyouweren'tlate. Thefirstsentencesoundsgenuinelyrelievedthatthepersonwasn'tlate.Incontrast,thesecondonesoundssarcasticorpassive-aggressive,expressingannoyancethatthepersonarrivedabitlate. InHTMLweusethe(en-US)(emphasis)elementtomarkupsuchinstances.Aswellasmakingthedocumentmoreinterestingtoread,thesearerecognisedbyscreenreadersandspokenoutinadifferenttoneofvoice.Browsersstylethisasitalicbydefault,butyoushouldn'tusethistagpurelytogetitalicstyling.Todothat,you'dusea(en-US)elementandsomeCSS,orperhapsan(en-US)element(seebelow). Iamgladyouweren'tlate.StrongimportanceToemphasizeimportantwords,wetendtostresstheminspokenlanguageandboldtheminwrittenlanguage.Forexample: 這液體具有相當強的毒性。

我相信你。

千萬別遲到了！ InHTMLweusethe(en-US)(strongimportance)elementtomarkupsuchinstances.Aswellasmakingthedocumentmoreuseful,againthesearerecognizedbyscreenreadersandspokeninadifferenttoneofvoice.Browsersstylethisasboldtextbydefault,butyoushouldn'tusethistagpurelytogetboldstyling.Todothat,you'dusea(en-US)elementandsomeCSS,orperhapsa(en-US)element(seebelow). Thisliquidishighlytoxic. Iamcountingonyou.Donotbelate! Youcanneststrongandemphasisinsideoneanotherifdesired: Thisliquidishighlytoxic— ifyoudrinkit,youmaydie.Activelearning:Let'sbeimportant!Inthisactivelearningsection,wehaveprovidedaneditableexample.Insideit,we'dlikeyoutotryaddingemphasisandstrongimportancetothewordsyouthinkneedthem,justtohavesomepractice. Italic,bold,underline...Theelementswe'vediscussedsofarhaveclearcutassociatedsemantics.Thesituationwith(en-US),(en-US),and(en-US)issomewhatmorecomplicated.Theycameaboutsopeoplecouldwritebold,italics,orunderlinedtextinanerawhenCSSwasstillsupportedpoorlyornotatall.Elementslikethis,whichonlyaffectpresentationandnotsemantics,areknownaspresentationalelementsandshouldnolongerbeused,becauseaswe'veseenbefore,semanticsissoimportanttoaccessibility,SEO,etc. HTML5redefined,andwithnew,somewhatconfusing,semanticroles. Here'sthebestruleofthumb:it'slikelyappropriatetouse,,ortoconveyameaningtraditionallyconveyedwithbold,italics,orunderline,providedthereisnomoresuitableelement.However,italwaysremainscriticaltokeepanaccessibilitymindset.Theconceptofitalicsisn'tveryhelpfultopeopleusingscreenreaders,ortopeopleusingawritingsystemotherthantheLatinalphabet. (en-US)isusedtoconveyameaningtraditionallyconveyedbyitalic:Foreignwords,taxonomicdesignation,technicalterms,athought... (en-US)isusedtoconveyameaningtraditionallyconveyedbybold:Keywords,productnames,leadsentence... (en-US)isusedtoconveyameaningtraditionallyconveyedbyunderline:Propername,misspelling... Akindwarningaboutunderline:Peoplestronglyassociateunderliningwithhyperlinks.Therefore,ontheWeb,it'sbesttounderlineonlylinks.Usetheelementwhenit'ssemanticallyappropriate,butconsiderusingCSStochangethedefaultunderlinetosomethingmoreappropriateontheWeb.Theexamplebelowillustrateshowitcanbedone. TheRuby-throatedHummingbird(Archilochuscolubris) isthemostcommonhummingbirdinEasternNorthAmerica. Themenuwasaseaofexoticwordslikevatrushka, nasigorengandsoupeàl'oignon. SomedayI'lllearnhowtospelbetter. Slicetwopiecesofbreadofftheloaf. Insertatomatosliceandaleafof lettucebetweentheslicesofbread. 總結That'sitfornow!ThisarticleshouldhavegivenyouagoodideaofhowtostartmarkinguptextinHTML,andintroducedyoutosomeofthemostimportantelementsinthisarea.Therearealotmoresemanticelementstocoverinthisarea,andwe'lllookatalotmoreinour'MoreSemanticElements'article,lateroninthecourse.Inthenextarticle,we'llbelookingindetailathowtocreatehyperlinks,possiblythemostimportantelementontheWeb. 前頁 Overview:IntroductiontoHTML 次頁 Inthismodule GettingstartedwithHTML What’sinthehead?MetadatainHTML HTMLtextfundamentals Creatinghyperlinks Advancedtextformatting Documentandwebsitestructure DebuggingHTML Markingupaletter Structuringapageofcontent Foundaproblemwiththispage?EditonGitHubSourceonGitHubReportaproblemwiththiscontentonGitHubWanttofixtheproblemyourself?SeeourContributionguide.Lastmodified:2022年6月23日,byMDNcontributors