前端学习随笔2 在线简历

一心得体会

今天的任务是利用HTML制作一份在线简历，先不考虑样式，只从结构和语义化方面着手。对于已经有了前端b编程经验的我来说挺简单的，但是我还是当作我是一个刚入门的菜鸟，在学习过程中发现其实还有很多基础知识被我忽略了，例如meta的强大功能，HTML5表单新增的输入类型，列表标签dl、dt、dd等，这提醒这我不要眼高手低，要潜心学习，稳固基础。

二相关知识点

问题1 HTML是什么，HTML5是什么？

HTML是一个超文本标记语言（Hyper Text Markup Language），其有一套标记标签，使用这些标记标签来描述网页。
HTML5是最新的HTML标准，新增了一些元素，API，同时也删除了部分旧元素，具体可以看相关文档。相较于 HTML4来说，HTML5最大的改进就是新增了强大的图像支持（<canvas>和 <svg>），多媒体支持（<video> 和 <audio>）和API，使得其能独自完成以前需要其他语言辅助的工作。

问题2 HTML文档是什么？

HTML文档其实就是我们看到的网页，其包含HTML标签和纯文本。

问题3 HTML元素、标签、属性都是什么概念？

HTML标签是由尖括号包围的关键词，表示其在HTML文档中的含义。元素标签通常成对出现（<p></p>），也有单独出现（<img>）；成对出现的标签第一个为开始标签（或开放标签），第二个为结束标签（或闭合标签），结束标签多了一个/。
HTML元素是指从开始标签到结束标签的所有代码（<p>包含标签和此文本</p>）。注意：如果元素内没有文本，可以直接在开始标签进行关闭（<p/>）
HTML属性相当于HTML元素的修饰符，为该元素提供相应的特性。属性通常以键值对的形式出现（name="value"），并且都是出现在开始标签中。

问题4 文档类型是什么概念，起什么作用？

HTML经历过多个版本的更新，每个版本中元素不尽相同，那么我们如何才能使计算机准确知道当前的版本并正确显示HTML页面呢？为了解决这个问题，引进了文档类型的概念。在HTML文档首行使用<!DOCTYPE>来声明该HTML文档的版本，如果版本为HTML5，那么声明代码为<!DOCTYPE html>；如果为HTML4，那么声明代码为<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"。目前创建新网页都尽量使用HTML5的文档类型，维护旧网页可以沿用旧网页的文档类型。

问题5 meta标签都用来做什么的？

meta标签位于HTML头部，携带元信息，不显示在页面上，对于计算机是可读的。其主要作用有以下几点：

声明当前文档所使用的字符编码

<!--声明文档使用的字符编码-->
<meta charset="utf-8">

注意：鼓励使用UTF-8字符编码，不使用不兼容ASCII的编码规范，必须禁用CESU-8, UTF-7, BOCU-1或 SCSU这些字符，因为其被证实存在跨站脚本攻击（XSS）的风险。
携带相关信息关联到HTTP头部
此处需要用到http-equiv和content属性

注：http-equiv的属性值content-language, content-type, set-cookie已经弃用，请查看最新文档使用替代方案

示意代码如下：

< Meta HTTP-EQUIV="refresh" content="6; url=地址" >

使用name属性携带相关信息

示意代码如下：

<!--标注作者-->
< Meta name="author" content="前端唠唠嗑" >
<!--携带关键字，便于搜索网站收录，提高搜索排名-->
< Meta name="keyword" content="关键字" >
<!--文档描述，便于搜索网站收录，提高搜索排名-->
< Meta name="descript" content="描述内容" >

问题6 Web语义化是什么，是为了解决什么问题

我理解的语义化有两方面：1. 便于计算机识别HTML内容，降低其处理难度，提高效率，与此同时还能搜索程序更好更快的搜索到此文档；2. 便于程序员理解代码以及后期维护——结构良好，语义明确的代码利于阅读和维护。

问题7 链接是什么概念，对应什么标签？

超链接的含义是一个点击跳转相应文档的字，词或者图像。对应的为<a>标签。其使用方式如下。

通过href属性跳转到另一个HTML文档

<a href="地址">跳转到相应的地址</a>

跳转文档内的锚点（书签）

<!--通过name属性创建文档内的锚点-->
<a name="tips">设定的锚点</a>
<!--通过href属性跳转文档内的锚点-->
<a href="#tips">跳转锚点</a>

注意：创建锚点时可以用id来替代name属性，也可以用其他元素标签替代a标签。
跳转另一个文档的锚点

<a href="地址#tips">另一个文档的锚点</a>

问题8 常用标签都有哪些，都适合用在什么场景？

块级元素：<div>——外框, <p>——段落, <h1>——标题, <ul>——列表, <table>——表格
行内元素：<span>——提示性文字,<a>——链接, <b>——加粗, <img>——图像,<td>——表格单元

