首頁  >  文章  >  web前端  >  一份標準的html文檔有哪幾個必須的部分

一份標準的html文檔有哪幾個必須的部分

青灯夜游
青灯夜游原創
2022-08-31 17:42:334162瀏覽

有5個必須的部分:1、DOCTYPE聲明,用於告訴瀏覽器編寫頁面所用的標記的版本;2、html根元素,包含文檔的元數據,向瀏覽器提供有關文檔內容和標記的資訊;3、head頭部,主要包含編碼聲明、標題、樣式表嵌入等;4、title部分,用於定義文件的標題;5、body內容部分,包含文件的所有內容。

一份標準的html文檔有哪幾個必須的部分

本教學操作環境:windows7系統、HTML5版、Dell G3電腦。

HTML文件就是對一個文件的描述,都有一個固定的結構,分成許多個部分,每個部分都包含了一個或多個元素。有些元素用於描述文檔的基本信息,有些則描述文檔結構,下面就是一個基本的HTML文檔的結構:、

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Your page title</title>
</head>
<body>
.....
</body>
</html>

該HTML文檔描述了一個空白頁,這些基礎成分確定了HTML文檔的輪廓以及瀏覽器的初始環境。

一份標準的html文檔有哪幾個必須的部分

可以看出一份標準的html文檔有哪5個必須的部分.

##宣告部分:DOCTYPE宣告

DOCTYPE 是document type(文檔類型)的簡寫。

doctype 宣告不屬於 HTML 標籤;而是一個文件類型標記,它是一條指令,告訴瀏覽器寫頁面所使用的標記的版本。

doctype 聲明是一種標準通用標記語言的文檔類型聲明,在 web 設計中用來說明你使用的 XHTML 或 HTML 是什麼版本。

該元素告訴瀏覽器兩件事: 

  • 它處理的是HTML文檔; 

  • 用來標記文檔內容的HTML所屬的版本,上面的寫法就表示所使用的是HTML5。

在所有 HTML 文件中規定 doctype 是非常重要的,這樣瀏覽器就能了解預期的文件類型。

說明:

  • 標籤沒有結束標籤。

  • 對大小寫不敏感。

總體分析:所有內容

html元素是根元素,它告知瀏覽器其本身是一個HTML文件。


標籤是 HTML 文件中最外層的元素。

標籤是所有其他 HTML 元素(除了 標籤)的容器。

根元素的作用就是告訴瀏覽器,在 和 之間的內容是HTML類型,瀏覽器便按HTML解析其中的內容。

html 元素有3個屬性,分別是 lang屬性、xmlns屬性和 manifest 屬性:

  • lang屬性指定頁面內容所使用的預設語言。指定文件所使用的語言,有助於語言合成工具選擇發音語言,或翻譯工具選擇翻譯規則。如,,表示本文檔使用中文。

  • xmlns屬性指派XML的命名空間。 xmlns 屬性在 XHTML 中是必需的,但在 HTML中不是。


  • manifest屬性給予離線快取檔案的URL。 HTML5 引入了應用程式緩存,這表示 web 應用程式可被緩存,並可進行離線存取。如,,表示離線快取檔案為waibo.manifest。

頭:


head元素包含文件的元數據,向瀏覽器提供有關文件內容和標記的信息,還可以包含腳本和對外部資源(例如CSS樣式表)的引用。


HTML文件的各種屬性和資訊就是在元素中定義的。

文件標題:

標題
元素是用來定義文件的標題;適用於所有HTML 或XHTML文件。 <p></p> <title>元素的作用:<p></p>1、可以在瀏覽器標籤中定義標題。 <p></p>2、可以在新增到收藏夾時為頁面提供標題。 <p></p>3、可以在搜尋引擎結果中顯示頁面的標題。 <p></p>範例:<p><pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文网</title> </head> <body> <p>正文的内容显示在浏览器窗口中。</p> <p>title元素的内容显示在浏览器标签,收藏夹和搜索引擎结果中。</p> </body> </html></pre></p> <p><img src="https://img.php.cn/upload/article/000/000/024/5c18b92ec6088231.jpg" alt="一份標準的html文檔有哪幾個必須的部分" ></p> <p>內容:</p>
#文檔body部分包含訪客可以看到的內容。

在有了這個基本的結構後,我們後面就可以將HTML的其它元素逐步添加進去,不斷的豐富文檔,最終得到我們希望的頁面。

說明:

在 HTML 5 中,刪除了所有 的特殊屬性。但 標籤支援 HTML 5 中的標準屬性:

##規定元素中內容的文字方向。 draggable規定是否允許使用者拖曳元素。 hiddenhidden規定該元素是無關的。被隱藏的元素不會顯示。 id#規定元素的唯一 ID。 item##group valuelanglanguage_codetruestylestyle_definitionsubjectidtabindexnumbertitle
屬性 描述
#accesskey character 規定存取元素的鍵盤快速鍵
class classname 規定元素的類別名稱(用於規定樣式表中的類別)。
contenteditable
  • true
  • #false
規定是否允許使用者編輯內容。
contextmenu menu_id 規定元素的上下文功能表。
data-yourvalue value

創作者定義的屬性。

HTML 文件的創作者可以定義自己的屬性。

必須以 "data-" 開頭。

dir
  • ltr
  • rtl
    true
  • #false
  • auto
id
  • empty
  • url
  • ##用於組合元素。
  • itemprop
#url
用於組合項目。
  • #規定元素中內容的語言代碼。
spellcheck
#false 規定是否必須對元素進行拼字或語法檢查。
#規定元素的行內樣式。
#規定元素對應的項目。
#規定元素的 tab 鍵控制順序。

text

#規定有關元素的額外資訊。 ###############相關推薦:《###html影片教學###》###

以上是一份標準的html文檔有哪幾個必須的部分的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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