階段性總結（一）

時間 2019-11-17

標籤階段性總結简体版

原文原文鏈接

計算機通用知識

命令行的基本使用：mkdir，touch，mv，rm -r dir，pwdjavascript
計算機使用二進制使用的緣由：模擬信號不精確；二進制是模擬信號傳達的數字信號
模擬信號：把設備的物理量直接讀出來使用衰減少，傳輸距離遠
數字信號：把介質上的物理量讀出來理解爲01，衰減快，傳輸距離近。css
unicode：unicode是對全世界的每個符號進行統一的編號標準。utf8編碼方式，前面表明編碼的字符佔多少個字節，每一個字節開始用10表示，裏面填入的內容就是，拿出對應字節的內容組合就是unicode編碼的序號.解碼就是把內容化成二進制數，而後放入編碼字節中，在對每個字節求出其對應的16進制數。html

單字節： 0_______
雙字節： 110_____ 10______
三字節： 1110____ 10______ 10______
四字節： 11110___ 10______ 10______ 10______java
計算機的倆種操做方式：
圖形化用戶界面(GUI):鼠標指哪打哪
命令行接口(CLI):使用輸入命令的形式跟系統和軟件進行交互的形式,程序的結果每每也是以文字的形式給出web
圖片的格式和特色
jpg：有損壓縮，適合保存現實世界的照片
png: 無損壓縮，適合保存大片顏色相同的照片，有四個字節，三個爲顏色支持透明
gif：無損壓縮，保存顏色會取256種，致使失真，支持透明
webp:有損壓縮，支持透明，質量和壓縮率都比jpg好，移動端已有不少網站在使用
psd：ps專有格式，保存了圖片創做的全部信息，比較大
bmp：位圖，顏色數據未經壓縮直接儲存，一個顏色點有三個字節json
媒體類型(MIME Type),以type/subtype來表達文件的類型形式，他會讓不少軟件(瀏覽器)解析文件的方式，常見的有：text/html,application/javascript,text/css,application/json瀏覽器

HTML

標籤按類型分類

塊狀元素： hx div p ul li dl section header footer article nav form
行內元素：span img i em a label
行內塊元素：表單元素 input button select textareasass

列表

有序列表ol li
無序列表 ul li
自定義列表dl dd dt

表單

form標籤：寫在表單開始以前屬性:

action=「」表單提交的地址
method提交http請求的方法

input 標籤

確認表單類型type="text"文本，"email"密碼，"password"提交，"reset"重置，"button"按鈕，"radio"單選框，"checkbox"複選框,"time"時間，"search"搜索，"color"顏色，"file"地址(去除表單的默認邊框設置outline:none)
表單屬性hidden隱藏，autofocus自動聚焦，placeholder提示文本，required必填，disabled禁用
value值，name提交的地址。輸入框中value是填入的值，也能夠寫死，name爲提交的地址。選擇框，value與name一塊兒用，name爲分組，當多選單選name相同纔是一個組，value爲默認的提交值

下拉框和文本域

select標籤，裏面把optgroup把option選擇項進行了分組,selected屬性爲默認被選中，multiple屬性爲能夠多選。optgroup分組的命名爲label="xx"
textarea標籤，rows，cols文本框的行數和列數，還有一個就是能夠自動拉伸，設置樣式resize:horizontal/vertical/none/both設置拉伸行爲

表單元素的綁定和分類

表單元素綁定方法：1. label標籤能夠經過label的for屬性和表單元素的id屬性相同來讓label標籤和表單標籤綁定起來。2.是直接把表單的元素寫在label標籤裏面，當存在多個的時候第一個生效。通常是用來擴大表單的點擊範圍和設置表單的樣式
分類：fieldset標籤來讓同類型的表單設置在一塊兒，legend用來給這一類的表單命名

表格

<table border>
    <caption>貨品列表</caption>
    <colgroup>
      <col>
      <col bgcolor="red">
    </colgroup>
    <thead>
      <tr>
        <th>編號</th>
        <th>品名</th>
        <th>進價</th>
        <th>出價</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>001</th>
        <td>蘋果</td>
        <td rowspan="2">5</td>
        <td>8</td>
      </tr>
      <tr>
        <th>001</th>
        <td>桔子</td>
        <td>8</td>
      </tr>
      <tr>
        <th>001</th>
        <td>香蕉</td>
        <td>5</td>
        <td>8</td>
      </tr>
      <tr>
        <th>001</th>
        <td>山竹</td>
        <td>5</td>
        <td>8</td>
      </tr>
    </tbody>
  </table>
複製代碼

標籤屬性

