一、HTML 是什么
HTML 是一种标记语言，叫超文本标记语言。
1.1 什么是标记语言
标记语言用标记来表示内容的性质和作用。标记的内容放在一对起始标记符号之间。标记形式这样定义：
<标记 属性1=“值1” 属性2=“值2” ...>标记的内容</标记>
其中，<标记> 为起始标记，</标记> 为结束标记。
这样定义后，以下标记可以很容易被读懂：
<班级 名称=“计算机程序1801班” 入学年份=“2018”>
<学生 学号=“2018010001”>
<姓名>李小超</姓名>
<性别>男</性别>
<出生日期>2000-10-23</出生日期>
</学生>
<学生 学号=“2018010002”>
<姓名>纪菲</姓名>
<性别>女</性别>
<出生日期>2001-02-18</出生日期>
</学生>
...
</班级>
1.2 HTML 标记语言用于描述网页文档
网页文档，又叫 HTML 文档，用于在浏览器中展现结构化的内容。或者说，HTML 标记语言是用标记来描述文档的构成的。虽然每个标记都有自己的默认显示风格，HTML 并不能控制整个页面的展现视觉效果（总体布局、色彩、动画、特效等）。
二、HTML 文档的总体架构
HTML 文档主要由头部和体部两大部分构成。只有体部内容，才会在浏览器窗口中展现。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 这里是 HTML 文档的头部内容 -->
</head>
<body>
<!-- 这里的内容才会显示在浏览器在窗口中 -->
</body>
</html>
| 起始标签 | 结束标签 | 内容 | 说明 |
|---|---|---|---|
| <html> | </html> | 整个文档 | 用于标记整个 HTML 文档 |
| <head> | </head> | 头部信息 | 用于记录文档的相关信息 |
| <body> | </body> | 所有展现在浏览器窗口中的内容 |
三、头部内容
头部用于描述文档的一些基本信息。
| 起始标签 | 结束标签 | 内容 | 说明 |
|---|---|---|---|
| <title> | </title> | 文本内容：文档标题 | 这个标题将显示在浏览器的标题栏或选项卡上 |
| <meta /> | （无内容，自关闭） | 无 | 可有多个，用于定义文档的元数据，如作者，发布日期，关键词，文档编码等 |
| <base /> | （无内容，自关闭） | 无 | 用于定义文档中链接地址的起始部分 |
| <link /> | （无内容，自关闭） | 无 | 用于将外部文件内容链接到此，典型的如样式文件 |
| <style> | </style> | 文档显示风格样式定义 | 内容由 CSS 语法描述（另外的课程讲授） |
| <script> | </script> | 程序脚本或无 | 内容由 JavaScript 程序构成（另外的课程讲授） 无内容时，用于引入外部脚本 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="keywords" content="green products, agriculture" />
<meta name="copyright" content="gettoweb.net" />
<meta name="author" content="Artman Tao" />
<base href="http://www.gettoweb.net" target="_blank" />
<link href="css/main.css" rel="stylesheet" />
<style>
body {margin: 0 auto;}
</style>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
var a = 10;
</script>
<title>HTML - Head - Tags</title>
</head>
<body>
</body>
</html>
四、 体部内容
体部由各种标签构成，是展现到浏览器窗口的内容。所有标签有几个重要的共同属性：
| 属性名 | 含义 | 属性值 | 说明 |
|---|---|---|---|
| id | 标签的“身份证号” | 有意义字串 | 只能有一个值，并且同一文档中，标签的 id 值要保持唯一性 |
| class | 标签的归类 | 有意义的一个（或多个由空格分隔的）字串 | 便于将标签进行分类控制。有多值的话，表明标签属于多个分类。 |
| style | 标签的视觉风格定义 | CSS 语言内容 | 用于对当前标签进行风格定义 |
4.1 文档结构标签
| 标记 | 含义 | 内容 | 说明 |
|---|---|---|---|
| <h1...h6> ... </h1...h6> | 用于表示标题（1~6级） | 文本：标题内容 | |
| <p> ... </p> | 表示段落 | 段落内容 | |
| <span> ... </span> | 用于确定一个小范围 | 文本 | 对部分文本作特殊风格处理 |
| <div> ... </div> | 用于将标签进行分组、分级，是一个容器标签，可逐级嵌套 | 所有标签 | |
| <br /> | 换行 | 无 | |
| <hr /> | 画一条水平线 | 无 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document Structure</title>
</head>
<body>
<div class="container">
<h1>这是一级标题</h1>
<p>段落文字段落文字段落文字段落文字段落文字段落文字
段落文字段落文字段落文字段落文字段落文字段落文字，
段落文字段落文字段落文字段落文字段落文字段落文字，
<span style="color:red">这几个字被 span 框定，给了红色。</span>段落文字段落文字段落文字段落文字。段落文字段落文字段落文字段落文字。
段落文字段落文字段落文字段落文字。
</p>
<h2>这是二级标题</h2>
<p>
这些是段落文字，如果在录入文字时敲了回车换行键
，并不会导致网页上的段落出现换行而是变成了一个空格，多个回车
也是如此。
段落文字段落文字段落文字段落文字段落文字段落文字，
段落文字段落文字段落文字段落文字段落文字段落文字，
段落文字段落文字段落文字段落文字。段落文字段落文字段落文字段落文字。
段落文字段落文字段落文字段落文字。
</p>
<p>下面会有三个换行</p>
<br />
<br />
<br />
<p>上面有三个换行</p>
<p>
这是一个段落的文字，但在这<br />
被强制换行了！
</p>
下面画一条水平线：
<hr />
<div id="footer">
<p style="text-align: center;">最后的内容</p>
</div>
</div>
</body>
</html>
4.2 文本格式
| 标记 | 含义 | 内容 | 说明 |
|---|---|---|---|
| <strong> ... </strong> | 对文字进行加粗 | 文本 | |
| <b> ... </b> | 同上 | 文本 | |
| <em> ... </em> | 文字变斜体 | 文本 |
