阅读(35)

HTML 结构

最后一次修改 2017年08月03日

HTML结构

元素和属性用于标记HTML文档中的内容。

HTML文档是具有.html文件扩展名的文本文件。

您可以直接从磁盘或通过Web服务器将文件加载到浏览器中。对于大多数html文件,您可以将其拖放到浏览器窗口。

结构体

两个元素提供了HTML文档的外部结构:

  • DOCTYPE element

  • html element

以下代码显示了Web文档的基本结构。

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

DOCTYPE 元素告诉浏览器它正在处理一个HTML文档。这通过HTML布尔属性表示:

<!DOCTYPE HTML>

html的开始标记位于DOCTYPE元素之后。

HTML文档是包含html标签的文本文件。HTML文档中的HTML标记标记网页。

将以下内容保存到名为index.htm的文本文件,然后将其拖放到浏览器。

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

HTML文档以<!DOCTYPE HTML>开头。<!DOCTYPE HTML> 告诉浏览器这是一个html文档。

<html> </html> 之间的内容标记网页。<body> </body> 标记可见的网页内容。<h1> </h1> 用于定义标题。<p> </p> 创建段落。


HTML元数据

HTML文档中的元数据提供了有关文档的信息。

元数据包含在head元素中。

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

上面代码中的 title 元素是元数据。

大多数浏览器在浏览器中显示title元素窗口标题栏或显示页面的选项卡顶部。

head 元素也定义了与外部的关系资源(如CSS样式表),定义内联CSS样式和定义和加载脚本。


HTML Body

通过 body 元素添加html文档的内容。

下面的代码将一行文本添加到body元素。

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

body 标记中的内容中渲染的内容。

父元素与子元素

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 元素的结束标记。

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

元素可以有多个子元素,但只能有一个父元素。

后代

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

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

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

孩子是直接的后代。

共享相同父元素的元素称为兄弟元素。

head body 元素是兄弟。