HTML頁面基本結構

2021-08-08 01:34:36 字數 2829 閱讀 3221

html 原始檔中, 首先出現的是 doctype 宣告。 該宣告告訴瀏覽器, 本頁面使用何種標記語言編寫, 這會影響到瀏覽器渲染內容的方式。雖然看起來有點複雜，但大部分所見即所得(wysiwyg)的web編輯器都能自動建立 doctype。如果不使用視覺化編輯工具，那也可以從其他網頁中拷貝 doctype, 或者參考下面的 doctype 列表。

doctype 是html檔案中最頂部的那一行, 說明文件是什麼型別。在html檔案中，指的是html版本號以及展示風格。以前版本的 doctype 宣告看起來很醜,並且也不好記。例如 xhtml 1.0 strict 宣告:

再看html4過渡式的寫法:

**編輯器的html模板中自動包含了doctype，一般也提供了自動插入的方式。

儘管文件頂部的這一串長長的文字也不礙什麼事, 但 html5 去除了這些可讀性差的寫法, 統一使用下面的宣告:

簡單、而且直接。可以看到，宣告中並沒有出現版本號 「5」。雖然當前版本被稱為 html5, 但實際上它只是對html之前標準的乙個演進。因為瀏覽器必須支援web上各種現有的內容, 所以實際上並不需要 doctype 來說明依賴哪些特性。

在html 4.01頁面中, doctype 看起來是這樣的:

page titletitle>


head>


body>


html>
在這個示例中，doctype與html 4.01 strict相關。在下文中，您將看到 html 4.01 以及 xhtfml 1.0 , xhtfml 1.1 的示例。雖然很多元素和屬性具有相同的名稱，但在不同版本的html和xhtml中還是存在一些明顯的語法差異。詳情請參考 html versus xhtml 以及 html and xhtml syntax.

web頁面可以看成是包含任意數量枝幹的文件樹。每個枝幹可以包含哪些元素，有一定的規則(這些內容在每個元素的參考手冊中, 「contains」和「「contained by」部分詳細的說明)。要理解文件樹的概念，可以參考乙個簡單的web頁面，看看其中包含的內容特性, 以及對應的樹檢視，如圖1所示:

圖1. 乙個簡單頁面的 document 樹結構

可以看到,html元素實際上包含兩個元素:head和body。head有兩個子元素:meta和title。body元素可以包含多個 標題(headings)、段落(paragraphs)和block quote。

注意，標籤的開啟和關閉有對稱性。例如，「it has lots of lovely content …」這一段包含三個文字節點，第二個節點被包在em元素中(em，強調元素)。 內容結束後段落被關閉，在下乙個元素開始之前(本例中是乙個blockquote); 如果將

標籤寫在blockquote之後, 則會破壞樹結構。

doctype 之後緊接著出現了 [html] ()元素，這是文件的根元素，接下來的所有內容都是根元素的後代。

如果文件型別為xhtml，那麼根元素(root element)html需要指定 xmlns屬性(xml命名空間, html則不需要):

xmlns="">
下面是乙個xhtml過渡式頁面的示例:

xmlns="">


page titletitle>


head>


body>


html>
html文件分為兩個主要部分:head和body。

head元素包含描述文件本身的 metadata 資訊，以及相關的資源，比如 js 指令碼和 css樣式。

下面的簡單示例包含了title元素, 它表示文件的標題或名稱，標識該文件是什麼。title的內容在瀏覽器的標題欄上展示，或者是收藏夾中的名稱。對於搜尋引擎來說, 這也是乙個非常重要的資訊項，因為這是一段有意義的摘要，下面是示例:

xmlns="">


page titletitle>


head>


body>


html>
除了title元素之外,head還可以包含:

這些元素都是可選的, 可以是任意順序。注意, 這裡的元素不會展示在頁面內, 但他們可以影響頁面上展示的內容, 這些內容都在body元素內定義。

頁面中的大部分內容都在 body 內。在瀏覽器視窗(或viewport)中, 可以看到這個元素中包含的所有內容，包括 paragraphs, lists, links, images, tables 等等。body元素有一些獨有的屬性，但現在這些屬性都被廢棄了，除此之外，這個元素幾乎沒有什麼可說的。 頁面的外觀將完全取決於填充的內容; 參考html元素列表，以確定可以包含哪些內容。

翻譯日期: 2023年6月26日

翻譯人員: 鐵錨:

HTML頁面基本結構

本文簡要介紹html中的各種元素及其相關屬性，讀者需要有乙個概念 html頁面都是由基本元素及屬性組成的。html頁面的結構如下。html 原始檔中,首先出現的是 doctype 宣告。該宣告告訴瀏覽器,本頁面使用何種標記語言編寫,這會影響到瀏覽器渲染內容的方式。雖然看起來有點複雜，但大部分所見即所...

html基本結構

1.html是一種超文字標記語言全稱為 hypertext mark up language 不是程式語言而是標記語言。html標籤要成對出現結束時需要加斜槓例如頭部標籤是主體標籤是 除了一些標籤，他們不是成對存在的 2.doctype是文件型別標記，該標記是將特定的標準通用或xml文件與文件型別定...

HTML基本結構

html簡介 hypertext markup language 超文字標記語言 hypertext markup language 標記語言 的三大元素 超連結，文字 html基本結構 html head title document title head body i am mossbaoo b...