前端实习笔记

8.2

1.初识html

介绍了目前比较常用的几个浏览器，推荐我们使用Edge和Google Chrome。
了解了如何把一个记事本格式变为html，编写html的格式，学习了一些基础的做了一些简单的网页。
学习的第一个代码就在里加了内容，然后逐渐丰富，加了

8.4

1. html常用的标签

1.标题标签h1……h6：重要性递减
2.段落标签

：表示一段文本
3.水平线标签

---

4.div 、span都没有语义，div会自动换行
5.文本格式化标签
6.图像标签
属性src表示图片来源
Src的值可以是本地文件也可以是网络文件，如果是本地文件，在实际开发中使用相对路径。
“./”：当前文件夹所在目录
“…/”：当前文件夹的上一级目录
“…/…/”：表示当前文件所在目录的上级目录的上级目录

2.标签属性

（1） 不同标签，属性不同
h1…h6，div，p都有属性align、dir
align的值有left、center、right
dir的值为ltr、rtl
（2） 公共属性：所有标签都有的属性

（3） 同一个标签有多个属性

（2） 属性width，height表示图片宽高
如果只设置了其中一个，则另一个会自动变化，使图片不变形。
同时设置可能会变形

8.7

1. 快捷键

（1）直接输字母 会自动添加<>
（2）div3 Tap
（3）div>p3 div中包含三个p
（div>p*3）*2 Div{这是$}*3
（4）Ctrl x/d/z/y
（5）注释 ctrl /

2. 复习

     <img />属性width,和height
     src属性是本地文件，使用相对路
     src属性也可以是网络路径
     alt:没有图片是，显示的文字
     title:当移动鼠标移动到图片上面时，自动显示的文字

3. 超链接标签

a，属性herf
网络路径：石油大学的百度
本地html文件相对路径：这是作业
属性target 值：
_selt 在当前窗口中打开：覆盖之前网页
self百度
_blank 在一个新的窗口中打开：新建一个窗口
blank百度

5. 超链接标签的锚点

（1） 创建锚点链接：
1、在跳转目标的位置添加id名标注
2、使用链接文本
（2） 实例：
test1

两个黄鹂鸣翠柳

6. 列表

列表li中可以是任意的东西。文字、链接、图片…
（1） 无序列表

（2） 有序列表

（3） 自定义列表

7. 表格

（1） 创建表格
table是表格，tr是行，td是列。th也是列，字是加粗。
（2） 表格属性

（3） 背景颜色：bgcolor
1:你能写的英文单词
2:#开头的3位或6位的十六进制数 bgcolor=”#000000”
（4） 表头标签：th替换td
（5） 表头标题：我是表格的标题

8. 合并单元格

     跨行合并：rowspan 	（row span）跨列合并：colspan （column span）

9. 标签的分类

     （1）	行类标签
     （2）	块标签：div、p、li、dt、h1-h6
     （3）	行内快标签

8.9

1. 样式引入的三种方式

（1） 行内样式
（2） 内部样式
（3） 外部样式

2. CSS字体属性

front-weight：表示字体的粗细：bolder、bold、normal、100-900
Front-style字体风格：normal、italic、oblique

3. 文本属性：

 （1）	颜色，三种表示方法
       Color-name
        十六进制
      Rgb-number
 （2）	修饰text-decoration

 （3）	文本方向direction
    ltr：默认的，文本方向从左到右 left to right 
    rtl：文本方向从右到左。right to left

 （4）	字符间距
    letter-spacing字母间距
    word-spacing单词间距
 （5）	行高：line-height
     行高=div高度，文字垂直居中

8.11

1. 文本缩进 text-indent

   取值：数值/百分百  首行缩进两字符：2em（em：当前元素的文字大小）

2. 选择器

（1）标签选择器
（2）id选择器“#”
（3）类选择器“.”

（4）多类名选择器

类值可以重复
同一个class可以有多个值，中间用空格隔开
越准确级别越高
级别高的会覆盖级别低的
同一级别，后面写的会覆盖前面写的
（5）通配符选择器“*”
通配符的级别是最低的
（6）链接伪类选择器：写的时候顺序不要颠倒

3. 背景色background-color

