需要掌握哪些技能 有很多人寫網頁，但不是每個人都是一個優秀的前端工程師。要成為一名優秀的前端工程師，您必須優化網站的用戶體驗，包括Web設計和實現。

作為UI設計人員，當您完成草稿并開發對接時，您需要標記設計草稿并剪切地圖，并將標簽剪切文件提供給開發。這是犯錯誤的時候。你怎么削減尺寸？

網頁剪切如何工作？什么是專業的網站圖表規范？

在網站建設制作中，我們經常聽到最終稿，我們會剪切地圖，然后切割的工作是什么，讓我們的專業前端工程師告訴你。

切割圖是網站生產過程中的術語。這是前端工程師必備的基本技能。切割表是將設計文檔轉換為HTML的過程。

在網站建設制作過程中，網頁剪切是指將精心設計的PSD文檔轉換為html的工作。使用DIV + CSS以網頁的形式表達設計文檔，網頁的切入點指的是設計。根據布局要求，Photoshop的切片工具將文檔中的圖片與文檔分開，靜態頁面使用DIV + CSS創建。

規范1，文件規范。

1，將html，css，js，images存檔到系統開發目錄。

2. Html文件以英文名稱命名，后綴為.htm。同時，相應的接口放在同一目錄中。如果名稱是中文，則需要將同一文件重命名為htm。用于后端添加和功能查找。

3，CSS，js命名也是如此。

如何命名id和class？

這個名字可以根據你的喜好命名，所以有些人會使用英文，拼音或幾個字母。雖然可以這么說，但是會讓你和其他人在后期修改網站。找到一個標簽非常麻煩。我的個人名字是基于級別的。這是一個例子：

例如，頭部我使用了名稱頭部，然后頭部可以分為兩部分：存儲徽標并存儲導航欄。我將使用head_1和head_2來表示這兩個部分，然后存儲徽標的部分可以分為左側和右側?；諛嗣媸菑V告或搜索欄。我將其命名為：head_1_left和head_1_right。這種css代碼有時我們不需要轉向html頁面進行修改，直接根據樣式的名稱可以看出。

其次，合理使用標簽有助于網站包含和SEO優化

我們來舉個例子吧。有時在新聞內容部分的html中，很多人會直接在div的中間寫文本，然后控制這個div的樣式：＆lt; div＆gt;新聞內容＆lt;/div＆gt;雖然這是完全可以實現的，但在搜索引擎眼中，這不是文本內容而是代碼，因此我們記得在編寫時使用p標記，因為應該編寫上述新聞內容。是：＆lt; div＆gt;＆lt; p＆gt;新聞內容＆lt;/p＆gt;＆lt;/div＆gt;一方面，當我們合理地使用標簽時，我們可以感覺到您正在用心去做這個網頁的布局。更重要的是使這個網站以后的優化更有效。讓我們總結一下你想要添加的標簽：

H1：網頁的主題，只有一個可以出現在頁面中。權重僅次于網站標題，因此請嘗試將網站建設的主關鍵字放入其中。如果關鍵字包在像本文標題這樣的句子中，我們可以按如下方式編寫：

＆lt; p＆gt;談論彭健本人到＆lt;/p＆gt;

＆lt; h1＆gt;網頁布局＆lt;/h1＆gt;

＆lt; p＆gt;＆lt;/p＆gt;時需要注意的一些事項。

H2-h3：在網頁中使用h3就足夠了。 h4-h6將不再使用。這兩個標簽需要合理排列，h2表示頁面中的列，h3表示此列中的子節或文章。

p：p標簽是段落標簽，我們也可以說它是內容標簽。此標記內的內容是真實內容。

Alt：搜索引擎不看圖片。我們必須向他解釋圖片代表什么，所以我們要注意向每張圖片解釋一下。

標題：此標記用于標記，很少被人使用。但是我們必須考慮到搜索引擎的優化，所以我們必須注意搜索引擎的簡單而準確的描述，例如，文章的標題是“當彭健自己排版時要注意的事項” 網站”。然后我們的代碼應該寫成

＆lt; a title=“網頁布局注意事項”href=“'＆gt;談論彭健在網站建設排版＆lt;/a＆gt;時應注意的一些事情。

用最準確和簡短的描述寫下標題的含義。

Nane：很少有人注意到這個標簽。這個名稱標簽可以說是一個直接與搜索引擎對話的標簽。他也用在一個，他告訴搜索引擎這個超鏈接里面是什么。就像上面的標題我們可以寫：

＆lt; a name=“網頁布局注意事項”title=“網頁布局注意事項”href=“'＆gt;談談彭健在編寫網站＆lt;/a＆gt;時應注意的一些事項。

強：這是一個重要的標簽。這看起來與b標簽相同。許多在不知道代碼的情況下做seo的人都知道每篇文章都必須加粗重要的關鍵字，但他們總是認為這個粗體是b標簽。事實上，這個大膽是一個強大的標簽。我們可以將這個標簽添加到我們網頁的重要關鍵詞中，然后像普通詞一樣在css中設置它，它不會影響正常瀏覽，但實際上他已經優化了。

上面的一些摘要是作者自己對頁面布局的逐步總結。當我們成為一名網絡前端工程師時，您可以簡單地理解代碼，但是當我們想成為一名使用網站建設的前端工程師時，我們還必須考慮到程序員看到您排版的感覺。并且網站對搜索引擎優化很困難。