Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
以下是一個(gè)標(biāo)準(zhǔn)的html結(jié)構(gòu)
html復(fù)制代碼<!DOCTYPE html>
<html>
<head>
<!-- 必須聲明 utf-8 編碼格式 -->
<meta charset="utf-8">
<!-- 頁(yè)面標(biāo)題不能為空 -->
<title>京東商城:商家后臺(tái)</title>
<!-- 移動(dòng)端必須使用 viewport 適配需要, PC 看場(chǎng)景需要使用 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<!-- 樣式文件 以外鏈形式在此處引入 -->
<link href="//static.360buyimg.com/bus/test/shop1_3/UI2.0update.css" rel="stylesheet">
</head>
<body>
<!-- 頁(yè)面主體 -->
<div class="warp">
<header>頂部?jī)?nèi)容區(qū)域,比如:菜單頭</header>
<div class="content">主內(nèi)容區(qū)域</div>
<footer>頂部頁(yè)尾區(qū)域,比如:備案號(hào)</footer>
</div>
<!-- js文件 在此處引入 -->
<script type="text/javascript" src="//wl.jd.com/joya.js"></script>
</body>
</html>
避免多個(gè)框架混合使用,在同一個(gè)工程里面要保持主框架的一致性,多框架同時(shí)使用會(huì)造成代碼混亂,后期會(huì)變得越來(lái)越難維護(hù)。
1、全局樣式禁止使用!important
2、避免使用導(dǎo)入式引入css樣式文件;
css復(fù)制代碼<style type="text/css">
@import url(./demo.css);
</style>
歷史頁(yè)面會(huì)有一些功能下線,在去除頁(yè)面初始化的js語(yǔ)句的同時(shí),也要將依賴的js文件刪除,避免資源加載浪費(fèi)
開啟Gzip壓縮功能, 可以使網(wǎng)站的css、js 、xml、html 文件在傳輸時(shí)進(jìn)行壓縮,提高訪問(wèn)速度
在開發(fā)過(guò)程中,發(fā)現(xiàn)無(wú)用字段占傳輸比例30%以上時(shí),請(qǐng)進(jìn)行返回?cái)?shù)據(jù)的刪減,加快數(shù)據(jù)請(qǐng)求速度
上傳圖片之前一定要做圖片的無(wú)損壓縮,節(jié)省網(wǎng)絡(luò)流量,推薦網(wǎng)站tinypng
html復(fù)制代碼<!DOCTYPE html>
<html>
<head>
<!-- 必須聲明 utf-8 編碼格式 -->
<meta charset="utf-8">
<!-- keywords 關(guān)鍵詞 和 Description 頁(yè)面描述 便于搜索引擎檢索,不強(qiáng)制使用 -->
<meta name="Keywords" Content=”關(guān)鍵詞1,關(guān)鍵詞2,關(guān)鍵詞3,關(guān)鍵詞4″>
<meta name="Description" Content=”頁(yè)面描述″>
<!-- 移動(dòng)端必須使用 viewport 適配需要, PC 看場(chǎng)景需要使用 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<!-- 推薦手動(dòng)引入指定路徑 favicon -->
<link rel="shortcut icon" href="path/to/favicon.ico">
<!-- 樣式文件必須以外鏈形式在此處引入 -->
<link href="//static.360buyimg.com/bus/test/shop1_3/UI2.0update.css" rel="stylesheet">
<!-- 內(nèi)聯(lián)樣式 -->
<style type="text/css">
.warp {
margin: 0;
padding: 0;
}
</style> -->
<!-- 頁(yè)面標(biāo)題不能為空 -->
<title>頁(yè)面標(biāo)題</title>
</head>
<body>
<!-- 頁(yè)面主體 -->
<div class="warp">
<header>頂部?jī)?nèi)容區(qū)域,比如:菜單頭</header>
<div class="content">主內(nèi)容區(qū)域</div>
<footer>頂部頁(yè)尾區(qū)域,比如:備案號(hào)</footer>
</div>
<!-- JavaScript 文件在此處引入 -->
<script type="text/javascript" src="//wl.jd.com/joya.js"></script>
</body>
</html>
原生 HTML 標(biāo)簽元素小寫使用,自定義組件使用小駝峰命名(自定義標(biāo)簽避免和原生標(biāo)簽同名)
html復(fù)制代碼<!-- 錯(cuò)誤 ? -->
<DIV></DIV>
<SPAN></SPAN>
<!-- 正確 ? -->
<div></div>
<p></p>
<!-- 自定義組件 -->
<shareDialog><shareDialog/>
禁止在行內(nèi)元素中嵌套塊級(jí)元素??
html復(fù)制代碼<!-- 錯(cuò)誤的嵌套 ? -->
<span><div></div></span>
<i><p></p></i>
<!-- 正確的嵌套 ? -->
<div><span></span></div>
<p><i></i></p>
更多標(biāo)簽使用規(guī)則介紹請(qǐng)查看尾部附錄
定義屬性賦值時(shí),使用雙引號(hào),禁止單雙引號(hào)混用
html復(fù)制代碼<!-- 錯(cuò)誤的定義 ? -->
<input id="formTitle" type='text' placeholder="請(qǐng)輸入標(biāo)題">
<!-- 正確的定義 ? -->
<input id="formTitle" type="text" placeholder="請(qǐng)輸入標(biāo)題" data="formTitle">
除自閉合標(biāo)簽外,所有標(biāo)簽都需正確的編寫閉合標(biāo)簽
常用自閉合標(biāo)簽: <br />、<col />、<img />、<input />、<link />、<meta />、<keygen />
ID 和 Class 取通用且有意義的名字;
使用連字符 - 作為 ID、Class 名稱界定符 ,不要駝峰命名法和下劃線;
避免選擇器嵌套層級(jí)過(guò)多,盡量少于 3 級(jí);
使用命名空間防止命名沖突,利于維護(hù);
css復(fù)制代碼/* 不推薦: 無(wú)意義 不易理解 */
#yee-1901 {}
#meunBtn {}
.login_input {}
/* 推薦: 明確詳細(xì) */
#gallery {}
#login {}
.login-input {}
.meun-btn {}
css復(fù)制代碼/* 標(biāo)準(zhǔn)的聲明順序 */
.declaration-order {
/* 布局屬性 */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* 盒模型屬性 */
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid #e5e5e5;
border-radius: 3px;
margin: 10px;
float: right;
overflow: hidden;
/* 文本屬性 */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
text-align: center;
/* 視覺屬性 */
background-color: #f5f5f5;
color: #fff;
opacity: .8;
/* 其他屬性 */
cursor: pointer;
}
<img/>標(biāo)簽守則
html復(fù)制代碼<!-- 禁止 src 取值為空 -->
<img src="" />
<!-- 推薦 -->
<img src="xxxx" alt="xxx" style="width:100px;height:100px;" />
尺寸 小于 50 ×?50 的請(qǐng)使用 字體圖標(biāo)(iconfont)或者 將多個(gè)圖標(biāo)合成一張大圖使用(雪碧圖) 尺寸大于 50 ×?50 的圖片,引入前先使用 在線壓縮 對(duì)其進(jìn)行壓縮 ,圖片大小盡量控制在 300kb 以內(nèi)
PC端、移動(dòng)端 推薦使用 2倍圖 (@2x),避免設(shè)備分辨率過(guò)高,圖片顯示失真模糊 如有兼容 iPad 場(chǎng)景等特殊場(chǎng)景,可使用 3倍圖(@3x)
html復(fù)制代碼<img src="//logo@200x200.jpg" alt="xx" style="width:100px;height:100px;"/>
2倍圖: 圖片展示區(qū)域大小 : 圖片實(shí)際尺寸 = 1 :2
無(wú)論使用幾倍圖,圖片大小都需遵守上條限制
如遇圖片倍圖問(wèn)題,可咨詢 @UI童鞋
js復(fù)制代碼/* 推薦用變量保存頻繁使用的 DOM 元素*/
var ul = document.getElementsByTagName('ul')[0],
lis = document.getElementsByTagName('ul')[0].getElementsByTagName('p')
/* 推薦用變量保存頻繁使用的 DOM 元素*/
var ul = document.getElementsByTagName('ul')[0],
lis = ul.getElementsByTagName('li')
1個(gè)頁(yè)面中建議CSS文件不要超過(guò)3個(gè)(1個(gè)組件庫(kù)樣式文件、1個(gè)項(xiàng)目公共樣式、1個(gè)頁(yè)面樣式); JS文件不要超過(guò)5個(gè)(1個(gè)框架文件、1個(gè)組件庫(kù)文件、1個(gè)項(xiàng)目公共庫(kù)文件、1個(gè)頁(yè)面腳本文件、1個(gè)埋點(diǎn)文件)。
縮進(jìn)使用 2個(gè)空格 樣式建議引入 CSS reset 重置各瀏覽器自帶樣式差異 github.com/necolas/nor… JS 中字符串定義 使用 '' 單引號(hào)
保持一定的代碼潔癖,尤其在大型項(xiàng)目中
性能檢測(cè)工具 - Lighthouse簡(jiǎn)介 Lighthouse是一個(gè)Google開源的自動(dòng)化工具,主要用于改進(jìn)網(wǎng)絡(luò)應(yīng)用的質(zhì)量。Lighthouse會(huì)對(duì)各個(gè)測(cè)試項(xiàng)的結(jié)果打分,并給出優(yōu)化建議,這些打分標(biāo)準(zhǔn)和優(yōu)化建議可以視為Google的網(wǎng)頁(yè)最佳實(shí)踐。
Chrome拓展程序 谷歌商店安裝lighthouse后,在右上角或者菜單里點(diǎn)擊圖中圖標(biāo),Options可以配置測(cè)試項(xiàng)目,點(diǎn)擊Generate report即可測(cè)試。
命令行
js復(fù)制代碼<!-- 安裝 lighthouse 組件(Node.js V5.0 或以上版本) -->
npm install -g lighthouse
<!-- 啟動(dòng)測(cè)試 (測(cè)試過(guò)程中會(huì)自動(dòng)打開 Chrome 完成后會(huì)在當(dāng)前目錄生成一個(gè)靜態(tài)HTML文件) -->
lighthouse https://www.baidu.com/ --view
<!-- 幫助-->
lighthouse --help
檢測(cè)結(jié)果
標(biāo)簽 | 語(yǔ)義 | 嵌套常見錯(cuò)誤 | 常用屬性 |
<a></a> | 超鏈接/錨 | a不可嵌套a | href,name,title,rel,target |
<div></div> | 塊級(jí)容器 | ||
<p></p> | 段落 | 不能嵌套塊級(jí)元素 | |
<span></span> | 內(nèi)聯(lián)容器(行內(nèi)元素) | 不可嵌套塊級(jí)容器 | |
<form></form> | 表單 | action,target,method,name | |
<input /> | 輸入框 | 不可嵌套元素 | type,name,value,checked,disabled,maxlength,readonly,accesskey |
<textarea></textarea> | 多行文本輸入控件 | name,accesskey,disabled,readonly,rows,cols | |
<img /> | 圖像 | 不可嵌套元素 | alt,src,width,height |
<label></label> | 標(biāo)簽(常用input元素定義標(biāo)注) | 不可嵌套塊級(jí)容器 | for |
<table></table> | 表格 | 只可嵌套表格子元素 | width,align,background,cellpadding,cellspacing,summary,border |
<tbody></tbody> | 表格主體 | 只能嵌套在table內(nèi) | |
<thead></thead> | 表頭 | 只能嵌套在table內(nèi) | |
<tr></tr> | 表格行 | 嵌套于table或thead、tbody、tfoot | |
<td></td> | 表格中的單元格 | 只用于tr | colspan,rowspan |
<th></th> | 表格中的標(biāo)題單元格 | 只用于tr | colspan,rowspan |
<tfoot></tfoot> | 表格表尾 | 只用于table | |
<button></button> | 按鈕 | 不可嵌套表單、表格等塊級(jí)元素 | type,disabled |
<select></select> | 列表框或下拉框 | 只能嵌套o(hù)ption或optgroup | name,disabled,multiple |
<option></option> | select中的一個(gè)選項(xiàng) | 只能嵌套在select內(nèi) | value,selected,disabled |
<ol></ol> | 有序列表 | 只能嵌套li | |
<ul></ul> | 無(wú)序列表 | 只能嵌套li | |
<li></li> | 無(wú)序列表項(xiàng) | 只能嵌套在 ul 或 ol 內(nèi) | |
<iframe></iframe> | 內(nèi)嵌一個(gè)網(wǎng)頁(yè) | frameborder,width,height,src,scrolling,name | |
<br /> | 換行 | ||
<link /> | 引用樣式或icon | 不可嵌套任何元素 | type,rel,href |
<meta /> | 文檔信息 | 只用于head內(nèi) | content,http-equiv,name |
<script></script> | 引用腳本 | 不可嵌套任何元素 | type,src |
<style></style> | 引用樣式 | 不可嵌套任何元素 | type,media |
<title></title> | 文檔標(biāo)題 | 只用于head內(nèi) |
點(diǎn)贊收藏支持、手留余香、與有榮焉,動(dòng)動(dòng)你發(fā)財(cái)?shù)男∈謫眩兄x各位大佬能留下您的足跡。
作者:StriveToY
鏈接:https://juejin.cn/post/7262378982255394873
1.基本html結(jié)構(gòu)
2.生成div加類名的快捷鍵
3.帶類名的div
4.帶id的div
5.屬性【】
6.后代>
7.兄弟+
8.上級(jí)^
9.乘法*
10.文本{}
注意:這里輸入“!”+回車鍵前,需要清空原來(lái)生成的基本結(jié)構(gòu)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
<div class="list">
<div class="item_1"></div>
<div class="item_2"></div>
<div class="item_3"></div>
<div class="item_4"></div>
<div class="item_5"></div>
<div class="item_6"></div>
</div>
<div class="wrapper"></div>
<div id="wrapper"></div>
<span title="test"></span>
<span title="test"></span>
<div></div>
<p></p>
<span></span>
<div><span></span></div>
<i></i>
<ul>
<li></li>
<li></li>
</ul>
<div><span>這是文本</span></div>
編程領(lǐng)域,代碼規(guī)范是非常重要的,因?yàn)樗鼈冇兄诖_保代碼的清晰性、一致性和可維護(hù)性。不同的編程語(yǔ)言和組織可能有不同的代碼規(guī)范,但以下是一些在各種編程語(yǔ)言中普遍認(rèn)為最常用的代碼規(guī)范:
1. PEP 8:針對(duì)Python語(yǔ)言的官方風(fēng)格指南,它提供了Python代碼的編寫標(biāo)準(zhǔn),包括命名約定、代碼布局、注釋等。
2. Google Python Style Guide:Google為其Python代碼制定了一套風(fēng)格指南,它基于PEP 8,但在某些方面提供了更具體的指導(dǎo)。
3. Airbnb JavaScript Style Guide:Airbnb為JavaScript編寫了一套風(fēng)格指南,它被廣泛使用于JavaScript社區(qū),包括ES5和ES6+的規(guī)則。
4. Prettier:Prettier是一個(gè)代碼格式化工具,它支持多種編程語(yǔ)言,并提供了一套嚴(yán)格的代碼風(fēng)格規(guī)則,以保持代碼的一致性。
5. ESLint:ESLint是一個(gè)用于JavaScript和JSX的代碼質(zhì)量工具,它允許開發(fā)者定義自己的代碼規(guī)范,并幫助檢測(cè)代碼中的潛在問(wèn)題。
6. Ruby Style Guide:由GitHub提供的Ruby風(fēng)格指南,它涵蓋了Ruby編程語(yǔ)言的編碼習(xí)慣和最佳實(shí)踐。
7. Scala Style Guide:由Twitter工程師編寫的Scala風(fēng)格指南,它提供了一套用于Scala編程語(yǔ)言的編碼規(guī)范。
8. CSS Guidelines:Harry Roberts編寫的CSS指南,它提供了一套關(guān)于如何編寫可維護(hù)、可擴(kuò)展和可管理的CSS的規(guī)則。
9. HTML/CSS/JS Coding Conventions:由Google提供的針對(duì)HTML、CSS和JavaScript的編碼約定。
10. The Rust Programming Language:Rust官方文檔中包含了Rust編程語(yǔ)言的風(fēng)格指南。
這些代碼規(guī)范通常包括以下幾個(gè)方面:
- 命名約定:如何命名變量、函數(shù)、類等。
- 代碼布局:如何縮進(jìn)、空格、換行等。
- 注釋和文檔:如何編寫清晰、有用的注釋和文檔。
- 錯(cuò)誤處理:如何處理異常和錯(cuò)誤。
- 代碼組織:如何組織文件和模塊。
遵守這些規(guī)范可以幫助團(tuán)隊(duì)更好地協(xié)作,并使新加入的成員更容易理解現(xiàn)有代碼。此外,許多代碼規(guī)范也被集成到了IDE和編輯器中,以及自動(dòng)化工具中,如代碼格式化器、靜態(tài)分析工具和持續(xù)集成系統(tǒng),以幫助開發(fā)者自動(dòng)遵守這些規(guī)范。
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。