问题9 表单标签都有哪些，对应着什么功能，都有哪些属性？

表单一般包裹在<form>标签下，主要用于用户输入，获取用户输入的信息并传输给服务器。其输入类型有以下几种：

文本

单行文本输入 <input type="text">
多行文本输入 <textarea name="message" rows="10" cols="30"></textarea>

2.密码（输入的字符会做掩码处理） <input type="password">

单选

<input type="radio" name="sex" value="male" checked>Male
<input type="radio" name="sex" value="female">Female

注：当input的type为radio时，该输入框为单选框，若单选框的name值相同，那么他们是同一组选项，不能同时选取到。
多选

<input type="checkbox" name="vehicle" value="Bike">I have a bike
<input type="checkbox" name="vehicle" value="Car">I have a car

注：当input的type为checkbox时，该输入框为单选框，若单选框的name值相同，那么他们是同一组选项，可以同时选取到。
按钮

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

注：点击可以执行相关操作
submit

<input type="submit" value="Submit">

此输入类型用于提交表单到服务器
HTML5新增输入类型（<input type="新增类型" >）

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

注释：老式 web 浏览器不支持的输入类型，会被视为输入类型 text。

问题10 ol, ul, li, dl, dd, dt等这些标签都适合用在什么地方，举个例子

ol搭配li构建有序列表，ul搭配li构建无序列表，dl，dd，dt不常用，看了一下介绍dl类似于ol和ul，属于最外层标签；dd类似于li，表示项目内容；而dt类似于序号，只不过内容可以自定义。由以上可以看出dl，dd，dt挺适合做菜单类列表，dt表示菜名，dd表示相应菜品的介绍。

前去面试都拿的纸质简历，去一家公司浪费一份简历，因为你能不保证你只去一次就能面试成功。

今天做了一份html简历，准备挂到网站上，以后面试时直接看网站，一举两得。

先附html截图，后面有源码

下面附源码

<!DOCTYPE html>

<html>

<head>

margin: 0;

padding: 0;

border: none;

font-size: 12px;

}

#jianil{

width: 797px;

margin: 0 auto;

border: solid 1px #DCDDDF;

}

#jianil .one{

background: url(images/toubu.png);

width: 797px;

height: 90px;

font-size: 30px;

color: white;

font-weight: bold;

text-align: center;

margin-bottom: 0;

line-height: 90px;

}

#jianil ul{

width: 771px;

margin-left: 13px;

margin-top: 40px;

}

#jianil ul li{

font-size: 20.5px;

background: url(images/tubia.png) no-repeat;

list-style: none;

text-indent:1.8em;

line-height: 30px;

margin-bottom: 20px;

border-bottom: 1px solid #DCDDDF;

}

#jianil ul li.none1{

border-bottom: none;

}

#jianil ul li p{

font-size: 15px;

}

</style>

</head>

<body>

<ul>

<li>个人信息

<p>

姓名：XX#12288;

性别：男#12288;

籍贯：XX#12288;

年龄:21#12288;

</p>

<p>

手机：XXXXXXXXXXX#12288;

院校：XXXX学院#12288;

专业：XX#12288;

学历：XX#12288;

</p>

</li>

<li>教育背景

<p>

2014.8-2016.6nbsp;XXXX学院

</p>

<p>

你在学习学了那些东西？

</p>

</li>

<li>最近工作

<p>

2016.6-2016.12nbsp;你最近的工作公司nbsp;工作岗位

</p>

<p>

工作内容

</p>

</li>

<li>专业技能

<p>

你会什么

</p>

</li>

<li>相关证书

</li<

<li class=none1>自我评价

<p>

你对于自己是是怎么评价的？

</p>

</li>

</ul>

</div>

</body>

</html>

需要链接的两张背景图

整页源码截图

温馨提示：body里可以添上oncontextmenu=self.event.returnValue=false onselectstart=return false（禁止复制网页，禁止网页右键）

如果你喜欢本文的话，可以关注作者头条号，每天都会有网站开发干货与你分享哦！

站搜索卡布奇客说观看视频版

1 了解markdown

为什么是markdown？

为什么要使用markdown写简历呢，我相信大家都被office word或者富文本工具抓狂的排版折磨过。虽然markdown排版能力上不及他们，但是它的优点就是简单，快速，可以让你专注于内容创作，不必为格式困扰，一次创作基本也是随处可用的。

首先我们来看下成品的效果是怎样的：

{{1}}$继续往下看你也可以制作一份这样的简历咯~

1.2 markdown语法基础

1.2.1 标题

1.2.2 字体

1.2.3 换行

1.2.4 引用

1.2.5 分割线

1.2.6 图片

1.2.7 超链接

1.2.8 列表

1.2.9 表格

1.2.10 代码块

2 选择适合你的markdown写作工具

