第二十六章HTML與CSS書寫規范

1.HTML書寫規范

1.文檔類型聲明及編碼

統一為html5 聲明類型。編碼統一為utf-8。

2.頁面tdk

TDK是一個縮寫,其中“T”表示為網頁定義標題,“D”表示為網頁定義描述 description,“K”表示為搜索引擎定義關鍵詞keywords。

1、<title>標題:只強調重點即可,盡量把重要的關鍵詞放在前面,關鍵詞不要重復出現,盡量做到每個頁面的<title>標題中不要設置相同的內容。

2、<meta keywords> 標簽:關鍵詞,列舉出幾個頁面的重要關鍵字即可,切記過分堆砌。

3、<meta description> 標簽:網頁描述,需要高度概括網頁內容,切記不能太長,過分堆砌關鍵詞,每個頁面也要有所不同。

<link href=" favicon.ico” rel=” icon”>

3.書寫規范

書寫時根據頁面結構實現層次分明的縮進;

標簽、屬性、屬性命名由小寫字母及下劃線、數字組成,且所有標簽必須閉合;屬性值必須用雙引號包括。

4.語義化HTML

根據頁面結構選擇合適的標簽,如標題根據重要性用h1-h6不同等級的標簽標記、段落標記用p、結構簡章重復的部分用ul, li標簽。

頁面中重要的圖片內容要添加alt=””替換文本,以便圖片丟失時,用戶可以根據替換文本了解頁面內容。據模塊內容定義 class 和id 名稱,如包含logo和搜索框等在內的頭部標簽用 header,包含聯系信息,版權等的模塊用footer 或copyright。

5.合理嵌套HTML 標簽

合理嵌套?HTML 標簽,ul 和 li 是固定嵌套,ul 直接子元素必須是 li,dl 和 dt、dd 是固定嵌套,dl 的直接子元素必須是 dl 和 dd。p 標簽不允許嵌套 p 標簽。a 標簽不允許嵌套 a標簽和其他交互性元素,比如 button。盡可能的控制元素嵌套層級,不合理的嵌套會影響頁面性能。

6.保證結構與表現相分離

CSS表現層和JavaScript表現層分別歸屬于獨立的.CSS和 js文件。

在頁面中盡量避免使用行內樣式,即?style=”…”,應該盡量使用 class 或者 id 來定義新的樣式,然后在對應的CSS文件里面修改,js同理。

2.CSS 書寫規范

1.編碼?

編碼統一為utf-8。

2.書寫代碼前

確定版心,PC 端要確定頁面有效區域寬度(常見有效區寬度為1000px、1200px)如超過1200px需要與需求溝通確認。

考慮樣式表規劃,提高樣式重復使用率。

規劃重置樣式表:

因為瀏覽器的兼容問題,不同瀏覽器對某些標簽默認值的解析是不同的,如果沒對CSS初始化往往會出現不同瀏覽器之間的頁面顯示差異。為了避免這種差異需要使用樣式重置。

例如:

1、提前溝通頁面中模棱兩可的需求和交互效果,方便后續合理布局;

2、布局時考慮后續交互效果處理的便利性,必要時預留出交互效果中涉及到的樣式類。

頁面主體:

(如鼠標點擊后的樣式等)

3.書寫代碼時

1.添加注釋:應該為大區塊樣式添加注釋,小區塊適量注釋。

2.class 與id的命名。

命名要語義化、簡明化;

CSS命名時要加前綴zg如:.zg_top{****};

常用命名方法一:選擇器名稱由小寫英文、數字和_來組合命名:如zg_top,

zg_footer;避免使用中文拼音,盡量使用簡易的單詞組合;

常用命名方法二:首字母大寫,駝峰式命名如:topNav;

3、保持代碼縮進與格式:建議單行書寫,也可根據自身習慣,后期統一優化處理。

4、CSS屬性書寫順序:

建議遵循:布局定位屬性->自身屬性->文本屬性->其他屬性。也可根據自身習慣書寫,但盡量保證同類屬性寫在一起。

自身屬性主要包括:width、height、background、margin、padding和border 等。

文本屬性主要包括:color、font、text-decoration、text-align、vertical-align等。

5、書寫代碼過程中要注意兼容問題,對熟知的兼容問題在書寫代碼過程中一并處理。注:需要注意ie8以下的項目和專題,慎用?CSS3 除圓角、投影等偏向界面修飾性屬性之外的其他屬性,避免兼容問題。

