首頁 web前端 html教學 初級前端怎麼能寫出高品質的程式碼

初級前端怎麼能寫出高品質的程式碼

Jun 24, 2017 pm 02:15 PM
優雅 初級 前端

一HTML
 1.DOCTYPE的聲明,現在基本上都是H5的天下,直接快速鍵產生即可。
 2.字符集的聲明,一般是,記得轉義下符號類字符如空格-  &-amp;
 3.正確的縮進,現在各個全家桶裡的程式碼已經配置好了縮進,無太大必要直接使用即可
 4.css和js強調要使用外鏈形式,現在感覺組件化的東西,寫到每個組件裡就可以,使用less等預編譯語言可以更方便的實現換膚等效果
 5.正確的標籤嵌套
 6.刪除不必要的標籤。例如

      這種,從語義上,外層div可以刪除,因為div和ul都是區塊級元素
       7.做頁面時定好區域,整站佈局好後,如對小區域塊進行調整,直接在body或離著近的大區域塊定義一個單獨的類(id也行),在做樣式處理
       8.省略圖片、樣式、腳本以及其他媒體檔案URL 的協議部分(http:,https:)除非這兩種無法滿足。如
       9.使用兩個空格縮排(非必須盡量統一)實現程式碼格式化
       10.標籤名,屬性,屬性值盡量使用小寫
       11.元素中的內容,減少不必要的空格,內容結尾的空格也不要。
       12.加入適當的註釋,描述作用
       13.加入TODO來標記代辦事項。如
      • Apples
      • Oranges

      14.h5中單標籤不要閉合形式,直接寫標籤。如
      不要寫成
      ;不要寫成
       15.標籤(除單一標籤)有開始就要有閉合
       16.對於像圖片、影片、canvas 動畫等多媒體元素,確保提供其他可存取的內容。如這裡是圖片描述
       17.引用樣式表時,type預設指定text/css,可以省略。引用腳本時,type預設指定text/javascript,可以省略
       18.屬性值使用雙引號
       19.發佈的程式碼要壓縮

      二CSS
       1.reset的使用。首先明確它的作用,因為各個瀏覽器的預設屬性值有所不同需要做相容性考慮。不要使用全域reset,因為效率低。
       2.屬性的順序,改變佈局的寫在前面,如display,margin,padding,position,其他寫在後面(可以按字母順序排列)
       3.定義有意義的id和class名稱,簡短而明確,多單字使用連接符號
       4.id盡量定義在大區塊,在區塊中在尋找元素,如
      ...n多內容尋找可以用#content .title-color{color:red}
       5.使用簡寫屬性,如font-family: palatino, georgia, serif;font-size: 100%;line-height: 1.6;寫成font: 100%/1.6 palatino, georgia, serif;
       6.屬性值為0時單位不要加,如padding:0 15px;
       7.值在-1和1中間時,0可以省略,如font-size:.8em
       8.顏色值使用十六進制,如color: #ebc而不是color: #eebbcc
       9.每個樣式以分號(;)結束
      #  10 .選擇器和{}之間應該有空格,屬性名稱和屬性值之間應該有空格(記得code時格式化就可以)
       11.屬性值用單引號,URI不要加引號
       12.分段註釋,沒必要每個樣式都註釋(除非易模糊)
       13.利用好繼承,在父元素上定義樣式,子元素繼承樣式。可以繼承的屬性,如font-開頭,text-開頭,line-height
       14.當表示不存在時候,盡量使用display:none而不是visibility:hidden,因為前者瀏覽器解析不佔內存後者會在記憶體開啟空間
       15.避免使用@import
       16.發佈的程式碼要壓縮

      以上是初級前端怎麼能寫出高品質的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

      本網站聲明
      本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

      熱AI工具

      Undresser.AI Undress

      Undresser.AI Undress

      人工智慧驅動的應用程序,用於創建逼真的裸體照片

      AI Clothes Remover

      AI Clothes Remover

      用於從照片中去除衣服的線上人工智慧工具。

      Undress AI Tool

      Undress AI Tool

      免費脫衣圖片

      Clothoff.io

      Clothoff.io

      AI脫衣器

      AI Hentai Generator

      AI Hentai Generator

      免費產生 AI 無盡。

      熱門文章

      R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
      1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
      R.E.P.O.最佳圖形設置
      1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
      R.E.P.O.如果您聽不到任何人,如何修復音頻
      1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
      R.E.P.O.聊天命令以及如何使用它們
      1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

      熱工具

      記事本++7.3.1

      記事本++7.3.1

      好用且免費的程式碼編輯器

      SublimeText3漢化版

      SublimeText3漢化版

      中文版,非常好用

      禪工作室 13.0.1

      禪工作室 13.0.1

      強大的PHP整合開發環境

      Dreamweaver CS6

      Dreamweaver CS6

      視覺化網頁開發工具

      SublimeText3 Mac版

      SublimeText3 Mac版

      神級程式碼編輯軟體(SublimeText3)

      一文聊聊Node中的記憶體控制 一文聊聊Node中的記憶體控制 Apr 26, 2023 pm 05:37 PM

      基於無阻塞、事件驅動建立的Node服務,具有記憶體消耗低的優點,非常適合處理海量的網路請求。在海量請求的前提下,就需要考慮「記憶體控制」的相關問題了。 1. V8的垃圾回收機制與記憶體限制 Js由垃圾回收機

      PHP與Vue:完美搭檔的前端開發利器 PHP與Vue:完美搭檔的前端開發利器 Mar 16, 2024 pm 12:09 PM

      PHP與Vue:完美搭檔的前端開發利器在當今網路快速發展的時代,前端開發變得愈發重要。隨著使用者對網站和應用的體驗要求越來越高,前端開發人員需要使用更有效率和靈活的工具來創建響應式和互動式的介面。 PHP和Vue.js作為前端開發領域的兩個重要技術,搭配起來可以稱得上是完美的利器。本文將探討PHP和Vue的結合,以及詳細的程式碼範例,幫助讀者更好地理解和應用這兩

      前端面試官常問的問題 前端面試官常問的問題 Mar 19, 2024 pm 02:24 PM

      在前端開發面試中,常見問題涵蓋廣泛,包括HTML/CSS基礎、JavaScript基礎、框架和函式庫、專案經驗、演算法和資料結構、效能最佳化、跨域請求、前端工程化、設計模式以及新技術和趨勢。面試官的問題旨在評估候選人的技術技能、專案經驗以及對行業趨勢的理解。因此,應試者應充分準備這些方面,以展現自己的能力和專業知識。

      如何使用 Go 語言進行前端開發? 如何使用 Go 語言進行前端開發? Jun 10, 2023 pm 05:00 PM

      隨著網路技術的發展,前端開發變得日益重要。尤其是行動端設備的普及,更需要高效率、穩定、安全又易於維護的前端開發技術。而作為一門快速發展的程式語言,Go語言已經被越來越多的開發者所使用。那麼,使用Go語言進行前端開發行得通嗎?接下來,本文將為你詳細說明如何使用Go語言進行前端開發。先來看看為什麼要使用Go語言進行前端開發。很多人認為Go語言是一門

      C#開發經驗分享:前端與後端協同開發技巧 C#開發經驗分享:前端與後端協同開發技巧 Nov 23, 2023 am 10:13 AM

      身為C#開發者,我們的開發工作通常包括前端和後端的開發,而隨著技術的發展和專案的複雜性提高,前端與後端協同開發也變得越來越重要和複雜。本文將分享一些前端與後端協同開發的技巧,以幫助C#開發者更有效率地完成開發工作。確定好介面規範前後端的協同開發離不開API介面的交互。要確保前後端協同開發順利進行,最重要的是定義好介面規格。接口規範涉及到接口的命

      Django是前端還是後端?一探究竟! Django是前端還是後端?一探究竟! Jan 19, 2024 am 08:37 AM

      Django是一個由Python編寫的web應用框架,它強調快速開發和乾淨方法。儘管Django是web框架,但要回答Django是前端還是後端這個問題,需要深入理解前後端的概念。前端是指使用者直接和互動的介面,後端是指伺服器端的程序,他們透過HTTP協定進行資料的互動。在前端和後端分離的情況下,前後端程式可以獨立開發,分別實現業務邏輯和互動效果,資料的交

      Go語言前端技術探秘:前端開發新視野 Go語言前端技術探秘:前端開發新視野 Mar 28, 2024 pm 01:06 PM

      Go語言作為一種快速、高效的程式語言,在後端開發領域廣受歡迎。然而,很少有人將Go語言與前端開發聯繫起來。事實上,使用Go語言進行前端開發不僅可以提高效率,還能為開發者帶來全新的視野。本文將探討使用Go語言進行前端開發的可能性,並提供具體的程式碼範例,幫助讀者更了解這一領域。在傳統的前端開發中,通常會使用JavaScript、HTML和CSS來建立使用者介面

      golang可以做前端嗎 golang可以做前端嗎 Jun 06, 2023 am 09:19 AM

      golang可以做前端,Golang是一種通用性很強的程式語言,可以用於開發不同類型的應用程序,包括前端應用程序,透過使用Golang來編寫前端,可以擺脫JavaScript等語言引起的一系列問題,例如類型安全性差、效能低下,以及程式碼難以維護等問題。

      See all articles