HTML基礎(chǔ)中文檔與網(wǎng)站架構(gòu)是怎么樣的

HTML基礎(chǔ)中文檔與網(wǎng)站架構(gòu)是怎么樣的，針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。

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

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

基礎(chǔ): 標(biāo)題和段落節(jié)(推薦學(xué)習(xí)：HTML入門教程)

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

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

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

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

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

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

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

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

列表 Lists

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

無(wú)序的列表被用來標(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)

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

在HTML中我們用<em>（emphasis）元素來標(biāo)記這樣的情況。這樣做既可以讓文檔讀起來更有趣，也可以被屏幕閱讀器識(shí)別出來，并以不同的語(yǔ)調(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í)，您會(huì)看到文本顯示為一整塊！

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

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

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

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

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

關(guān)于HTML基礎(chǔ)中文檔與網(wǎng)站架構(gòu)是怎么樣的問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。