第一章 前端介紹
第1節(jié) 什么是前端
前端即網(wǎng)站的前臺部分，運行在PC端，移動端等瀏覽器或者APP上，展現(xiàn)給用戶瀏覽的網(wǎng)頁。
?
?
</center>
前端與后臺是相對的前端是展示給用戶并且和用戶進行交互的客戶端有app或者瀏覽器后臺又稱為服務(wù)器端進行數(shù)據(jù)處理鬓长，存儲，業(yè)務(wù)邏輯等.
第2節(jié) 前端的開發(fā)流程
?
?
</center>
第3節(jié) 頁面的組成結(jié)構(gòu)
結(jié)構(gòu)
HTML用于描述頁面的結(jié)構(gòu)
表現(xiàn)
CSS用于控制頁面中元素的樣式
行為
JavaScript用于響應(yīng)用戶操作
第4節(jié) 頁面的描述
結(jié)構(gòu)
?
?
</center>
表現(xiàn)
?
?
</center>
行為
?
?
</center>
第二章 HTML標(biāo)簽(結(jié)構(gòu))
第1節(jié) HTML簡介
HyperText Markup Language
hyper? [?ha?p?(r)] 超過 亢奮的尝江；高度緊張的
Markup? 標(biāo)記 漲價
超文本標(biāo)記語言
Html通過標(biāo)記符號來標(biāo)記要顯示的網(wǎng)頁中的各個部分涉波。網(wǎng)頁文件本身是一種文本文件，通過在文本文件中添加標(biāo)記符炭序，可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理啤覆，畫面如何安排，圖片如何顯示等）
第2節(jié) 網(wǎng)頁的基本結(jié)構(gòu)
doctype：文檔類型
<!DOCTYPE html>
<html>
<head>
?? <meta charset="utf-8">
</head>
<body>
</body>
</html>
?
<!DOCTYPE html>: 版本的聲明,當(dāng)前是html5版本
html標(biāo)簽: 網(wǎng)頁的根標(biāo)簽,所有其它的標(biāo)簽都被html包含
head頭部標(biāo)簽: 網(wǎng)頁的配置信息
<meta charset="utf-8">:字符集(編碼的設(shè)置)
?
<meta name="keywords" content="千鋒教育,良心培訓(xùn)">
為搜索引擎提供的關(guān)鍵字列表：各關(guān)鍵詞間用英文逗號","隔開
<meta name="description" content="國內(nèi)領(lǐng)先的前端品牌">
Description用來告訴搜索引擎你的網(wǎng)站主要內(nèi)容
?
第3節(jié) body標(biāo)簽
主體標(biāo)簽: 所有的顯示效果的標(biāo)簽和內(nèi)容都被body包含
第4節(jié) HTML標(biāo)簽基本結(jié)構(gòu)
<p>開始標(biāo)簽惭聂，結(jié)束標(biāo)簽</p>
<br/> <img src="123.jpg"/> 自閉和標(biāo)簽
第5節(jié) 標(biāo)簽的語法
標(biāo)簽由英文尖括號<和>括起來窗声，如<html>就是一個標(biāo)簽
html中的標(biāo)簽一般都是成對出現(xiàn)的，分開始標(biāo)簽和結(jié)束標(biāo)簽辜纲。結(jié)束標(biāo)簽比開始標(biāo)簽多了一個/
標(biāo)簽與標(biāo)簽之間是可以嵌套的笨觅，但先后順序必須保持一致，如：
<div>內(nèi)嵌套<p>耕腾，那么</p>必須放在</div>的前面
HTML標(biāo)簽不區(qū)分大小寫
<h1>和<H1>是一樣的见剩，但建議小寫，因為大部分程序員都以小寫為準(zhǔn)
第6節(jié) 語義化扫俺，讓你的網(wǎng)頁更好的被搜索引擎理解
標(biāo)簽的用途:我們學(xué)習(xí)網(wǎng)頁制作時苍苞，常常會聽到一個詞，"語義化"狼纬。那么什么叫做語義化呢羹呵，說的通俗點就是：明白每個標(biāo)簽的用途（在什么情況下使用此標(biāo)簽合理）比如，網(wǎng)頁上的文章的標(biāo)題就可以用標(biāo)題標(biāo)簽疗琉，網(wǎng)頁上的各個欄目的欄目名稱也可以使用標(biāo)題標(biāo)簽冈欢。文章中內(nèi)容的段落就得放在段落標(biāo)簽中，在文章中有想強調(diào)的文本盈简，就可以使用 em 標(biāo)簽表示強調(diào)等等凑耻。
第7節(jié) 常用標(biāo)簽
標(biāo)題 h1~h6
<h1>標(biāo)題一</h1>
<h2>標(biāo)題二</h2>
<h3>標(biāo)題三</h3>
<h4>標(biāo)題四</h4>
<h5>標(biāo)題五</h5>
<h6>標(biāo)題六</h6>
段落 p
<p>這是一個段落</p>
強調(diào)/加強語氣? strong? 或 em
em:強調(diào)->默認是斜體? strong：更強烈的強調(diào) ->粗體
<em>強調(diào)</em>
<strong>強烈的強調(diào)</strong>
換行 br
<br/>
分隔線 hr
<hr/>
聯(lián)系地址 address
<address>北京市,沙河區(qū),北科</address>
添加一行代碼 code
<code>一行代碼</code>
添加一段代碼 pre
<pre>多行代碼</pre>
給文本增加樣式的標(biāo)簽 span
<span> 文本 </span>
短引用文本 q
quote [kw??t]引文 引用
<q>短引用文本</q>
長引用 blockquote
block大塊的
<blockquote> 常引用 </blockquote>
無序列表 ul + li
<ul>
? ?
? ?
? ?
? ?
</ul>
有序列表 ol + li
<ol>
? ?
? ?
? ?
? ?
</ol>
布局標(biāo)簽 div
表格標(biāo)簽 table
<table>
? ? ? ? ID
? ? ? ? 名字
? ? ? ? 年齡
? ? ? ? 1001
? ? ? ? 李雷
? ? ? ? 18
</table>
鏈接 a
<a href="#">發(fā)送</a>
圖片 img
表單標(biāo)簽 form 輸入框 input
文本域 textarea
下拉列表 select + option
提交/重置按鈕/lable標(biāo)簽
<form>
? ? 性別:
? ? 男
? ?
? ? 女
? ?
? ? 興趣:
? ? 籃球
? ? 足球
? ? 臺球
? ?
? ? 郵箱
? ?
? ? 描述
? ?
? ? 地址
? ?
? ? ? ? 北京
? ? ? ? 上海
? ? ? ? 天津
? ? ? ? 南京
? ?
? ?
? ?
</form>
第8節(jié) 轉(zhuǎn)義字符
?
?
</center>
第三章 CSS (表現(xiàn))
第1節(jié) CSS簡介
1.1 CSS全稱為“層疊樣式表”犯戏，它主要是用于定義HTML內(nèi)容在瀏覽器內(nèi)的顯示樣式，如文字大小拳话、顏色、字體加粗等
1.2 CSS的代碼語法
選擇器｛屬性：值;屬性:值….. ｝
?
?
</center>
第2節(jié) CSS基本知識
內(nèi)聯(lián)式CSS樣式:直接寫在html標(biāo)簽中
嵌入式CSS樣式:寫在當(dāng)前文件中
<style type="text/css">
? ? p{
? ? ? ? color:red;
? ? }
</style>
外部式CSS樣式:寫一個單獨的文件中
<link rel="stylesheet" type="text/css" href="css/abc.css"/>
第3節(jié) CSS的選擇器
什么是選擇器?
每一條css樣式聲明（定義）由兩部分組成
在{}之前的部分就是“選擇器”种吸，“選擇器”指明了{}中的“樣式”的作用對象弃衍，也就是“樣式”作用于網(wǎng)頁中的哪些元素
選擇器的分類?
1、標(biāo)簽選擇器 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? p{}
2坚俗、類選擇器 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? .claa{}
3镜盯、ID選擇器 (全局唯一) ? ? ? ? ? ? ? ? ? ?? #id{}
4、子選擇器 > （表示第一代子元素） ? ? ? ?? #id>p{} 如果沒有>直接是空格的話就是后代所有的元素 ? #id p{}
5猖败、通用選擇器 * ? *{}
6速缆、偽類選擇器 :hover ? ? ? ? ? ? ? ? ? ? ?? p:hover{}
7、分組選擇器 h1,h2,p ? ? ? ? ? ? ? ? ? ? ? h1,h2,p{} ?
?
第4節(jié) CSS的繼承恩闻、層疊和特殊性
繼承性
<div style="color: red;font-size: 100px;">
? ?
ppppp
</div>
權(quán)值
1艺糜、標(biāo)簽的權(quán)值為1
2、類選擇符的權(quán)值為10
3幢尚、ID選擇符的權(quán)值最高為100
如果樣式作用在一個標(biāo)簽上,根據(jù)權(quán)值來應(yīng)用使用哪個樣式(應(yīng)用權(quán)值高的)
<style type="text/css">
? ? p{color:red;}
? ? .first{color:green;}
</style>
<p class="first">三年級時破停，我還是一個<span>膽小如鼠</span>的小女孩。</p>
層疊
當(dāng)作用在同一個標(biāo)簽上的樣式權(quán)值相同時,那么后面的樣式會生效
內(nèi)聯(lián)樣式表（標(biāo)簽內(nèi)部）> 嵌入樣式表（當(dāng)前文件中）> 外部樣式表（外部文件中）
重要性? !important
我們在做網(wǎng)頁代碼的時尉剩，有些特殊的情況需要為某些樣式設(shè)置具有最高權(quán)值真慢，怎么辦？這時候我們可以使用!important來解決
<style type="text/css">
? ? p{color:red!important;}
? ? p{color:green;}
</style>
?
<p class="first">三年級時理茎，我還是一個<span>膽小如鼠</span>的小女孩黑界。</p>
第5節(jié) CSS樣式格式化排版
文字—字體: ?
?? font-family: "microsoft yahei";
?? font-family: "微軟雅黑";
文字—字號顏色: ? ?
?? font-size: 12px;
? ? color: #FF0000;
文字—粗體:
?? font-weight: bold;
文字—斜體:
?? font-style: italic;
文字-下劃線
?? text-decoration: underline;
文字-刪除線
?? text-decoration: line-through;
段落-縮進
?? text-indent: 2em;
段落-行間距(行高)
?? line-height: 1.5em;
段落-中文字間距、字母間距
?? 1皂林、letter-spacing:50px; ?? 中文或者是英文字母之間的間距
?? 2朗鸠、word-spacing:50px; ? ? 英文單詞之間的間距
段落-對齊
?? text-align: center;為內(nèi)聯(lián)元素中的文本或者圖片設(shè)置居中
第6節(jié) 元素分類
塊狀元素
<div>、<p>式撼、<h1>~<h6>童社、<ol>、<ul>著隆、<dl>
<table>扰楼、<address>、<blockquote> 美浦、<form>
內(nèi)聯(lián)元素
<a>弦赖、<span>、<br>浦辨、<i>蹬竖、<em>、<strong>
<label>、<q>
塊狀內(nèi)聯(lián)元素
<img>币厕、<input>
第7節(jié) CSS盒模型
盒模型是CSS布局的基石列另，它規(guī)定了網(wǎng)頁元素如何顯示以及元素間相互關(guān)系(用于前端布局)
?
?
</center>
?
?
</center>
第8節(jié) CSS的布局
布局模型
1、流動模型（Flow）
流動模型旦装，流動（Flow）是默認的網(wǎng)頁布局模式页衙。也就是說網(wǎng)頁在默認狀態(tài)下的 HTML網(wǎng)頁元素都是根據(jù)流動模型來分布網(wǎng)頁內(nèi)容的
?
流動模型的特點
1、塊狀元素獨占一行
2阴绢、內(nèi)聯(lián)元素不會獨占一行而是從左向右排列
2店乐、浮動模型（Float）
正常情況下塊狀元素獨占一行,那么怎么能讓塊狀元素并排顯示呢?這時候就用到了浮動模型
?
實現(xiàn)浮動的css屬性
float:left|right
?
高度塌陷問題處理
clear：left | right | both;
?
?
</center>
?
?
3、層模型（Layer）
層模型的三種形式?
1呻袭、絕對定位(position: absolute)
div{
? ? width: 200px;
? ? height: 200px;
? ? border: 2px red solid;
? ? position: absolute;
? ? left: 100px;
? ? top: 100px;
}
2眨八、相對定位(position: relative)
div{
? ? width: 200px;
? ? height: 200px;
? ? border: 2px red solid;
? ? position: relative;
? ? left: 100px;
? ? top: 100px;
}
3、固定定位(position: fixed)
div{
? ? width: 200px;
? ? height: 200px;
? ? border: 2px red solid;
? ? position: fixed;
? ? left: 100px;
? ? top: 100px;
}
?
4左电、Relative與Absolute組合使用
?
<div id="box1">
? ?
</div>
?
#box1{
? ? width: 200px;
? ? height: 200px;
? ? position: relative;
}
#box2{
? ? width: 100px;
? ? height: 100px;
? ? position: absolute;
? ? left: 20px;
? ? top: 20px;
}
?
?
?
第9節(jié) 單位和值
顏色值
1廉侧、英文命令顏色
?? p{color:red;}
2、RGB顏色
?? p{color:rgb(133,45,200);}
3券腔、十六進制顏色
?? p{color:#00ffff;}
?
?
?
長度值 :長度單位總結(jié)一下伏穆，目前比較常用到px（像素）、em纷纫、% 百分比
1枕扫、像素 px
2、em
就是本元素給定字體的 font-size 值辱魁，如果元素的 font-size 為 14px 烟瞧，那么 1em = 14px；
如果 font-size 為 18px染簇，那么 1em = 18px上面代碼就是可以實現(xiàn)段落首行縮進 24px（也就是兩個字體大小的距離）
?
?
?
</center>
?
?
第10節(jié) CSS樣式設(shè)置小技巧
水平居中設(shè)置-行內(nèi)元素
被設(shè)置元素為文本参滴、圖片等行內(nèi)元素時，水平居中是通過給父元素設(shè)置 text-align:center 來實現(xiàn)的
水平居中設(shè)置-定寬塊狀元素
定寬塊狀元素,設(shè)置自身為 margin-left：auto锻弓；margin-right:auto
水平居中設(shè)置-不定寬塊狀元素
<style type="text/css">
? ? .container{
? ? ? ? text-align: center;
? ? }
? ? .container>ul{
? ? ? ? display: inline;
? ? }
</style>
?
<div class="container">
? ?
? ? ? ?
? ? ? ?
? ? ? ?
</div>
垂直居中-父元素高度確定的單行文本
父元素高度確定的單行文本的豎直居中的方法是通過設(shè)置父元素的height和line-height 高度一致來實現(xiàn)的
?
<div class="container">
? ? Hi 千鋒教育
</div>
?
<style type="text/css">
? ? .container{
? ? ? ? background-color: red;
? ? ? ? height: 50px;
? ? ? ? line-height: 50px;
? ? }
</style>
垂直居中-父元素高度確定的多行文本
<div class="container">
? ?
? ? ? ?
Hi 千鋒教育
? ? ? ?
Hi 千鋒教育
? ? ? ?
Hi 千鋒教育
? ? ? ?
Hi 千鋒教育
? ? ? ?
Hi 千鋒教育
</div>
?
.container{
? ? background-color: red;
? ? height: 500px;
? ? display: table-cell;
? ? vertical-align: middle;
}
隱性改變display類型
隱藏標(biāo)簽 <p style="dispaly:none">PPPPPPPPP</p>
塊狀元素和非塊狀元素相互轉(zhuǎn)換
display: inline
?
?
第11節(jié) Flex彈性盒子模型布局
布局的傳統(tǒng)解決方案砾赔，基于盒狀模型，依賴? display? 屬性 +? position? 屬性 +? float? 屬性青灼。它對有些特殊布局非常不方便.2009年暴心，W3C 提出了一種新的方案? Flex? 布局，可以簡便杂拨、完整专普、響應(yīng)式地實現(xiàn)各種頁面布局。目前弹沽，它已經(jīng)得到了所有瀏覽器的支持檀夹，這意味著筋粗，現(xiàn)在就能很安全地使用這項功能。
① Flex布局是什么炸渡？
Flex 是 Flexible Box 的縮寫娜亿，意為"彈性布局"，用來為盒狀模型提供最大的靈活性,任何一個容器都可以指定為 Flex 布局.
.box{
? display: flex;
}
Webkit 內(nèi)核的瀏覽器蚌堵，必須加上-webkit前綴(這是兼容老版本瀏覽器的寫法)
.box{
? display: -webkit-flex; /* Safari,chrome */
? display: flex;
}
注意:?設(shè)為 Flex 布局以后暇唾，子元素的float、clear和vertical-align屬性將失效辰斋。
② 基本概念
采用Flex布局的元素，稱為Flex容器（flex container）瘸味，簡稱”容器”宫仗。它的所有子元素自動成為容器成員，稱為Flex項目（flex item）旁仿，簡稱”項目”藕夫。
?
?
容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start枯冈，結(jié)束位置叫做main end毅贮；交叉軸的開始位置叫做cross start，結(jié)束位置叫做cross end尘奏。
項目默認沿主軸排列滩褥。單個項目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size
③ 容器的屬性
以下6個屬性設(shè)置在容器上炫加。
?
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
?
[1] flex-direction屬性flex-direction屬性決定主軸的方向（即項目的排列方向）瑰煎。
.box {
? flex-direction: row | row-reverse | column | column-reverse;
}
?
?
它可能有4個值
row（默認值）：主軸為水平方向，起點在左端俗孝。
row-reverse：主軸為水平方向酒甸，起點在右端。
column：主軸為垂直方向赋铝，起點在上沿插勤。
column-reverse：主軸為垂直方向，起點在下沿革骨。
[2] flex-wrap屬性默認情況下农尖，項目都排在一條線（又稱”軸線”）上。flex-wrap屬性定義苛蒲，如果一條軸線排不下卤橄，如何換行.
?
?
.box{
? flex-wrap: nowrap | wrap | wrap-reverse;
}
?
它可能取三個值。
nowrap（默認）：不換行臂外。
?
?
wrap：換行窟扑，第一行在上方喇颁。
?
?
wrap-reverse：換行，第一行在下方嚎货。
?
?
[3] flex-flow屬性
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式橘霎，默認值為row nowrap。
.box {
? flex-flow: <flex-direction> <flex-wrap>;
}
[4] justify-content屬性
justify-content屬性定義了項目在主軸上的對齊方式殖属。
.box {
? justify-content: flex-start | flex-end | center | space-between | space-around;
}
?
?
它可能取5個值姐叁，具體對齊方式與軸的方向有關(guān)。下面假設(shè)主軸為從左到右洗显。
flex-start（默認值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊外潜，項目之間的間隔都相等。
space-around：每個項目兩側(cè)的間隔相等挠唆。所以处窥，項目之間的間隔比項目與邊框的間隔大一倍。
[5] align-items屬性
align-items屬性定義項目在交叉軸上如何對齊玄组。
.box {
? align-items: flex-start | flex-end | center | baseline | stretch;
}
?
?
它可能取5個值滔驾。具體的對齊方式與交叉軸的方向有關(guān)，下面假設(shè)交叉軸從上到下俄讹。
flex-start：交叉軸的起點對齊哆致。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊患膛。
baseline: 項目的第一行文字的基線對齊摊阀。
stretch（默認值）：如果項目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度踪蹬。
[6] align-content屬性
align-content屬性定義了多根軸線的對齊方式驹溃。如果項目只有一根軸線，該屬性不起作用
.box {
? align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
?
?
該屬性可能取6個值延曙。
flex-start：與交叉軸的起點對齊豌鹤。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊枝缔。
space-between：與交叉軸兩端對齊布疙，軸線之間的間隔平均分布。
space-around：每根軸線兩側(cè)的間隔都相等愿卸。所以灵临，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線占滿整個交叉軸
?
?
第12節(jié) 前端布局
一列布局
二列布局
三列布局
混合布局
第13節(jié) 其他常用前端屬性介紹(小栗子練習(xí))
設(shè)置圓角
border-radius: 3px;
取消a標(biāo)簽的默認下劃線
text-decoration: none;
取消無序列表的點
list-style: none;
取消input的邊框以及焦點
outline: none;
border: none;
?
?
</center>
原型地址:
https://www.xiaopiu.com/web/byId?type=project&id=5d6a109262ad1e4d5efc56f6
