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

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

網(wǎng)頁剪切如何工作？什么是專業(yè)的網(wǎng)站圖表規(guī)范？

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

切割圖是網(wǎng)站生產(chǎn)過程中的術(shù)語。這是前端工程師必備的基本技能。切割表是將設計文檔轉(zhuǎn)換為HTML的過程。

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

規(guī)范1，文件規(guī)范。

1，將html，css，js，images存檔到系統(tǒng)開發(fā)目錄。

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

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

如何命名id和class？

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

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

其次，合理使用標簽有助于網(wǎng)站包含和SEO優(yōu)化

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

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

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

＆lt; h1＆gt;網(wǎng)頁布局＆lt;/h1＆gt;

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

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

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

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

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

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

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

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

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

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

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