HTML基礎(chǔ)文檔與網(wǎng)站架構(gòu)的示例

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

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

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

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

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

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

在HTML中，每個(gè)段落是通過 <p> 元素標(biāo)簽進(jìn)行定義的, 比如下面這樣：

<p>我是一個(gè)段落，千真萬確。</p>

每個(gè)標(biāo)題（Heading）是通過“標(biāo)題標(biāo)簽”進(jìn)行定義的，這里有六個(gè)標(biāo)題元素標(biāo)簽 —— <h2>、<h3>、<h4>、<h5>、<h6>、<h7>。每個(gè)元素代表文檔中不同級別的內(nèi)容; <h2> 表示主標(biāo)題（the main heading），<h3> 表示二級子標(biāo)題（subheadings），<h4> 表示三級子標(biāo)題（sub-subheadings），等等。

優(yōu)選地，您應(yīng)該只對每個(gè)頁面使用一次<h2> — 這是頂級標(biāo)題，所有其他標(biāo)題位于層次結(jié)構(gòu)中的下方。

請確保在層次結(jié)構(gòu)中以正確的順序使用標(biāo)題。不要使用<h4>來表示副標(biāo)題，后面跟<h3>來表示副副標(biāo)題 - 這是沒有意義的，會導(dǎo)致奇怪的結(jié)果。

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

列表 Lists

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

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

<ul>
  <li>豆?jié){</li>
  <li>油條</li>
  <li>豆汁</li>
  <li>焦圈</li>
</ul>

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

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

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

<p>I am <em>glad</em> you weren't <em>late</em>.</p>

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

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

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

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

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

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

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

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

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