<center>前端技術(shù)</center>
第一章 前端介紹
第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標簽(結(jié)構(gòu))
第1節(jié) HTML簡介
HyperText Markup Language
超文本標記語言
Html通過標記符號來標記要顯示的網(wǎng)頁中的各個部分。網(wǎng)頁文件本身是一種文本文件，通過在文本文件中添加標記符，可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理，畫面如何安排，圖片如何顯示等）
第2節(jié) 網(wǎng)頁的基本結(jié)構(gòu)
<!DOCTYPE html>
<html>
<head>
?? <meta charset="utf-8">
</head>
<body>
</body>
</html>
?
<!DOCTYPE html>: 版本的聲明,當前是html5版本
html標簽: 網(wǎng)頁的根標簽,所有其它的標簽都被html包含
head頭部標簽: 網(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標簽
主體標簽: 所有的顯示效果的標簽和內(nèi)容都被body包含
第4節(jié) HTML標簽基本結(jié)構(gòu)
<p>開始標簽，結(jié)束標簽</p>
<br/> <img src="123.jpg"/> 自閉和標簽
第5節(jié) 標簽的語法
標簽由英文尖括號<和>括起來，如<html>就是一個標簽
html中的標簽一般都是成對出現(xiàn)的，分開始標簽和結(jié)束標簽。結(jié)束標簽比開始標簽多了一個/
標簽與標簽之間是可以嵌套的，但先后順序必須保持一致，如：
<div>內(nèi)嵌套<p>，那么</p>必須放在</div>的前面
HTML標簽不區(qū)分大小寫
<h1>和<H1>是一樣的，但建議小寫，因為大部分程序員都以小寫為準
第6節(jié) 語義化，讓你的網(wǎng)頁更好的被搜索引擎理解
標簽的用途:我們學(xué)習(xí)網(wǎng)頁制作時，常常會聽到一個詞，"語義化"。那么什么叫做語義化呢，說的通俗點就是：明白每個標簽的用途（在什么情況下使用此標簽合理）比如，網(wǎng)頁上的文章的標題就可以用標題標簽，網(wǎng)頁上的各個欄目的欄目名稱也可以使用標題標簽。文章中內(nèi)容的段落就得放在段落標簽中，在文章中有想強調(diào)的文本，就可以使用 em 標簽表示強調(diào)等等。
第7節(jié) 常用標簽
標題 h1~h6
<h1>標題一</h1>
<h2>標題二</h2>
<h3>標題三</h3>
<h4>標題四</h4>
<h5>標題五</h5>
<h6>標題六</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>
給文本增加樣式的標簽 span
<span> 文本 </span>
短引用文本 q
<q>短引用文本</q>
長引用 blockquote
<blockquote> 常引用 </blockquote>
無序列表 ul + li
<ul>
? ?
? ?
? ?
? ?
</ul>
有序列表 ol + li
<ol>
? ?
? ?
? ?
? ?
</ol>
布局標簽 div
表格標簽 table
<table>
? ? ? ? ID
? ? ? ? 名字
? ? ? ? 年齡
? ? ? ? 1001
? ? ? ? 李雷
? ? ? ? 18
</table>
鏈接 a
<a href="#">發(fā)送</a>
圖片 img
表單標簽 form 輸入框 input
文本域 textarea
下拉列表 select + option
提交/重置按鈕/lable標簽
<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標簽中
嵌入式CSS樣式:寫在當前文件中
<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、標簽選擇器 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 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、標簽的權(quán)值為1
2、類選擇符的權(quán)值為10
3、ID選擇符的權(quán)值最高為100
如果樣式作用在一個標簽上,根據(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>
層疊
當作用在同一個標簽上的樣式權(quán)值相同時,那么后面的樣式會生效
內(nèi)聯(lián)樣式表（標簽內(nèi)部）> 嵌入樣式表（當前文件中）> 外部樣式表（外部文件中）
重要性? !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類型
隱藏標簽 <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標簽的默認下劃線
text-decoration: none;
取消無序列表的點
list-style: none;
取消input的邊框以及焦點
outline: none;
border: none;
?
?
</center>
原型地址:
https://www.xiaopiu.com/web/byId?type=project&id=5d6a109262ad1e4d5efc56f6
