8月20日
- 介紹Html標(biāo)簽和屬性戚哎，實(shí)際演示常用標(biāo)簽的書寫方法
- 介紹Css的配置原理和書寫規(guī)范
- 練習(xí)：仿制網(wǎng)頁 -
- 介紹JavaScript編程語言，JQuery框架和Ajax技術(shù)
- 練習(xí)：設(shè)計(jì)Tab切換和手風(fēng)琴樣式
Html標(biāo)簽
ul：無序列表翼抠； ol：有序列表查刻；
表單提交：直接在form表單中定義提交類型和submit按鈕祟剔；
這種方法已不常見，目前多用Ajax提交表單
Html屬性
通用的屬性：id扛稽、class和style；
采用Label標(biāo)簽通過for屬性導(dǎo)向表單控件滑负，改善鼠標(biāo)用戶的點(diǎn)擊體驗(yàn)在张；
標(biāo)簽<input type="button" />的效果與<button />一致，可用后者代替矮慕；Html表格的格式：
<table class="table">
<tr>
<th colspan="3"> Title </th>
</tr>
<tr>
<td rowspan="2"> Content </td>
<td> Content </td>
<td> Content </td>
</tr>
<tr>
<td> Content </td>
<td> Content </td>
</tr>
</table>
在元素標(biāo)簽中以width屬性規(guī)定列寬帮匾，要禁止過多的內(nèi)容改變表格外觀，
需要定義表格樣式table-layout: fixed;
建議將樣式相關(guān)的內(nèi)容放在單獨(dú)的style標(biāo)簽當(dāng)中痴鳄，以便于代碼的閱讀和維護(hù)瘟斜；
塊級元素和內(nèi)聯(lián)元素：
常見的塊級元素：h, p, ul, table
常見的內(nèi)聯(lián)元素：a, b, i, td, img, span, button, ...
Css = 選擇器 + 聲明
當(dāng)聲明內(nèi)容超過一個(gè)單詞，應(yīng)添加引號痪寻；聲明間應(yīng)以分號分隔螺句；
Css的意義：保證Html代碼的可讀性；
Html通過Link標(biāo)簽連接到外部Css槽华，如此一份Css可用于控制多個(gè)頁面的布局壹蔓；
當(dāng)控制組件的多個(gè)Css聲明沖突時(shí)，按如下優(yōu)先級排序：外部樣式表 < 內(nèi)部樣式表 < 內(nèi)聯(lián)樣式猫态；
對同一級的聲明佣蓉，后者優(yōu)先于前者
Css選擇器
不建議使用通配符，因?yàn)樗淖兞吮姸嗖怀Ｓ玫臉?biāo)簽樣式亲雪，將影響瀏覽器的性能勇凭；
建議使用類選擇器，來讓一份樣式表可以被同類元素多次使用义辕；
屬性選擇器的格式：
Label[attr1][attr2 = value]... { declaration... }
子元素選擇器
p > a與后代選擇器p a的區(qū)別：
子代選擇器只能選擇到直接子代虾标，而不能選擇更深層的子代；兄弟選擇器可按照元素的相鄰性來篩選灌砖，如
li + li選擇了除第一個(gè)以外的li元素璧函；
常用的Css偽類：
p:hover、:first-child基显、:last-child蘸吓、:nth-child(n)其中n除數(shù)字外還可以取odd或even，表示選中所有奇數(shù)或偶數(shù)號元素撩幽；
注意選擇子元素時(shí)库继，標(biāo)簽要精確到子元素級箩艺，而非其父級；
p:hover規(guī)定了鼠標(biāo)懸停在p上方時(shí)的樣式宪萄；
p:focus規(guī)定了p獲取到輸入焦點(diǎn)時(shí)的樣式Css偽元素：
p:before艺谆、:after在元素的前 / 后添加裝飾性的內(nèi)容
Css選擇器練習(xí)小游戲：Github
Css框模型
元素總尺寸 = 寬高 + 內(nèi)邊距 + 邊框；背景應(yīng)用在邊框和邊框以內(nèi)的區(qū)域拜英；
為了保證元素總尺寸不變静汤，修改padding時(shí)往往要同時(shí)修改寬高，
為了避免這種麻煩聊记，通過box-sizing: border-box;設(shè)置盒模型撒妈，
此時(shí)元素寬高將自動地優(yōu)先保證總尺寸不變，而不需要手動調(diào)整排监；相鄰元素在垂直方向上的外邊距將會被合并狰右，水平方向上則不會
Css定位
包括普通流、浮動和絕對定位舆床；
流：
塊級元素縱向排列棋蚌，內(nèi)聯(lián)元素在行內(nèi)排列；
Display屬性：
Block：塊級元素挨队；
Inline：內(nèi)聯(lián)元素谷暮，內(nèi)聯(lián)元素具有文字特性，換行將被解析為空格盛垦；
Inline-block：行內(nèi)塊元素湿弦，行內(nèi)顯示，兼具文字特性和樣式設(shè)定能力腾夯；
None：不顯示颊埃，將讓出元素原有的流位置浮動：
塊將向左或右浮動，直到遇到邊框或同類蝶俱；
浮動會導(dǎo)致父級對象盒子不能被撐開班利，
要向含浮動的父級元素中正常追加塊級子元素，應(yīng)清除浮動榨呆，
可在父級使用overflow:hidden
或在最后一個(gè)浮動元素尾定義p:after { clear: both; }定位罗标，即使用Position屬性：
Static：默認(rèn)流定位；
Relative：元素偏移一定距離积蜻，保持原有的形狀闯割，保留原有的空間；
Absolute：元素脫離流竿拆，作為塊宙拉，相對其已定位的祖先元素作直接定位；
Fixed：元素脫離流如输，作為塊，絕對定位于視窗
練習(xí)：仿制網(wǎng)頁 -
JavaScript編程語言
Js通過DOM操縱Html文檔中的任何元素，實(shí)際項(xiàng)目中一般通過JQuery框架實(shí)現(xiàn)不见；
舉例：點(diǎn)擊按鈕彈出提示框
document.getElementById(id).onclick(function() {
alert("Message");
})
采用JQuery改寫澳化，將簡化選擇過程
$("#id").click(function() {
alert("Message");
})
要使用JQuery，首先引入JQuery腳本稳吮，在線引用：
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
在實(shí)際開發(fā)中缎谷，建議將在線引用內(nèi)容下載到本地，并改為本地引用灶似；
JQuery的
$(this)選擇器可以在點(diǎn)擊事件中獲取被選中的子元素列林；JQuery的常用的方法：
removeClass("class-name") 和 addClass("class-name")，移除或添加class酪惭；
css("decl-name": "decl-value")希痴，直接修改元素css；
toggleClass("class-name")春感，切換元素class砌创；
append()，在元素內(nèi)追加Html文本鲫懒；鏈?zhǔn)讲僮鳎?/p>
當(dāng)選中元素時(shí)添加class嫩实，并移除其兄弟元素的class：
$(this).addClass("class-name").siblings().removeClass("class-name")
Js還可以通過BOM與瀏覽器對話
Ajax請求
示例代碼（JQuery）：
$.ajax({
url: "my-controller/ajax-function",
success: function() {
$(this).text("Success");
}
})
詳細(xì)教程：W3school
常用的Ajax業(yè)務(wù)場景：
練習(xí)：設(shè)計(jì)Tab切換和手風(fēng)琴樣式
Tab切換：點(diǎn)擊菜單切換頁面顯示的內(nèi)容；
手風(fēng)琴：點(diǎn)擊展開詳細(xì)菜單窥岩，并收起其他已展開的菜單
8月21日
- Vue前端框架的部署和項(xiàng)目開發(fā)
- 介紹多種前端框架
- 介紹圖表生成工具
獲取Node.js環(huán)境和VsCode編輯器資源甲献，通過命令行完成依賴資源的自動下載安裝；
完成項(xiàng)目部署颂翼，打開第一個(gè)Vue項(xiàng)目晃洒；參考文檔：CnBlogs
Vue工程結(jié)構(gòu)說明，設(shè)定路由映射和頁面跳轉(zhuǎn)疚鲤，使項(xiàng)目中的頁面得以串聯(lián)锥累；
頁面Template結(jié)構(gòu)說明，導(dǎo)出選項(xiàng)的常用方法說明集歇；Vue的優(yōu)勢：數(shù)據(jù)綁定
Vue規(guī)避了JQuery繁瑣的頁面修改過程桶略，
通過框架簡潔地實(shí)現(xiàn)數(shù)據(jù)渲染，響應(yīng)式地改變元素文本或?qū)傩?/p>Vue獨(dú)特的Class和常用的組件屬性：
v-if
v-show
雙向綁定Vue的生命周期方法诲宇，自定義配色方案等际歼；
參考教程：菜鳥教程
介紹多種前端框架：
Bootstrap
LayUI
EasyUI
KendoUI
Vux
Vant
Element介紹圖表生成工具：
Echarts
AntV
8月24日
- 響應(yīng)式布局設(shè)計(jì)示例，Css簡單動畫的實(shí)現(xiàn)姑蓝，Echarts的應(yīng)用
- 微信小程序的建立和基本配置鹅心，微信開發(fā)者平臺的使用
響應(yīng)式布局
響應(yīng)式布局設(shè)計(jì)方案，左側(cè)菜單固定纺荧，右側(cè)主體自適應(yīng)：
Css函數(shù)：calc(算式)旭愧，允許使用使計(jì)算的結(jié)果作為寬高值颅筋，算式中加減號左右必須含空格；
Css的高度定義問題：需要從最外層開始全部定義才能生效输枯，每層的百分比均參考其父元素议泵；Flex彈性布局：
display: flex;開啟彈性布局；
flex-direction: column;設(shè)置布局方向?yàn)榭v向（默認(rèn)為橫向）桃熄；
justify-content: space-around;設(shè)置軸內(nèi)對齊方式先口，對齊方式的區(qū)別：CSDN
align-items設(shè)置軸位置，各選項(xiàng)的區(qū)別：MDN
flex: 1;設(shè)置元素在軸內(nèi)的空間占比
Css簡單動畫
為元素定義
animation: kf 2s;
參數(shù)一為動畫函數(shù)瞳收，參數(shù)二為播放時(shí)間碉京；
動畫函數(shù)示例：
@keyframes kf {
/* PlanA */
from { margin-left: 0 }
to { margin-left: 1000px }
/* PlanB */
0% { color: red }
20% { color: green }
100% { color: blue }
}
animation參數(shù)三：
infinite，設(shè)定動畫循環(huán)播放螟深，
在其前添加alternate使一次動畫往返播放谐宙；將動畫位置設(shè)定的
margin-left: 1000px改變像素點(diǎn)的繪制方式?jīng)Q定了動畫并不流暢，
將其改為transform: translateX(1000px);可提升動畫性能血崭；將動畫設(shè)置在“元素:hover”層內(nèi)卧惜，可實(shí)現(xiàn)鼠標(biāo)指向時(shí)播放動畫，例如：
p:hover {
transform: rotate(30deg);
transition: transform 2s;
}
練習(xí)：利用Css動畫實(shí)現(xiàn)小球彈跳效果
Echarts的應(yīng)用
Echarts配置項(xiàng)的含義夹纫，在官網(wǎng)范例中直觀地對比查看配置項(xiàng)對圖表的控制情況咽瓷；
范例地址：Echarts
采用前端代理完成跨域
在配置文件的開發(fā)環(huán)境中設(shè)定ProxyTable，將-api地址自動轉(zhuǎn)化為外網(wǎng)地址