8.13

1. 结构伪类选择器

1. 结构伪类选择器
   冒号前选择器选中的元素的第n个

2. 交集选择器：”标签.类”：必须是指定标签的指定类才能被选中

3. 并集选择器：逗号：”.类,标签”

4. 后代选择器：空格：”.类 标签”
   用来选择元素或元素组的后代。

5. 子代选择器：”.类>标签” 选择作为其元素子元素的元素。中间跟一个“>”进行连接。

6. 兄弟选择器：
   使用+表示兄弟：往下找，只是指下一个兄弟。
   使用~表示所有兄弟：往下找，是指所有兄弟。

7. 属性选择器：表示选取标签带有某些特殊属性的选择器。

8. 伪元素选择器

2. CSS三大特征

（1） CSS层叠性: 如果一个属性通过两个选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉 。
（2） CSS继承性: 子元素可以继承父元素的样式。
（3） CSS优先级: 当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定。
如果使用的是同类型的选择器，那么谁写在后面就听谁的。
如果使用的是不同类型的选择器，那么会按照选择器的优先级来层叠。
行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

3. 标签显示模式

（1） 块元素：每个块元素通常都会独自占据一整行或多整行，可以对其设置高度、宽度、对齐等属性
（2） 行内元素：行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构
（3） 行内块元素：
（4） Display：
行内：display:inline; 不会独占一行，无宽高
块：display:block; 独占一行，有宽高
行内块：display:inline-block; 不会独占一行，有宽高

4. 背景

（1） 颜色background-color：颜色；
（2） 图片background-image：url（图片路径）;
（3） 背景缩放background-size：百分比/长度单位；

5. 盒子模型

盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成
（1） 盒子边框border
border-width：用于指定边框的粗细。
border-style：用于定义边框的样式
border-color：用于设置边框的颜色。
可以各个方向边框单独控制：top/right/left/bottom

（2） 内边距padding
（3） 外边距magin

8.14

1. 定位

（1） 默认定位static：默认值，自动定位。
（2）相对定位relative：相对于自已本来的位置进行定位，元素框不从文档流完删除。
在使用相对定位时，通过边偏移来移动位置，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。 其次，每次移动的位置，是以元素自己的左上角为基点移动。

（3） 绝对定位absolute：相对于非static定位的父元素进定位,一般父元素使用relative，元素框从文档流完全删除。绝对定位使元素的位置与文档流无关，因此不占据空间。

（4）固定定位Fixedfixed：相对于浏览器窗口的定位，元素框从文档流完全删除,与absolute相似。
（4） 层：z-index: 值越大,越在上层。
（5） 弹性盒子：display:flex
（6） 布局：做网站先做布局
（1）table
（2）css+div+float
（3）媒体查询布局
（4）rem进行布局
（5）弹性盒子布局

2. H5介绍

（1）做网页 html,css2,css3,js
（2）手机app html,css,js 原生开发，h5开发
（3）做服务器 nodejs框架-express,ejs,eggs
（4）游戏 cocos creater
做东西快，简单，跨平台

8.16

1.Justify-contend

（1）flex-start（默认值）：左对齐

（2）flex-end：右对齐

（3）center： 居中

（4）space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

（5）space-between：两端对齐，项目之间的间隔都相等。

2. 弹性盒子布局 案例

8.19

1. Js引入方式

（1）内部script标签

（2）外部导入 使用相对路径方式外部导入js文件
（3）事件接入
Js中单引号和双引号没有区别，如果出现引用嵌套时，单双引号要交替使用

2.wondow.alert() 警告对话框 阻止后面代码

Window是一个浏览器的内置对象，使用window对象中的成员，可以省去window
Console也是一个内置对象

3.变量

1. 变量：所有的变量都可以用var let const来创建，本课只讲let
2. 变量类型：数据类型
   number、string、boolean、object(null, 数组，对象, 函数)
   boolean类型只有两个值 true false
3. 变量赋值：
   typeof 数据或变量，返回值是一个表示类型的字符串，可以测试数据类型

4.函数的创建

