如何自定義HTML模板
所以你買了一個HTML模板和現在你要自定義它之前你可以把它放到網上，但你不熟悉的代碼，你不知道如何去做。嗯，放心，因為在這個教程中，我們將指導你通過整個過程。
我們要工作了你從來沒有見過一行HTML假設，更別說編輯之一，所以不管你有多新工作的代碼你會發(fā)現究竟是什么做的每一步。
讓我們從頭開始。

HTML是什么？

從技術上講，這個問題的答案是“超文本標記語言”。 然而，有關自定義模板的目的，你可以考慮HTML作為一系列的打開和關閉標簽這樣：

標簽說明<和>的跡象，和關閉標簽通常包括/。 對標簽的內容在他們之間這樣：

<約翰史密斯H1＞，前端開發(fā)者
有時，然而， 也有單獨的標簽，沒有關閉的伙伴，這樣：

不同的HTML標簽，使不同類型的內容出現在網頁上。上面的例子

標簽將創(chuàng)建一個大標題閱讀“約翰史密斯，前端開發(fā)”，并舉例標簽會使圖像文件”執(zhí)行。JPG”出現在頁面上。
編輯HTML模板的所有你需要知道的是哪些標簽代表的部分頁面，你想改變，如何在代碼中找到它們，以及如何編輯他們給你想要的。

給自己一個代碼編輯器
是的，在記事本或類似的程序編輯HTML是完全可能的，但事情會更順利，如果你使用一個適當的代碼編輯應用程序。一個主要的原因是你會得到彩色突出你的代碼，你很快就會看到，這將使它更容易閱讀和編輯。

大多數的HTML模板，會在一個ZIP文件-如果是這樣的話，去提取你的現在。然后看看里面的模板的文件夾，直到找到你的“指數。HTML”或“索引.htm”文件。
在我們的例子中，簡歷模板“指標。html”文件在“01。HTML網站目錄。
 
現在，打開那個文件在Chrome。即使Chrome不默認或首選瀏覽器請使用它吧，因為我們要使用一些工具具有內置的幫助你編輯過程。
確定你想要改變的部分
如果這是你第一次編輯模板，盡量不要卷入的想法的調整顏色和布局還。你必須深入CSS，負責頁面的造型語言。專注于一件事的時候，你是新的模板定制，這是個好主意，和HTML是最開始的地方。
讓球滾動，把你在Chrome和找出這寫元素和圖像在頁面上你需要改變模板一看。如果你愿意，你可以準備一個清單，你可以通過檢查每個項目作為你的編輯。
在我們的簡歷模板的情況下我們要改變：
•姓名
•職業(yè)
•個人圖片
•社交媒體的鏈接
•聯系方式
•簡歷部分：“專業(yè)型”、“工作經驗”、“技術”和“教育”
•版權信息
現在我們有一個清單的變化，我們可以將代碼中的相應的HTML標簽定位。讓我們的名字開始。

發(fā)現檢驗員標簽
右鍵單擊該名稱，即“約翰史密斯”默認情況下，選擇檢查：

一個小組就應該在瀏覽器中打開：

“檢查”面板
這個小組給你看代碼的交互方式。鼠標懸停在該行顯示

…

（1級標題標簽），你應該看到模板的名稱部分突出在屏幕上看到你。
通過鼠標懸停在代碼的不同線和看網頁的點燃區(qū)，這個面板可以幫助你找出哪些代碼對應什么元素。你只是不停的在不同的代碼行徘徊直到你找燈。

現在展開H1點擊小三角左標簽，你應該在他們之間看到的內容，即約翰史密斯<小>前端開發(fā)<小>。

這種措辭與屏幕上的所見，所以你知道你已經找到了正確的代碼部分。

在HTML編輯標簽
現在是時候打開你的HTML文件進行編輯。打開“索引。在崇高的文本HTML”文件，你應該看到這樣的事情：

你想在這里與你在Chrome檢查員看到什么找到代碼。滾動直到你找到它在線路61 - 64。

現在你可以編輯內容的標簽更改姓名和職業(yè)，你自己。首先，編輯“約翰史密斯”你自己的名字：

然后，在之間<小> <小>標簽，改變“前端開發(fā)”自己的職業(yè)。

保存你的文件，然后刷新模板中鉻。你應該看到你的變化，像這樣：

重復編輯其他內容

現在你有了基本的過程：

檢查你想更改內容
確定相應的標簽
找到這些標簽在您的HTML文件
修改代碼以適應
讓我們重復這個過程來編輯我們想自定義其他內容。

添加自己的圖片
下一步我們將我們自己的圖像左的名字和職業(yè)領域。右鍵單擊圖像檢查，并記錄相應的標簽：