全局屬性：class，id，title，data-(自定義屬性)，style，hidden，role((代表其當前表達的視覺元素是什麼 )，aria-(經過aria-*=*來表達該ui元素的狀態等信息)，contenteditable="true"可編輯段落
traget屬性標籤：base(有地址標籤設置默認地址)，a，form,area。href屬性的標籤：base，a，link，area

html 基本格式

<!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>
複製代碼

!DOCTYPE html 標準模式渲染，未聲明的爲怪異模式，在ie6下，怪異模式會讓box-sizing爲border-box
html lang="en"html根標籤的語言
meta charset="UTF-8"編碼的方式
meta name="viewport"移動端佈局的設備寬度，initial-scale初始縮放等級
meta http-equiv="X-UA-Compatible" content="ie=edge"文檔模式兼容的定義，用最高級的ie版本進行渲染
title文檔標題
html head body爲根標籤，頭部標籤，內容標籤。當不設置時，瀏覽器會自動添加

CSS

CSS和CSS3樣式

html引入css樣式：
內嵌式：在head裏面寫一個style標籤
內聯式：標籤內直接寫style="color:red"
外部式：在head內引入一個css文件，<link rel="stylesheet"(聲明引入文件和這個文件的關係:樣式表) href="a.css" type="text/css"
CSS單位
px一個css像素，在網頁不放大的時候是一個操做系統像素，在系統分辨率和物理分辨率相同時，它是一個物理像素點的大小
em是當前文字字號的大小根據父元素的px算出,rem根據根元素的字號大小算出
vw,vh是視口寬度/高度的百分之一
vmax/vmin爲vw和vh倆者中字號較大者或者較小者

擴展：
移動端佈局:
1. 爲了讓寫出的頁面兼容全部寬度的手機設備，在頁面設置標籤<meta name="viewport" content="width=device-width" user-scalable=no (不能縮放)>自動識別手機寬度
2. 佈局:設置內容的寬度和高度爲rem，根元素的單位用vw來設置，大小爲x=100vw/視覺稿寬度*100(有些是直接用腳本算出根元素應當設置多少px)，這樣就能夠1vw等於這個視覺稿的寬度的大小，而後直接量出視覺稿寬度來寫就能夠了，當元素在視覺稿寬度爲200px，這個元素就爲2rem，由於字體的最小默認值的關係纔會乘以100，則200rem要寫成2rem。
3. 這樣設置元素的單位就可讓不一樣的手機設備均可以實現，重佈局:使用rem來讓網站等比縮放。重內容:使用px爲基本單位實現佈局，作到屏幕越大，字越多

基本樣式:

字體樣式：書寫規範font:[font-style||font-variant||font-weight] [font-size/line-height] font-family
文字樣式：text-transform改變文字的大寫變小寫，小寫變大寫。text-decoration文字上劃線，下劃線。word-break單詞折斷。word-space單詞間距。letter-spacing單詞間距。white-space換行。text-indent縮進
陰影：text-shadow/box-shadow：陰影方向inset向裏、水平偏移、垂直偏移(默認正爲右下，負爲上左)、模糊半徑、擴散半徑。單方向的陰影讓擴散半徑爲負數絕對值等模糊半徑
圖片樣式：
background-img/background-color
background-size:cover、contain(cover爲圖片覆蓋住元素，contain爲元素包裹圖片放大其寬高當有一個值和元素相等便可)img標籤有一個樣式也可使其改變圖片大小object-fit
background-position/background-origin(哪一個盒子開始畫)/background-clip(圖片裁剪出的盒子內容)
background-attachment(圖片相對什麼元素移動fixed相對於窗口，scoll當元素有滾動條內容定位)/-webkit-background-text:text(經過文字看到圖片背景)
漸變與動畫
transition：property屬性 duration時間 timing-function緩動函數 delay延遲時間
animation 先定義一個動畫函數@keyframs 名字{0%{} 100%{}},在添加動畫：animation:name 時間(alternate永久) fill-mode開始播放的狀態，play-state：paused暫停鍵
transform-origin設置不動點/transform-scale縮放/transform:translate移動/transform:rotate旋轉/transform-style:preserve-3d(3D視圖)/transform:matrix矩陣移動/perspective遠近點看元素

佈局

盒模型： contnet，padding，border，margin組成，當要肯定一個盒模型的寬高時，首先明確盒模型的box-sizing：

content-box width屬性的值指的是content-box（也即內容區域）的寬度，高度同理網絡

border-box width屬性的值指的是border-box的寬度，高度同理。內容區域則由寬度減去border與padding的寬度獲得。 margin合併的問題：垂直外邊距合併當元素不存在border和padding，兄弟元素margin選大的，本身上下margin合併，當高度爲父元素高度auto，父子元素的margin會合並app

行內元素佈局

em 框，內容區，行內框，行內框base-line，行框概念
em框：文字框，高度是字號，字形可能超出em框
內容區：em框串起來形容的區
行內框：inline元素：行高框與內容框區的中點對齊也就是行高的大小。inline替換元素(特色是：沒有子元素和寬高會有默認值):margin-box
行內框的baseline：inline元素：文字的baseline爲x下方的位置。行內元素爲最後一行內容的baseline。行框：包含該框全部行內框的最小框，行框內的元素會以各個行內框的baseline對齊，當元素設置vertical-align自行偏移
vertical-align:會根據這個行框對齊方式，當設置一個行內元素vertical-align：middle時，行內元素的垂直中點會對齊匿名文本x的中點。假象出一個x會對齊這個x偏下的地方，不是真正的居中，因此須要讓父元素的font-size爲0使這個x高度爲0就是真正的居中了。

行內塊佈局時須要清除中間的空隙，font-size爲0便可

定位佈局:

fixed固定定位：脫離文檔流，根據瀏覽器窗口定位，經過讓trbl爲0，而後margin爲auto讓元素居中。一個元素的七個值加起來等於瀏覽器視口寬度
relative相對定位：相對於自身的位置，常規流依然保存它的位置
absolute固定定位：脫離文檔流，相對於離自身定了位的祖先定位，會變成塊框
sticky粘連定位：當元素四個邊框都在窗口之內的時候是sticky，當元素任意一邊脫離文檔時就爲fixed，他自身的box不能脫離其包含塊
z-index 當定位在同一個元素的時候z-index越大就在越上面

浮動佈局

浮動定位會脫離其文檔流，塊狀元素會當浮動元素不存在，行內元素會繞着其渲染。浮動元素會蓋在塊狀元素上面，行內會蓋在浮動元素上面
清除浮動與閉合浮動清除浮動：經過讓本身下移來避開浮動元素clear:both 閉合浮動：
1.讓元素觸發bfc(使一個元素成爲一個獨立單元，不會影響外邊也不會受外邊元素的影響)，overflow：hidden/display:flow-root/display:tabel。
2.在浮動元素父元素裏面最下面寫一個塊狀元素讓其獨佔一行這樣元素的父元素就會被撐高了。設置一個僞類::after{display:block;clear:both;content:""}

flex佈局

父元素爲flex子元素水平排列，寬度設置flex-grow：父元素剩餘寬度的分配，flex-shrink：超出部分的收縮計算
元素的空間分配方向，flex-direction爲主要方向，flex-wrap爲次要方向
元素擺放：justify-content水平，align-items垂直單列，align-content多條軸垂直襬放。會根據空間分配方向來肯定是水平仍是垂直，當分配方向爲column時垂直就爲justify-content
自身擺放align-self單個空間位置，order排列位置，flex爲計算寬度

表格佈局

經過設置display的屬性對應在表格裏面的標籤。來實現表格佈局
table-layout: fixed/auto;border-collapse: separate/collapse;單元格的設置，默認是表格本身計算出來的寬高，表格邊框合併原則是：border:hidden 邊框粗細邊框樣式雙邊框單邊框虛線框按表層順序
表格內的單元格沒有margin，經過設置border-spacing(指定相鄰單元格邊框之間的距離): h v;來讓單元格分開

多列布局

column-cout列數，column-width列寬度，column-gap列之間的間隙，column-rule列之間的分隔線，column-span跨列的設置

css注意點

選擇器的優先級，import，內聯，id選擇器，類選擇器/屬性選擇器/僞類選擇器，類型選擇器/僞類
字體圖標的使用方法倆種目前：1.阿里圖標的引用加入購物車，下載代碼，添加字體文件，找到字體圖標對應的代碼用類引用2.font-awesome引用文件，添加類
css sprite：css精靈/雪碧，把圖片都一塊兒放在一張圖片中，而後使用圖片移動來讓其對應的顯示在頁面中。優勢：節省文件大小（「拼接」文件會使整體積變小）節省網絡流量（下載一張圖比下載多張圖節省流量）加快速度，圖標的出現不會閃爍，缺點：不能是動圖不方便維護放大後不清晰。現代採用字體圖標，svg圖標
reset與normalize：

reset: 是一套用於把頁面的樣式統一成一個特定風格的css代碼

normalize: 是用來讓不瀏覽器顯示頁面儘可能接近各瀏覽器默認的樣式的。
css工具less/sass,scss的引入和使用，使用代碼生成。引入可使添加一個script標籤和添加外部文件
使用input爲radio來實現圖片輪播

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。