4.前端基礎(chǔ)HTML+CSS
簡述
一個網(wǎng)站的前端主要是兩個部分，界面和交互，界面就是長什么樣，有的好看，有的丑。交互此處指的是與后端的交互，傳遞接收數(shù)據(jù)。
本篇主要是講述html css js以及jquery使用。前端主要是這么幾個部分，html寫頁面結(jié)構(gòu)，css寫樣式，js寫各種交互，jquery是常用的一個js框架封裝了簡化的函數(shù)。
html
html就是頁面的結(jié)構(gòu)，骨干。主要的幾個部分，以及常用標簽
標簽分兩種形式
<xx></xx>，<xx/>
結(jié)構(gòu)
<html>
<head>頭，此處通常
1.引入css
<link rel="stylesheet" type="text/css" href="xxxx.css路徑地址">
引入js文件
<script type="text/javascript" src="xxx.js路徑地址"></script>
2.網(wǎng)站標題等利于SEO搜索引擎優(yōu)化
<title>網(wǎng)站標題</title>
以及<meta>描述網(wǎng)站關(guān)鍵詞
</head>
<body>身體，寫網(wǎng)站的結(jié)構(gòu)，這一塊是顯示什么，另一塊顯示什么</body>
</html>
為什么要從外部引入css,js，寫在當前html文件也是可以的，但是有些公共的css，js，你不能每個頁面html都寫一遍吧，所以公共css，js，在需要的頁面引入即可調(diào)用。當前頁面的css，js也可以采用如下寫法，寫在特定區(qū)域內(nèi)
<style type="text/css">
//當前html中，寫css樣式代碼的區(qū)域
</style>
<script type="text/javascript">
//當前html中，寫js代碼的區(qū)域
</script>
注釋，html中注釋寫法不同于//，如下所示
塊
之前提到了，html就是網(wǎng)站的結(jié)構(gòu)。有head頭，有body身體，像一個人，但是人身上很多個部位，胳膊，有腿，有手，有腳，這一個個的部位就像是html的一個個塊
html也一定的結(jié)構(gòu)塊，比如博客，這一塊可能是網(wǎng)站的導(dǎo)航欄，那一塊是網(wǎng)站的文章內(nèi)容，另一塊可能是作者信息。這個塊用什么區(qū)分，就是div
1.<div>內(nèi)容</div>
相當于容器，把各種各樣的其他元素寫在這里面，如表格table，img圖像，文章等。
div可以很大，可以很小，就是一塊塊的，一個大div里面可以有很多小div
2.<span></span>
一般用來放文本
html結(jié)構(gòu)
也就是這個網(wǎng)站的結(jié)構(gòu)，區(qū)塊。最開始是產(chǎn)品經(jīng)理設(shè)計好網(wǎng)站展示的大致內(nèi)容，如這一塊顯示用戶信息，另一塊顯示用戶的訂單，簡單草圖，原型圖，然后是專門的UI設(shè)計師，美化這個界面，這一塊什么顏色，另一塊樣式是圓的還是方的，ps之類工具做出UI設(shè)計圖
前端拿到UI圖后，就要轉(zhuǎn)成實際顯示網(wǎng)頁html css文件
1.開始思考結(jié)構(gòu)，頭部，軀干，腳部，先看這三塊，最上面，最下面，中間。根據(jù)具體UI圖，然后每一塊布局怎么寫，比如軀干，又分為左邊，右邊，這每一邊，又可能是上中下，總之是一塊一塊的。思考大塊，每一塊的大致包含內(nèi)容。
如博客頁面，最上面，導(dǎo)航欄，中間是各種文章，最下面網(wǎng)站備案信息。先把最明顯的div分出來，然后中間文章，又好幾個文章，每一個文章又分為左邊，預(yù)覽圖，右邊標題簡介。
2.細化結(jié)構(gòu)，這一塊，用什么標簽來寫。完成之后，你的網(wǎng)站大致樣子就出來了，就是比較丑
3.寫好了網(wǎng)站的結(jié)構(gòu)，該做美化了，就是寫css，寫布局，具體邊距是多大，這一塊外邊框是原型，另一塊顏色用紅色，這一塊顯示一個logo圖片等等等
補充下，通常拿到ui要進行切圖和標注
切圖，就是比如UI設(shè)計了一個很好看的logo，你怎么把這個圖片從psd的設(shè)計圖里面弄出來，變成一個單獨的小圖片png
標注，就比如ui規(guī)定，你這個塊內(nèi)容，就多長多寬，多高，和周圍的其他塊的距離是多大
現(xiàn)在借助各種工具，如藍湖，pxcook等，切圖標注自動生成
常用標簽
標簽就是代表這一塊是怎么顯示，因為瀏覽器接收到了存在服務(wù)器的html文件，是不是要加載，瀏覽器怎么知道怎么加載，每一塊怎么顯示？因為有一套國際標準，遵守這套標準即可
屬性，標簽是可以有屬性的，用來指定這個標簽的信息，多是 鍵值對形式
屬性名name="屬性的值" ，如<a href="href表明這個的網(wǎng)址url">a標簽，點擊跳轉(zhuǎn)到新頁面</a>
文字類
1.h 1234標題系列
<h1>h1標題內(nèi)容</h1>
<h2>h2標題內(nèi)容</h2>
還有h3,h4等等等
寫在這類標簽里面的字體 加粗，變大
2.<hr /> 水平線
顯示一個水平橫線，常用來顯示內(nèi)容分割，比如這一段寫完了，加一個橫線，幫助用戶區(qū)分內(nèi)容
3.<p></p> 段落
<p>段落內(nèi)容</p>
一般是一篇文章，里面好幾個段落
4.<br /> 換行
相當于word里面你打回車，換下一行
鏈接
1.<a></a> 鏈接
<a href="地址url">內(nèi)容如文字，按鈕等</a>
點擊內(nèi)容部分可能是按鈕，也可能是文字，打開新的鏈接地址url
常用target="_blank"
如下
<a href="地址" target="_blank">內(nèi)容</a>
在瀏覽器的新窗口打開新的頁面，不加這個是當前的窗口
表格
表格就像是excel表，展示數(shù)據(jù)很常用。尤其是各種后臺管理系統(tǒng)，顯示各種列表，訂單列表，用戶列表
<table>
<tr>
<th>用戶id</th>
<th>用戶名</th>
</tr>
<!-- 上面th是表頭 -->
<!-- 下面td是表格內(nèi)容 -->
<tr>
<td>1</td>
<td>用戶1名字</td>
</tr>
<tr>
<td>2</td>
<td>用戶2名字</td>
</tr>
</table>
1.<tr>就是行，row，一個表是不是很多行， <tr>這一行的內(nèi)容</tr>
2.這里th td是啥， 這都是列，一個就是一列。
3.th td什么區(qū)別，想想excel表格，最上面第一行（th）是不是寫的這一列代表什么數(shù)據(jù)，就是表頭，如這一列是id，另一列是用戶名。那么剩下的很多內(nèi)容，列就是td了
列表
這個列就像是你的 任務(wù)清單列表，一行一行的
通常寫網(wǎng)站導(dǎo)航
<ul>
<li>第一項</li>
<li>第二項</li>
</ul>
圖像、音頻、視頻
1.圖片
<img src="url" alt="文字內(nèi)容"/>
src寫圖片的url地址
alt寫這個圖片內(nèi)容，鼠標放上去，會有個小提示，就是alt的內(nèi)容
音頻，視頻為html5標準提供的，就是最新的html標準，簡稱h5
2.音頻
<audio controls>
<source src="xxx.mp3" type="audio/mpeg">
</audio>
3.視頻
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
通常音頻，視頻會使用第三方封裝的插件，解決不同瀏覽器兼容性，文件格式解碼之類的各種問題
圖表類
這類一般借助第三方插件實現(xiàn)，如echarts，展示各種折線圖，柱狀圖，散點圖，餅圖各種各樣的圖表，后臺數(shù)據(jù)統(tǒng)計使用比較多
表單
以上全部，都是展示類的標簽，展示文字，圖片，表格等，把內(nèi)容展示給用戶看。另一類是屬于交互類，比如你參加一個調(diào)查問卷，提交信息，需要你輸入填寫信息的，這個就是表單
<form action="xxx.php表單提交給哪個后端文件處理" method="POST形式">
<input type="text" name="name">
<!-- form這里面寫各種input框，按鈕等 -->
</form>
method為post形式時，通常為提交信息，填了一個問卷，填了一個訂單信息，填了一個用戶信息，一個商品。如后臺管理 ，創(chuàng)建一個新商品
為get時，常用來做查詢操作，加入各種篩選條件，如商品分類，關(guān)鍵詞等
通常
1.input
input就是輸入框，input主要幾個元素
type，name，value
type就是這個input框的形式，可以顯示為文本輸入，也可以選擇框
text為輸入文本，最常見的文本框，如輸入用戶名，其他文本
password輸入密碼，輸入了會以* 星號
number只能輸入數(shù)字，如限定輸入金額等，只能是數(shù)字
radio，這是單選框，二選一，或者多選一，必須只能選一個
<input type="radio" name="sex" value="male" checked>Male
<input type="radio" name="sex" value="female">Female
同一組的radio單選框，name是相同的，name是啥，這個和后端交互，發(fā)送數(shù)據(jù)相關(guān)。發(fā)送的數(shù)據(jù)是不是要告訴后端這個數(shù)據(jù)是干什么的，和value是一對，如果只發(fā)送male男，不知道這是什么意思吧，如果發(fā)送sex=male男，是不是就知道這個數(shù)據(jù)是性別，男。結(jié)合前面php基礎(chǔ)部分，接收請求。
注意，表單輸入，必須都有一個name，表示當前輸入的參數(shù)名稱
checked代表當前被選中
checkbox，多選框，可以選打勾好幾個
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<input type="checkbox" name="vehicle" value="Car">I have a car
同上name和value
此外有些屬性如 checked，代表選中，還有disabled禁止輸入，readonly不能修改，value默認值，placeholder 默認展示的內(nèi)容，提示。等很多
2.下拉列表select
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>、
</select>
點擊后，展示下拉列表，就是這些option選項，單選
很常用的選擇形式，適用于較多選擇內(nèi)容。如果固定就幾個值，性別這種2個選項，用input radio單選框
3.文本域textarea
<textarea name="message" rows="10" cols="30">
輸入大段文字
</textarea>
適合輸入文章，等大段內(nèi)容。
但是對于要求格式，內(nèi)容的大段文字，圖文輸入，通常使用各種editor插件，如百度的ueditor，支持各種格式，下劃線等，可以直接插入圖片
4.按鈕button
<button type="button" onclick="alert('Hello World!')">點擊</button>
type為button，就是普通按鈕。如果為submit，則提交當前form表單。
此處onclick，引出事件這個東西，事件是什么，就是用戶的操作，點擊了某個元素，改變onchange了某個值，按下鍵盤onkeydown，失去焦點onblur。這里面表明的是，用戶進行該操作（觸發(fā)事件），執(zhí)行什么js代碼。
這個地方是click點擊后，alert彈出一個對話框hello word。
alert通常用來彈出提示，有時用來調(diào)試，看輸出的內(nèi)容對不對，是不是執(zhí)行了代碼。建議用console.log，在瀏覽器的console看，因為顯示數(shù)據(jù)全面
5.文件上傳file
<input type="file" name="avatar" accept="image/png, image/jpeg">
點擊后彈出一個文件選擇框，選擇文件，確定或取消
此處accept屬性，代表接受的文件類型，這里是圖片png和jpeg形式的圖片
multiple屬性也常用，表示多選上傳
也有很多上傳upload插件供選擇，如百度uploader
標簽定位選擇器
同一個html里面，是不是很多個標簽，比如按鈕button可能好幾個，都叫button，你怎么確定是哪一個，這就需要選擇器來定位是哪一個，就是起一個名字，要么叫做id，要么叫做class
1.通過id="" ，id屬性的值是唯一的。一般用來給標簽元素綁定一個行為事件，就比如點擊之后執(zhí)行js代碼。通過 # 獲取id的標簽元素
2.通過class="" ，class的值可以重復(fù)，很多個標簽都叫這個class。一般是寫css定位，不同的標簽樣式不一樣，同一類class的標簽，同樣的css樣式style。用來綁定行為事件執(zhí)行js也可以。通過 . 點 獲取該class名字的標簽元素
通常用于
1.寫css代碼，綁定樣式。
2.用戶操作觸發(fā)事件，方便js代碼操作數(shù)據(jù)，獲取或者修改標簽的數(shù)據(jù)
CSS
css就是頁面標簽元素的樣式，位置，間距，大小，形狀，顏色等一系列樣式。
掌握基本的css布局寫法，以及樣式調(diào)試。
.btn {
display: block; // class為btn的元素，display屬性為block
}
寫法
采用3種寫法引入css樣式，
1.引入外部css文件
2.寫在特定區(qū)域內(nèi)，內(nèi)部樣式
<style type="text/css"></style>
3.寫在標簽里面，style="" ，作為一個屬性。內(nèi)聯(lián)樣式
優(yōu)先級
一個項目內(nèi)同一個標簽很可能有多種樣式，最終怎么顯示，是有一個優(yōu)先級的問題。
寫在標簽里面的樣式優(yōu)先級最高>id選擇器>class選擇器>標簽元素選擇>瀏覽器默認樣式
id選擇器，class選擇器，是之前提到的標簽定位選擇器部分。
標簽元素選擇，指選中 同一類的標簽，比如button，指代全部按鈕button元素
css布局
傳統(tǒng)的布局，主要是盒模型。三種形式，文檔流，定位（相對、絕對），浮動布局
布局基礎(chǔ)
提到布局，要知道是怎么布局，有一個關(guān)鍵css屬性
1.display
每一個標簽元素都有一個display屬性
display:block，就是塊級元素，從新的一行開始，獨占一整行。像是寫文章，不管你這段話多少字。
從新的一行開始，這一行就被占滿了
后面的只能在下一行顯示了
常見有些標簽元素是默認塊級元素
<div>,<h系列>,<table>,<form>
display:none
通常被用來在不刪除元素的情況下隱藏元素
display:inline，內(nèi)聯(lián)元素，和其他標簽元素在一行，共同占一行，大小間距不能設(shè)置，一般就是內(nèi)部包含的元素大小。常見
<a>、<span>、<lable>等
display:inline-block，內(nèi)聯(lián)塊狀元素，和其他標簽元素在一行，大小間距可設(shè)置
<img>、<input>
2.盒模型
一個標簽元素就像是一個盒子，如果這個標簽里面或者外面還有套的盒子，那是不是會有邊距。
這個盒子和他外層盒子，是不是外邊距。他內(nèi)層套的盒子，是不是內(nèi)邊距。另外這個盒子是不是也有個厚度，有的盒子厚，有的薄，這就是邊框
同時這個邊距是分上下左右這幾個方向的。
想象你有三個快遞盒子，小盒子的放在了中等大的盒子里，中等大的盒子 又放在大盒子里。對于這個在中間的快遞盒子來說，和小盒子這個就是內(nèi)邊距，和大盒子就是外邊距。
外邊距margin
內(nèi)邊距padding
邊框border
隨便打開瀏覽器開發(fā)者模式，element->styles，選中某個元素后，css旁邊會顯示一個 方框，中間這個實體黑框就是這個盒子，和外面的間距是margin外邊距，內(nèi)部間距就是padding內(nèi)邊距，盒子本身厚度邊框border
了解盒模型，幫助理解寫css布局的時候，與周圍標簽元素間距離問題。
padding:20px 10px 15px 30px; 這種表示邊距的寫法，順序為上、右、下、左(順時針)
或者與四個邊間距單獨寫，XXX -top,如margin-top,或者 -bottom，-left,-right
px是個啥，是個長度單位，就好比cm厘米，米。表示間距大小，或者字體大小，長寬高大小，此外還有類似單位rem，rpx（微信小程序），以及百分比%
三種傳統(tǒng)布局
1.文檔流布局display
之前提到display，塊級獨占一行，內(nèi)聯(lián)共享占一行。
網(wǎng)頁加載就像是寫文章，一行行的往下寫
塊級，display:block元素直接獨占一行
內(nèi)聯(lián), display:inline的都擠在同一行，從左到右水平顯示
2.浮動布局Float
之前的獨占一行是不是太浪費空間了，可能一個元素很小一部分，也獨占一行，只是占了一點點地方，他右邊是不是大片空白。
怎么讓他下邊的塊級元素也跟著上來，他倆并排顯示，讓他倆占一行，一個左邊，另一個靠著他在他右邊
div{
float:left; //float屬性，left左浮動，往左邊放，right右浮動，放到右邊
}
比較常用的布局方法，讓不同塊級標簽元素，都在同一行并排顯示
3.定位布局Position（相對relative、絕對absolute、固定fixed）
這個定位布局，屬于層模型，原來不都是文檔流，一行行往下寫?，F(xiàn)在有新的需求，增加了一個層的概念。
就好比寫文章，你在文章上 貼一個貼畫，貼在文字上面。這個貼畫是不是和文章不在同一層，他在上一層，因為貼在上面了。
分為是相對定位，絕對定位這幾種。
這個定位是不是得有個參照物才能進行定位，有個對比參照。是和哪一個標簽的位置對比的
相對定位
相對定位是相對于原來的位置，就是原來在這個文檔流里面的位置，此時還在這一層里面，簡單說，他原來的位置依然保留，不會被占用。
好比寫文章，寫到這里，該配一個插圖。但是不想放這里，我想相對與這個應(yīng)該在的原來位置，放的往左邊，往上邊挪動一點。剩下的文章會繞過插圖原來所在的位置，繼續(xù)寫
div{
position:relative; /*相對定位*/
left:10px;
top:10px;
}
絕對定位
絕對定位，是相對于他最近的具有定位屬性position的父級塊狀元素（左上角），如果沒有，就是相對于body或者相對于瀏覽器。這個相當于不在原來的層里，到了上一層，不占用原來的位置了，剩下的內(nèi)容占用他的位置繼續(xù)。
比如說寫文章，寫了一段文字，這一段文字得貼個貼畫，絕對定位，就是相對于這段文字的位置來。貼畫原來的空間位置被占用，剩下文章從他原來的位置繼續(xù)寫。如下left為在距離這段文字（父級塊狀元素）左邊10px，距離上邊10px。如果沒有這段文字，那就是相對于你這一頁紙（瀏覽器窗口）
div{
position:absolute; /*絕對定位*/
left:10px;
top:10px;
}
子絕父相是一種常用布局方式，relative與absolute組合使用。父級元素使用相對定位，繼續(xù)保留占位置，子元素用絕對定位，相對于父級進行定位，子元素不占位置，不影響其他子元素。
固定定位
相對于瀏覽器，固定在某一位置。不管頁面滑動，保持相同位置。
常用來，比如返回頂部按鈕，是固定住的
.fixed {
position: fixed;
bottom: 0;
right: 0;
}
常用樣式
邊框
border
border-radius 邊框圓角弧度
陰影
box-shadow
背景
background-image 背景圖片
字體
font-family 字體名，微軟雅黑之類
font-weight 粗細
font-size字體大小
顏色
color
寬
width
max-width
高
height
max-height
上下左右邊距
外邊距margin
內(nèi)邊距padding
UI框架
網(wǎng)站通常風(fēng)格界面是相似的，自己都實現(xiàn)，一個個的寫css是不是很麻煩，就出來了UI框架，如最知名的Bootstrap，提供各種樣式的 按鈕，表格，輪播圖常用組件等，用戶引入后即可使用。
另一個是響應(yīng)式布局， 因為不同用戶設(shè)備大小不一樣，你的電腦14寸，他的12寸，分辨率也不同，所以要根據(jù)不同大小適配不同樣式。這類框架通常提供柵格布局解決這類響應(yīng)式問題，在不同大小設(shè)備小，顯示不同內(nèi)容，保證效果
PC端
常見的
Bootstrap
很多網(wǎng)站都是基于bootstrap來寫的，尤其是很多后臺管理
建議使用bootstrap這種使用人數(shù)多，有長期維護更新團隊管理的項目，有些小項目，可能個人維護，一段時間忙后面就不管了，出了bug也沒人解決
layui
尤其是layer彈出層，比較常用，很多后臺admin也是基于layui
element-ui
很不錯的風(fēng)格，餓了么團隊開發(fā)的，尤其適合vue項目
iview ui
也是基于vue的ui組件庫，也有移動版，小程序版的
amazeui等
移動端
vant
有贊推出，很適合開發(fā)移動端商城，有weapp小程序版
weui
微信官方項目，微信風(fēng)格，支持小程序
mint ui
vux
cube ui
滴滴團隊開發(fā)的移動端ui庫
UI框架，要會用，多看看官方手冊。很多時候，沒必要自己寫UI，尤其是沒有專門的UI情況下，自己寫的大多丑，別人封裝的好看，符合大眾審美風(fēng)格，調(diào)用也簡單。
