目錄

。每個元素代表文件中不同等級的內容; 

 表示主標題(the main heading),

 表示二級子標題(subheadings),

 表示三級子標題(sub-subheadings ),等等。

— 這是頂級標題,所有其他標題位於層次結構中的下方。
來表示副副標題 - 這是沒有意義的,會導致奇怪的結果。
首頁 web前端 html教學 HTML基礎:文件與網站架構

HTML基礎:文件與網站架構

Aug 17, 2019 am 11:51 AM
html

HTML的主要工作是編輯文字結構和文字內容(也稱為語意semantics),以便瀏覽器能正確的顯示。

 本文介紹了 HTML的使用方法:在一段文字中加入標題和段落,強調語句,建立清單等等。

HTML基礎:文件與網站架構

基礎: 標題與段落節(推薦學習:HTML入門教學)

大部分的文字結構由標題和段落組成。不管是小說、報紙、教科書還是雜誌等。

HTML基礎:文件與網站架構

內容結構化會讓讀者的閱讀體驗更輕鬆,更愉快。

在HTML中,每個段落是透過 

 元素標籤進行定義的, 例如下面這樣:

<p>我是一个段落,千真万确。</p>
登入後複製

每個標題(Heading)是透過「標題標籤」來定義的,這裡有六個標題元素標籤- 

。每個元素代表文件中不同等級的內容; 

 表示主標題(the main heading),

 表示二級子標題(subheadings),

 表示三級子標題(sub-subheadings ),等等。

優選地,您應該只對每個頁面使用一次

— 這是頂級標題,所有其他標題位於層次結構中的下方。

請確保在層次結構中以正確的順序使用標題。不要使用

來表示副標題,後面跟

來表示副副標題 - 這是沒有意義的,會導致奇怪的結果。

在可用的六個標題層級中,您應該旨在每頁使用不超過三個,除非您認為有必要使用更多。具有許多層級的文件(即,較深的標題層次結構)變得難以操作且難以導航。在這種情況下,如果可能,建議將內容分散在多個頁面上。

清單 Lists

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

無序的清單被用來標記每個項目。在這裡,項目的順序並不重要— 讓我們看下面的早點清單的:

登入後複製
      
  • 豆浆
  •   
  • 油条
  •   
  • 豆汁
  •   
  • 焦圈

#重點強調

在人類語言中,為了突出一句話的意思,我們通常強調某些詞,並且我們通常想要標記某些詞作為重點或在某種程度上的不同。 HTML 提供了許多語義化的元素,並且允許我們透過這些元素的意義標記正文內容,在這個章節中,我們將看到最常見的一小部分元素。

在HTML中我們用(emphasis)元素來標記這樣的情況。這樣做既可以讓文件讀起來更有趣,也可以被螢幕閱讀器識別出來,並以不同的語調發出。瀏覽器預設風格為斜體,但你不應該純粹使用這個標籤來獲得斜體風格,為了獲得斜體風格,你應該使用元素和一些CSS,或者是元素(見下文)。

<p>I am <em>glad</em> you weren't <em>late</em>.</p>
登入後複製

為什麼我們需要結構化?

在這個文件的主體(body)中包含了多個內容— 這些內容沒有做任何標記,但是編輯時使用了換行(輸入回車/換行跳到下一行)處理。

然而,當您在瀏覽器中開啟文件時,您會看到文字顯示為一整塊!

HTML基礎:文件與網站架構

這是因為沒有元素給內容結構,所以瀏覽器不知道什麼是標題,什麼是段落。此外:

使用者在閱讀網頁時,往往會快速瀏覽以尋找相關內容,經常只是閱讀開頭的標題(我們通常在一個網頁上會花費很少的時間 )。如果用戶不能在幾秒鐘內看到一些有用的內容,他們很可能會感到沮喪並離開。

對您的網頁建立索引的搜尋引擎將標題的內容視為影響網頁搜尋排名的重要關鍵字。沒有標題,您的網頁在SEO(搜尋引擎優化)方面效果不佳。

嚴重視障者通常不會閱讀網頁;他們用聽力來代替。完成這項工作的軟體叫做螢幕閱讀器(screen reader)。該軟體提供了快速存取給定文字內容的方法。在所使用的各種技術中,它們透過朗讀標題來提供文件的概述,讓使用者能快速找到他們需要的資訊。如果標題不可用,用戶將被迫聽到整個文件的大聲朗讀。

使用CSS樣式化內容,或是使用JavaScript做一些有趣的事情,你需要包含相關內容的元素,所以CSS / JavaScript可以有效地定位它。

以上是HTML基礎:文件與網站架構的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1666
14
CakePHP 教程
1425
52
Laravel 教程
1328
25
PHP教程
1273
29
C# 教程
1253
24
HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 表格邊框指南。在這裡,我們以 HTML 中的表格邊框為例,討論定義表格邊框的多種方法。

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

這是 HTML 中巢狀表的指南。這裡我們討論如何在表中建立表格以及對應的範例。

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距指南。在這裡,我們討論 HTML margin-left 的簡要概述及其範例及其程式碼實作。

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局指南。在這裡,我們詳細討論 HTML 表格佈局的值以及範例和輸出。

HTML 輸入佔位符 HTML 輸入佔位符 Sep 04, 2024 pm 04:54 PM

HTML 輸入佔位符指南。在這裡,我們討論 HTML 輸入佔位符的範例以及程式碼和輸出。

您如何在PHP中解析和處理HTML/XML? 您如何在PHP中解析和處理HTML/XML? Feb 07, 2025 am 11:57 AM

本教程演示瞭如何使用PHP有效地處理XML文檔。 XML(可擴展的標記語言)是一種用於人類可讀性和機器解析的多功能文本標記語言。它通常用於數據存儲

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在這裡我們也分別討論了 HTML 有序列表和類型的介紹以及它們的範例

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕指南。這裡我們分別討論它們的介紹、工作原理、範例以及各個事件中的onclick事件。

See all articles