一個頁面仔必備的知識清單

時間 2020-06-27

標籤一個頁面必備知識清單简体版

原文原文鏈接

一個頁面仔必備的知識清單

「適合人羣：對頁面仔感興趣的後端小哥哥」css

「觀看時間：30min」html

「本文主要梳理一些前端畫界面的一些必會 css 屬性和技巧，讀完以後並不能讓你成爲你的界面畫的很快很美，但能讓你知道畫界面學會這些就夠了。想要很快很美，實戰/練習，逃不掉的~」前端

前言

界面是軟件開發直接展現給客戶的東西，畫的巨醜就會被噴，畫的慢，影響進度；因此畫界面在軟件開發中仍是蠻重要的，畫好一個界面除了界面美觀，代碼也要美觀，還有瀏覽器兼容，各分辨率的適配問題，好難啊，有點寫不下去了~vue

html 元素

有人說界面元素皆可 div，事實上是這樣的，可是常見的一些元素仍是儘可能掌握，畢竟仍是有區別~html5

<!-- html5標準網頁聲明 -->
<!DOCTYPE html> <!-- 一個頁面就是一個html，瀏覽器會根據內部html解析器解析html標籤顯示內容 --> <html lang="en"> <!-- 頭部，引入css，設置頁面標題，瀏覽器控制等 --> <head>  <meta charset="UTF-8">  <!-- 瀏覽器的一些控制項 -->  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>瀏覽器顯示的標題</title> </head> <!-- 內容部門，頁面元素繪製區域 --> <body>  <!-- 一個塊級元素 這就是有人說的元素皆可div -->  <div></div>  <!-- 無序列表 -->  <ul>  <li></li>  </ul>  <!-- 有序列表 -->  <ol>  <li></li>  </ol>  <!-- 表格 -->  <table>  <th></th>  <td></td>  </table>  <!-- 超連接 -->  <a href="" target="_black"></a>  <!-- 圖片 -->  <img src="" alt="">  <!-- 經常使用行元素標籤 -->  <span></span>  <!-- 加粗的經常使用行元素標籤 -->  <strong></strong>  <!-- 斜體的經常使用行元素標籤 -->  <i></i>  <!-- 標題 -->  <h1></h1>  <h2></h2>  <!-- 段落 -->  <p></p>  <!-- 下標上表 -->  <sup></sup>  <sub></sub>  <!-- 表單 -->  <form action="">  <!-- 輸入框 有不少類型 常見的文本/郵件/數字/文件等 -->  <input type="text">  <!-- 下拉選擇 -->  <select name="" id="">  <option value=""></option>  </select>  <!-- 按鈕 -->  <button></button>  </form> </body> </html> 複製代碼

這些都是基礎的 html 元素標籤，若是你對哪一個標籤不太理解的，百度一下react

還有一些 html5 之後的語義化標籤，語義化標籤的做用呢，一是語義化，表達含義，二是利於瀏覽器引擎搜索，那麼有哪些呢，經常使用的：jquery

<!-- 頭部 -->
<header>  <!-- 導航 -->  <nav></nav> </header> <!-- 主題部分 --> <main>  <!-- 一個內容塊，div的抽象 -->  <section></section>  <!-- 專門放圖片的 -->  <figure></figure>  <!-- 視頻 -->  <video src=""></video>  <!-- 音頻 -->  <audio src=""></audio> </main> <!-- 底部 --> <footer></footer> 複製代碼

語義化的標籤還有不少，要詳細瞭解的自行百度，這裏列出來的是一些我經常使用的，那麼還有 H5 一些 API，geolocation(獲取位置) / WebSocket(實時通訊) / localStorage(本地存儲) / sessionStorage(會話存儲) / worker(線程) , 自行了解吧es6

CSS 屬性

css 屬性就更多了，關鍵在於記住和練習，記住（背單詞/運用），練習（最好直接實戰，沒有機會就本身私下練習）,因爲太多了這邊按照重要程度分組吧web

最經常使用的一些樣式屬性

