8月20日
- 介绍Html标签和属性，实际演示常用标签的书写方法
- 介绍Css的配置原理和书写规范
- 练习：仿制网页 -
- 介绍JavaScript编程语言，JQuery框架和Ajax技术
- 练习：设计Tab切换和手风琴样式
Html标签
ul：无序列表； ol：有序列表；
表单提交：直接在form表单中定义提交类型和submit按钮；
这种方法已不常见，目前多用Ajax提交表单
Html属性
通用的属性：id、class和style；
采用Label标签通过for属性导向表单控件，改善鼠标用户的点击体验；
标签<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>
在元素标签中以width属性规定列宽，要禁止过多的内容改变表格外观，
需要定义表格样式table-layout: fixed;
建议将样式相关的内容放在单独的style标签当中，以便于代码的阅读和维护；
块级元素和内联元素：
常见的块级元素：h, p, ul, table
常见的内联元素：a, b, i, td, img, span, button, ...
Css = 选择器 + 声明
当声明内容超过一个单词，应添加引号；声明间应以分号分隔；
Css的意义：保证Html代码的可读性；
Html通过Link标签连接到外部Css，如此一份Css可用于控制多个页面的布局；
当控制组件的多个Css声明冲突时，按如下优先级排序：外部样式表 < 内部样式表 < 内联样式；
对同一级的声明，后者优先于前者
Css选择器
不建议使用通配符，因为它改变了众多不常用的标签样式，将影响浏览器的性能；
建议使用类选择器，来让一份样式表可以被同类元素多次使用；
属性选择器的格式：
Label[attr1][attr2 = value]... { declaration... }
子元素选择器
p > a与后代选择器p a的区别：
子代选择器只能选择到直接子代，而不能选择更深层的子代；兄弟选择器可按照元素的相邻性来筛选，如
li + li选择了除第一个以外的li元素；
常用的Css伪类：
p:hover、:first-child、:last-child、:nth-child(n)其中n除数字外还可以取odd或even，表示选中所有奇数或偶数号元素；
注意选择子元素时，标签要精确到子元素级，而非其父级；
p:hover规定了鼠标悬停在p上方时的样式；
p:focus规定了p获取到输入焦点时的样式Css伪元素：
p:before、:after在元素的前 / 后添加装饰性的内容
Css选择器练习小游戏：Github
Css框模型
元素总尺寸 = 宽高 + 内边距 + 边框；背景应用在边框和边框以内的区域；
为了保证元素总尺寸不变，修改padding时往往要同时修改宽高，
为了避免这种麻烦，通过box-sizing: border-box;设置盒模型，
此时元素宽高将自动地优先保证总尺寸不变，而不需要手动调整；相邻元素在垂直方向上的外边距将会被合并，水平方向上则不会
Css定位
包括普通流、浮动和绝对定位；
流：
块级元素纵向排列，内联元素在行内排列；
Display属性：
Block：块级元素；
Inline：内联元素，内联元素具有文字特性，换行将被解析为空格；
Inline-block：行内块元素，行内显示，兼具文字特性和样式设定能力；
None：不显示，将让出元素原有的流位置浮动：
块将向左或右浮动，直到遇到边框或同类；
浮动会导致父级对象盒子不能被撑开，
要向含浮动的父级元素中正常追加块级子元素，应清除浮动，
可在父级使用overflow:hidden
或在最后一个浮动元素尾定义p:after { clear: both; }定位，即使用Position属性：
Static：默认流定位；
Relative：元素偏移一定距离，保持原有的形状，保留原有的空间；
Absolute：元素脱离流，作为块，相对其已定位的祖先元素作直接定位；
Fixed：元素脱离流，作为块，绝对定位于视窗
练习：仿制网页 -
JavaScript编程语言
Js通过DOM操纵Html文档中的任何元素，实际项目中一般通过JQuery框架实现；
举例：点击按钮弹出提示框
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>
在实际开发中，建议将在线引用内容下载到本地，并改为本地引用；
JQuery的
$(this)选择器可以在点击事件中获取被选中的子元素；JQuery的常用的方法：
removeClass("class-name") 和 addClass("class-name")，移除或添加class；
css("decl-name": "decl-value")，直接修改元素css；
toggleClass("class-name")，切换元素class；
append()，在元素内追加Html文本；链式操作：
当选中元素时添加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");
}
})
详细教程：W3school
常用的Ajax业务场景：
练习：设计Tab切换和手风琴样式
Tab切换：点击菜单切换页面显示的内容；
手风琴：点击展开详细菜单，并收起其他已展开的菜单
8月21日
- Vue前端框架的部署和项目开发
- 介绍多种前端框架
- 介绍图表生成工具
获取Node.js环境和VsCode编辑器资源，通过命令行完成依赖资源的自动下载安装；
完成项目部署，打开第一个Vue项目；参考文档：CnBlogs
Vue工程结构说明，设定路由映射和页面跳转，使项目中的页面得以串联；
页面Template结构说明，导出选项的常用方法说明；Vue的优势：数据绑定
Vue规避了JQuery繁琐的页面修改过程，
通过框架简洁地实现数据渲染，响应式地改变元素文本或属性Vue独特的Class和常用的组件属性：
v-if
v-show
双向绑定Vue的生命周期方法，自定义配色方案等；
参考教程：菜鸟教程
介绍多种前端框架：
Bootstrap
LayUI
EasyUI
KendoUI
Vux
Vant
Element介绍图表生成工具：
Echarts
AntV
8月24日
- 响应式布局设计示例，Css简单动画的实现，Echarts的应用
- 微信小程序的建立和基本配置，微信开发者平台的使用
响应式布局
响应式布局设计方案，左侧菜单固定，右侧主体自适应：
Css函数：calc(算式)，允许使用使计算的结果作为宽高值，算式中加减号左右必须含空格；
Css的高度定义问题：需要从最外层开始全部定义才能生效，每层的百分比均参考其父元素；Flex弹性布局：
display: flex;开启弹性布局；
flex-direction: column;设置布局方向为纵向（默认为横向）；
justify-content: space-around;设置轴内对齐方式，对齐方式的区别：CSDN
align-items设置轴位置，各选项的区别：MDN
flex: 1;设置元素在轴内的空间占比
Css简单动画
为元素定义
animation: kf 2s;
参数一为动画函数，参数二为播放时间；
动画函数示例：
@keyframes kf {
/* PlanA */
from { margin-left: 0 }
to { margin-left: 1000px }
/* PlanB */
0% { color: red }
20% { color: green }
100% { color: blue }
}
animation参数三：
infinite，设定动画循环播放，
在其前添加alternate使一次动画往返播放；将动画位置设定的
margin-left: 1000px改变像素点的绘制方式决定了动画并不流畅，
将其改为transform: translateX(1000px);可提升动画性能；将动画设置在“元素:hover”层内，可实现鼠标指向时播放动画，例如：
p:hover {
transform: rotate(30deg);
transition: transform 2s;
}
练习：利用Css动画实现小球弹跳效果
Echarts的应用
Echarts配置项的含义，在官网范例中直观地对比查看配置项对图表的控制情况；
范例地址：Echarts
采用前端代理完成跨域
在配置文件的开发环境中设定ProxyTable，将-api地址自动转化为外网地址
