| 设置表格 | | 段落标签，它一般用于文章分段 |
| 属性规定单元格可横跨的行数 |
font-family | 允许您通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体 |
当然，还有其他的属性，这里只是展示了一部分，只是让大家看的懂，还有一部分没有展示，大家可以自行搜索了解；
现在我们再来看主体，我们可以在主体内部编写该页面要展示的所有内容，比如我们之前就用到了img标签来展示一个图片，其中每一个标签都称为一个元素：
<img src="icon.jpg" alt="一寸照片" style="height: 150px; width: 150px; text-align: justify"/>
我们接着来看看列表元素，这是一个无序列表，其中每一个li表示一个列表项：
<ul> <li>一号选项li> <li>二号选项li> <li>三号选项li> <li>四号选项li> <li>五号选项li>ul>
我们也可以使用ol来显示一个有序列表：
<ol> <li>一号选项li> <li>二号选项li> <li>三号选项li> <li>四号选项li> <li>五号选项li>ol>
现在我们来看看超链接，我们可以添加一个链接用于指向其他网站：
<a href="url">链接文本a>
HTML使用标签
在标签 中使用了href属性来描述链接的地址。
<li><a href="https://GitHub.com/zechaowei">gitHub仓库a>li><li><a href="Https://blog.csdn.net/weixin_50197544?spm=1000.2115.3001.5343">CSDN博客网站a>li><li><a href="https://zechaowei.netlify.app/">个人博客网站a>li>
那么如果遇到特殊字符该怎么办呢？和XML一样，我们可以使用转义字符：
个人简历制作的中最常用到的转移字符就是 ，此处的分号不能够丢失；
<p class="style5"> 2020-09-14 —— 2024-07-01 Xi’an Shiyou University 计算机科学与技术p>
CSS介绍
之前我们编写的页面非常基础，我们只能通过一些很基本的属性来排列我们的页面元素，那么如何实现更高度的自定义呢，我们就需要用到CSS来自定义样式，首先我们创建一个名为style.css的文件。
首先在我们HTML文件的头部添加：
<link href="style.css" rel="stylesheet" type="text/css"/>
我们在CSS文件中添加以下内容：
body{ border: #CCCC00 3px solid; margin-top: 50px; margin-bottom: 50px; width: 60%; height: 1300px; padding: 20px;}
我们发现，网页的内容有边框了，这正是css在生效，相当于我们现在给页面添加了自定义的样式规则。
当然，我们也可以选择不使用CSS，而是直接对某个元素添加样式：
<body style="height: 1600px;width: 1000px"> ...body>
这样的效果其实是等同于上面的css文件的，相当于我们直接把样式定义在指定元素上。
也可以在头部直接定义样式，而不是使用外部文件：
<style> body { text-align: center; }style>
使用以上三种方式都可以自定义页面的样式，推荐使用还是第一种，不然我们的代码会很繁杂。
样式的属性是非常多的，不可能一个一个讲完，平时用到什么再来学什么，如果大家们感兴趣，可以自行下去了解。
CSS选择器
我们首先来了解一下选择器，那么什么是选择器呢？我们想要自定义一个元素的样式，那么我们肯定要去选择某个元素，只有先找到要自定义的元素，我们才能开始编写样式。
我们可以设定字体大小、行高等：
.style6{ width: 250px; height: 10px; font-family: 黑体;}table{ border-style: none; border-color: inherit; border-width: 5px; width: 100%; height: 10%; padding: 5px;}
我们发现，页面中所有的style6元素宽度全部被设定为了250个像素，高度设置为10px（px是单位大小，代表像素，除了px还有em和rem，他们是根据当前元素字体大小决定的相对大小，一般用于适配各种大小的浏览器窗口，这里暂时不用）
样式编写完成后，如果只有一个属性，可以不带;若多个属性则每个属性后面都需要添加一个;
一个标签选择器的格式为：
标签名称 { 属性名称: 属性值}
我们现在可以通过选择器快速地去设置某个元素样式了，那么如何实现只设置某个元素的样式呢，；可以通过id选择器，每个元素都可以有一个id属性，我们可以将其当做一个跳转的锚点使用，这里并没有使用到，不做过多解释，大家有兴趣可以自行了解；
虽然id选择器已经可以很方便的指定某个元素，但是如果我们希望n个但不是元素都被选择，id选择器就无法实现了，因为每个元素的id是唯一的，不允许出现重复id的元素，因此接着我们来讲解一下类选择器。
每个元素都可以有一个class属性，表示当前元素属于某个类（注意这里的类和我们Java中的类概念完全不同）一个元素可以属于很多个类，一个类也可以被很多个元素使用：
<fORM> <div > <label class="test"> 账号： <input type="text" placeholder="Username..."> label> div> <div> <label class="test"> 密码： <input type="passWord" placeholder="Password..."> label> div>form>
上面的例子中，两个label元素都使用了test类（类名称是我们自定义的），现在我们在css文件中编写以下内容来以类进行选择：
.test{ color: blue;}
我们发现，两个标签的文本内容都变为了蓝色，因此使用类选择器，能够对所有为此类的元素添加样式。注意在进行类选择时，我们需要在类名前面加上.来表示。这正是css在生效，相当于我们现在给页面添加了自定义的样式规则；（这里另外写了一部分代码演示该功能）
以下代码中的部分就是利用该原理：
.style1{ font-size: large; color: #FFFF33;}.style2{ color: #FFFF33;}.style3{ width: 500px; height: 240px;}.style4{ width: 1500px; height: 50px;}.style5{ font-family: 黑体;}.style6{ width: 250px; height: 10px; font-family: 黑体;}
当然，我们也可以选择不使用CSS，而是直接对某个元素添加样式：
<h2 style="background-color: #FFFF33">教育背景h2>
.h2{ color: #000000; background-color: #FFFF33; }
我们发现，网页的内容中的的教育背景一栏编程了黄色；
完整代码
以下是整个style.css文件完整代码：
.style1{ font-size: large; color: #FFFF33;}.style2{ color: #FFFF33;}.style3{ width: 500px; height: 240px;}.style4{ width: 1500px; height: 50px;}.style5{ font-family: 黑体;}.style6{ width: 250px; height: 10px; font-family: 黑体;}body{ border: #CCCC00 3px solid; margin-top: 50px; margin-bottom: 50px; width: 60%; height: 1300px; padding: 20px;}table{ border-style: none; border-color: inherit; border-width: 5px; width: 100%; height: 10%; padding: 5px;}.h2{ color: #000000; background-color: #FFFF33; }
以下是整个index.html部分代码：
DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>个人简历title> <link rel="icon" href="icon_Alien.png" type="image/x-icon"/> <link href="style.css" rel="stylesheet" type="text/css"/>head><body style="height: 1600px;width: 1000px"> <h1>个人简历h1> <h2 style="background-color: #FFFF33">基本信息h2> <table class="style4"> <tr> <td class="style6">姓名：IT-驿站td> <td class="style6">出生年月：2001-08-22td> <td class="style3" rowspan="5"> <img src="icon.jpg" alt="一寸照片" style="height: 150px; width: 150px; text-align: justify"/> td> tr> <tr> <td class="style6">民族：汉td> <td class="style6">身高：180cmtd> tr> <tr> <td class="style6">电话：15366666666td> <td class="style6">政治面貌：群众td> tr> <tr> <td class="style6">邮箱：zechaowei2001@gmail.comtd> <td class="style6">毕业大学：Xi’an Shiyou Universitytd> tr> <tr> <td class="style6">住址：11#115td>> <td class="style6">学历：本科td>> tr> table> <h2 style="background-color: #FFFF33">教育背景h2> <p class="style5"> 2020-09-14 —— 2024-07-01 Xi’an Shiyou University 计算机科学与技术 p> <p class="style5">主修课程：计算机网络、离散数学、计算机组成原理、数据结构、C语言、操作系统、java程序设计、数据库等。p> <h2 style="background-color: #FFFF33">实习经历h2> <p>暂无实习经历p> <h2 style="background-color: #FFFF33">校园经历h2> <p class="style5">2021-09 —— 2022-09 Xi’an Shiyou University 网球社社长p> <h2 style="background-color: #FFFF33">技能证书h2> <p class="style5">CET-4p> <p class="style5">2022中国机器人大赛 暨RoboCup机器人世界杯中国赛FIRA小型组-半自主5vs5项目一等奖p> <p class="style5">数学建模省赛二等奖p> <p class="style5">计算机四级p> <h2 style="background-color: #FFFF33">自我评价h2> <ol> <li>技能li> <ul> <li>数据结构与算法：熟练并能实现常见的数据结构与算法；li> <li>计算机基础： 熟悉计算机组成原理，如指令的运算、内存、io等原理； 熟悉计算机网络，如tcp通信、HTTP协议、Cookie等； 了解操作系统，如常见的linux命令等li> <li>数据库相关：掌握3种数据库基本使用以及部分高级操作，Mysql、mongoDB、Redis； 能够熟练使用JDBC框架和mybatis框架， 以及数据库的部分高级操作，如存储过程、函数、锁、索引、mysql集群方案li> <li>了解前端技术：HTML、CSS、javascript脚本；li> <li>Java基础：Java常用类库、了解常见的JVM运行机制，熟悉常见的设计模式li> <li>Java框架：熟悉spring及其设计模式，SpringBoot、SpringCloud；li> <li>熟练SpringBoot的使用和原理、SpringDataJPA、Mail、swagger等技术li> <li>SprinGCloud组件：Eureka、Loadbalaner、Hystrix、Gatrway、Config、Stream；并能够登录校验，如OAuth2.0、单点登录等li> <li>中间件：了解Tomcat的设计，Docker容器技术、掌握Linux操作系统的基本使用(ubuntu系统)、Git版本控制以及利用github合作开发li> <li>其他框架和技术：C语言、c++、python、golang、Android开发、Maven、JUL、Thymeleaf、Lombokli> ul> <li>素质和能力li> <ul> <li>具有较强的逻辑思维能力；li> <li>能够快速适应和学习新的技术和知识；li> <li>具有良好的沟通能力和团队合作精神；li> <li>具有独立思考和解决问题的能力；li> ul> <li>目标和愿景li> <ul> <li>希望能够在计算机领域获得一份优秀的工作，不断提升自己的技能和技术；li> <li>希望通过工作能够为社会和行业做出一定的贡献；li> <li>未来希望能够在计算机领域拥有自己的研究成果和创业经验；li> ul> <li>GitHub仓库以及个人博客网站li> <ul> <li><a href="https://github.com/zechaowei">GitHub仓库a>li> <li><a href="https://blog.csdn.net/weixin_50197544?spm=1000.2115.3001.5343">CSDN博客网站a>li> <li><a href="https://zechaowei.netlify.app/">个人博客网站a>li> ul> ol>body>
参考资料
这里我展示了一些参考一部分文章，希望对大家阅读有所帮助。（本人参考第一篇引用的博客的模板，后期将写一篇比较高级的个人简介，希望大家喜欢）
使用html和css制作静态网页版的个人简历
HTML常用标签–整理篇
来源地址：https://blog.csdn.net/weixin_50197544/article/details/129910727
--结束END--
本文标题: 利用html+css制作个人简历
本文链接: https://lsjlt.com/news/423824.html(转载时请注明来源链接)
有问题或投稿请发送至:
邮箱/279061341@qq.com QQ/279061341
-
个人简历制作 使用html和css制作一份个人简历； 软件：IntelliJ IDEA 2022.3.2 Ultimate 效果演示： 前期准备 俗话说的好：工欲善其事必先利其器。首先需要认...
- 99+
- 2023-10-05
-
css
html
前端
java
-
这篇文章将为大家详细讲解有关纯HTML制作个人简历的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。纯HTML制作个人简历的方法：<html><head><meta&n...
-
制作个人简历封面可以使用以下步骤：1. 打开Word文档并选择“新建”。2. 在搜索栏中输入“简历封面”并选择一个你喜欢的模板。Wo...
-
文章目录 1.设计来源1.1 主界面1.2 基本资料1.3 专业技能1.4 教育经历1.5 工作经验 2.效果和源码2.1 动态效果2.2 源代码 源码下载 作者：xcLeig...
- 99+
- 2023-09-02
-
html
前端
java
-
这篇文章将为大家详细讲解有关js+html如何制作简单日历，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。新手一枚，不会写什么高大上的博文，一...
-
这篇文章主要讲解了“如何开发制作小程序个人简历开发文档”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何开发制作小程序个人简历开发文档”吧！ 配置项 { isShowContact:t...
-
这篇文章将为大家详细讲解有关如何利用html 5制作一个简单的时钟效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。我们先来看看最终效果：看上去很简单的一个时钟效果，但是具体实现代码仍然包含了一些重点知识...
-
目录录入数据制作日历1.使用openpyxl创建表格2.定义表格初始化和单元格设置的函数3.实现日历制作一年的日历我的坐标是深圳，2022年以来，大部分时候要求24小时，少部分时候要...
-
这篇“怎么用PHP制作一个简单的日历”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“怎么用PHP制作一个简单的日历”文章吧。实...
-
目录介绍主要代码补充介绍
日历的制作比较简单，因为pyqt5已经自带了相关的日期控件，只需要明白如何调用再加上比较个性化的功能，这个日历的小控件就制作完成了。
日历实现代码量不多，...
-
小编给大家分享一下HTML+CSS如何制作简单下拉菜单，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！具体代码如下：
...
-
这篇文章主要介绍“怎么用HTML制作一个简单的页面”，在日常操作中，相信很多人在怎么用HTML制作一个简单的页面问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用HTML制...
-
这篇文章主要介绍了如何利用JS制作万年历，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。我们知道,万年历在人们的生活中是在平常不过的一种东西了...
-
这篇文章主要介绍了怎么利用html与css制作5星好评页面，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。<!DOCTYPE html&...
-
这篇文章将为大家详细讲解有关怎么用ccs制作一个简单的html布局，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。1、创建htmlHtml编辑代码示例<!DOCTYP...
-
目录CSS 3D 基础知识使用 transform-style 启用 3D 模式利用 perspective & perspective-origin 设置 3D视距，实现透...
-
目录messagebox愚人节整蛊消息框尺寸messagebox
tkinter.messagebox中封装了多种消息框，其输入参数统一为title, message以及其他参数。其...
-
要制作个人html空间登录页面，可以按照以下步骤操作：1. 新建一个HTML文件，命名为“login.html”。2. 在文件中添加...
-
今天小编给大家分享一下怎么利用CSS制作一个聚光灯效果的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了...
-
通过XML文件保存账号密码，存储到本地，不连接数据库的简易登录系统。
1.创建一个XML文件，设置一个初始的账号密码。
public void Creat()
{
...
0