/* 字體大小 * 單位：像素px 百分比% 基於瀏覽器rem 基於父標籤em vw基於總寬度 vh基於總高度 */ font-size: 20px; /* 字體加粗 */ font-weight: bold; /* 字體類型 我平時用的平方 */ font-family: '微軟雅黑'; /* 文本對齊方式 左中右 */ text-align: center; /* 字體間距 */ letter-spacing: 2px; /* 是否容許字體換行 經常使用來文本過長省略... */ white-space: nowrap; /* 文本溢出... */ text-overflow: ellipsis; /* 行高，一般設置行元素的高居中 */ line-height: 200px; /* 寬度，只有塊元素和行內塊元素能夠設置寬高，行元素沒法設置寬高 */ width: 200px; /* 高度 */ height: 200px; /* 顏色 支持rgb rgba 16進制 HSL */ color: red; /* 透明度 0-1 */ opacity: 1; /* 背景顏色/圖片等總屬性 縮寫自行百度 */ background: red; /* 背景圖 */ background-image: url('./name.png'); /* 設置背景圖自適應的方法（不會變形的） */ background-position: center; background-size: cover; background-repeat: no-repeat; /* 內邊距 - 元素邊框距離內容的距離，若是設置了box-sizing: border-box;則元素的寬高 = 內容寬高+內邊距+邊框的高度 */ padding: 20px; /* 外邊距 - 元素邊框距離其它元素的距離*/ margin: 20px; /* 邊框 中間的屬性能夠改變邊框的類型，支持虛線，點線等 */ border: 1px solid red; /* 邊框圓角 */ border-radius: 5px; /* 陰影，前兩個值分別是水平和垂直的偏移，第三個值是陰影的大小 顏色就不用說了 */ box-shadow: 0 0 2px red; /* 設置盒子模型的大小爲 內容寬高+內邊距+邊框的高度 */ box-sizing: border-box; /* 內容益處操做，經常使用的有移除和出滾動條 */ overflow: hidden; /* 浮動 經常使用左浮動右浮動 浮動的元素會脫離文檔流，即沒有了寬高，父容器寬高難以控制，因此咱們通常會清除浮動 */ /* 清除浮動的方法不少，自行學習，我用的是父元素添加僞類元素的方式 */ float: left; /* 清除浮動 */ clear: both; /* 定位 - 經常使用的相對定位 固定定位 絕對定位 三種具體怎麼定位的，嘗試一下，不嘗試說也說不清楚*/ position: relative; /* 設置元素的類型 經常使用的：行元素/行內塊元素/塊元素 - 好像是H5出來的吧 彈性佈局flex - 目前佈局基本均可以用它解決了 */ display: inline; /* 彈性佈局 */ display: flex; /* 鼠標樣式，經常使用的手型 支持自定義，默認的也有不少，本身百度 */ cursor: pointer; /* 設置元素的圖層優先級，數字越大優先級越高 優先級屬性只對設置了定位的屬性生效 */ z-index: 1000; /* !important權重最高 */ z-index: 1001 !important; /* 垂直對齊方式 經常使用middle text-bottom bottom 經常使用於圖標或者圖片和文字的垂直對齊，很實用 */ vertical-align: middle; 複製代碼

除了這些元素選擇器也是經常使用的，那麼最經常使用的選擇器有元素選擇/類選擇/ID 選擇/後代選擇器，較爲經常使用的子元素選擇器，還有不太經常使用的一些相鄰兄弟選擇器/僞類選擇器，這裏就不貼代碼了，能夠前往w3c查看chrome

過渡動畫

過渡用於簡單的初始化效果，動畫用於複雜的效果製做,學習這一章節最重要的是本身實現嘗試，由於過分和動畫的效果比較顯著差異也別較大，因此嘗試是最好理解的方法。實踐開發中，過渡稍微比動畫用到的多