3.注意事項

頁面中的文本內容,除了需求特意說明之外,一般能用文字的都用文字,保證靜態頁面的可編緝性。

注:專題里的特殊字體一般要切圖,但具體情況與需求溝通。

pc 端頁面需要兼容 IE8 以下時,布局中如果用到 HTML5的標簽,注意處理兼容或避免使用。

頁面布局時能用正常文檔流布局的就不要使用定位布局。

盡可能不使用表格布局,但頁面設計中以表格形式展示的內容模塊也要盡量使用表格布局。通常頁面中需要添加鏈接的部分,PC 端要設置在新窗口打開屬性。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/24151.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/24151.shtml
英文地址,請注明出處:http://en.pswp.cn/web/24151.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

NFT Insider #133:蘇富比將拍賣BAYC系列NFT,Taiko創世NFT系列已上線

引言&#xff1a;NFT Insider由NFT收藏組織WHALE Members &#xff08;https://twitter.com/WHALEMembers&#xff09;、BeepCrypto &#xff08;https://twitter.com/beep_crypto&#xff09;聯合出品&#xff0c;濃縮每周NFT新聞&#xff0c;為大家帶來關于NFT最全面、最新鮮…

立創·天空星開發板-GD32F407VE-EXTI

本文以 立創天空星開發板-GD32F407VET6-青春版 作為學習的板子&#xff0c;記錄學習筆記。 立創天空星開發板-GD32F407VE-EXTI 中斷硬件觸發中斷示例軟件觸發中斷示例 中斷 中斷分為內部中斷和外部中斷 外部中斷是由外部設備&#xff08;如按鍵、傳感器、通信接口等&#xff09…

rollup.js(入門篇)

前沿 Rollup 是一個用于 JavaScript 的模塊打包工具&#xff0c;它將小的代碼片段編譯成更大、更復雜的代碼&#xff0c;例如庫或應用程序。它使用 JavaScript 的 ES6 版本中包含的新標準化代碼模塊格式&#xff0c;而不是以前的 CommonJS 和 AMD 等特殊解決方案。ES 模塊允許…

如何在Python中處理時間和日期

在Python中處理時間和日期&#xff0c;我們通常使用內置的datetime模塊。這個模塊提供了類來操作日期和時間&#xff0c;包括date、time、datetime、timedelta以及tzinfo。以下是datetime模塊的一些基本用法&#xff1a; 1. 獲取當前日期和時間 python復制代碼 from datetime…

Linux編程for、while循環if判斷以及case語句用法

簡介 語法描述if條件語句if else條件判斷語句if else-if else多條件判斷語句for循環執行命令while循環執行命令until直到條件為真時停止循環case ... esac多選擇語句break跳出循環continue跳出當前循環 1. for 循環 for語句&#xff0c;定量循環&#xff0c;可以遍歷一個列表…

一文讀懂AI時代GPU的內存新寵-HBM

一文讀懂GPU最強輔助&#xff1a;HBM HBM&#xff0c;即高帶寬內存&#xff0c;是一項領先的3D堆疊DRAM技術&#xff0c;專為高性能計算和圖形處理單元&#xff08;GPU&#xff09;設計&#xff0c;滿足其對內存帶寬和容量的極致需求。該技術由AMD與海力士攜手研發&#xff0c;…

Apache安裝教程

目錄 一、Apache知識點 Apache服務簡介 Apache下載網址 Apache的主要特點 二、Apache服務的搭建 1. 關閉防火墻 2. 安裝依賴環境以及編譯工具 3. 將apache安裝包拖入xshell內 4. 解壓壓縮包 5. 進入httpd主包 6. 指定安裝路徑&#xff0c;啟用字符集支持等 7. 優化執…

重慶工商大學社會工作專業試題及答案,分享幾個實用搜題和學習工具 #媒體#學習方法#知識分享

搜題軟件一般都是通過識別題目內容搜索出問題的答案&#xff0c;當識別內容不正確或搜索不到答案時&#xff0c;又得重新到其他軟件進行重復的操作&#xff0c;很是麻煩。所以我們可以使用專業的識別工具&#xff0c;對題目內容進行識別&#xff0c;然后把提取出來的內容單獨保…

流量錄制學習

AREX Cloud | AREX (arextest.com) 流量錄制學習&#xff0c;比vivo的moonbox要好用

android 異屏同顯二.

android主屏: android副屏 | | mediaProjection ----SufaceTextrue ---Open…

