Django 3 Web应用开发实战
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.10.1　HTML

HTML是超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分（Head）和“主体”部分（Body），其中“头”部分提供关于网页的信息，“主体”部分提供网页的具体内容。下面来看一个简单的HTML文档的结构：

<!DOCTYPE html> # 声明为 HTML5 文档
# HTML元素是网页的根元素
<html>
# head元素包含了文档的元（meta）数据
<head>
# meta元素可提供有关页面的元信息（meta-information），主要是描述和关键词
<meta charset="utf-8">
# title元素描述了文档的标题
<title>Python</title>
</head>
# body元素包含了可见的页面内容
<body>
<h1>我的第一个标题</h1> # 定义一个标题
<p>我的第一个段落。</p> # 元素定义一个段落
</body>
</html>

一个完整的网页必定以<html></html>为开头和结尾，整个HTML可分为两部分：

（1）<head></head>，主要是对网页的描述、图片和JavaScript的引用。<head>元素包含所有的头部标签元素。在<head>元素中可以插入脚本（scripts）、样式文件（CSS）及各种meta信息。该区域可添加的元素标签有<title>、<style>、<meta>、<link>、<script>、<noscript>和<base>。

（2）<body></body>是网页信息的主要载体。该标签下还可以包含很多类别的标签，不同的标签有不同的作用，标签以<>开头，以</>结尾，<>和</>之间的内容是标签的值和属性，每个标签之间可以是相互独立的，也可以是嵌套、层层递进的关系。

根据这两个组成部分就能很容易地分析整个网页的布局。其中，<body></body>是整个HTML的重点部分，通过示例讲述如何分析<body></body>：

<body>
<h1>我的第一个标题</h1>
<div>
<p> Python</p>
</div>
<h2>
<p>
<a> Python</a>
</p>
</h2>
</body>

上述例子分析如下：

（1）<h1>和<div>是两个不相关的标签，两个标签是相互独立的。

（2）<div>和<p>是嵌套关系，<p>的上一级标签是<div>。

（3）<h1>和<p>这两个标签是毫无关系的。

（4）<h2>标签包含一个<p>标签，<p>标签再包含一个<a>标签，一个标签可以包含多个标签在其中。

除上述示例的标签之外，大部分标签都可以在<body></body>中添加，常用的标签如表1-3所示。

表1-3　HTML常用的标签

上一章目录下一章