天天看點

前端開發規範:2-HTML網站标題

HTML标簽

文檔聲明,除非必須要相容IE6等遠古浏覽器,否則一律使用HTML5文檔類型申明<!DOCTYPE html>

标簽閉合,img、br、hr 等自閉合标簽不使用閉合斜杠

前端開發規範:2-HTML網站标題

meta标簽,聲明編碼

靜态資源引入順序, css檔案在head結束之前引入,js檔案在body結束之前引入并加上async屬性,不需要寫Type屬性。

公共樣式和架構要放在其他檔案前面, 如common.css要放在style.css前面,檔案在前的會被先解析渲染,而後面的規則會覆寫掉前面的。

正确的html文檔格式

例:home.html

<!DOCTYPE html>

我是标題

to do sth...

HTML标簽語義化

網站标題

網站副标題

  • 首頁
  • 導航1
  • 導航2

第一部分 第二部分 ©2018 GaoFang Huang

更多查閱 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

SEO優化

合理使用h1~6标簽

标題内容盡量使用h1~h6等标簽,在HTML5标準中同一個頁面已經可以使用多個h1标簽,應根據頁面内容選擇不同量級。

給外鍊加上nofllow屬性

通常認為使用了nofllow屬性的連結不會被搜尋引擎跟蹤(該觀點有争議),更不會給連結頁面傳遞權重。最常用的方式是使用nofllow屬性來避免頁面權重不必要的流失進而達到權重集中的目的。

合作夥伴

canonical繼承原頁面權重

有時候同一個内容的網頁會存在多條URL,用于關聯原頁面和 百度MIP 頁,保證 MIP 頁繼承原頁面權重,在移動搜尋時優先展現 MIP 頁。在head标簽結束之前使用,建議放在meta标簽下,其中的連結使用絕對連結。

圖檔加描述alt屬性

前端開發規範:2-HTML網站标題

塊級元素與内聯元素的換行

abcefg

abc

efg

内聯元素中含換行符也是會占用空間的,為了避免元素錯位,在編輯器中内聯元素也推薦換行處理。

VScode編輯器推薦安裝插件Beautify,來自動處理代碼格式化排版的問題。

常用meta标簽說明

meta标簽共有兩個屬性,分别是http-equiv屬性和name屬性。

基礎meta

基本每個網頁都必備的meta

搜尋引擎相關

浏覽器配置相關

移動端适配相關

轉載于:https://www.cnblogs.com/unclefang/p/11180432.html