【數據結構】平衡二叉樹左旋右旋與紅黑樹

平衡二叉樹左旋右旋與紅黑樹 平衡二叉樹 定義 平衡二叉樹是二叉搜索樹的一種特殊形式。二叉搜索樹&#xff08;Binary Search Tree&#xff0c;BST&#xff09;是一種具有以下性質的二叉樹&#xff1a; 對于樹中的每個節點&#xff0c;其左子樹中的所有節點都小于該節點的值…

【vector模擬實現】附加代碼講解

vector模擬實現 一、看源代碼簡單實現1. push_backcapacity&#xff08;容量&#xff09;sizereserve&#xff08;擴容&#xff09;operator[ ] &#xff08;元素訪問&#xff09; 2. pop_back3. itorator&#xff08;迭代器&#xff09;4.insert & erase &#xff08;頭插…

哈夫曼樹的創建

要了解哈夫曼樹&#xff0c;可以先了解一下哈夫曼編碼&#xff0c;假設我們有幾個字母&#xff0c;他們的出現頻率是A: 1 B: 2 C: 3 D: 4 E: 5 F: 6 G: 7。那么如果想要壓縮數據的同時讓訪問更加快捷&#xff0c;就要讓頻率高的字母離根節點比較進&#xff0c;容易訪問&#xf…

立創·天空星開發板-GD32F407VE-GPIO

本文以 立創天空星開發板-GD32F407VET6-青春版 作為學習的板子&#xff0c;記錄學習筆記。 立創天空星開發板-GD32F407VE-GPIO 基礎概念三極管MOS管 GPIO輸出模式輸出線與GPIO輸入模式GPIO點燈 基礎概念 GPIO&#xff0c;全稱為“通用輸入/輸出”&#xff08;General Purpose …

算法金 | 這次終于能把張量(Tensor)搞清楚了!

大俠幸會&#xff0c;在下全網同名[算法金] 0 基礎轉 AI 上岸&#xff0c;多個算法賽 Top [日更萬日&#xff0c;讓更多人享受智能樂趣] 1. 張量&#xff08;Tensor&#xff09;基礎概念 1.1 張量的定義與重要性 張量是深度學習中用于表示數據的核心結構&#xff0c;它可以視…

《帝國時代 III:決定版》秘籍 怎么在蘋果電腦上玩《帝國時代 III:決定版》

《帝國時代 III&#xff1a;決定版》是一款讓玩家沉浸于歷史長河體驗從大航海時代到工業革命時期的游戲。下面我們來看看《帝國時代 III&#xff1a;決定版》是什么類型的游戲&#xff0c;《帝國時代 III&#xff1a;決定版》Mac安裝教程的相關內容。 一、《帝國時代 III&…

【BOM02】本地存儲

一&#xff1a;什么是本地存儲 數據存儲在用戶瀏覽器中&#xff0c;用戶設置、讀取方便&#xff0c;同時頁面刷新時不會丟失數據。存儲在瀏覽器中數據約5M&#xff0c;分為sessionStorage和localStorage兩種存儲方式 二&#xff1a;localStorage存儲 作用 將數據永久存儲在…

opencv實戰小結-銀行卡號識別

實戰1-銀行卡號識別 項目來源&#xff1a;opencv入門 項目目的&#xff1a;識別傳入的銀行卡照片中的卡號 難點&#xff1a;銀行卡上會有一些干擾項&#xff0c;如何排除這些干擾項&#xff0c;并且打印正確的號碼是一個問題 最終效果如上圖 實現這樣的功能需要以下幾個步驟…

基于Amazon Linux使用pip安裝certbot并使用Apache配置證書的完整步驟

配置證書 1. 更新系統和安裝必要的軟件包 首先&#xff0c;確保系統和包管理器是最新的&#xff1a; sudo dnf update -y sudo dnf install -y python3 python3-pip python3-virtualenv httpd mod_ssl2. 創建并激活虛擬環境 為了避免依賴沖突&#xff0c;使用virtualenv創建…

算法導論實戰(三)(算法導論習題第二十四章)

&#x1f308; 個人主頁&#xff1a;十二月的貓-CSDN博客 &#x1f525; 系列專欄&#xff1a; &#x1f3c0;算法啟示錄 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻擋不了春天的腳步&#xff0c;十二點的黑夜遮蔽不住黎明的曙光 目錄 前言 第二十四章 24.1-3 24.1-4 2…