（1）函数使用function声明
（2）函数不声明返回类型
（3）函数有调用才会执行，调用多少次调用执行多少次
（4）函数是全局的，同一个文档中的函数在任何地方都可以调用
（5）函数本质上是为window对象增加的一个方法，所以调用函数的标准形式为 window.函数名();,但是"window.可"省
（6）java中一个对象的方法是不能被增加的，也不能被减少。在js中，可以为对象增加或减少方法

8.21

1.事件中调用函数

Onclick

2. 函数参数：

foot叫形参
（1）参数是一个变量,名字自定义
（2） 调用函数要传参，就是为参数赋值
（3） 参数的作用域范围是函数体
（4） 参数可是有1到多个‘
（5）参数可以接收任意类型感悟

3.运算符

4. 算术运算符：+, -, *, /, %
5. 连接运算符“+”：当两边是数字时就是算术运算符；只要+其中一边是字符串时，就是连接运行符

4.函数的返回值

（1）函数是否有返回值，是看函数体中最后执行的的代码中是有用返回值的语句
（2）返回值语句格式为 return 变量; 或return 值;
（3）返回值的数据类型任意

5.函数给函数赋值：函数本身可以当作一个值来使用

1,函数是一个对象
2,函数名是一个保存了对象引用值的常量
3,引用值：
所有的对象都有一个标识它的引用值
不同的对象引用值一定不同
对象没有名字

6.匿名函数：没有名字的函数

（1）匿名函数自调用 用（）把匿名函数包起来，在调用
（2）把匿名函数当作一个值(引用值)赋给其它变量

本质是把匿名函数对象的引用值给了a

8.23

1. 数组

1. 数组创建：数组中元素可以是任意类型

2. 数组的遍历
   数组.length:返回数组的长度

3. 数组末尾增加/删除元素
   增加push：数组.push（元素）;
   减少pop：数组.pop();

4. 多维数组
   数组中元素可以是任何数据类型

5. 标准的二维数组

2.对象的基础

对象的引用：不同的对象，引用值一定不同

3. This的使用

（1）那个对象调用函数，函数中的this就是哪个对象
（2）现象上来说，对象中函数访问其他成员时，通通使用this

4. 获取文档对象

（1）得到文档中的元素对象，就是标签形成的对象
（2）document是一个内置对象，与window相似
（3）根据id值得到元素对象
（4）只要是-都要改成驼峰法

5.加入事件监听

所有元素都可以设计点击事件
事件加入方式
（1） 使用属性οnclick=“调用函数的代码”
（2） 获取元素对象，对象.οnclick=function(e){…}
（3） 任何元素都与button一样，都可以加入事件

6.扩展鼠标事件

鼠标事件可以作用在任何对象元素中
.click onclick：点击事件：在元素上按下鼠标，然后放开
.mousedown onmousedown：鼠标按下事件：
.mouseup onmouseup:与click相同，鼠标放开事件
.mouseenter 鼠标移进事件
.mouseleave 鼠标移出事件
.mousemove

7.定时器setTimeout

8.25

1.Math数学中方法

2. canvas入门

1.canvas标签的使用
2.canvas的样式
3.canvas的元素属性width和height
4.获取canvas对象，使用js设置canvas宽高
5.获取上下对象
let ctx = canvas.getContext(“2d”);

3.绘制路径 绘线

1.开始规划
2.规划
3.状态设置
4.绘制
5. 绘制圆弧
6. 清空：context.clearRect(x,y,width,height)
7. 清空整个画布

8.26

1.绘制图片

（1）ctx.drawImage(img,x,y);
参数(x,y) 图片绘制在canvas上时，图片左上角在canvas坐标系下的坐标
（2）ctx.drawImage(img,x,y, width, height)
参数x,y 图片绘制在canvas上时，图片左上角在canvas坐标系的坐标
参数width,height：图片绘制到canvas上后，显示的宽高
（3）ctx.drawImage(img, sx, sy, sWidth, sHeight, x,y, width, height)
sx,sy以图片坐标系的坐标，表示裁剪的起点
swidth,sHeight被裁剪的宽高
参数x,y 图片绘制在canvas上时，图片左上角在canvas坐标系的坐标
参数width,height：图片绘制到canvas上后，显示的宽高

2. 裁剪图片函数封装