# web
**Repository Path**: wangqinyidfbkd/web
## Basic Information
- **Project Name**: web
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 3
- **Created**: 2021-03-02
- **Last Updated**: 2021-03-02
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# day01
## HTML
HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。
```
这是我的第一个HTML页面
Hello HTML!
```
## HBuilderX访问HTML文件的两种方式：
1、浏览器直接访问文件：(file:///C:/vip/web/day01/hello.html)
file:// 直接访问本地磁盘文件，每个开发者都是访问自己的目录，需要自己本地目录
2、web服务方式访问文件：(http://127.0.0.1:8848/web/day01/hello.html)
http:// HTTP协议，127.0.0.1 代表localhost（本机），8848端口号（某个服务QQ）
这种方式第一次访问时，需要外网，需要安装浏览器插件。替代方式nodejs/tomcat
## 如何实现永和小票？
开发步骤：
1）创建order.html 订单小票页面结构
2）把小票中所有的文字使用div标签括起来，或者使用table标签括起来
3）css进行页面美化
## 自己制作一个二维码图片
二维码图片本质，在这个图片中隐藏了url链接，本质就是一个链接地址，手机扫描后得到这个链接，然后自动打开
使用第三方谷歌google出品二维码api，调用它提供方法就可以生成二维码图片
老师给大家封装了一个CreateQR类，make静态方法，参数：宽、高、url、图片路径
## 实现电影票
1）横向合并单元格 ```| 111 | ```
2）纵向合并单元格 ```444 | ```
3）圆角 border-radius: 5px; /* 圆角 */
4）边线颜色 border-color: darkgoldenrod;
## margin和padding区别
margin 元素外面的空白
padding 元素内部的空白
margin 10px, 10px, 10px , 10px; 上右下左
margin 10px
# day02
## 菜单 menu
1）传统方式：ul+li标签
2）新的方式：ul+li+css3样式进行修饰美化
## 动画特效
1）拉伸效果
> /* 动画效果，宽度进行变化，2s动画耗时 */
> transition: width 2s;
2）移动效果
>/* 移动效果动画：
> mymove 动画脚本
> 动画持续的时间（耗时）
> infinite 反复播放动画
>*/
>animation: mymove 2s infinite;
>定义一个关键帧：@keyframes
>@-webkit-keyframes mymove{
> from{ left: 0px;}
> to{ left: 300px;}
> }
3）旋转效果
>/* 旋转动画
> 执行动画轨迹：linear线型
> 3s：动画延迟播放
>*/
>animation: run 5s linear 0s infinite;
>@-webkit-keyframes run{
> /* transform变形，rotate旋转，0deg 角度0°开始 */
> from{ transform: rotate(0deg); }
> /* transform变形，rotate旋转，360° */
> to{ transform: rotate(360deg); }
> }
## 文件路径
1）相对路径：audio/li.mp3，从当前文件去找同级的audio文件下的li.mp3，加载images/js/css都是习惯相对，直接拷贝到你的任意目录都可以执行
2）绝对路径：d:/达内介绍.mp4，直接去找d盘mp4文件，磁盘大文件，必须按自己文件所在位置修改代码。不能以web的方式
# day03
## javascript web开发的技术，主攻浏览器
ECMA组织，规范：ES5/ES6/ES7，市场主流ES6标准
javascript新规范：TypeScript，增强的javascript，结合谷歌chrome v8引擎，它对js支持非常好，运行速度是所有浏览器中最快
nodejs基于v8引擎，实现web服务，基于javascript/typestript，它是让js更加强大，和java/c这种强语言抗衡。
html、css、javascript称为页面程序三剑客
+ html 负责页面展现
+ css 负责页面元素美化
+ javascript 负责由静态网站变成动态网站，和后端程序交互数据，注册、登录，这些动作称为交互，信息是动态的
业务系统要实现，javascript必不可少的动态技术。
## javascript脚本语言，类似java，api
最终要就是学习这些api如何使用，java最终操作操作系统来操作硬件，javascript最终操作浏览器，页面
js 怎么操作浏览器呢？
- browser BOM（Browser Object Model）很少用
js 怎么操作页面呢？
- HTML PAGE DOM （Document Object Model）非常频繁使用
HTML页面js把它抽象DOM树，js对象，把页面所有的元素都挂载在这个树上，html页面没有明显对象之分，txt纯文本，抽象成一个只有元素，层级的tree型结构
快速定位页面元素，发明这套东西，就是为快速找到页面的某个元素，快速进行操作，性能高
## DOM树
js把页面抽象成一个dom树，通过它提供api，快速获取页面上某个元素的内容
+ document 代表整个HTML页面
+ 四种方法：
- getElementsByTagName 通过标签来获取，得到数组
- getElementsByClassName 通过class属性来获取，得到数组（开发中常使用）
- getElementsByName 通过name属性来获取，得到数组
- getElementById 通过id属性来获取，得到唯一值（开发中推荐使用）
规定：页面不同的标签获取的api的方式不同
**h1** 标签，获取内容 **innerText**
# day04
## 网页开发的技术
1）HTML 页面标签，完成页面展现， 升级到H5
2）CSS 样式表，完成页面美化 升级到CSS3，升级到BootStrap3/4
3）JavaScript 脚本语言，完成页面交互 升级ES6标准，TypeScript，升级jQuery过渡，主流市场升级框架 AngularJS/ReactJS/VueJS
js框架底层使用了jQuery，了解jQuery语法，知道它和js和框架的差异即可
jQuery 基于js来封装，js就是一组api，使用起来不够简洁：
document.getElementById("username")
$("#username") jQuery的语法就替代了上面的代码，开发者的代码量急剧下降
HTML和CSS已经作为浏览器默认集成内容，无需自己去加载额外内容，就可以直接使用。
Bootstrap它是第三方的，额外的引入：
> ``````
第三方，额外的引入：
> ``````
特性：
1）超级厉害选择器 selector：
> $(selector).action() 选择器定位页面的某个元素（多个），进行action的动作
2）扩展了js，动画效果