時間：2023-10-03 07:00:01 | 來源：網(wǎng)站運營
時間：2023-10-03 07:00:01 來源：網(wǎng)站運營
Part1 HTML網(wǎng)頁開發(fā) 模塊3：文章內(nèi)容輸出來源：拉勾教育大前端就業(yè)集訓(xùn)營
在線咨詢
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">③CSS分級引入/* 項目公共樣式 *//* -header區(qū)域- */.header{ width: 100%; height: 40px; line-height: 40px; background-color: #32373E;}.header_c{ height: 40px;}/* header 左側(cè) */.header_c .header_left{ float: left;}/* LOGO區(qū)域 */.header_c .header_left .logo{ /* 定位和文檔流 */ float: left; /* 盒模型屬性 */ width: 43px; height: 31px; padding-top: 9px; margin-right: 34px;}.header_c .header_left .logo a{ display: block; width: 100%; height: 21px; background: url(../images/logo.png) no-repeat 0 0; text-indent: -999em; overflow: hidden;}/* 城市選擇 */.header_c .header_left .city{ float: left; width: 110px; margin-right: 34px; cursor:pointer;}.header_c .header_left .city span{ margin-right: 12px; color: #20CA9F;}.header_c .header_left .city i{ font-size: 12px; color: #AFB5C0;}.header_c .header_left .city:hover i{ color: #ffffff;}/* 導(dǎo)航區(qū)域 */.header_c .header_left .nav{ float: left;}.header_c .header_left .nav li{ float: left;}.header_c .header_left .nav li a{ display: block; position: relative; padding: 0 20px; color: #AFB5C0;}.header_c .header_left .nav li a:hover{ color: #ffffff;}.header_c .header_left .nav li.current a{ color: #ffffff; background-color: #000000;}.header_c .header_left .nav li a .tips{ position: absolute; top: 3px; right: -2px; width: 29px; height: 18px; border-radius: 25% / 50%; line-height: 18px; color: #FFFFFF; background-color: #FF7452;}/* header 右側(cè) */.header_c .header_right{ float: right;}.header_c .header_right a{ float: left; color: #AFB5C0;}.header_c .header_right a:hover{ color: #FFF;}.header_c .header_right .upload{ margin-right: 23px;}.header_c .header_right .subscribe{ margin-right: 66px;}.header_c .header_right .login{ position: relative;}.header_c .header_right .login::before{ content: ''; position: absolute; top: 50%; display: block; width: 18px; height: 18px; transform: translate(-26px,-50%); background: url(../images/sprite_01.png) no-repeat -76px -136px;}.header_c .header_right .login:hover::before{ background-position: -76px -174px;}.header_c .header_right span{ float: left; margin: 0 8px; color: #5E5A50;}.header_c .header_right .register{ margin-right: 50px;}.header_c .header_right .app{ position: relative; margin-right: 20px; color: #00C295;}.header_c .header_right .app::before{ content: ''; display: block; position: absolute; top: 50%; width: 12px; height: 18px; transform: translate(-20px,-50%); background: url(../images/sprite_01.png) no-repeat -64px -212px;}.header_c .header_right .app:hover{ color: #8edeaf;}.header_c .header_right .app:hover::before{ background-position: ; background-position: -96px -212px;}header.css<!-- header 區(qū)域開始 --> <div class="header"> <div class="inner_c header_c"> <!-- header 左側(cè) --> <div class="header_left"> <!-- logo 區(qū)域 --> <h1 class="logo"> <a href="index.html">拉勾招聘|專業(yè)|互聯(lián)網(wǎng)|招聘|求職|培訓(xùn)|JAVA|前端</a> </h1> <!-- 城市選擇 --> <div class="city"> <span>全國站</span><i>[切換城市]</i> </div> <!-- 導(dǎo)航區(qū)域 --> <ul class="nav"> <li class="current"><a href="index.html">首頁</a></li> <li><a href="company.html">公司</a></li> <li><a href="school.html">校園招聘</a></li> <li><a href="#">職位</a></li> <li><a href="#">言職</a></li> <li><a href="#">課程<span class="tips">new</span></a></li> </ul> </div> <!-- header 右側(cè) --> <div class="header_right"> <a href="" class="upload">上傳簡歷</a> <a href="" class="subscribe">職位訂閱</a> <a href="" class="login">登錄</a> <span>|</span> <a href="" class="register">注冊</a> <a href="" class="app">拉勾APP</a> <a href="" class="">進入企業(yè)版</a> </div> </div> </div> <!-- header 區(qū)域結(jié)束 -->header of index.html# 代碼規(guī)范## 1. 概述歡迎使用前端代碼規(guī)范， 這里借鑒、引用的是京東前端代碼規(guī)范。遵循代碼規(guī)范的目的在于增強團隊開發(fā)協(xié)作、提高代碼質(zhì)量和打造開發(fā)基石的編碼規(guī)范。以下規(guī)范是團隊基本約定的內(nèi)容，必須嚴格遵循。實際工作中，也可以根據(jù)公司的需求制定自己的代碼規(guī)范。#### HTML規(guī)范基于 [W3C](http://www.w3.org/)、[蘋果開發(fā)者](https://developer.apple.com/) 等官方文檔，并結(jié)合團隊業(yè)務(wù)和開發(fā)過程中總結(jié)的規(guī)范約定，讓頁面HTML代碼更具語義性。#### 圖片規(guī)范了解各種圖片格式特性，根據(jù)特性制定圖片規(guī)范，包括但不限于圖片的質(zhì)量約定、圖片引入方式、圖片合并處理等，旨在從圖片層面優(yōu)化頁面性能。#### CSS規(guī)范統(tǒng)一規(guī)范團隊 CSS 代碼書寫風(fēng)格和使用 CSS 預(yù)編譯語言語法風(fēng)格，提供常用媒體查詢語句和瀏覽器私有屬性引用，并從業(yè)務(wù)層面統(tǒng)一規(guī)范常用模塊的引用。#### 命名規(guī)范從 `目錄`、`圖片`、`HTML/CSS文件`、`ClassName` 的命名等層面約定規(guī)范團隊的命名習(xí)慣，增強團隊代碼的可讀性。#### JavaScript 規(guī)范（暫時不講）統(tǒng)一團隊的 JS 語法風(fēng)格和書寫習(xí)慣，減少程序出錯的概率，其中也包含了 ES6 的語法規(guī)范和最佳實踐。## 2. HTML 規(guī)范### DOCTYPE 聲明HTML文件必須加上 DOCTYPE 聲明，并統(tǒng)一使用 HTML5 的文檔聲明：~~~html<!DOCTYPE html>~~~**HTML5標準模版**```html<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>HTML5標準模版</title> </head> <body> </body></html>```### 頁面語言lang推薦使用屬性值 `cmn-Hans-CN`（簡體, 中國大陸），但是考慮瀏覽器和操作系統(tǒng)的兼容性，目前仍然使用 `zh-CN` 屬性值```<html lang="zh-CN">```更多地區(qū)語言參考：```zh-SG 中文 (簡體, 新加坡) 對應(yīng) cmn-Hans-SG 普通話 (簡體, 新加坡)zh-HK 中文 (繁體, 香港) 對應(yīng) cmn-Hant-HK 普通話 (繁體, 香港)zh-MO 中文 (繁體, 澳門) 對應(yīng) cmn-Hant-MO 普通話 (繁體, 澳門)zh-TW 中文 (繁體, 臺灣) 對應(yīng) cmn-Hant-TW 普通話 (繁體, 臺灣)```### charset 字符集合一般情況下統(tǒng)一使用 “UTF-8” 編碼```<meta charset="UTF-8">```由于歷史原因，有些業(yè)務(wù)可能會使用 “GBK” 編碼```<meta charset="GBK">```請盡量統(tǒng)一寫成標準的 “UTF-8”，不要寫成 “utf-8” 或 “utf8” 或 “UTF8”。根據(jù) [IETF對UTF-8的定義](http://www.ietf.org/rfc/rfc3629)，其編碼標準的寫法是 “UTF-8”；而 UTF8 或 utf8 的寫法只是出現(xiàn)在某些編程系統(tǒng)中，如 .NET framework 的類 System.Text.Encoding 中的一個屬性名就叫 UTF8。### 書寫風(fēng)格#### HTML代碼大小寫HTML標簽名、類名、標簽屬性和大部分屬性值統(tǒng)一用小寫*推薦：*```<div class="demo"></div>```*不推薦：*```<div class="DEMO"></div> <DIV CLASS="DEMO"></DIV>```### 類型屬性不需要為 CSS、JS 指定類型屬性，HTML5 中默認已包含*推薦：*```<link rel="stylesheet" href="" ><script src=""></script>```*不推薦：*```<link rel="stylesheet" type="text/css" href="" ><script type="text/javascript" src="" ></script>```### 元素屬性- 元素屬性值使用雙引號語法- 元素屬性值可以寫上的都寫上*推薦：*```<input type="text"><input type="radio" name="name" checked="checked" >```*不推薦：*```<input type=text> <input type='text'><input type="radio" name="name" checked >```### 特殊字符引用文本可以和字符引用混合出現(xiàn)。這種方法可以用來轉(zhuǎn)義在文本中不能合法出現(xiàn)的字符。在 HTML 中不能使用小于號 “<” 和大于號 “>”特殊字符，瀏覽器會將它們作為標簽解析，若要正確顯示，在 HTML 源代碼中使用字符實體*推薦：*```<a href="#">more>></a>```*不推薦：*```<a href="#">more>></a>```### 代碼縮進統(tǒng)一使用四個空格進行代碼縮進，使得各編輯器表現(xiàn)一致（各編輯器有相關(guān)配置）```<div class="jdc"> <a href="#"></a></div>```### 代碼嵌套元素嵌套規(guī)范，每個塊級元素獨立一行，行內(nèi)元素可選*推薦：*避免行內(nèi)元素的空白折疊現(xiàn)象。```<div> <h1></h1> <p></p></div> <p><span></span><span></span></p>```*不推薦：*```<div> <h1></h1><p></p></div> <p> <span></span> <span></span></p>```段落元素與標題元素只能嵌套行內(nèi)元素*推薦：*```<h1><span></span></h1><p><span></span><span></span></p>```*不推薦：*```<h1><div></div></h1><p><div></div><div></div></p>```## 3. 圖片規(guī)范### 內(nèi)容圖內(nèi)容圖多以商品圖等照片類圖片形式存在，顏色較為豐富，文件體積較大- 優(yōu)先考慮 JPEG 格式，條件允許的話優(yōu)先考慮 WebP 格式- 盡量不使用PNG格式，PNG8 色位太低，PNG24 壓縮率低，文件體積大- **PC平臺單張的圖片的大小不應(yīng)大于 200KB。**### 背景圖背景圖多為圖標等顏色比較簡單、文件體積不大、起修飾作用的圖片- PNG 與 GIF 格式，優(yōu)先考慮使用 PNG 格式,PNG格式允許更多的顏色并提供更好的壓縮率- 圖像顏色比較簡單的，如純色塊線條圖標，優(yōu)先考慮使用 PNG8 格式，避免使用 JPEG 格式- 圖像顏色豐富而且圖片文件不太大的（40KB 以下）或有半透明效果的優(yōu)先考慮 PNG24 格式- 圖像顏色豐富而且文件比較大的（40KB - 200KB）優(yōu)先考慮 JPEG 格式- 條件允許的，優(yōu)先考慮 WebP 代替 PNG 和 JPEG 格式## 4. CSS規(guī)范### 代碼格式化樣式書寫一般有兩種：一種是緊湊格式 (Compact)```.jdc{ display: block;width: 50px;}```一種是展開格式（Expanded）```.jdc { display: block; width: 50px;}```**團隊約定**統(tǒng)一使用展開格式書寫樣式### 代碼大小寫樣式選擇器，屬性名，屬性值關(guān)鍵字全部使用小寫字母書寫，屬性字符串允許使用大小寫。```/* 推薦 */.jdc{ display:block;} /* 不推薦 */.JDC{ DISPLAY:BLOCK;}```### 選擇器- 盡量少用通配符選擇器 `*`- 不使用 ID 選擇器- 不使用無具體語義定義的標簽選擇器```css/* 推薦 */.jdc {}.jdc li {}.jdc li p{}/* 不推薦 */*{}#jdc {}.jdc div{}```### 代碼縮進統(tǒng)一使用四個空格進行代碼縮進，使得各編輯器表現(xiàn)一致（各編輯器有相關(guān)配置）```.jdc { width: 100%; height: 100%;}```### 分號每個屬性聲明末尾都要加分號；```.jdc { width: 100%; height: 100%;}```### 代碼易讀性左括號與類名之間一個空格，冒號與屬性值之間一個空格*推薦：*```.jdc { width: 100%; }```*不推薦：*```.jdc{ width:100%;}```逗號分隔的取值，逗號之后一個空格*推薦：*```.jdc { box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;}```*不推薦：*```.jdc { box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;}```為單個css選擇器或新申明開啟新行*推薦：*```css.jdc, .jdc_logo, .jdc_hd { color: #ff0;}.nav{ color: #fff;}```*不推薦：*```css.jdc,jdc_logo,.jdc_hd { color: #ff0;}.nav{ color: #fff;}```顏色值 `rgb()` `rgba()` `hsl()` `hsla()` `rect()` 中不需有空格，且取值不要帶有不必要的 0*推薦：*```.jdc { color: rgba(255,255,255,.5);}```*不推薦：*```.jdc { color: rgba( 255, 255, 255, 0.5 );}```屬性值十六進制數(shù)值能用簡寫的盡量用簡寫*推薦：*```.jdc { color: #fff;}```*不推薦：*```css.jdc { color: #ffffff;}```不要為 `0` 指明單位*推薦：*```css.jdc { margin: 0 10px;}```*不推薦：*```css.jdc { margin: 0px 10px;}```### 屬性值引號css屬性值需要用到引號時，統(tǒng)一使用單引號```css/* 推薦 */.jdc { font-family: 'Hiragino Sans GB';}/* 不推薦 */.jdc { font-family: "Hiragino Sans GB";}```### 屬性書寫順序建議遵循以下順序：1. 布局定位屬性：display / position / float / clear / visibility / overflow（建議 display 第一個寫，畢竟關(guān)系到模式）2. 自身屬性：width / height / margin / padding / border / background3. 文本屬性：color / font / text-decoration / text-align / vertical-align / white- space / break-word4. 其他屬性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …```css.jdc { display: block; position: relative; float: left; width: 100px; height: 100px; margin: 0 10px; padding: 20px 0; background: rgba(0,0,0,.5); font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; color: #333; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px;}```[mozilla官方屬性順序推薦](https://www.mozilla.org/css/base/content.css)## 命名規(guī)范由歷史原因及個人習(xí)慣引起的 DOM 結(jié)構(gòu)、命名不統(tǒng)一，導(dǎo)致不同成員在維護同一頁面時，效率低下，迭代、維護成本極高。### 目錄命名* 項目文件夾：lagou* 樣式文件夾：css* 腳本文件夾：js* 樣式類圖片文件夾：img* 產(chǎn)品類圖片文件夾： upload* 字體類文件夾： fonts### ClassName命名ClassName的命名應(yīng)該盡量精短、明確，必須以**字母開頭命名**，且**全部字母為小寫**，單詞之間**統(tǒng)一使用下劃線** “_” 連接.nav_top#### 常用命名推薦**注意**：ad、banner、gg、guanggao 等有機會和廣告掛勾的不建議直接用來做ClassName，因為有些瀏覽器插件（Chrome的廣告攔截插件等）會直接過濾這些類名，因此```<div class="ad"></div>```這種廣告的英文或拼音類名不應(yīng)該出現(xiàn)另外，**敏感不和諧字眼**也不應(yīng)該出現(xiàn)，如：```<div class="fuck"></div><div class="jer"></div><div class="sm"></div><div class="gcd"></div> <div class="ass"></div> <div class="KMT"></div> ...```| ClassName | 含義 || ---------------------- | -------------------- || about | 關(guān)于 || account | 賬戶 || arrow | 箭頭圖標 || article | 文章 || aside | 邊欄 || audio | 音頻 || avatar | 頭像 || bg,background | 背景 || bar | 欄（工具類） || branding | 品牌化 || crumb,breadcrumbs | 面包屑 || btn,button | 按鈕 || caption | 標題，說明 || category | 分類 || chart | 圖表 || clearfix | 清除浮動 || close | 關(guān)閉 || col,column | 列 || comment | 評論 || community | 社區(qū) || container | 容器 || content | 內(nèi)容 || copyright | 版權(quán) || current | 當前態(tài)，選中態(tài) || default | 默認 || description | 描述 || details | 細節(jié) || disabled | 不可用 || entry | 文章，博文 || error | 錯誤 || even | 偶數(shù)，常用于多行列表或表格中 || fail | 失?。ㄌ崾荆? || feature | 專題 || fewer | 收起 || field | 用于表單的輸入?yún)^(qū)域 || figure | 圖 || filter | 篩選 || first | 第一個，常用于列表中 || footer | 頁腳 || forum | 論壇 || gallery | 畫廊 || group | 模塊，清除浮動 || header | 頁頭 || help | 幫助 || hide | 隱藏 || hightlight | 高亮 || home | 主頁 || icon | 圖標 || info,information | 信息 || last | 最后一個，常用于列表中 || links | 鏈接 || login | 登錄 || logout | 退出 || logo | 標志 || main | 主體 || menu | 菜單 || meta | 作者、更新時間等信息欄，一般位于標題之下 || module | 模塊 || more | 更多（展開） || msg,message | 消息 || nav,navigation | 導(dǎo)航 || next | 下一頁 || nub | 小塊 || odd | 奇數(shù)，常用于多行列表或表格中 || off | 鼠標離開 || on | 鼠標移過 || output | 輸出 || pagination | 分頁 || pop,popup | 彈窗 || preview | 預(yù)覽 || previous | 上一頁 || primary | 主要 || progress | 進度條 || promotion | 促銷 || rcommd,recommendations | 推薦 || reg,register | 注冊 || save | 保存 || search | 搜索 || secondary | 次要 || section | 區(qū)塊 || selected | 已選 || share | 分享 || show | 顯示 || sidebar | 邊欄，側(cè)欄 || slide | 幻燈片，圖片切換 || sort | 排序 || sub | 次級的，子級的 || submit | 提交 || subscribe | 訂閱 || subtitle | 副標題 || success | 成功（提示） || summary | 摘要 || tab | 標簽頁 || table | 表格 || txt,text | 文本 || thumbnail | 縮略圖 || time | 時間 || tips | 提示 || title | 標題 || video | 視頻 || wrap | 容器，包，一般用于最外層 || wrapper | 容器，包，一般用于最外層 |<div class="content"> <div class="left"> <p>左側(cè)盒子寬度自適應(yīng)內(nèi)容寬度</p> <img src="images/smile01.jpg" alt=""> </div> <div class="right"> <p>右側(cè)盒子占有父級剩余的寬度部分</p> </div> </div> * { margin: 0; padding: 0; } .content { width: 1000px; height: 500px; background-color: lightblue; } .left { float: left; background-color: pink; } .left img { width: 400px; } .right { height: 300px; /* 觸發(fā) BFC，不會與浮動的元素重疊 */ overflow: hidden; background-color: lightyellow; }<div class="container"> <div class="center"> <h2>圣杯布局，中間自適應(yīng)寬度</h2> </div> <div class="left">左側(cè)固定寬度</div> <div class="right">右側(cè)固定寬度</div> </div>* { margin: 0; padding: 0; } .container { position: relative; box-sizing: border-box; max-width: 1500px; height: 500px; /* 用內(nèi)邊距為左右固定的兩個子元素留取空位 */ padding-left: 200px; padding-right: 200px; margin: 0 auto; background-color: lightyellow; } /* 定位在左側(cè)，padding 區(qū)域 */ .left { position: absolute; left: 0; top: 0; width: 190px; height: 300px; background: skyblue; } /* 定位在右側(cè)，padding 區(qū)域 */ .center { width: 100%; height: 400px; background: yellowgreen; } .right { position: absolute; right: 0; top: 0; width: 190px; height: 400px; background: skyblue; }③等高布局 <div class="container"> <div class="center"> <h2>登高布局，中間自適應(yīng)寬度，自身高度決定父級高度</h2> </div> <div class="left">左側(cè)固定寬度，高度自動等于中間內(nèi)容高度</div> <div class="right">右側(cè)固定寬度，高度自動等于中間內(nèi)容高度</div> </div>* { margin: 0; padding: 0; } .container { position: relative; box-sizing: border-box; max-width: 1500px; /* 父級不設(shè)置高度，被中間標準流內(nèi)容撐開 */ /* 用內(nèi)邊距為左右固定的兩個子元素留取空位 */ padding-left: 200px; padding-right: 200px; margin: 0 auto; background-color: lightyellow; } /* 定位在左側(cè)，padding 區(qū)域 */ .left { position: absolute; left: 0; top: 0; width: 190px; /* 高度設(shè)置為父級的 100%，與父級共同變化 */ height: 100%; background: skyblue; } /* 定位在右側(cè)，padding 區(qū)域 */ .center { width: 100%; height: 400px; background: yellowgreen; } .right { position: absolute; right: 0; top: 0; width: 190px; height: 100%; background: skyblue; }④粘連布局<div class="wrapper"> <div class="main"> <p>主體內(nèi)容 1</p> <p>主體內(nèi)容 2</p> <p>主體內(nèi)容 3</p> </div> </div> <div class="footer">底部</div> * { margin: 0; padding: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; padding-bottom: 100px; box-sizing: border-box; background: lightyellow; text-align: center; overflow: hidden; } .wrapper .main { background-color: skyblue; } .wrapper .main p { height: 100px; } .footer { height: 100px; margin-top: -100px; line-height: 50px; background: pink; text-align: center; } 關(guān)鍵詞：
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
