day01內容
- 回顧
-
網頁重構
【根據設計師/產品經理繪製的原型效果（axure、psd）重構出兼容性良好網頁】
HTML5 標籤（結構）
1.塊級標籤
div 無意義的塊元素
p 默認樣式，在應用的時候一般都會被重置！紋眉
h1~h6
ul>li
ol>li
dl>dt,dd
H5新增了一系列的塊級標籤（語義化標籤）- 與div表現效果是一樣的
header、article、footer、nav、section、aside、address…
2.行內標籤
span
裝飾類標籤
i strong b font em sub sup
3.功能性標籤(行內標籤)
a 超級連接
href target
img 圖片
src alt
iframe 引入一個額外的網頁
table
thead
tr>th
colspan
rowspan
tbody
tr>td
tfoot
form
input
type: text/password/file/checkbox/radio/reset/commit/button
type: date/mail/number 不建議使用！（樣式不統一，兼容性較差）【組件！bootstrap】
placeholder
select>option
textarea
CSS3（修飾）
語法
註釋 /**/
樣式
選擇器 {
規則;
規則;
…
}
如何在html中引用css
link
style標籤
style屬性
選擇器
基本選擇器
標籤 div p
id #id
類 .class
或者 div,p
並且 div.one
層次選擇器
後代 ul li{}
子代 ul>li{}
兄弟 + ~
屬性選擇器(過濾器)
selector[name]
selector[name=val]
selector[name*=val]
selector[name^=val]
selector[name$=val]
僞類選擇器(過濾器)
:first-child
:last-child
:nth-child
:hover
:active
:visited
…
僞元素選擇器(過濾器)
::before
::after
規則
文本
font-*
字體
text-*
網絡字體
@font-face xxx {}
字體圖標庫 iconfont
背景
background-*
其他
opacity:
display:
overflow:
…
盒子模型
盒子元素：
margin
border
padding
width/ heightbox-sizing:content-box; // border-box
content-box: 內容盒子（默認盒子）
width:100px;
padding:10px;
border:5px solid #ccc;
margin:10;
實際寬度 = width + 2padding + 2border
border-box: 邊框盒子（怪異盒子）
width:100px;
padding:10px;
border:5px solid #ccc;
margin:10;
實際寬度 = width
佈局
讓塊元素在一行中顯示，或者是在z軸上摺疊
浮動佈局（應用在pc端界面中）
float
clear
定位佈局（應用在pc端界面中）
position:relative;
是否脫離文檔流：否
相對點：自身
position:absolute;
是否脫離文檔流：是
相對點：距離它最近的父定位元素
position:fixed;
是否脫離文檔流：是
相對點：瀏覽器視口
position:sticky;
是否脫離文檔流：否
相對點：相對定位與固定定位的結合（自身、視口）
伸縮盒佈局(應用在手機端界面中)
主軸 row - x; column - y
交叉軸:與主軸垂直的軸
伸縮盒容器
display:flex; 定義當前容器爲伸縮盒容器
flex-direction:row; 定義主軸的位置
justify-content: center; 元素在主軸上的排列方式
align-items: center; 元素在交叉軸的排列方式
伸縮盒元素
沿着主軸排列
flex-basis
flex-grow
flex-shrink
flex:
響應式佈局-
pc端界面開發
yanxuan_pc.html
網易嚴選【非響應式】
不會隨着設備的分辨率變化而進行變化
1280px - 1090px
1920px - 1090px
騰訊視頻
會隨着設備的分辨率變化而進行變化
1280px - 990px
1408px - 1200px
1620px - 1500px -
手機端界面開發
yanxuan_phone.html
適配所有的移動設備
1920px - 1920px
990px - 990px
無需進行更多編碼，只需要利用塊元素的默認特性即可
獨佔一行空間，寬度爲100%
特點：
寬度自適應屏幕尺寸
永遠不會產生橫向的滾動條 -
全適應【適用於企業站】性價比
當用戶通過pc訪問的時候一種佈局，使用pad訪問的時候是一種佈局，使用phone訪問的時候是一種佈局，但是這只是一個html
語法：
< link rel=“stylesheet” href="" media="(min-width:1020px)">
@media screen and (max-width:990px) {
.wrapper {
100%
}
}
動畫
定義：
animation-*
應用：
過渡
transtion-*
變形
transfrom:
-
2) Javascript基礎（dom驅動框架）
linux
雲服務器的基本應用（購買，重置密碼，防火牆，登錄）- 阿里雲
ubuntu16.04/ubuntu18.04
用戶管理
sudoer
目錄文件及權限
vim
軟件安裝
源碼編譯
在線安裝 apt install
解壓安裝
進程管理
【在linux服務器中搭建個人站、在linux中部署看點資訊項目】
ECMAScript5
關鍵字保留字
變量
數據類型：
基本數據類型
應用數據類型
表達式
分支語句
循環語句
操作符
算術
邏輯
三目
位運算
比較
----------
數組
對象
函數
正則表達式
Math
Date
面向對象技術
DOM
利用javascript核心技術操作HTML的接口
Node
Document
Element
BOM
利用javascript核心技術操作瀏覽器的接口
window.xxx
ajax
XMLHttpRequest
jQuery(bs)
HTML5 API（JS api）
本地存儲
3) 企業級框架（）
ECMAScript6
es6 新版本的javascript標準（兼容性差）
縮寫形式
解構
模塊化
類
promise
異步函數
es6 --nodejs (babel/webpack)–> es5 --運行–>瀏覽器
- 暢想
vue/react/angular (語法都是基於es6)
（看點資訊精選）案例：- 底層代碼操作階段 【10平米 - 掃把打掃（dom操作）】
組件、頁面佈局 - 完全自己比那些
交互 - ajax XMLHttpRequest
dom操作 - DOM - dom驅動框架操作階段 【100平米 - 戴森吸塵器（jquery）】
組件、頁面佈局 - bootstrap
交互 - jquery
dom操作 - jquery - vue企業級開發階段 【1000平米 - 傭人（dom操作）】
組件、頁面佈局 - bootstrap
交互 - jquery
vue 框架
0 dom操作
- 底層代碼操作階段 【10平米 - 掃把打掃（dom操作）】
-----思考-----
- 如何理解語義化標籤
html標籤具有語義，讓程序員看到代碼就知道該代碼表示的是什麼意思
< header>
< div class=“logo”>
< img src="">
</ div>
< nav>
< ul>
< li>< a>首頁< /a>< /li>
< li>< a>首頁< /a></ li>
< li>< a>首頁</ a>< /li>
< li>< a>首頁</ a>< /li>
</ ul>
</ nav>
</ header> - 一般在重構的時候，我們都會選擇重置樣式（reset），請問爲什麼？
body {
margin:0;
}
ul,ol {
margin:0;
padding:0;
list-style:none;
} - 佈局目的？？
突破塊元素的默認特性（獨佔一行、寬度爲100%、高度由內容決定），佈局就是爲了讓塊在一行中並列顯示，或者是在z軸上摺疊顯示