2.1 在线markdown编辑器

Markdown在线编辑、实时预览地址：https://1024tools.com/markdown

为什么选择这款在线编辑器，是因为它可以完美支持我们待会要说的FontAwesome，我试过其它几个在线编辑器不支持在线预览或者显示有问题。当然你也可以导出html之后再去加入FontAwesome和更改字体。

其它在线markdown编辑器：

冷熊简历

http://cv.ftqq.com/#

（有简历模板，提供md和pdf下载，可惜无法直接导出html,不好进一步编辑）

MdEditor

https://www.mdeditor.com/

(提供html源码，可自行保存为.html文件)

菜鸟markdown编辑器

https://c.runoob.com/front-end/712

(提供html源码，可自行保存为.html文件)

MaHua 在线markdown编辑器

http://mahua.jser.me/

(部分浏览器下无法输入中文，火狐正常，很可惜作者不再更新了，不过可以编辑得差不多了复制进去修改)

还有什么好的markdown工具欢迎留言推荐。

2.2 在线编辑器如何导出和编辑html

2.2.1 冷熊

在浏览器中按F12启动开发者工具，选择element页，找到 class="te-preview"这一行，右键复制。

2.2.2 其它提供了html片段的

1024tools：

注意：复制的时候第一句引入的CSS无法加载出来，可以去掉

MdEditor编辑器右上角小图标

菜鸟的显示html

在在线编辑器中复制html片段，使用在线HTML格式化工具，如：

在线代码格式化http://tool.oschina.net/codeformat/

将格式化后的html片段新建文本文档保存为简历.html文件。

注意一定要显示文件扩展名，如果保存为简历.html.txt请去掉.txt后缀。推荐使用VS Code等本地编辑器编辑html，本篇限于篇幅没有介绍，将会在进阶篇给出。如果本地没有专业编辑器，右键打开方式使用记事本编辑也无大碍。

2.3 别忘了复制markdown内容保存为.md文件以供日后使用

3 FontAwesome和更换字体助你美化简历

3.1 FontAwesome

如果你使用1024tools，那可以直接引入FontAwesome，在编辑器开头加入

如果不是，请在导出的html文件的 <head>标签内加入这段html

3.1.1 使用方式

访问FontAwesome中文网站 http://www.fontawesome.com.cn/faicons/

选择你需要的图标，在你需要加入的地方粘贴，例如：

不同的图标只需要更改 fa-后面的名字即可。

3.2 使用本地字体

Windows 10 可以通过设置-字体设置查看安装的所有字体

系统字体安装文件夹在：

C:\Windows\Fonts

此时需要一点点的CSS知识，放心，在此列出的就够用。

如果你本地安装了这些字体，即可生效。

注意：你如果需要中英文定义不同的字体，需要把英文字体放在首位，中文字体放在第二位。

如果你使用1024tools，那可以点击右上角设置，自定义css，使用这段代码，即可更改为这两种字体。

body,h1, h2, h3, h4, h5, h6, pre, code { font-family: 'Consolas','微软雅黑';}

如果你使用其它编辑器导出的html，请在body上方加入以下使用style标签包裹的代码即可生效。

4 转换html和PDF

你的简历html在经过以上的编辑之后，在浏览器打开，右键打印，即可保存为pdf格式。

4.2 什么？你说长得太美要放皂片？

需要稍微了解一下html的 <img>标签

注意：width和height可以只定义其中之一，这样图片的比例是不变的。

align="right/left"这个用来定义向左还是向右对齐。

注意：关于图片的地址，可以选择先上传到微博等地方右键复制图片地址即可得到，如果担心隐私问题，可以先把markdown导出html，然后只需要将src指定为本地图片路径即可。

如 E:\xxx.png

本地打开html文件即可预览，编辑之后刷新即可看到效果。

好了，本次教程大概先说这么多，因为写着写着发现一篇放不下了，觉得不错的话请继续关注后续进阶教程哟(＾Ｕ＾)ノ~

初步的进阶版教程目录，将主要围绕VS Code进行，各位可以说说自己的markdown写作流程是什么样的？

5 进阶

进阶篇预告

1 typora小清新体验

2 VS Code以及插件Markdown Preview Enhanced介绍（程序员推荐）

2.1 VS Code安装及配置

2.2 Markdown Preview Enhanced插件

2.3 Image Paste插件

2.4 一定要搞清VS Code工作区的概念

3 不想找字体安装？使用在线字体

3.1 有哪些在线字体提供商

3.2 如何使用

4 自定义CSS

5 上传到Github Pages（以后hr要简历直接丢链接）

B站搜索卡布奇客说观看视频版

在线咨询

上一篇：理解 Bash 中的尖括号
下一篇：中外英文媒体如何报道唐山打人事件

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

前端学习随笔2 在线简历

您的项目需求