/* 過渡 第一個參數爲過渡的屬性名稱all爲全部 第二個屬性爲過渡速度(linear勻速，還有先快後慢等) */
/* 第三個參數爲過渡時間，那麼這些屬性是能夠拆分單獨屬性的，transition是將經常使用的幾個屬性縮寫了 */ transition: all linear 2s; /* 延時過渡 */ transition-delay: 1s;   /* 說到過渡，常常會和元素的平移/旋轉/縮放一塊兒使用 */ /* 旋轉元素的基點位置 默認爲左上角 */ transform-origin: center; /* 平移的屬性 translate平移，單位是px rotate旋轉，單位是deg度數 scale縮放，>0的數字 */ /* 平移/旋轉/縮放都有X/Y/Z軸的屬性設置，靈活使用，作出一些炫酷的效果 */ transform: translate() rotate() scale();  /* 其中Z軸須要配合3D效果來使用 */ /* 設置元素的變化方式 */ transform-style: preserve-3d; /* 設置元素的視覺距離 */ perspective: 1200px; 複製代碼

早期的一篇效果文章：CSS3D 動畫製做一個 3d 旋轉的篩子

彈性佈局

彈性佈局仍是比較簡單的，經常使用的水平方向垂直方向的幾個屬性熟練使用，做用的元素搞清楚，其實用起來仍是蠻簡單的,須要注意的是彈性佈局作的元素受寬度影響，因此，通常狀況下，咱們須要將做用的元素設置寬度，我實際狀況用的是像素和百分比靈活使用

/* 設置彈性佈局 */
display: flex; /* 寬度超出容器寬度是否容許換行 wrap容許 */ flex-wrap: wrap; /* 水平左對齊 */ justify-content: flex-start; /* 水平右對齊 */ justify-content: flex-end; /* 水平居中 */ justify-content: center; /* 兩端對齊 */ justify-content: space-around; /* 兩端評分水平居中通常對齊 */ justify-content: space-between; /* 垂直居上對齊 */ align-items: flex-start; /* 垂直居下對齊 */ align-items: flex-end; /* 垂直居中對齊 */ align-items: center; 複製代碼

我學習的時候參考的是阮一峯的網絡日誌,裏面還有不少屬性，可是平常工做基本沒用到過~

不經常使用的一些屬性

/* 定寬居中，先設置寬度 */
width: 1000px; margin: 0 auto; /* 字體 */ /* 斜體 */ font-style: italic; /* 下劃線 */ text-decoration: underline; /* 刪除線 */ text-decoration: line-through; /* 段落留空,也就是一段話前面留兩個空格 */ text-indent: 2rem; /* 列表 ul默認有一個內邊距~ */ list-style: none;  /* 表格的邊框合併方式 collapse合併 */ border-collapse: collapse;  /* 元素鼠標懸浮 */ div:hover {  } 複製代碼

HTML 和 CSS 部分到這裏總結的差很少了，這不是一個標準，這只是我對這些知識的一個簡單總結，裏面不少細緻的都沒有詳細描述，不過可以熟練掌握這些，靈活運用，畫個界面綽綽有餘了

快速調試

如何快速調試效果，快速開發，一般狀況下，咱們先在瀏覽器內進行樣式編寫，輸出效果，滿意後複製到編譯器，這是最快的開發方法

如何在瀏覽器內快速調試

選擇一個我的喜歡的調試後臺展現方式，屏幕大的話放下面或者右面較好，不建議分屏，來回切換很麻煩，除非你是 12 寸
選擇要調試的元素,我見大多後端都是右擊檢查其實有快捷鍵的: Ctrl+Shift+C
顏色，顏色能夠點擊色值的方框打開色值版調試

在瀏覽器內能夠調試的內容有元素內容和元素屬性，元素內容常常會被忽略

修改後的屬性直接拖拽複製到編譯器內就能夠了

利用 UI 組件

不論是以往使用 jquery,仍是如今使用 vue 這樣的框架，一套 UI 組件是離不開的，UI 組件內元素和樣式都已經爲咱們處理好了，須要咱們處理的無非就是數據；那麼每每 UI 組件庫的樣式和咱們設計出來的樣式會不大同樣，這個時候須要咱們去覆蓋這些樣式，那麼覆蓋這些樣式時，須要注意，爲避免替換後全局受影響，在覆蓋第三方 ui 庫的樣式時，必定要添加本身獨有的樣式，以防樣式衝突

