前端學習隨筆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 在線簡歷

您的項目需求