HTML頁面基本結構

2021-09-21 15:53:05 字數 2905 閱讀 3972

本文簡要介紹html中的各種元素及其相關屬性，讀者需要有乙個概念: html頁面都是由基本元素及屬性組成的。html頁面的結構如下。

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