1. web课程学习内容

1. mvc格式
   1. javabean周期
   2. javabean 与mvc组成
2. jsp中使用数据库
   1. mysql建立
   2. JDBC连接，解决乱码
   3. 查询
   4. 用结果集操作数据库表
   5. 预处理语句
3. jsp的文件操作
   1. FILE类
   2. 文件操作流
   3. 文件上床下载
4. xml
   1. xml基本结构
   2. dom 解析器
   3. sax解析器
   4. xml与css显示
5. 化妆品销售

2. web

2.1. html

2.1.1. 标题

h1

<a href = "https://www.cctv.com" target="_self"> 央视网</a> 

span : 没有语义的标签

2.1.2. css引入

1. 行内样式，写在标签的style属性中
2. 内部样式：写在

   2.1.2.1. 颜色

   种类	使用方法
   关键字	red
   rgb	rag(red ,green ,blue)
   rgba	rgba(red, green, blue ,透明度)
   十六进制	#

   2.1.2.2. css选择器

   选择器类型	写法（语法）	示例	示例说明
   元素选择器	元素名称 { ... }	h1 { ... }	选择页面上所有的 <h1> 标签
   类选择器	.class属性值 { ... }	.cls { ... }	选择页面上所有 class 属性为 cls 的标签
   ID 选择器	#id属性值 { ... }	#hid { ... }	选择页面上 id 属性为 hid 的标签
   分组选择器	选择器1, 选择器2 { ... }	h1, h2 { ... }	选择页面上所有的 <h1> 和 <h2> 标签
   属性选择器	元素名称[属性] { ... }	input[type] { ... }	选择页面上所有有 type 属性的 <input> 标签
   	元素名称[属性名="值"] { ... }	input[type="text"] { ... }	选择页面上 type 属性为 text 的 <input> 标签
   后代选择器	元素1 元素2 { ... } （注意有空格）	form input { ... }	选择 <form> 标签内的所有 <input> 标签

   2.1.3. video

   <video src = "video/mp4" controls width ="800px"> </video>
   width = 80% 长度占父类框架的占比
   

   音频

   <audio src=“ ” controls></audio>
   

   2.1.3.1. 段落

   hello

   2.1.3.2. 加粗

   hello

   hello

   / 下划线

   / 倾斜

   / 删除线

   2.1.3.3. 特殊符号

   	空格
   <	<
   >	>

   2.1.4. 盒子模型

   

   div	span
   一行显示一个	一行显示多个
   宽度默认为父元素的宽度
   可以设置height, weigth

   div{
       width:200px;  /* 定义的内容展示区域的宽度 */
       height: 100px;
       padding: 20px 20px 20px 20px;
       margin: 20px 20px 20px 20px ;
       border: 20px solid #100000; /*宽度 边框 颜色*/
       box-sizing: content-box;
       /* content-box 内容盒子； bordor-box 边框盒子
           /* 当前的盒子居中显示 */
       margin: 10px auto; 
   }
   

   2.1.4.1. 对齐方式

   弹性布局flex

   属性	取值	含义
   display	flex
   flex-direction	row x column y轴
   justify-content	1. flex-start 从头开始 flex-end center space-around 均分 space-between 两边贴边

   2.1.5. 表格

   <table

   整个表格

   border: 边框宽度 width: 表格的宽度 cellspacing: 单元之间的空间

   <tr

   表格的行

   <td/th

   表格的列

   <th是表头，<td 是普通表格

   2.1.6. 表单

   提升与表格的交互，并在input前增加标识

   <label for="username">用户名:</label>
   <input type="text" id="username" name="username" placeholder="请输入用户名">
   
    <label>
       用户名:
       <input type="text" name="username" placeholder="请输入用户名">
   </label>
   

   1. input
      1. text
      2. password
      3. radio 单选按钮，相当与select option
      4. checkbox
   2. select
   3. textarea, 更大的文本框输入

   2.2. javascript

   js代码最后放置在body的末尾

   结尾的;可有可无

   1. 内部脚本

      <script>
          alert("hello world!");
      </script>
      

   2. 外部脚本

      <script src = "/.js"> </script>
      

   在 内外，都可以被执行

   2.2.1. 定义变量

   let a = 0; //定义变量
   const a = 0; //声明常量
   let a='abc';
   typeof(a); //返回a的类型
   

   输入内容

   alert(a);  // 弹窗
   console.log(a); //控制台
   document.write(a); //Body标签中
   

   2.2.1.1. 拼接字符串

   let a= 9;
   let b= 'tom';
   console.log('hello my name is'+b+ 'year is'+ a);// 使用'+字符串拼接
   console.log(`hello my name is ${b} yeas is${a}`) // 使用` ${}模板字符串输出
   

   2.2.2. 函数function

   function name(a, b){
       return a+b;
   }
   // 匿名函数
   let sum = function(a,b){
       return a+b;
   }
   let sum = (a,b)=>{
       return a+b ;
   }
   

   2.2.3. 对象

   let user = {
       name: 'Tom',
       age: 10,
       sing: function(){
           alert(this.name+ '刚满十八岁');
       }
       //简化为
       sing(a, b){
           return 0;
       }
   }
   

   2.2.3.1. json

   JavaScript 对象标记法（使用js对象语法书写的文本）

   不同的是，所有的变量名使用“”引起

   JSON.stringify()	js对象-> json 变量的字符串
   JSON.parse()	json -> 没有字符串的变量

   2.2.4. DOM

   文档对象模型： 将标记语言的各个组成部分封装为对应的对象；

   Document	整个文档
   Element	元素对象
   Attribute	属性对象
   Text	文本内容的对象
   Comment	注释形成的对象

   

   2.2.4.1. 获取对象

   选择器对应css中的选择器css选择器

   document.querySelector('选择器'); // 获取匹配到的第一个元素
   document.querySelectorALL('选择器'); // 获取所有匹配到的元素
   //得到的是一个节点集合，有长度，有索引
   
   let hs = document.querySelectorAll(#title);
   hs.innerHTML = '修改后的内容' ; // innerHTML代表文本内容
   

   2.2.5. 时间监听

   语法： 事件源.addEvenListener(‘事件类型’, 事件触发执行的函数);

   • 事件源：document中对象
   • 事件类型： 点击click
   • 事件处理的函数：要做什么事

   2.2.5.1. 事件类型

   鼠标	click
   	mouseenter
   	mouseleave
   键盘	keydown 按键触发
   	keyup 按键抬起
   焦点	focus 进入输入框
   	blur 离开输入框
   表单事件	input 输入时触发
   	submit 提交时触发

    import {func1, func2} from "./utils.js" // js导入函数
   

   utils.js中的内容

   export functtion printLog(msg){
       console.log(msg);
   }
   
   //使用export标记
   

   html导入时候，需表明类型是模块化的js

   <script src="./js/1.js" type="module"></script>
   

   2.3. vue

   Vue是一款构建用户界面的渐进式的JavaScript框架

   构建用户界面：针对数据构建

   渐进式：可以只使用一部分

   

   1. 准备
      1. 引入Vue模块
      2. 创建Vue程序的应用示例，控制视图的元素
      3. 准备元素，被Vue控制
   2. 数据驱动
      1. 准备数据
      2. 通过差值表达式渲染界面

   <div id="app">
       <h1>
           {{message}}
       </h1>
   </div>
   
   <script type="module">
       import{ creatApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
       createApp({
           data(){
               return{
                   message: "hello vue";
               }
           }
       }).mount("#app");// 使用mount接管app
   </script>
   

   2.3.1. vue指令

   <p v-xxx= ""> ...</p>
   

   2.3.1.1. v-for遍历

   key的值避免复用

   <tr v-for="(item, index) in items" : key ="item.id"> {{item}}</tr>
   

   v-bind：动态为html绑定属性值，src, style,alt

   <td><img class= "avatar", v-bind:src="{{item.src}}" :alt ="{{item.alt}}"></td>
   <!-- vlind:属性，然后对应v-for中的内容
   // : 简写形式 
   -->
   

   v-if/v-show:控制元素的显示/隐藏

   <!--
       v-if：根据条件判断结果，判断结果输出/隐藏，不一定创建
           不频繁使用
           紧跟v-else-if, v-else
       v-show: 根据条件结果，调用css 中display格式，分别用来显示和隐藏，会创建
           频繁使用
       “”之间的结果判断
   -->
   <span v-show="e.job==1"> 帮助人</span>
   

   v-model: 双向绑定元素与vue data，绑定输入的内容

   <input type="text" id="name" v-model="searchForm.name"> 
   

   v-on： 为html绑定事件

   引号中绑定的是函数动作，可以简化为@click

   <button type="button" v-on:click="handle">
       点击
   </button>
   

   在vue中定义方法

   const app = createApp({
       data(){
           return{
   
           }
       },
       method:{
           handle(){
   
           }
       }
   }).mount("#app")
   // 使用时需要将button的类型设置为button
   

   3. 致谢

   02.Web前端开发初识_哔哩哔哩_bilibili