整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
以下是一個標準的html結構
html復制代碼<!DOCTYPE html>
<html>
<head>
<!-- 必須聲明 utf-8 編碼格式 -->
<meta charset="utf-8">
<!-- 頁面標題不能為空 -->
<title>京東商城:商家后臺</title>
<!-- 移動端必須使用 viewport 適配需要, PC 看場景需要使用 -->
<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>
<!-- 頁面主體 -->
<div class="warp">
<header>頂部內容區域，比如：菜單頭</header>
<div class="content">主內容區域</div>
<footer>頂部頁尾區域，比如：備案號</footer>
</div>
<!-- js文件 在此處引入 -->
<script type="text/javascript" src="//wl.jd.com/joya.js"></script>
</body>
</html>
避免多個框架混合使用，在同一個工程里面要保持主框架的一致性，多框架同時使用會造成代碼混亂，后期會變得越來越難維護。
1、全局樣式禁止使用!important
2、避免使用導入式引入css樣式文件；
css復制代碼<style type="text/css">
@import url(./demo.css);
</style>
歷史頁面會有一些功能下線，在去除頁面初始化的js語句的同時，也要將依賴的js文件刪除，避免資源加載浪費
開啟Gzip壓縮功能， 可以使網站的css、js 、xml、html 文件在傳輸時進行壓縮，提高訪問速度
在開發過程中，發現無用字段占傳輸比例30%以上時，請進行返回數據的刪減，加快數據請求速度
上傳圖片之前一定要做圖片的無損壓縮，節省網絡流量,推薦網站tinypng
html復制代碼<!DOCTYPE html>
<html>
<head>
<!-- 必須聲明 utf-8 編碼格式 -->
<meta charset="utf-8">
<!-- keywords 關鍵詞 和 Description 頁面描述 便于搜索引擎檢索，不強制使用 -->
<meta name="Keywords" Content=”關鍵詞1,關鍵詞2,關鍵詞3,關鍵詞4″>
<meta name="Description" Content=”頁面描述″>
<!-- 移動端必須使用 viewport 適配需要, PC 看場景需要使用 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<!-- 推薦手動引入指定路徑 favicon -->
<link rel="shortcut icon" href="path/to/favicon.ico">
<!-- 樣式文件必須以外鏈形式在此處引入 -->
<link href="//static.360buyimg.com/bus/test/shop1_3/UI2.0update.css" rel="stylesheet">
<!-- 內聯樣式 -->
<style type="text/css">
.warp {
margin: 0;
padding: 0;
}
</style> -->
<!-- 頁面標題不能為空 -->
<title>頁面標題</title>
</head>
<body>
<!-- 頁面主體 -->
<div class="warp">
<header>頂部內容區域，比如：菜單頭</header>
<div class="content">主內容區域</div>
<footer>頂部頁尾區域，比如：備案號</footer>
</div>
<!-- JavaScript 文件在此處引入 -->
<script type="text/javascript" src="//wl.jd.com/joya.js"></script>
</body>
</html>
原生 HTML 標簽元素小寫使用，自定義組件使用小駝峰命名（自定義標簽避免和原生標簽同名）
html復制代碼<!-- 錯誤 ? -->
<DIV></DIV>
<SPAN></SPAN>
<!-- 正確 ? -->
<div></div>
<p></p>
<!-- 自定義組件 -->
<shareDialog><shareDialog/>
禁止在行內元素中嵌套塊級元素??
html復制代碼<!-- 錯誤的嵌套 ? -->
<span><div></div></span>
<i><p></p></i>
<!-- 正確的嵌套 ? -->
<div><span></span></div>
<p><i></i></p>
更多標簽使用規則介紹請查看尾部附錄
定義屬性賦值時，使用雙引號，禁止單雙引號混用
html復制代碼<!-- 錯誤的定義 ? -->
<input id="formTitle" type='text' placeholder="請輸入標題">
<!-- 正確的定義 ? -->
<input id="formTitle" type="text" placeholder="請輸入標題" data="formTitle">
除自閉合標簽外，所有標簽都需正確的編寫閉合標簽
常用自閉合標簽： <br />、<col />、<img />、<input />、<link />、<meta />、<keygen />
ID 和 Class 取通用且有意義的名字；
使用連字符 - 作為 ID、Class 名稱界定符 ，不要駝峰命名法和下劃線；
避免選擇器嵌套層級過多，盡量少于 3 級；
使用命名空間防止命名沖突，利于維護；
css復制代碼/* 不推薦: 無意義 不易理解 */
#yee-1901 {}
#meunBtn {}
.login_input {}
/* 推薦: 明確詳細 */
#gallery {}
#login {}
.login-input {}
.meun-btn {}
css復制代碼/* 標準的聲明順序 */
.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/>標簽守則
html復制代碼<!-- 禁止 src 取值為空 -->
<img src="" />
<!-- 推薦 -->
<img src="xxxx" alt="xxx" style="width:100px;height:100px;" />
尺寸 小于 50 ×?50 的請使用 字體圖標（iconfont）或者 將多個圖標合成一張大圖使用（雪碧圖） 尺寸大于 50 ×?50 的圖片，引入前先使用 在線壓縮 對其進行壓縮 ，圖片大小盡量控制在 300kb 以內
PC端、移動端 推薦使用 2倍圖 (@2x），避免設備分辨率過高，圖片顯示失真模糊 如有兼容 iPad 場景等特殊場景，可使用 3倍圖（@3x）
html復制代碼<img src="//logo@200x200.jpg" alt="xx" style="width:100px;height:100px;"/>
2倍圖： 圖片展示區域大小 : 圖片實際尺寸 = 1 ：2
無論使用幾倍圖，圖片大小都需遵守上條限制
如遇圖片倍圖問題，可咨詢 @UI童鞋
js復制代碼/* 推薦用變量保存頻繁使用的 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個頁面中建議CSS文件不要超過3個（1個組件庫樣式文件、1個項目公共樣式、1個頁面樣式）； JS文件不要超過5個（1個框架文件、1個組件庫文件、1個項目公共庫文件、1個頁面腳本文件、1個埋點文件）。
縮進使用 2個空格 樣式建議引入 CSS reset 重置各瀏覽器自帶樣式差異 github.com/necolas/nor… JS 中字符串定義 使用 '' 單引號
保持一定的代碼潔癖，尤其在大型項目中
性能檢測工具 - Lighthouse簡介 Lighthouse是一個Google開源的自動化工具，主要用于改進網絡應用的質量。Lighthouse會對各個測試項的結果打分，并給出優化建議，這些打分標準和優化建議可以視為Google的網頁最佳實踐。
Chrome拓展程序 谷歌商店安裝lighthouse后，在右上角或者菜單里點擊圖中圖標，Options可以配置測試項目，點擊Generate report即可測試。
命令行
js復制代碼<!-- 安裝 lighthouse 組件（Node.js V5.0 或以上版本） -->
npm install -g lighthouse
<!-- 啟動測試 （測試過程中會自動打開 Chrome 完成后會在當前目錄生成一個靜態HTML文件） -->
lighthouse https://www.baidu.com/ --view
<!-- 幫助-->
lighthouse --help
檢測結果
標簽 | 語義 | 嵌套常見錯誤 | 常用屬性 |
<a></a> | 超鏈接/錨 | a不可嵌套a | href,name,title,rel,target |
<div></div> | 塊級容器 | ||
<p></p> | 段落 | 不能嵌套塊級元素 | |
<span></span> | 內聯容器（行內元素） | 不可嵌套塊級容器 | |
<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> | 標簽（常用input元素定義標注） | 不可嵌套塊級容器 | for |
<table></table> | 表格 | 只可嵌套表格子元素 | width,align,background,cellpadding,cellspacing,summary,border |
<tbody></tbody> | 表格主體 | 只能嵌套在table內 | |
<thead></thead> | 表頭 | 只能嵌套在table內 | |
<tr></tr> | 表格行 | 嵌套于table或thead、tbody、tfoot | |
<td></td> | 表格中的單元格 | 只用于tr | colspan,rowspan |
<th></th> | 表格中的標題單元格 | 只用于tr | colspan,rowspan |
<tfoot></tfoot> | 表格表尾 | 只用于table | |
<button></button> | 按鈕 | 不可嵌套表單、表格等塊級元素 | type,disabled |
<select></select> | 列表框或下拉框 | 只能嵌套option或optgroup | name,disabled,multiple |
<option></option> | select中的一個選項 | 只能嵌套在select內 | value,selected,disabled |
<ol></ol> | 有序列表 | 只能嵌套li | |
<ul></ul> | 無序列表 | 只能嵌套li | |
<li></li> | 無序列表項 | 只能嵌套在 ul 或 ol 內 | |
<iframe></iframe> | 內嵌一個網頁 | frameborder,width,height,src,scrolling,name | |
<br /> | 換行 | ||
<link /> | 引用樣式或icon | 不可嵌套任何元素 | type,rel,href |
<meta /> | 文檔信息 | 只用于head內 | content,http-equiv,name |
<script></script> | 引用腳本 | 不可嵌套任何元素 | type,src |
<style></style> | 引用樣式 | 不可嵌套任何元素 | type,media |
<title></title> | 文檔標題 | 只用于head內 |
點贊收藏支持、手留余香、與有榮焉，動動你發財的小手喲，感謝各位大佬能留下您的足跡。
作者：StriveToY
鏈接：https://juejin.cn/post/7262378982255394873
第01階段.前端基礎.盒子模型
css學習三大重點： css 盒子模型 、 浮動 、 定位
主題思路：
目標：
網頁布局中，我們是如何把里面的文字，圖片，按照美工給我們的效果圖排列的整齊有序呢？
我們明白了，盒子是網頁布局的關鍵點，所以我們更應該弄明白 這個盒子有什么特點。
標準盒子模型
border : border-width || border-style || border-color 屬性 | 作用 |
border-width | 定義邊框粗細，單位是px |
border-style | 邊框的樣式 |
border-color | 邊框顏色 |
border : border-width || border-style || border-color 例如：
border: 1px solid red; 沒有順序 很多情況下，我們不需要指定4個邊框，我們是可以單獨給4個邊框分別指定的。
上邊框 | 下邊框 | 左邊框 | 右邊框 |
border-top-style:樣式; | border-bottom-style:樣式; | border-left-style:樣式; | border-right-style:樣式; |
border-top-width:寬度; | border- bottom-width:寬度; | border-left-width:寬度; | border-right-width:寬度; |
border-top-color:顏色; | border- bottom-color:顏色; | border-left-color:顏色; | border-right-color:顏色; |
border-top:寬度 樣式 顏色; | border-bottom:寬度 樣式 顏色; | border-left:寬度 樣式 顏色; | border-right:寬度 樣式 顏色; |
<style>
table {
width: 500px;
height: 300px;
border: 1px solid red;
}
td {
border: 1px solid red;
text-align: center;
}
table, td {
border-collapse: collapse; /*合并相鄰邊框*/
}
</style>padding屬性用于設置內邊距。 是指 邊框與內容之間的距離。
屬性 | 作用 |
padding-left | 左內邊距 |
padding-right | 右內邊距 |
padding-top | 上內邊距 |
padding-bottom | 下內邊距 |
當我們給盒子指定padding值之后， 發生了2件事情：
注意： 后面跟幾個數值表示的意思是不一樣的。
我們分開寫有點麻煩，我們可以不可以簡寫呢？
值的個數 | 表達意思 |
1個值 | padding：上下左右內邊距; |
2個值 | padding: 上下內邊距 左右內邊距 ； |
3個值 | padding：上內邊距 左右內邊距 下內邊距； |
4個值 | padding: 上內邊距 右內邊距 下內邊距 左內邊距 ； |
新浪導航欄的核心就是因為里面的字數不一樣多，所以我們不方便給寬度，還是給padding ，撐開盒子的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新浪導航欄案例</title>
<style>
/*清除元素默認的內外邊距*/
* {
margin: 0;
padding: 0;
}
.nav {
height: 41px;
background-color: #FCFCFC;
/*上邊框*/
border-top: 3px solid #FF8500;
/*下邊框*/
border-bottom: 1px solid #EDEEF0;
}
.nav a {
/*轉換為行內塊*/
display: inline-block;
height: 41px;
line-height: 41px;
color: #4C4C4C;
/*代表 上下是 0 左右是 20 內邊距*/
padding: 0 20px;
/*background-color: pink;*/
text-decoration: none;
font-size: 12px;
}
.nav a:hover {
background-color: #eee;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">設為首頁</a>
<a href="#">手機新浪網</a>
<a href="#">移動客戶端</a>
<a href="#">博客</a>
<a href="#">微博</a>
<a href="#">關注我</a>
</div>
</body>
</html> <style>
div {
width: 180px;
height: 200px;
background-color: pink;
/*添加10px 內邊距 左右 上下*/
padding: 10px;
/*盒子的實際大小 = 內容寬度 高度 + 內邊距 + 邊框*/
/* = 200 + 20 + 0
= 220 */
/*解決的方法：
內邊距一定要給的， 我們只能改變 內容寬度 width 讓他減去 多出來的內邊距就可以了*/
/*200 - 20 = 180 */
}
</style>如果沒有給一個盒子指定寬度， 此時，如果給這個盒子指定padding， 則不會撐開盒子。
margin屬性用于設置外邊距。 margin就是控制盒子和盒子之間的距離
屬性 | 作用 |
margin-left | 左外邊距 |
margin-right | 右外邊距 |
margin-top | 上外邊距 |
margin-bottom | 下外邊距 |
margin值的簡寫 （復合寫法）代表意思 跟 padding 完全相同。
實際工作中常用這種方式進行網頁布局，示例代碼如下：
.header{ width:960px; margin:0 auto;}常見的寫法，以下下三種都可以。
text-align: center; /* 文字 行內元素 行內塊元素水平居中 */
margin: 10px auto; /* 塊級盒子水平居中 左右margin 改為 auto 就闊以了 上下margin都可以 */ img {
width: 200px;/* 插入圖片更改大小 width 和 height */
height: 210px;
margin-top: 30px; /* 插入圖片更改位置 可以用margin 或padding 盒模型 */
margin-left: 50px; /* 插入當圖片也是一個盒子 */
}
div {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;
background-position: 30px 50px; /* 背景圖片更改位置 我用 background-position */
}為了更靈活方便地控制網頁中的元素，制作網頁時，我們需要將元素的默認內外邊距清除
代碼：
* {
padding:0; /* 清除內邊距 */
margin:0; /* 清除外邊距 */
}注意：
使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合并。
解決方案：盡量給只給一個盒子添加margin值。
解決方案：
還有其他方法，比如浮動、固定、絕對定位的盒子不會有問題，后面咱們再總結。。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
width: 500px;
height: 500px;
background-color: pink;
/*嵌套關系 垂直外邊距合并 解決方案 */
/*1. 可以為父元素定義上邊框 transparent 透明*/
/*border-top: 1px solid transparent;*/
/*2. 可以給父級指定一個 上 padding值*/
/*padding-top: 1px; */
/*3. 可以為父元素添加overflow:hidden。*/
overflow: hidden;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>我們根據穩定性來分，建議如下：
按照 優先使用 寬度 （width） 其次 使用內邊距（padding） 再次 外邊距（margin）。
width > padding > margin 因為網頁美工大部分效果圖都是利用ps 來做的，所以，以后我們大部分切圖工作都是在ps里面完成。
無序和有序列表前面默認的列表樣式，在不同瀏覽器顯示效果不一樣，而且也比較難看，所以，我們一般上來就直接去掉這些列表樣式就行了。 代碼如下
li { list-style: none; }以下我們講的CSS3部分新屬性， 但是我們遵循的原則是，以下內容，不會影響我們頁面布局， 只是樣式更好看了而已。
border-radius:length; <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/*border-radius: 100px;*/
border-radius: 50%;
}
p {
width: 100px;
height: 20px;
background-color: red;
font-size: 12px;
color: #fff;
text-align: center;
line-height: 20px;
border-radius: 10px;
}
</style>
</head>
<body>
<div> </div>
<p> 特價 免費送 </p>
</body>
</html>box-shadow:水平陰影 垂直陰影 模糊距離（虛實） 陰影尺寸（影子大小） 陰影顏色 內/外陰影；div {
width: 200px;
height: 200px;
border: 10px solid red;
/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); */
/* box-shadow:水平位置 垂直位置 模糊距離 陰影尺寸（影子大小） 陰影顏色 內/外陰影； */
box-shadow: 0 15px 30px rgba(0, 0, 0, .4);
}開始就形成良好的書寫規范，是你專業的開始。
【強制】 選擇器 與 { 之間必須包含空格。
示例：
樂對于電影的意義
人類分成兩種，其中一種聽過梁靜茹的《小手拉大手》。再其中，有的知道了旅游勝地關島，有的知道了電影《貓的報恩》。
在我看來，這是一部關于高處告白的電影。
高處不勝寒，先來一份“茹隔三秋”的勇氣拼盤。
“茹隔三秋”
2002年7月，勇氣在高處。
https://v.qq.com/x/page/i0023rqw0wt.html
風になる
2002年11月，勇氣在單車。
https://v.qq.com/x/page/v0333p8ar98.html
專注
2006年10月，勇氣在白馬。
https://v.qq.com/x/page/p0510t3ml91.html
小手拉大手
曲棍網球
有人從歌曲中知道了關島，我從這部電影中知道了曲棍網球。
它的英文是lacrosse,，源自加拿大法語“la crosse”，字面義為曲棍。“網”呢？也許會被不屑的回答：還用問？就像空氣、陽光和水一樣，不用說也有網。
如詞源所示，這項運動由在加拿大說法語的人命名。想象一下，公元前10世紀，在紐約這個地方，成百上千的原住民嗨上三天兩夜玩這個。
[1]
現代曲棍網球一般每隊12人，用時60分鐘。在日本，這是一項相對年輕的運動。2004年，《貓的報恩》上映兩年后，日韓港澳——這里是澳洲，不是澳門——才成立了亞太曲棍網球聯盟。
男爵家族
和曲棍網球一樣歷史悠久的，是貓男爵的姓。ジッキンゲン，英文為Gikkingen，可以追溯到Sickingen，18世紀德國西南一個貴族家族。
[2]
這個家族在20世紀已然消失，而電影中，有情貓將成眷屬。
只是兩位天臺告白時，有沒有人記得畫中的Louise？
[1] https://en.wikipedia.org/wiki/Lacrosse ?[2] https://en.wikipedia.org/wiki/House_of_Sickingen ?
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
