HTML 結(jié)構

2018-06-16 15:35 更新

HTML結(jié)構

元素和屬性用于標記HTML文檔中的內(nèi)容。

HTML文檔是具有.html文件擴展名的文本文件。

您可以直接從磁盤或通過Web服務器將文件加載到瀏覽器中。對于大多數(shù)html文件，您可以將其拖放到瀏覽器窗口。

結(jié)構體

兩個元素提供了HTML文檔的外部結(jié)構:

  • DOCTYPE element
  • html element

以下代碼顯示了Web文檔的基本結(jié)構。

<!DOCTYPE HTML>
<html>
<!--  elements go  here   -->
</html>

DOCTYPE 元素告訴瀏覽器它正在處理一個HTML文檔。這通過HTML布爾屬性表示:

<!DOCTYPE HTML>

html的開始標記位于DOCTYPE元素之后。

HTML文檔是包含html標簽的文本文件。HTML文檔中的HTML標記標記網(wǎng)頁。

將以下內(nèi)容保存到名為index.htm的文本文件，然后將其拖放到瀏覽器。

<!DOCTYPE HTML>
<html> 
    <body> 
        <h1>My Heading</h1> 
        <p>My paragraph</p> 
    </body> 
</html>

HTML文檔以<！DOCTYPE HTML>開頭。<！DOCTYPE HTML> 告訴瀏覽器這是一個html文檔。

<html> 和</html> 之間的內(nèi)容標記網(wǎng)頁。<body> 和</body> 標記可見的網(wǎng)頁內(nèi)容。<h1> 和</h1> 用于定義標題。<p> 和</p> 創(chuàng)建段落。


HTML元數(shù)據(jù)

HTML文檔中的元數(shù)據(jù)提供了有關文檔的信息。

元數(shù)據(jù)包含在head元素中。

<!DOCTYPE HTML>
<html>
    <head>
        <!--  define your metadata here   -->
        <title>web document title</title>
    </head>
</html>

上面代碼中的 title 元素是元數(shù)據(jù)。

大多數(shù)瀏覽器在瀏覽器中顯示title元素窗口標題欄或顯示頁面的選項卡頂部。

head 元素也定義了與外部的關系資源(如CSS樣式表)，定義內(nèi)聯(lián)CSS樣式和定義和加載腳本。


HTML Body

通過 body 元素添加html文檔的內(nèi)容。

下面的代碼將一行文本添加到body元素。

<!DOCTYPE HTML>
<html>
    <head>
        <!--  metadata goes here   -->
        <title>Example</title>
    </head>
    <body>
       This is the <code>content</code>.
    </body>
</html>

在 body 標記中的內(nèi)容中渲染的內(nèi)容。

父元素與子元素

HTML元素定義與HTML文檔中其他元素的關系。

包含另一個元素的元素是第二個元素的父級。

<!DOCTYPE HTML>
<html>
    <head>
        <!--  metadata goes here   -->
        <title>Example</title>
    </head>
    <body>
       This is the <code>content</code>.
    </body>
</html>

body 元素是code元素的父代，因為 code 元素包含在開始之間和 body 元素的結(jié)束標記。

code 元素是 body 元素的子元素。

元素可以有多個子元素，但只能有一個父元素。

后代

html 元素包含 body 元素，其中包含code元素。

body 和code元素是 html 元素的后代。

只有 body 元素是 html 元素的子元素。

孩子是直接的后代。

共享相同父元素的元素稱為兄弟元素。

head 和 body 元素是兄弟。

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號