利用好 UI 組件，能夠達到事半功倍的效果，固然了，覆蓋樣式仍是須要咱們本身來實現的，因此前面所說的 html/css 是基礎

瀏覽器兼容

說到瀏覽器的兼容，就不得不提 IE，IE 的版本太多，支持幾乎徹底不同，目前大多的框架都支持 IE10/IE11，那麼 IE10 一下的大多都放棄了吧，就算是政府的項目如今也在用 chrome/QQ/360 這些了吧。

那麼對於目前 vue/react/angular 這樣的框架使用的 less/es6/ts 都是經過對應 babel-loder 來解析成瀏覽器識別的，那麼 es6 中的一些語法須要咱們安裝babel-polyfill來解決 ie 兼容的問題

在以前須要適配 IE 的時候，什麼向下兼容，向上適配，很幸運，我沒有接觸到~

各瀏覽器內核簡單瞭解一下

谷歌： WebKit
火狐：Gecko
360，獵豹，2345 瀏覽器：使用 IE+Chorme 雙內核
搜狗、遨遊、QQ 瀏覽器： Trident（兼容模式）+Webkit（高速模式）；

項目實施有明確的的瀏覽器兼容要求的話記得要提早作規劃，若是沒有，諮詢項目經理，沒有要求就按照調試的瀏覽器爲標準

分辨率適配

分辨率適配是日常開發過程當中較爲頭疼的事情，適配也是有不少不少方案，對應不一樣的場景靈活運用~

其實我也比較頭疼，作適配我最喜歡像 echarts 那種圖表類的大數據展現，其適配只須要調用相應的 API

下面我簡單介紹幾種用過的是適配方案:

柵格佈局

柵格原理是結合彈性佈局和媒體查詢，不一樣分辨率下將容器劃分爲不一樣的若干份，平時用到的 UI 組件都有，這種我平時用到的很少，這種適應於簡單有規律的佈局，而且對不一樣分辨率沒有硬核展現效果的要求
百分比 + 媒體查詢

利用百分比來肯定容器的固定位置和自適應大小，那麼這種須要根據不一樣分辨率來修改容器內的內容樣式，如字體，間距，經常使用在大屏處理本身自定義的展現內容，業務系統也很經常使用
vw 根據容器寬度來

全部的單位統一用 vw 來定義，從而達到網頁隨便啦都能較好的展現，這種方法項目中沒有用過，由於對不一樣分辨率的展現不可控，只能說是較好的展現，不便於拿到真實的項目中
縮放 + 媒體查詢

利用媒體查詢在不一樣分辨率經過 transform: scale(.8);來控制，用在以先展現界面能夠，業務系統不要用，會致使內部一些功能異常

通常須要作自適應的幾個分辨率:
```
@media screen and (min-width: 1024px) and (max-width:1280px)
@media screen and (min-width: 1281px) and (max-width:1366px) @media screen and (min-width: 1367px) and (max-width:1440px) @media screen and (min-width: 1441px) and (max-width:1680px) 複製代碼
```
以上四種不全，1920 以及更大的分比率我默認採用 1920 的,還有幾種我把包含在了以上 4 種裏面

領導/客戶/用戶分辨率的不一致確實挺頭疼的，可是這就是咱們該解決的問題，以上幾種解決方法須要在不一樣場景靈活應用，以達到知足客戶需求。到目前我也麼有一個萬能的解決方案，但願有更好的解決方案的朋友可以分享一下

實戰開發

在實際開發過程當中，不少狀況下，沒有設計師？沒有產品經理？沒有原型圖？怎麼辦尼~我們就是設計師/產品經理，誰讓咱們前端全佔呢~風涼話，那這種狀況下除了自身來分析需求，挖掘用戶想要的內容外，項目之初系統的色調最好先定下來~要否則紅綠藍？確定是不行的，色調搭配我們也不在行啊，還好有一些比較好的色值搭配的網站供咱們直接用~真香