你可以看到在Inspector窗口這條線是直接在上面我們只是改變了線：
去你的HTML文件，在59行定位標簽：

這個標簽，你需要改變的價值SRC你看到里面的屬性IMG標簽你可以通過編輯是在引號。你會改變它的文件名和你自己的形象定位。

抓住一個自己的形象，是150px的150像素大小（忽略文件名有說140x140.png，大小其實是150x150）。

放下你的形象為“_content”子文件夾；它是在同一個文件夾作為你的“指數.html”的文件。

現在，在您的HTML文件，改變的價值SRC屬性，將“140x140 .png”文件就添加到“_content”子文件夾。一定要檢查你的文件擴展名類型是一樣的一個對文件“PNG”/“JPG”：
保存你的文件，刷新瀏覽器，你應該看到你的新照片顯示：

編輯社交媒體的鏈接
現在讓我們來編輯模板的右上角的社會媒體圖標鏈接。就像之前，請用鼠標右鍵單擊圖標檢查。在窗口，看上面的一個高亮顯示的行，你會看到它包含文本“Facebook圖標”。我們要用這個在我們的HTML文件中找到的代碼。

回到崇高的文本，按Ctrl + F和運行一個找到“Facebook圖標”。你應該在75號線找到它。

這個一標簽在75行是什么造成的圖標鏈接，并href你看它里面的屬性決定，將去。你需要改變的價值href屬性到你的Facebook的URL（例如： https://www.facebook.com/mylink）。

更換#那是有你的URL默認。然后做地鐵79號線的推特一樣，谷歌+在83號線和87號線的LinkedIn。

如果有一個圖標你想去除完全，突出它的鏈接啟動開幕<一>在關閉標簽和整理<一>標簽，然后刪除代碼。

現在保存和更新您的網站，然后 當你點擊他們應該走到正確位置的鏈接。

編輯聯系人信息
接下來讓我們改變社會的圖標右下方的聯系信息。

先檢查“電子郵件”，所以我們可以找到這段代碼開始聯系信息。走線你強調代碼說明，和線下，所以你可以在你的HTML文件匹配。

在崇高的文本，按下Ctrl + F這個時候再次搜索“電子郵件”。你需要找到實例的“電子郵件”，這是 包圍碼匹配你所看到的在Inspector窗口。

你會在94號線找到它。突出的默認電子郵件地址“john@sitename.com”，兩個位置：

然后用你自己的電子郵件地址替換它。在接下來的一行也可以替換你自己的電話號碼，和下面的線，你可以替換你自己的網站地址：

編輯簡歷部分
現在讓我們先開始編輯模板的主要簡歷部分。有幾個部分，這些部分，所以我們要先檢查每個人所以你知道要尋找什么，在你的代碼。這也將是一個讓你學習更多關于移動通過Inspector窗口中找到你的網站的不同部分的機會。

向下滾動到“專業(yè)簡介”部分，右鍵單擊文本段落的檢查。

在檢視面板中你會看到它已經強調了P標簽–這個標簽是負責創(chuàng)建在你的文字段落。

接下來，我們要知道一整段在簡歷部分文本看起來像在代碼中，而不是單獨的段落。在Inspector窗口，單擊代碼行以上段落你檢查，你應該看到所有的文字照亮：

這告訴你，每一段代碼是用標簽＜div class=“CV”項>…。一DIV短了司，這些標簽是用來控制布局和造型。

現在檢查CV部分的標題，“專業(yè)型”：

首先，所有你看到的是另一套DIV標簽這是因為實際的標題是嵌套在這些標簽之間的。

打電話另一端的小三角，展開它，看到它的內容，然后再做同樣的事在下一行直到你看到“專業(yè)型”文本，你要找的。你會發(fā)現它包裹在

…＜／H2 >標簽，創(chuàng)建一個2級標題：

現在我們知道的代碼看起來像這個簡歷部分的每一部分，我們可以回到崇高的文本并開始編輯。

把光標定位在你的HTML文件的頂部，你可以從上面開始搜索。新聞按Ctrl + F和“CV項目搜索”。繼續(xù)找，直到你找到的代碼實例＜div class=“CV項目“>在那是正確的

專業(yè)簡介＜H2＞你確定代碼。

現在你可以替換文本與自己專業(yè)的剖面。將每一段你的文字

…

標簽
當你這樣做，確保你的最后一段的段首段標記包含屬性類與價值最后，像這樣：

.....

。這適用于布局造型模板的CSS，將確保下一段文字的間距是正確處理類。

如果您保存您的HTML文件和刷新你的網站，你應該看到在前兩節(jié)都已定制。

牧羊人設計文章推薦：

一個免費的開源CMS Node.js和MongoDB 
策劃視頻UI設計師和數字藝術家