下载掌阅APP，畅读海量书库
立即打开
本节的课堂实战将结合本章内容，介绍使用HTML5创建简单的文字版简历，需要先准备好HTML5编辑器和浏览器环境。
新建一个HTML5文本文档，输入下面的内容并保存。
<html>
<head>
<meta charset="utf8" />
<title>我的简历</title>
</head>
<body>
</body>
</html>
这是一个空白页面，在浏览器中打开它后，标题栏中显示<title>标签中的内容，即“我的简历”。
HTML5使用<h1>～<h6>标签表示一级～六级标题。一级标题最大，六级标题最小。使用<h1>和<h2>标签，在<body>标签内添加简历的各级标题。
<html>
<head>
<meta charset="utf8" />
<title>我的简历</title>
</head>
<body>
<h1>姓名</h1>
<h2>教育经历</h2>
<h2>兴趣爱好</h2>
<h2>联系方式</h2>
</body>
</html>
通常简历的一级标题为自己的姓名，这时可使用<h1>标签。姓名后面是简历的几个主要部分，使用<h2>标签表示。
HTML5中使用<p>标签表示段落。多个连续的<p>标签之间会自动换行。但HTML5会自动忽略同一个标签内的换行。继续补充简历内容，在每个<h2>标签后添加<p>标签及相关内容。
<html>
<head>
<meta charset="utf8" />
<title>我的简历</title>
</head>
<body>
<h1>姓名</h1>
<h2>教育经历</h2>
<p>2018年9月—2021年6月 北京邮电大学</p>
<p>2013年9月—2017年6月 青岛大学</p>
<h2>兴趣爱好</h2>
<p>编程、看书、听音乐</p>
<h2>联系方式</h2>
<p>网站地址：e× × q.com</p>
<p>邮箱地址：sxw@e× × q.com</p>
</body>
</html>
图1.16展示了当前代码对应的显示效果。
图1.16 在Edge浏览器中简历文档的显示效果（1）
每个<h1>标签或<p>标签后都会换行。即使写成如下形式，<p>标签后也会自动换行。
<p>网站地址：exxq.com</p><p>邮箱地址：sxw@exxq.com</p>
这与HTML元素的属性有关，块（Block）元素排版时独占整行，不能与其他元素并列展示，上面示例的<p>标签就是常见的块元素。行内（Inline）元素排版时可以共享一行空间，可以与其他元素并列展示，行内元素不能设置高度和宽度，默认的宽度是元素内容的宽度。
可通过<center>标签使姓名居中显示。可使用<hr>标签在每两个标题之间显示水平分隔线。代码如下所示。
<html>
<head>
<meta charset="utf8" />
<title>我的简历</title>
</head>
<body>
<center><h1>姓名</h1></center>
<h2>教育经历</h2>
<p>2018年9月—2021年6月 北京邮电大学</p>
<p>2013年9月—2017年6月 青岛大学</p>
<hr>
<h2>兴趣爱好</h2>
<p>编程、看书、听音乐</p>
<hr>
<h2>联系方式</h2>
<p>网站地址：e× × q.com</p>
<p>邮箱地址：sxw@e× × q.com</p>
</body>
</html>
在浏览器中简历文档的显示结果如图1.17所示。
图1.17 在Edge浏览器中简历文档的显示效果（2）