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 元素是兄弟。