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. 结构伪类选择器
-
结构伪类选择器
冒号前选择器选中的元素的第n个 -
交集选择器:”标签.类”:必须是指定标签的指定类才能被选中
-
并集选择器:逗号:”.类,标签”
-
后代选择器:空格:”.类 标签”
用来选择元素或元素组的后代。 -
子代选择器:”.类>标签” 选择作为其元素子元素的元素。中间跟一个“>”进行连接。
-
兄弟选择器:
使用+表示兄弟:往下找,只是指下一个兄弟。
使用~表示所有兄弟:往下找,是指所有兄弟。 -
属性选择器:表示选取标签带有某些特殊属性的选择器。
-
伪元素选择器
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.变量
- 变量:所有的变量都可以用var let const来创建,本课只讲let
- 变量类型:数据类型
number、string、boolean、object(null, 数组,对象, 函数)
boolean类型只有两个值 true false - 变量赋值:
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.函数的返回值
(1)函数是否有返回值,是看函数体中最后执行的的代码中是有用返回值的语句
(2)返回值语句格式为 return 变量; 或return 值;
(3)返回值的数据类型任意
5.函数给函数赋值:函数本身可以当作一个值来使用
1,函数是一个对象
2,函数名是一个保存了对象引用值的常量
3,引用值:
所有的对象都有一个标识它的引用值
不同的对象引用值一定不同
对象没有名字
6.匿名函数:没有名字的函数
(1)匿名函数自调用 用()把匿名函数包起来,在调用
(2)把匿名函数当作一个值(引用值)赋给其它变量
本质是把匿名函数对象的引用值给了a
8.23
1. 数组
-
数组创建:数组中元素可以是任意类型
-
数组的遍历
数组.length:返回数组的长度 -
数组末尾增加/删除元素
增加push:数组.push(元素);
减少pop:数组.pop(); -
多维数组
数组中元素可以是任何数据类型 -
标准的二维数组
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上后,显示的宽高