利用html+css制作个人简历

使用html和css制作一份个人简历； 软件：IntelliJ IDEA 2022.3.2 Ultimate

效果演示：

俗话说的好：工欲善其事必先利其器。首先需要认识html代码的各个部分以及常用的属性；

link标签用于关联当前HTML页面与其他资源的关系，关系通过rel属性指定，这里使用的是icon表示这个文件是当前页面图标。

现在访问此页面，我们发现页面的图标已经变成我们指定的图标样式了。

在网页的标签对中使用标记来引入外部样式表文件，使用html规则引入外部css。我这里引用的是style.css文件（创建的style.css文件）

说明：html引入css文件的这种方法就不需要style标签，而是直接通过link一个样式来引用外部样式，推荐使用link来引用外部的css样式方法。

段落标签，它一般用于文章分段属性规定单元格可横跨的行数font-family允许您通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体

当然，还有其他的属性，这里只是展示了一部分，只是让大家看的懂，还有一部分没有展示，大家可以自行搜索了解；

现在我们再来看主体，我们可以在主体内部编写该页面要展示的所有内容，比如我们之前就用到了img标签来展示一个图片，其中每一个标签都称为一个元素：

我们接着来看看列表元素，这是一个无序列表，其中每一个li表示一个列表项：

我们也可以使用ol来显示一个有序列表：

现在我们来看看超链接，我们可以添加一个链接用于指向其他网站：

HTML使用标签 来设置超文本链接。

在标签 中使用了href属性来描述链接的地址。

那么如果遇到特殊字符该怎么办呢？和XML一样，我们可以使用转义字符：

个人简历制作的中最常用到的转移字符就是;，此处的分号不能够丢失；

之前我们编写的页面非常基础，我们只能通过一些很基本的属性来排列我们的页面元素，那么如何实现更高度的自定义呢，我们就需要用到CSS来自定义样式，首先我们创建一个名为style.css的文件。

首先在我们HTML文件的头部添加：

我们在CSS文件中添加以下内容：

我们发现，网页的内容有边框了，这正是css在生效，相当于我们现在给页面添加了自定义的样式规则。

当然，我们也可以选择不使用CSS，而是直接对某个元素添加样式：

这样的效果其实是等同于上面的css文件的，相当于我们直接把样式定义在指定元素上。

也可以在头部直接定义样式，而不是使用外部文件：

使用以上三种方式都可以自定义页面的样式，推荐使用还是第一种，不然我们的代码会很繁杂。

样式的属性是非常多的，不可能一个一个讲完，平时用到什么再来学什么，如果大家们感兴趣，可以自行下去了解。

我们首先来了解一下选择器，那么什么是选择器呢？我们想要自定义一个元素的样式，那么我们肯定要去选择某个元素，只有先找到要自定义的元素，我们才能开始编写样式。

我们可以设定字体大小、行高等：

我们发现，页面中所有的style6元素宽度全部被设定为了250个像素，高度设置为10px（px是单位大小，代表像素，除了px还有em和rem，他们是根据当前元素字体大小决定的相对大小，一般用于适配各种大小的浏览器窗口，这里暂时不用）

样式编写完成后，如果只有一个属性，可以不带;若多个属性则每个属性后面都需要添加一个;

一个标签选择器的格式为：

我们现在可以通过选择器快速地去设置某个元素样式了，那么如何实现只设置某个元素的样式呢，；可以通过id选择器，每个元素都可以有一个id属性，我们可以将其当做一个跳转的锚点使用，这里并没有使用到，不做过多解释，大家有兴趣可以自行了解；

虽然id选择器已经可以很方便的指定某个元素，但是如果我们希望n个但不是元素都被选择，id选择器就无法实现了，因为每个元素的id是唯一的，不允许出现重复id的元素，因此接着我们来讲解一下类选择器。

每个元素都可以有一个class属性，表示当前元素属于某个类（注意这里的类和我们Java中的类概念完全不同）一个元素可以属于很多个类，一个类也可以被很多个元素使用：

上面的例子中，两个label元素都使用了test类（类名称是我们自定义的），现在我们在css文件中编写以下内容来以类进行选择：

我们发现，两个标签的文本内容都变为了蓝色，因此使用类选择器，能够对所有为此类的元素添加样式。注意在进行类选择时，我们需要在类名前面加上.来表示。这正是css在生效，相当于我们现在给页面添加了自定义的样式规则；（这里另外写了一部分代码演示该功能）

以下代码中的部分就是利用该原理：

当然，我们也可以选择不使用CSS，而是直接对某个元素添加样式：

我们发现，网页的内容中的的教育背景一栏编程了黄色；

以下是整个style.css文件完整代码：

以下是整个index.html部分代码：

这里我展示了一些参考一部分文章，希望对大家阅读有所帮助。（本人参考第一篇引用的博客的模板，后期将写一篇比较高级的个人简介，希望大家喜欢）

使用html和css制作静态网页版的个人简历

HTML常用标签–整理篇