4.前端基礎HTML+CSS
簡述
一個網站的前端主要是兩個部分，界面和交互茎辐，界面就是長什么樣宪郊，有的好看眉睹，有的丑。交互此處指的是與后端的交互废膘，傳遞接收數據竹海。
本篇主要是講述html css js以及jquery使用。前端主要是這么幾個部分丐黄，html寫頁面結構斋配，css寫樣式，js寫各種交互灌闺，jquery是常用的一個js框架封裝了簡化的函數艰争。
html
html就是頁面的結構，骨干桂对。主要的幾個部分甩卓，以及常用標簽
標簽分兩種形式
<xx></xx>，<xx/>
結構
<html>
<head>頭蕉斜，此處通常
1.引入css
<link rel="stylesheet" type="text/css" href="xxxx.css路徑地址">
引入js文件
<script type="text/javascript" src="xxx.js路徑地址"></script>
2.網站標題等利于SEO搜索引擎優(yōu)化
<title>網站標題</title>
以及<meta>描述網站關鍵詞
</head>
<body>身體逾柿，寫網站的結構，這一塊是顯示什么宅此，另一塊顯示什么</body>
</html>
為什么要從外部引入css,js机错，寫在當前html文件也是可以的，但是有些公共的css父腕，js弱匪，你不能每個頁面html都寫一遍吧，所以公共css璧亮，js萧诫，在需要的頁面引入即可調用。當前頁面的css枝嘶，js也可以采用如下寫法帘饶，寫在特定區(qū)域內
<style type="text/css">
//當前html中，寫css樣式代碼的區(qū)域
</style>
<script type="text/javascript">
//當前html中躬络，寫js代碼的區(qū)域
</script>
注釋尖奔，html中注釋寫法不同于//搭儒，如下所示
塊
之前提到了穷当，html就是網站的結構。有head頭淹禾，有body身體馁菜，像一個人，但是人身上很多個部位铃岔，胳膊汪疮，有腿峭火，有手，有腳智嚷，這一個個的部位就像是html的一個個塊
html也一定的結構塊卖丸，比如博客，這一塊可能是網站的導航欄盏道，那一塊是網站的文章內容稍浆，另一塊可能是作者信息。這個塊用什么區(qū)分猜嘱，就是div
1.<div>內容</div>
相當于容器衅枫，把各種各樣的其他元素寫在這里面，如表格table朗伶，img圖像弦撩，文章等。
div可以很大论皆，可以很小益楼，就是一塊塊的，一個大div里面可以有很多小div
2.<span></span>
一般用來放文本
html結構
也就是這個網站的結構点晴，區(qū)塊偏形。最開始是產品經理設計好網站展示的大致內容，如這一塊顯示用戶信息觉鼻，另一塊顯示用戶的訂單俊扭，簡單草圖，原型圖坠陈，然后是專門的UI設計師萨惑，美化這個界面，這一塊什么顏色仇矾，另一塊樣式是圓的還是方的庸蔼，ps之類工具做出UI設計圖
前端拿到UI圖后，就要轉成實際顯示網頁html css文件
1.開始思考結構贮匕，頭部姐仅，軀干，腳部刻盐，先看這三塊掏膏，最上面，最下面敦锌，中間馒疹。根據具體UI圖，然后每一塊布局怎么寫乙墙，比如軀干颖变，又分為左邊生均，右邊，這每一邊腥刹，又可能是上中下马胧，總之是一塊一塊的。思考大塊衔峰，每一塊的大致包含內容漓雅。
如博客頁面，最上面朽色，導航欄邻吞，中間是各種文章，最下面網站備案信息葫男。先把最明顯的div分出來抱冷，然后中間文章，又好幾個文章梢褐，每一個文章又分為左邊旺遮，預覽圖，右邊標題簡介盈咳。
2.細化結構耿眉，這一塊，用什么標簽來寫鱼响。完成之后鸣剪，你的網站大致樣子就出來了，就是比較丑
3.寫好了網站的結構丈积，該做美化了筐骇，就是寫css，寫布局江滨，具體邊距是多大铛纬，這一塊外邊框是原型，另一塊顏色用紅色唬滑，這一塊顯示一個logo圖片等等等
補充下告唆，通常拿到ui要進行切圖和標注
切圖，就是比如UI設計了一個很好看的logo晶密，你怎么把這個圖片從psd的設計圖里面弄出來擒悬，變成一個單獨的小圖片png
標注，就比如ui規(guī)定惹挟，你這個塊內容茄螃，就多長多寬缝驳，多高连锯，和周圍的其他塊的距離是多大
現(xiàn)在借助各種工具归苍，如藍湖，pxcook等运怖，切圖標注自動生成
常用標簽
標簽就是代表這一塊是怎么顯示拼弃，因為瀏覽器接收到了存在服務器的html文件，是不是要加載摇展，瀏覽器怎么知道怎么加載吻氧，每一塊怎么顯示？因為有一套國際標準咏连，遵守這套標準即可
屬性盯孙，標簽是可以有屬性的，用來指定這個標簽的信息祟滴，多是 鍵值對形式
屬性名name="屬性的值" 振惰，如<a href="href表明這個的網址url">a標簽，點擊跳轉到新頁面</a>
文字類
1.h 1234標題系列
<h1>h1標題內容</h1>
<h2>h2標題內容</h2>
還有h3,h4等等等
寫在這類標簽里面的字體 加粗垄懂，變大
2.<hr /> 水平線
顯示一個水平橫線骑晶，常用來顯示內容分割，比如這一段寫完了草慧，加一個橫線桶蛔，幫助用戶區(qū)分內容
3.<p></p> 段落
<p>段落內容</p>
一般是一篇文章，里面好幾個段落
4.<br /> 換行
相當于word里面你打回車漫谷，換下一行
鏈接
1.<a></a> 鏈接
<a href="地址url">內容如文字仔雷，按鈕等</a>
點擊內容部分可能是按鈕，也可能是文字舔示，打開新的鏈接地址url
常用target="_blank"
如下
<a href="地址" target="_blank">內容</a>
在瀏覽器的新窗口打開新的頁面朽寞，不加這個是當前的窗口
表格
表格就像是excel表，展示數據很常用斩郎。尤其是各種后臺管理系統(tǒng)脑融，顯示各種列表，訂單列表缩宜，用戶列表
<table>
<tr>
<th>用戶id</th>
<th>用戶名</th>
</tr>
<!-- 上面th是表頭 -->
<!-- 下面td是表格內容 -->
<tr>
<td>1</td>
<td>用戶1名字</td>
</tr>
<tr>
<td>2</td>
<td>用戶2名字</td>
</tr>
</table>
1.<tr>就是行肘迎，row，一個表是不是很多行锻煌， <tr>這一行的內容</tr>
2.這里th td是啥妓布， 這都是列，一個就是一列宋梧。
3.th td什么區(qū)別匣沼，想想excel表格，最上面第一行（th）是不是寫的這一列代表什么數據捂龄，就是表頭释涛，如這一列是id加叁，另一列是用戶名。那么剩下的很多內容唇撬，列就是td了
列表
這個列就像是你的 任務清單列表它匕，一行一行的
通常寫網站導航
<ul>
<li>第一項</li>
<li>第二項</li>
</ul>
圖像、音頻窖认、視頻
1.圖片
<img src="url" alt="文字內容"/>
src寫圖片的url地址
alt寫這個圖片內容豫柬，鼠標放上去，會有個小提示扑浸，就是alt的內容
音頻烧给，視頻為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，展示各種折線圖系奉，柱狀圖檬贰，散點圖，餅圖各種各樣的圖表缺亮，后臺數據統(tǒng)計使用比較多
表單
以上全部翁涤，都是展示類的標簽，展示文字萌踱，圖片葵礼，表格等，把內容展示給用戶看并鸵。另一類是屬于交互類鸳粉，比如你參加一個調查問卷，提交信息园担，需要你輸入填寫信息的届谈，這個就是表單
<form action="xxx.php表單提交給哪個后端文件處理" method="POST形式">
<input type="text" name="name">
<!-- form這里面寫各種input框，按鈕等 -->
</form>
method為post形式時弯汰，通常為提交信息艰山，填了一個問卷，填了一個訂單信息咏闪，填了一個用戶信息曙搬，一個商品。如后臺管理 ，創(chuàng)建一個新商品
為get時纵装，常用來做查詢操作征讲，加入各種篩選條件，如商品分類搂擦，關鍵詞等
通常
1.input
input就是輸入框稳诚，input主要幾個元素
type哗脖，name瀑踢，value
type就是這個input框的形式，可以顯示為文本輸入才避，也可以選擇框
text為輸入文本橱夭，最常見的文本框，如輸入用戶名桑逝，其他文本
password輸入密碼棘劣，輸入了會以* 星號
number只能輸入數字，如限定輸入金額等楞遏，只能是數字
radio茬暇，這是單選框，二選一寡喝，或者多選一糙俗，必須只能選一個
<input type="radio" name="sex" value="male" checked>Male
<input type="radio" name="sex" value="female">Female
同一組的radio單選框，name是相同的预鬓，name是啥巧骚，這個和后端交互，發(fā)送數據相關格二。發(fā)送的數據是不是要告訴后端這個數據是干什么的劈彪，和value是一對，如果只發(fā)送male男顶猜，不知道這是什么意思吧沧奴，如果發(fā)送sex=male男，是不是就知道這個數據是性別长窄，男扼仲。結合前面php基礎部分，接收請求抄淑。
注意屠凶，表單輸入，必須都有一個name肆资，表示當前輸入的參數名稱
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 默認展示的內容女器，提示。等很多
2.下拉列表select
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>住诸、
</select>
點擊后驾胆，展示下拉列表，就是這些option選項贱呐，單選
很常用的選擇形式丧诺，適用于較多選擇內容。如果固定就幾個值奄薇，性別這種2個選項驳阎，用input radio單選框
3.文本域textarea
<textarea name="message" rows="10" cols="30">
輸入大段文字
</textarea>
適合輸入文章，等大段內容馁蒂。
但是對于要求格式呵晚，內容的大段文字，圖文輸入沫屡，通常使用各種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通常用來彈出提示，有時用來調試筐乳，看輸出的內容對不對歌殃，是不是執(zhí)行了代碼。建議用console.log蝙云，在瀏覽器的console看氓皱，因為顯示數據全面
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的值可以重復宙刘，很多個標簽都叫這個class。一般是寫css定位牢酵，不同的標簽樣式不一樣悬包，同一類class的標簽，同樣的css樣式style馍乙。用來綁定行為事件執(zhí)行js也可以布近。通過 . 點 獲取該class名字的標簽元素
通常用于
1.寫css代碼，綁定樣式丝格。
2.用戶操作觸發(fā)事件撑瞧，方便js代碼操作數據，獲取或者修改標簽的數據
CSS
css就是頁面標簽元素的樣式显蝌，位置预伺，間距，大小，形狀扭屁，顏色等一系列樣式算谈。
掌握基本的css布局寫法，以及樣式調試料滥。
.btn {
display: block; // class為btn的元素然眼，display屬性為block
}
寫法
采用3種寫法引入css樣式，
1.引入外部css文件
2.寫在特定區(qū)域內葵腹，內部樣式
<style type="text/css"></style>
3.寫在標簽里面高每，style="" ，作為一個屬性践宴。內聯(lián)樣式
優(yōu)先級
一個項目內同一個標簽很可能有多種樣式鲸匿，最終怎么顯示，是有一個優(yōu)先級的問題阻肩。
寫在標簽里面的樣式優(yōu)先級最高>id選擇器>class選擇器>標簽元素選擇>瀏覽器默認樣式
id選擇器带欢，class選擇器，是之前提到的標簽定位選擇器部分烤惊。
標簽元素選擇乔煞，指選中 同一類的標簽，比如button柒室，指代全部按鈕button元素
css布局
傳統(tǒng)的布局渡贾，主要是盒模型。三種形式雄右，文檔流空骚，定位（相對、絕對）擂仍，浮動布局
布局基礎
提到布局囤屹，要知道是怎么布局，有一個關鍵css屬性
1.display
每一個標簽元素都有一個display屬性
display:block防楷，就是塊級元素牺丙，從新的一行開始，獨占一整行复局。像是寫文章冲簿，不管你這段話多少字。
從新的一行開始亿昏，這一行就被占滿了
后面的只能在下一行顯示了
常見有些標簽元素是默認塊級元素
<div>,<h系列>,<table>,<form>
display:none
通常被用來在不刪除元素的情況下隱藏元素
display:inline峦剔，內聯(lián)元素，和其他標簽元素在一行角钩，共同占一行吝沫，大小間距不能設置呻澜，一般就是內部包含的元素大小。常見
<a>惨险、<span>羹幸、<lable>等
display:inline-block，內聯(lián)塊狀元素辫愉，和其他標簽元素在一行栅受，大小間距可設置
<img>、<input>
2.盒模型
一個標簽元素就像是一個盒子恭朗，如果這個標簽里面或者外面還有套的盒子屏镊，那是不是會有邊距。
這個盒子和他外層盒子痰腮，是不是外邊距而芥。他內層套的盒子，是不是內邊距膀值。另外這個盒子是不是也有個厚度棍丐，有的盒子厚，有的薄虫腋，這就是邊框
同時這個邊距是分上下左右這幾個方向的骄酗。
想象你有三個快遞盒子稀余，小盒子的放在了中等大的盒子里悦冀，中等大的盒子 又放在大盒子里。對于這個在中間的快遞盒子來說睛琳，和小盒子這個就是內邊距盒蟆，和大盒子就是外邊距。
外邊距margin
內邊距padding
邊框border
隨便打開瀏覽器開發(fā)者模式师骗，element->styles历等，選中某個元素后，css旁邊會顯示一個 方框辟癌，中間這個實體黑框就是這個盒子寒屯，和外面的間距是margin外邊距，內部間距就是padding內邊距黍少，盒子本身厚度邊框border
了解盒模型寡夹，幫助理解寫css布局的時候，與周圍標簽元素間距離問題厂置。
padding:20px 10px 15px 30px; 這種表示邊距的寫法菩掏，順序為上、右昵济、下智绸、左(順時針)
或者與四個邊間距單獨寫野揪，XXX -top,如margin-top,或者 -bottom，-left,-right
px是個啥瞧栗，是個長度單位斯稳，就好比cm厘米，米迹恐。表示間距大小平挑，或者字體大小，長寬高大小系草，此外還有類似單位rem通熄，rpx（微信小程序），以及百分比%
三種傳統(tǒng)布局
1.文檔流布局display
之前提到display找都，塊級獨占一行唇辨，內聯(lián)共享占一行。
網頁加載就像是寫文章能耻，一行行的往下寫
塊級赏枚，display:block元素直接獨占一行
內聯(lián), display:inline的都擠在同一行，從左到右水平顯示
2.浮動布局Float
之前的獨占一行是不是太浪費空間了晓猛，可能一個元素很小一部分饿幅，也獨占一行，只是占了一點點地方戒职，他右邊是不是大片空白栗恩。
怎么讓他下邊的塊級元素也跟著上來，他倆并排顯示洪燥，讓他倆占一行磕秤，一個左邊，另一個靠著他在他右邊
div{
float:left; //float屬性捧韵，left左浮動市咆，往左邊放，right右浮動再来，放到右邊
}
比較常用的布局方法蒙兰，讓不同塊級標簽元素，都在同一行并排顯示
3.定位布局Position（相對relative芒篷、絕對absolute搜变、固定fixed）
這個定位布局，屬于層模型梭伐，原來不都是文檔流痹雅，一行行往下寫。現(xiàn)在有新的需求糊识，增加了一個層的概念绩社。
就好比寫文章摔蓝，你在文章上 貼一個貼畫，貼在文字上面愉耙。這個貼畫是不是和文章不在同一層贮尉，他在上一層，因為貼在上面了朴沿。
分為是相對定位猜谚，絕對定位這幾種。
這個定位是不是得有個參照物才能進行定位赌渣，有個對比參照魏铅。是和哪一個標簽的位置對比的
相對定位
相對定位是相對于原來的位置，就是原來在這個文檔流里面的位置坚芜，此時還在這一層里面览芳，簡單說，他原來的位置依然保留鸿竖，不會被占用沧竟。
好比寫文章，寫到這里缚忧，該配一個插圖悟泵。但是不想放這里，我想相對與這個應該在的原來位置闪水，放的往左邊糕非，往上邊挪動一點。剩下的文章會繞過插圖原來所在的位置敦第，繼續(xù)寫
div{
position:relative; /*相對定位*/
left:10px;
top:10px;
}
絕對定位
絕對定位峰弹，是相對于他最近的具有定位屬性position的父級塊狀元素（左上角），如果沒有芜果，就是相對于body或者相對于瀏覽器。這個相當于不在原來的層里融师，到了上一層右钾，不占用原來的位置了，剩下的內容占用他的位置繼續(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
內邊距padding
UI框架
網站通常風格界面是相似的王带，自己都實現(xiàn)，一個個的寫css是不是很麻煩市殷，就出來了UI框架愕撰，如最知名的Bootstrap，提供各種樣式的 按鈕醋寝，表格搞挣，輪播圖常用組件等，用戶引入后即可使用音羞。
另一個是響應式布局囱桨， 因為不同用戶設備大小不一樣，你的電腦14寸嗅绰，他的12寸舍肠，分辨率也不同，所以要根據不同大小適配不同樣式窘面。這類框架通常提供柵格布局解決這類響應式問題翠语，在不同大小設備小，顯示不同內容财边，保證效果
PC端
常見的
Bootstrap
很多網站都是基于bootstrap來寫的肌括，尤其是很多后臺管理
建議使用bootstrap這種使用人數多，有長期維護更新團隊管理的項目酣难，有些小項目谍夭，可能個人維護黑滴，一段時間忙后面就不管了，出了bug也沒人解決
layui
尤其是layer彈出層慧库，比較常用跷跪，很多后臺admin也是基于layui
element-ui
很不錯的風格，餓了么團隊開發(fā)的齐板，尤其適合vue項目
iview ui
也是基于vue的ui組件庫吵瞻，也有移動版，小程序版的
amazeui等
移動端
vant
有贊推出甘磨，很適合開發(fā)移動端商城橡羞，有weapp小程序版
weui
微信官方項目，微信風格济舆，支持小程序
mint ui
vux
cube ui
滴滴團隊開發(fā)的移動端ui庫
UI框架卿泽，要會用，多看看官方手冊滋觉。很多時候签夭，沒必要自己寫UI，尤其是沒有專門的UI情況下椎侠，自己寫的大多丑第租，別人封裝的好看，符合大眾審美風格我纪，調用也簡單慎宾。
