Web前端高效開發總結二 HTML最佳實踐

2021-08-10 01:18:19 字數 1911 閱讀 2533

標準html**的重要性

標準的html**指的是html**符合w3c的最新標準,對於乙個標準的頁面來說,具有的優點有:

1.標準的頁面能保證瀏覽器正確的渲染

2.網頁能更容易被搜尋引擎搜尋,提高**的搜尋排名,爬蟲的目的是讀懂**的內容,並找出**中的關鍵字

4.**能更好的被維護和擴充套件

在w3c上提供了一項免費的**驗證服務w3c validator。它提供了三種驗證方式:url、本地檔案上傳和直接輸入**。訪問**為:

標準的html頁面結構

標準的html頁面結構包含兩部分,head和body,它的結構如下:

head>

body>

html>

為了使得html文件能相容標準格式,還需要給文件新增乙個文件型別宣告dtd,當瀏覽器解析html文件時會遵循指定的型別宣告標準。html4的規範中定義了多個規範的文件宣告,而html的規範中簡化了文件型別宣告。例項**如下:
//html4

//html5

高效的進行html開發

正確的閉合html標籤

對於自閉合標籤,在xhtml規範中要求必須新增」/」表明標籤的結束;在html4.01的規範中,不推薦新增」/」;在html5的規範中是可選的

對於非自閉合標籤,一定要新增對應的閉合標籤

停止使用不標準的標籤和屬性,對於過時的等標籤使用加css類樣式代替

將樣式與結構分離

在使用js的時候新增js禁用的提示資訊

目前大多數瀏覽器都提供了js的支援,但是還是有少數的瀏覽器不支援js,並且一般的瀏覽器都會提供禁用js的選項。在禁用js的情況下,就需要考慮在js失效時如何讓對應的功能正常使用。

最常用的方式是使用標籤,該標籤用於在js被禁用的情況下提供的一種替代方式,此時該標籤中的內容會被瀏覽器解析,例項**如下:

noscript標籤也有弊端,他只會在js被禁用時才起作用,在js因為防火牆攔截等情況下導致不可用時,並不會起作用,大多數情況下,我們進行開發都需要考慮到js不可用或者被禁用的情況,目前常用的有兩種解決方式,使用服務端來處理js應該處理的事、還有一種就是針對js禁用的情況開發乙個新的頁面,通常可以結合這兩個一起用,其中第二種方式可以結合noscript標籤來用,如下:

noscript>

新增必要的meta標籤

具體用法可以參考:

編寫高可讀性的html

使用html5提供/新增的語義化標籤,比如header/footer/article等代替

等使用ul->li…等代替div->p等

網頁層級標題設計建議

1.在頁面內容的標題部分使用標籤

2.乙個html頁面中最好只使用乙個h1標題,表示頁面的最頂級標題

3.使用標籤時最好不要跳級

4.不要單純的使用hn標籤給內容設定樣式,對於html來說應該更注重語義,外觀交給css

精簡html**

刪除多餘的容器,常用的方式有兄弟組合成父子,層級縮小等

裝飾性的元素使用css樣式來實現

所謂裝飾性的元素指的是那些只是為了滿足外觀設計,並沒有任何語義的元素,比如button按鈕上的箭頭,可以使用css設定背景並使用background-position進行移動實現,而不必在button內加入乙個span或者img

避免使用table布局

從**的簡潔角度來說,使用table布局需要使用更多的標籤,而使用html基本標籤價css樣式會讓**更清晰簡潔。

從效能角度來說, 使用table布局存在效能問題,table中的任何動態改動都會導致整個**布局的重繪或重排

參考文獻

web前端開發最佳實踐一書

WEB前端開發流程總結

作者宣告 本部落格中所寫的文章,都是博主自學過程的筆記,參考了很多的學習資料,學習資料和筆記會註明出處,所有的內容都以交流學習為主。有不正確的地方,歡迎批評指正 1.新建專案資料夾 資料夾結構要有層次,一般包括 src 用於存放源 css 存放css index.css 用於存放設定主頁的scss ...

web開發 web前端開發常用技術總結歸納

技術選型規範規範 vue版本 2.x 前端路由 vue route 非同步請求 axios 全域性狀態管理 vuex css預處理器 sass less h5專案移動端適配規則 使用rem單位 rem px換算規則統一 小程式 使用小程式自帶rpx單位,適配規則參考小程式文件 公用元件庫 ui元件庫...

開發web前端 web前端 開發筆記

我是孟噠噠一名web前端開發工程師,今天給大家分享一下web前端是的一些筆記應用,希望對你們有幫助。物件導向是乙個開發思想,它把注意點都放到了物件上。物件導向強調的幾個概念 1 類 類是一批具備相同屬性和行為的事物的抽象,為什麼是抽象?因為不是具體的,也就是說不是實實在在存在的東西 看不見摸不著 2...