這篇文章主要介紹了HTML基礎(chǔ)文檔與網(wǎng)站架構(gòu)的示例，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、重慶小程序開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了龍泉免費(fèi)建站歡迎大家使用！

 HTML的主要工作是編輯文本結(jié)構(gòu)和文本內(nèi)容（也稱為語(yǔ)義semantics），以便瀏覽器能正確的顯示。

本文介紹了 HTML的使用方法：在一段文本中添加標(biāo)題和段落，強(qiáng)調(diào)語(yǔ)句，創(chuàng)建列表等等。

基礎(chǔ): 標(biāo)題和段落節(jié)

大部分的文本結(jié)構(gòu)由標(biāo)題和段落組成。 不管是小說(shuō)、報(bào)刊、教科書(shū)還是雜志等。

內(nèi)容結(jié)構(gòu)化會(huì)使讀者的閱讀體驗(yàn)更輕松，更愉快。

在HTML中，每個(gè)段落是通過(guò)

元素標(biāo)簽進(jìn)行定義的, 比如下面這樣：

我是一個(gè)段落，千真萬(wàn)確。

每個(gè)標(biāo)題（Heading）是通過(guò)“標(biāo)題標(biāo)簽”進(jìn)行定義的，這里有六個(gè)標(biāo)題元素標(biāo)簽 ——

、

、

、

、

、。每個(gè)元素代表文檔中不同級(jí)別的內(nèi)容;

表示主標(biāo)題（the main heading），

表示二級(jí)子標(biāo)題（subheadings），

表示三級(jí)子標(biāo)題（sub-subheadings），等等。

優(yōu)選地，您應(yīng)該只對(duì)每個(gè)頁(yè)面使用一次

— 這是頂級(jí)標(biāo)題，所有其他標(biāo)題位于層次結(jié)構(gòu)中的下方。

請(qǐng)確保在層次結(jié)構(gòu)中以正確的順序使用標(biāo)題。不要使用

來(lái)表示副標(biāo)題，后面跟

來(lái)表示副副標(biāo)題 - 這是沒(méi)有意義的，會(huì)導(dǎo)致奇怪的結(jié)果。

在可用的六個(gè)標(biāo)題級(jí)別中，您應(yīng)該旨在每頁(yè)使用不超過(guò)三個(gè)，除非您認(rèn)為有必要使用更多。具有許多級(jí)別的文檔（即，較深的標(biāo)題層次結(jié)構(gòu)）變得難以操作并且難以導(dǎo)航。在這種情況下，如果可能，建議將內(nèi)容分散在多個(gè)頁(yè)面上。

列表 Lists

現(xiàn)在，讓我們注意一下列表。列表在生活中隨處可見(jiàn)——從你的購(gòu)物清單到你的回家路線方案列表，再到你遵從的教程說(shuō)明列表。

無(wú)序的列表被用來(lái)標(biāo)記每個(gè)項(xiàng)目。在這里，項(xiàng)目的順序并不重要 — 讓我們看下面的早點(diǎn)清單的：

  
豆?jié){
  
油條
  
豆汁
  
焦圈

重點(diǎn)強(qiáng)調(diào)

在人類(lèi)語(yǔ)言中，為了突出一句話的意思，我們通常強(qiáng)調(diào)某些詞，并且我們通常想要標(biāo)記某些詞作為重點(diǎn)或者在某種程度上的不同。 HTML 提供了許多語(yǔ)義化的元素，并且允許我們通過(guò)這些元素的意義標(biāo)記正文內(nèi)容，在這個(gè)章節(jié)中，我們將看到最常見(jiàn)的一小部分元素。

在HTML中我們用（emphasis）元素來(lái)標(biāo)記這樣的情況。這樣做既可以讓文檔讀起來(lái)更有趣，也可以被屏幕閱讀器識(shí)別出來(lái)，并以不同的語(yǔ)調(diào)發(fā)出。瀏覽器默認(rèn)風(fēng)格為斜體，但你不應(yīng)該純粹使用這個(gè)標(biāo)簽來(lái)獲得斜體風(fēng)格，為了獲得斜體風(fēng)格，你應(yīng)該使用元素和一些CSS，或者是元素（見(jiàn)下文）。

I am glad you weren't late.

為什么我們需要結(jié)構(gòu)化?

在這個(gè)文檔的主體 （body）中包含了多個(gè)內(nèi)容 — 這些內(nèi)容沒(méi)有做任何標(biāo)記，但是編輯時(shí)使用了換行 (輸入回車(chē)/換行跳轉(zhuǎn)到下一行)處理。

然而，當(dāng)您在瀏覽器中打開(kāi)文檔時(shí)，您會(huì)看到文本顯示為一整塊！

這是因?yàn)闆](méi)有元素給內(nèi)容結(jié)構(gòu)，所以瀏覽器不知道什么是標(biāo)題，什么是段落。此外：

用戶在閱讀網(wǎng)頁(yè)時(shí)，往往會(huì)快速瀏覽以查找相關(guān)內(nèi)容，經(jīng)常只是閱讀開(kāi)頭的標(biāo)題（我們通常在一個(gè)網(wǎng)頁(yè)上會(huì)花費(fèi)很少的時(shí)間 )。如果用戶不能在幾秒內(nèi)看到一些有用的內(nèi)容，他們很可能會(huì)感到沮喪并離開(kāi)。

對(duì)您的網(wǎng)頁(yè)建立索引的搜索引擎將標(biāo)題的內(nèi)容視為影響網(wǎng)頁(yè)搜索排名的重要關(guān)鍵字。沒(méi)有標(biāo)題，您的網(wǎng)頁(yè)在SEO（搜索引擎優(yōu)化）方面效果不佳。

嚴(yán)重視力障礙者通常不會(huì)閱讀網(wǎng)頁(yè)；他們用聽(tīng)力來(lái)代替。完成這項(xiàng)工作的軟件叫做屏幕閱讀器（screen reader）。該軟件提供了快速訪問(wèn)給定文本內(nèi)容的方法。在使用的各種技術(shù)中，它們通過(guò)朗讀標(biāo)題來(lái)提供文檔的概述，讓用戶能快速找到他們需要的信息。如果標(biāo)題不可用，用戶將被迫聽(tīng)到整個(gè)文檔的大聲朗讀。

使用CSS樣式化內(nèi)容，或者使用JavaScript做一些有趣的事情，你需要包含相關(guān)內(nèi)容的元素，所以CSS / JavaScript可以有效地定位它。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享HTML基礎(chǔ)文檔與網(wǎng)站架構(gòu)的示例內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問(wèn)題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

網(wǎng)站名稱：HTML基礎(chǔ)文檔與網(wǎng)站架構(gòu)的示例
網(wǎng)站地址：http://weahome.cn/article/pcehod.html