前端ER圖設計
首頁有什麼元素（搜索框，文章標題內容），可以跳轉到哪些個頁面上（編輯頁，搜索頁，個人頁）
內容頁，搜索頁，編輯頁
示例： 主頁內容討論
前端ER圖
HTML總結: 數據類型與內容
2.基本格式： 標籤 + 屬性(可選，如a href=””, img scr=””) + 樣式（class=）
3.常見的html元素（數據類型）
列表（ul,ol，li），表單（form,input,textarea）,文字（h, p）,圖片(img)，超鏈接（a href）， 強調（strong,span），分區（div）,表格（table），,分割符號（br, ,hr）
標籤DIV是層疊樣式表中的定位技術，全稱DIVision，可以把文檔分割爲獨立的、不同的部分。經常與ID選擇器組合使用進行排版佈局
相似的元素（圖標，導航欄）都可以用無序列表來寫
有序列表： 各大排行榜，熱榜 --序號的樣式可用css設置
h標題
表單與 表單元素
form標籤有兩屬性 action：指定url(表單信息提交到哪個url對應的處理函數), method(見django表單總結)
表單是用戶傳遞信息的方式
知乎總結html：https://zhuanlan.zhihu.com/p/62967499
html-css 英文簡寫大全：https://www.cnblogs.com/innovidory/p/7134381.html
CSS總結：選擇器，盒子模型，佈局
選擇器
Css有三種選擇器（即有三種類）： 標籤選擇器（對於固定的html標籤）， ID選擇器（dev,ID,#用於整體佈局），類選擇器（class，.用於自定義屬性）：也是用的最多的
標籤選擇器
，與div結合用於劃分層次
***ID，類別選擇器區別： ***
1.從名字即可知， ID選擇器有唯一性，只被引用一次。 類選擇器可重複被引用
2.ID常被用於 與div結合佈局，運用於塊狀劃分， class用於自定義樣式
3. id一般情況下是給js用的，所有除非特殊情況下，否則不要用id去設置樣式
盒子模型
典例：
重疊標籤處理，盒子模型：
對於
li這種類型，本質就是一個盒子， 什麼都不設置時margin,padding,border都none. 即內容=盒子
藍色是內容， 黃色是外邊框
，外邊距，一般用外層盒子的外邊距設置：li{ margin: 0px 15px} 不用15px
css常用屬性：
1.盒子模型基本屬性
2.居中對齊屬性： 其他的用到時網上搜索
text-align是設置或檢索對象中文本的左中右對齊方式。
vertical-align是用於指定元素的上下垂直對齊方式。
line-height的值和height的值相同的時候,元素會自動上下居中,一般常用於文字中
div左右居中方式： margin: 0px, auto;
文字居中常用： line height= height
內容（圖片）居中常用： text-align: center
3.特效的常用組合使用：（hover + transform + transition）實現鼠標移動div上，向上過渡性移動
hover: 鼠標移動到對象上時，改變對象樣式
transform: translatex,y（10px）, rotate 平移，旋轉
transition: 過渡性改變
hover是一種標籤選擇器，用於給鼠標指針在其上浮動的鏈接設置樣式，必須配合a一起使用
4.顏色背景屬性
background屬性和border一樣，是一個綜合屬性，可以將多個屬性寫在一起
background全稱有四個屬性：
background-image: url(’/i/eg_bg_03.gif’);
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 50px 100px;
默認爲： 背景圖像頂着 對象的左上角 顯示， 偏移時參照對象的左邊框上邊框向右，向下偏移
css常用屬性值
1.px(像素)，em（字符大小），%百分比（相對於父層屬性來講）
像素px：即頻幕上的一個點
分辨率（屏幕分辨率）是屏幕圖像的精密度，是指顯示器所能顯示的像素有多少
屏幕橫着1920個點，豎着1080個點
2.RGB顏色：
每個顏色都可用三原色調整成, 紅藍綠
用rgb函數或六位十六進制數表示 三個顏色各自佔的比例
CSS排版定位：
三種定位方式：
1.文檔流定位—默認方式， 就是按行內元素，塊級元素的默認佔行來的 從上到下
2.浮動定位（float屬性）： 想讓塊級元素浮動到同一水平線上（同一行上）
3.層定位（position屬性）： 希望網頁元素可以遮住下面的元素
文檔流（默認）定位
block元素：單獨佔一行，可設置 盒子模型各個屬性 絕大部分標籤,如
div, li都是block元素，浮動前就是佔一整行的一個區域（在文檔流下）。 不設置寬度就是佔一整行
inline元素： 不單獨佔一行，不可設置寬高屬性， (span, a)
inline-block元素: 不單獨佔一行，可設置盒子模型各個屬性
用 display:block/inline/inline-block來轉化
中間紅線就是container（內容部分））設置過寬度，
浮動定位： div標籤 + float屬性
div logo左浮動， div nav_right不浮動時
浮動即脫離文檔流：logo浮動後即脫離文檔流，nav_right整體向上移動，所以logo會產生遮擋效果
實現內容浮動： 1.將div整體浮動到right 2.將li浮動到div的 left
有三種情況將使得元素脫離文檔流而存在，分別是 浮動，絕對定位， 固定定位
浮動—— float: right,left…
絕對定位——position: absolute 相對於父元素移動
固定定位—— position:fixed 相對瀏覽器定位 鼠標滾動也不會動
position:relative 相對定位，相對自己文檔流中的原始位置定位。它的特點是——不會脫離文檔流
css:面向盒子
基本設計步驟：
1.設置html，內容顯示出來
2.設置盒子模型(小盒子內的內容排版)： 各個盒子寬高，居中 —— 思路清晰，時刻明白盒子所佔的空間大小形狀， 盒子的父元素是誰（居中對齊時參考），盒子是block還是inline， 針對哪個盒子寫的樣式
3.浮動佈局（div）：div+ float屬性
解決大盒子的排版問題（居中）， 解決塊級元素在一行顯示的問題（浮動）
4.添加樣式：類選擇器
典例： 魔方
用html,css寫3D立體：
1.在父元素中設置3D顯示，觀察視距，視角：
transform-style: preserve-3d, transform:perspective(20000px), .box transform:
rotateX(45deg),rotate(45deg) 旋轉整個正方形（默認觀察角度是俯視圖）
2…各個面相對父元素重定位（.box_page{position:absolute}）–將6個面統一到一個位置，方便移動旋轉
3… 二維圖是三維圖的俯視圖，每個面相對於中心點—— 移動（transform:translate(-150px)）， 相對於座標軸旋轉（transform:rotateX(90deg)） —— 移動，旋轉6個面
爲什麼要用container:
使內容不裸露在body下，body有問題不好居中等調整， 設置一個div class= container,將所有內容寫在這個div中容易佈局（居中，浮動，內外邊距）
html繼承關係：
1.子元素盒子模型的各個值，參考系都是父元素 （如height:100%, text-center，都是相對於父元素）
2.子元素默認只繼承父元素的寬，不繼承高
其他
技術方向
基本: html:定義基本數據結構類型（內容是什麼），css（html的靜態皮膚）, js（html的動態交互式皮膚）
框架：Vue,Angular,React
其他：jquery, Bootstrap,Ajax
理解：
css:標題字體、顏色變化，或爲標題加入背景圖片、邊框等
Bootstraps
響應式： 能在web端，手機端，平板端，各種設備上友好的顯示出來
根據不同設備響應了，就叫響應式。 手機不支持橫向拉，最好豎着劃
不適合做門戶網站： 目錄導航式網站，信息巨多，如淘寶網
bootstraps本質就是一個寫好的樣式庫（css lib），適用於沒有UI設計師的後端敏捷開發，直接調用即可。在有UI設計師的情況下基本不會使用bootstrap
應用場景：bootstrap壓根就不是給前端用的，作用是在完全沒有美工幫助的情況下，快速/敏捷的做出一個還看得過去的應用，並且從頭到尾不用考慮如何做出xxx效果，只需要按着教程搭就行了 關鍵詞： 敏捷開發， 簡易， 響應式的css樣式庫
頁面響應性能：
bootstrap:先加載靜態文件， 再加載動態文件