文章目录
- HTML
- CSS
- JavaScript
HTML
1.文档声明
<!DOCTYPE> 声明必须位于 HTML5 文档中的第一行,也就是位于 <html> 标签之前。该标签告知浏览器文档所使用的 HTML 规范。
2.HTML5的基本结构
<!-- 文档声明,声明当前网页的版本 -->
<!DOCTYPE html>
<!-- html的根标签(元素),网页中的所有内容都要写根元素的里边 -->
<html>
<!-- head是网页的头部,head中的内容不会在网页中直接出现,主要用来帮助浏览器或搜索引擎来解析网页 -->
<head>
<!-- meta标签用来设置网页的元数据,这里meta用来设置网页的字符集,避免乱码问题 -->
<meta charset="utf-8" />
<!-- title中的内容会显示在浏览器的标题栏,搜索引擎会主要根据title中的内容来判断网页的主要内容 -->
<title>网页的标题</title>
</head>
<!-- body是htm1的子元素,表示网页的主体,网页中所有的可见内容都应该写在body里 -->
<body>
<!-- h1网页的一级标题 -->
<h1>网页的大标题</h1>
</body>
</html>
3.字符实体
有些时候,在HTML中不能直接书写一些特殊符号,如
- 多个连续的空格(在网页中编写的多个空格默认情况下会自动被浏览器解析为一个空格)
- 字母两边的大于小于号
如果我们需要在网页中书写这些特殊的符号,则需要使用HTML中的实体(转义字符)实体的语法:&实体的名字,如下图所示:
实体名称 | 显示结果 | 描述 |
---|---|---|
  | 空格 | |
> | > | 大于号 |
< | < | 小于号 |
& | & | 与 |
更多实体,可以参考w3school网站
4.meta标签
meta主要用于设置网页中的一些元数据,元数据并不是给用户看的
- charset: 指定网页的字符集
- name: 指定的数据名称
- keywords: 表示网站的关键字,可以指定多个关键字,关键字之间使用==,==分割。
- description:表示网站的描述信息
- content:指定数据的内容,会作为搜索结果的超链接上的文字显示
- http-equiv: 模拟一个Http请求头信息,如下所示,就是模拟一个Http请求头,请求参数为refresh,请求内容为content中的内容
<meta charset="utf-8" />
<!-- Redirect page after 3 seconds -->
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org" />
- default-style:设置默认的 CSS 样式表集的名称。
- x-ua-compatible: 设置X-UA-Compatible的值,可以指定网页的兼容性模式设置。(Edge mode指示IE以目前可用的最高模式显示内容。)
- content-type:声明文档的MIME 类型和字符编码。如果指定,content 属性必须有 "text/html; charset=utf-8 "的值。这相当于一个指定了 charset 属性的元素,并对文档中的位置有同样的限制。注意:只能在使用text/html的文档中使用,不能在使用 XML MIME 类型的文档中使用。
5.语义标签
在网页中HTML专门用来负责网页的结构,所以在使用HTML标签的时候,应该关注的是标签的语义,而不是他的样式,这里先介绍几个基本的于一标签,还有些常用的标签放在后面具体讲解。
5.1基础的几个
标签 | 作用 | 描述 | |
---|---|---|---|
块元素 | <h1>~<h6> | 标题 | 一共有6级,一般情况下一个页面只有一个<h1>,一般情况下很少用到4-6级标签 |
<hgroup> | 标题组 | <hgroup> 标签被用来对标题元素进行分组。 | |
<p> | 段落 | 页面中的一个段落 | |
<blockquote> | 长引文 | 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体 | |
行内元素 | <q> | 短引文 | 表示一个封闭的并且是短的行内引用的文本 |
<br> | 换行 | ||
<em> | 强调 | 标签是一个短语标签,用来呈现为被强调的文本,不建议用 |
5.2HTML5新增的标签
6.行内元素和块元素
- 块元素
- 在网页中一般通过块元素来对页面进行布局
- 默认宽度是父元素的全部,高度是内容的高度
- 行内元素
- 主要用来包裹文字,一般情况下会在块级元素中放行级元素。
- 默认高度和默认宽度是内容的宽度和高度
7.内容修正
浏览器在解析网页时,会自动对网页中不符合规范的内容进行修正,这个通过浏览器中的查看网页源代码并不能看到效果,但是使用 F12 进行开发者调试时是能够看到上述几种情况被修正的结果。
不过虽然浏览器能够对不规范的页面内容进行修正,还是不建议编写不规范的代码,因为这对后期代码维护或团队代码协作将是非常不好的后果和体验。
8.布局标签
- header:表示页面的头部
- main:表示页面的主体(一个页面中会有一个main)
- footer: 表示页面的底部
- nav:表示页面的导航
- aside:侧边栏
- article:表示一个独立的文章
- section:表示一个独立的区块,上边标签都不能用欧的时候用这个标签
- div:块元素,表示一个区块
- span:行内标签,被用来组合文档中的行内元素
9.列表
- 有序列表
<ol>
<li>Mix flour, baking powder, sugar, and salt.</li>
<li>In another bowl, mix eggs, milk, and oil.</li>
<li>Stir both mixtures together.</li>
<li>Fill muffin tray 3/4 full.</li>
<li>Bake for 20 minutes.</li>
</ol>
- 无序列表
<ul>
<li>Milk</li>
<li>
Cheese
<ul>
<li>
Blue cheese
<ul>
<li>Sweet blue cheese</li>
<li>Sour blue cheese</li>
</ul>
</li>
<li>Feta</li>
</ul>
</li>
</ul>
- 定义列表<dl> 标签用于结合 <dt> (定义列表中的项目)和 <dd> (描述列表中的项目)。
<dl>
<dt>Beast of Bodmin</dt>
<dd>A large feline inhabiting Bodmin Moor.</dd>
<dt>Morgawr</dt>
<dd>A sea serpent.</dd>
<dt>Owlman</dt>
<dd>A giant owl-like creature.</dd>
</dl>
10.超链接
超链接可以让我们从一个页面跳转到其他页面,或者是当前页面的其他的位置使用a标签来定义超链接,href属性指定跳转的目标路径,值可以是一个外部网站的地址,也可以写一个内部页面的地址超链接是也是一个行内元素,在a标签中可以嵌套除它自身外的任何元素,那么嵌套的元素就相当于一个超链接
<ul>
<li><a href="https://www.baidu.com">Website</a></li>
<li><a href="mailto:example@outlook.com">Email</a></li>
<li><a href="tel:+123456789">Phone</a></li>
</ul>
当我们需要跳转一个服务器内部的页面时,一般我们都会使用相对路径,会以./或…/开头
10.1target属性(用来指定超链接打开的位置)
- _self在当前页面中打开超链接,默认值
- _blank在新建页面中打开超链接
10.2锚点跳转(在浏览网页时,用户通过点击锚点链接就可以跳转到当前页面的指定位置。)
- 可以使用javascript:void(0);来作为href的属性,此时点击这个超链接什么也不会发生
- 可以将#作为超链接的路径的占位符使用。可以直接将超链接的href属性设置为#,这样点击超链接以后页面不会发生跳转,而是转到当前页面的顶部的位置
- 可以跳转到页面的指定位置(锚点),只需将href属性设置#目标元素的id属性值(唯一不重复)
11.图片
图片标签用于向当前页面中引入一个外部图片。
img标签是一个自结束标签,这种元素属于替换元素(块和行内元素,具有两种元素的特点)
- src:指定外部图片的路径(路径规则和超链接是一样的)
- alt:图片的描述,这个描述默认情况下不会显示,图片无法加载的时候时显示。
12.内敛框架(iframe,用于向当前页面中引入其他页面)
- src指定要引入的网页的路径
- frameborder指定内敛框架的边框
13.音视频
13.1音频
audio标签用来向页面中引入一个外部的音频文件。
- 属性:
- controls是否允许用户控制播放
- autoplay音频文件是否自动播放(如果设置了autoplay,则音乐在打开页面时会自动播放
但是目前来讲大部分浏览器都不会自动对音乐进行播放) - loop音乐是否循环播放
- source:指定内部文件的目录
13.1.1注意点
E8 下不支持audio元素,但是可以使用 元素在文档中的指定位置嵌入外部内容。
<embed src="./source/audio.mp3" />
13.2视频
video标签来向网页中引入一个视频,使用方式和audio基本上是一样的
<video controls>
<source
src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
type="video/webm"
/>
<source
src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
type="video/mp4"
/>
<embed
src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
type="video/mp4"
/>
</video>
女人都是感性动物,注重细节,这种场景下"大大咧咧"的男生就成为了次品。无怪乎,喜欢渣男,也难免被渣。不说了,继续卷。
14.表格(table)
使用<table>创建一个表格,主要可以通过table中以下子标签生成表格,具体子标签如下:
<table>
<!--行标签-->
<tr>
<!--单元格标签-->
<td></td>
<!--设置单元格行合并-->
<td colspan="合并的格数"></td>
<!--设置单元格列合并-->
<td rowspan="合并的列数"></td>
</tr>
</table>
<!--长表格-->
<table>
<!--头,也可以用<th>来表示-->
<thead>
<tr>
<td>
</td>
</tr>
</thead>
<!--内容-->
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
<!--尾-->
<tfoot>
<tr>
<td>
</td>
</tr>
</tfoot>
</table>
14.1注意点
- 默认情况下,如果没有设置<tbody>,浏览器会自动添加一个<tbody>标签。
- border-spacing:指定边框之间的距离,但是如果设置border-collapse为collapse,此属性将失效
- border-collapse:设置边框的合并,但是设置为合并模式,依然会出现有的颜色深,有的颜色浅的问题,建议用如下代码解决:
table {
width: 500px;
margin: 0 auto;
border-top: 1px solid black;
border-left: 1px solid black;
border-spacing: 0px;
}
table tr td {
width: 100px;
border-bottom: 1px solid black;
border-right: 1px solid black;
text-align: center;
}
15.表单
<!--action是提交的地址,method是提交的方式,只支持get/post-->
<form action="www.baidu.com" method="get">
<!--type:text -> 文本框-->
<!--type:password -> 密码框-->
<!--type:submit -> 提交按钮-->
<!--type:reset -> 重置按钮-->
<input type="类型" name="参数值">
<!-- 普通按钮 -->
<input type="button" value="按钮" />
<!-- 普通按钮的另一种写法 -->
<button type="button">按钮</button>
<!--单选框-->
<input type="radio" name="man" value="男">
</form>
<!--单选框 value作为传递给服务器的值,checked是默认值-->
<input type="radio" name="man" value="男" checked>男
<input type="radio" name="woman" value="女">女
<br/>
<!--多选框-->
<input type="checkbox" name="1" value="1">1
<input type="checkbox" name="2" value="2">2
<br/>
<!--下拉列表-->
<select name="drop-down">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
15.1<input type=“button”>和<button>的区别
- input是自闭合标签,不需要就能结束;button不是自闭合标签,跟一般标签一样是成对出现的
- button因为不是自闭合标签,所以使用起来更灵活,可以嵌套其他的标签
CSS
1.CSS的用法
1.1行内样式
通过标签的style属性来设置元素的样式
<p style="color:red;font-size:60px">学习</p>
- 每个样式生命之间使用==;==分割,否则样式会失效。
- 使用这种形式,只能给每个元素设置特有的样式,但是当这种样式被多个元素使用的时候,就不合适了。在正式的开发过程中避免使用这种形式。
1.2内嵌样式
为解决上述问题,使得我们的样式能够在一个html文件中重复被使用。我们引入了==“内嵌样式”==
顾名思义,内嵌样式就是将样式定义到<head>标签中,使得样式可以被重复使用。
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
font-size: 20px;
color: red;
}
</style>
</head>
- 定义的样式必须写到<style>标签中
- 随之而来的,将产生另一个问题,如何将一个样式能够被多个html使用?
1.3链接样式表
为了解决上述问题,我们引入了以下方式,链接样式表。
顾名思义,链接样式表就是将外部的css文件引入到当前html文件中
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- href表示引入的路径,rel代表引入文件的类型 -->
<link href="./style.css" rel="stylesheet"/>
<title>Document</title>
</head>
2选择器
2.1通配选择器
作用:选中改html文件中的所有元素
语法:
* {
样式1;
样式2;
}
2.2元素选择器
作用:选中改html文件中指定的元素
语法:
类型 {
样式1;
样式2;
}
例子:
p {
font-size: 20px;
color: red;
}
2.3类型选择器
作用:根据元素的 class 属性值选中一组元素
语法:
.类型 {
样式1;
样式2;
}
2.4属性选择器
- 作用:根据元素的属性值选中一组元素
- 语法 1:[属性名] 选择含有指定属性的元素
- 语法 2:[属性名=属性值] 选择含有指定属性和属性值的元素
- 语法 3:[属性名^=属性值] 选择属性值以指定值开头的元素
- 语法 4:[属性名$=属性值] 选择属性值以指定值结尾的元素
- 语法 5:[属性名*=属性值] 选择属性值中含有某值的元素
- 例子:p[title]{} p[title=e]{} p[title^=e]{} p[title$=e]{} p[title*=e]{}
p[title] {
color: orange;
}
p[title="e"] {
color: orange;
}
p[title^="e"] {
color: orange;
}
p[title$="e"] {
color: orange;
}
p[title*="e"] {
color: orange;
}
2.5复合选择器
2.5.1交集选择器
- 作用:选中同时复合多个条件的元素
- 语法:选择器1选择器2选择器3选择器n{}
- 注意点:交集选择器中如果有元素选择器,必须使用元素选择器开头
div.red {
font-size: 30px;
}
.a.b.c {
color: blue;
}
2.5.2并集选择器
- 作用:同时选择多个选择器对应的元素
- 语法:选择器1,选择器2,选择器3,选择器n{}
- 例子:#b1,.p1,h1,span,div.red{}
h1,
span {
color: green;
}
- 父元素:直接包含子元素的元素叫做父元素
- 子元素:直接被父元素包含的元素是子元素
- 祖先元素:直接或间接包含后代元素的元素叫做祖先元素;一个元素的父元素也是它的祖先元素
- 后代元素:直接或间接被祖先元素包含的元素叫做后代元素;子元素也是后代元素
- 兄弟元素:拥有相同父元素的元素是兄弟元素
2.5.3子元素选择器
- 语法:父元素 > 子元素
- 例子:A > B
- 作用:选中指定父元素的指定子元素
div.box > p > span {
color: orange;
}
2.5.4后代元素选择器
- 作用:选中指定元素内的指定后代元素
- 语法:祖先 后代
- 例子:A B
div span {
color: skyblue;
}
2.5.5兄弟元素选择器
- 作用:选择下一个兄弟
- 语法:前一个 + 下一个 前一个 + 下一组
- 例子 1:A1 + A2(Adjacent sibling combinator)
- 例子 2: A1 ~ An(General sibling combinator)
p + span {
color: red;
}
p ~ span {
color: red;
}
2.5.6伪类选择器
2.5.6.1概念
- 伪类(不存在的类,特殊的类)
- 伪类用来描述一个元素的特殊状态,比如:第一个子元素、被点击的元素、鼠标移入的元素.…
- 伪类一般情况下都是使用:开头
2.5.6.2使用方式
-
:first-child 第一个子元素
-
:last-child 最后一个子元素
-
:nth-child() 选中第 n 个子元素
- n:第 n 个,n 的范围 1 到正无穷
- 2n 或 even:选中偶数位的元素
- 2n+1 或 odd:选中奇数位的元素
以上这些伪类都是根据所有的子元素进行排序的
-
:first-of-type 同类型中的第一个子元素
-
:last-of-type 同类型中的最后一个子元素
-
:nth-of-type() 选中同类型中的第 n 个子元素
这几个伪类的功能和上述的类似,不同点是他们是在同类型元素中进行排序的 -
:not()否定伪类,将符合条件的元素从选择器中去除
/* ul下所有li,黑色 */
ul > li {
color: black;
}
/* ul下第偶数个li,黄色 */
ul > li:nth-child(2n) {
color: yellow;
}
/* ul下第奇数个li,绿色 */
ul > li:nth-child(odd) {
color: green;
}
/* ul下第一个li,红色 */
ul > li:first-child {
color: red;
}
/* ul下最后一个li,黄色 */
ul > li:last-child {
color: orange;
}
- :link 未访问的链接
- :visited 已访问的链接
由于隐私的原因,所以visited这个伪类只能修改链接的颜色 - :hover 鼠标悬停的链接
- :active 鼠标点击的链接
2.6id选择器
作用:根据元素的 id 属性值选中一组元素
语法:
#id {
样式1;
样式2;
}
3.样式的继承
样式的继承,我们为一个元素设置的样式,同时也会应用到它的后代元素上,继承是发生在祖先后代之间的,集成的设计师为了方便我们的开发。利用继承,我们可以将一些通用的样式,统一设置到共同的祖先元素上,这样只需要设置一次即可让所有的元素都具有该样式,注意,并不是所有的样式都会被继承。
- 可以搜索background-color属性,可以看到一个定义的表格。其中就说明了其不可被继承性
4.选择器的权重
当我们通过不同的选择器,选中不同的元素,并且为相同的样式设置不同的值时,就会发生样式的冲突。
选择器 | 权重 |
---|---|
内联样式 | 1,0.0,0 |
ID选择器 | 1,0.0,0 |
类和伪类选择器 | 1,0.0,0 |
元素选择器 | 1,0.0,0 |
通配选择器 | 1,0.0,0 |
样式继承 | 没有优先级 |
5.文档流
网页是一个多层的结构,一层叠加着一层,通过CSS可以分别为每一层来设置样式,作为用户只能看到最顶上一层,这这层中,最底下的一层称为文档流,文档流是网页的基础我们所创建的元素默认都是在文档流中进行排列。对于我们来说元素主要有两个状态(在文档流中,不在文档流中脱离文档流)
- 在文档流中:
- 块元素:
- 在页面中独占一行
- 默认宽度为父元素的高度
- 默认高度被内容撑开的
- 行内元素
- 行内元素不会独占页面的一行,只占自身的大小
- 行内元素在页面中从左向右排列,如果一行不能装下,则元素会换到第二行继续自左向右排列。
- 行内元素的默认元素和高度都是被内容撑开的
- 块元素:
- 脱离文档流
- 块元素:
- 不会独占页面的一行
- 默认高度和宽度会被内容撑开
- 块元素:
6.盒子模型
CSS将页面中的所有元素都设置一个矩形的盒子。每一个盒子都由以下类型组成。
- 内容区(content)
内容区是盒子模型的中心,它呈现了盒子的主要内容,元素的所有子元素和文本内容都在内容中
- width设置内容区的宽度
- height设置内容区的高度
- 内边框(padding)
内边距,也叫填充,是内容区和边框之间的空间
- padding-top 上内边距
- padding-right 右内边距
- padding-bottom 下内边距
- padding-left 左内边距
- 外框(border)
常用的边框属性
- border-width 边框的宽度:默认 3px
- border-top-width 上边框的宽度
- border-right-width 右边框的宽度
- border-bottom-width 下边框的宽度
- border-left-width 左边框的宽度
- border-color 边框的颜色:默认使用 color 的颜色值
- border-top-color 上边框的颜色
- border-right-color 右边框的颜色
- border-bottom-color 下边框的颜色
- border-left-color 左边框的颜色
- border-style 边框的样式:没有默认值,必须指定
- border-top-style 上边框的样式
- border-right-style 右边框的样式
- border-bottom-style 下边框的样式
- border-left-style 左边框的样式
- 外边距(margin)
外边距,也叫空白边,位于盒子的最外围,是添加在边框外周围的空间。空白边使盒子之间不会紧凑地连接在一起,是 CSS 布局的一个重要手段。注意:外边距不会影响盒子可见框的大小,但是外边距会影响盒子的位置和占用空间。
- margin-top 上外边距
- 设置正值,元素自身向下移动
- 设置负值,元素自身向上移动
- margin-right 右外边距
- 设置正值,其右边的元素向右移动
- 设置负值,其右边的元素向左移动
上述说法并不准确,对于块元素,设置margin-right不会产生任何效果- margin-bottom 下外边距
- 设置正值,其下边的元素向下移动
- 设置负值,其下边的元素向上移动
上述说法并不准确,对于块元素,会有垂直方向上的边距重叠问题(后面会细说)- margin-left 左外边距
- 设置正值,元素自身向右移动
- 设置负值,元素自身向左移动
7.水平布局
一个元素在其父元素中,水平布局必须要满足以下的等式:
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=父元素的宽度。
- 如果上述7个数值的和小于父元素的宽度,浏览器会自动调节margin-right的值(这种情况称为过渡约束),前提是上述七个值不能为auto(只有margin-left,margin-right,width可以调整为auto)。
- 外边距为auto,margin-left和margin-right平分增(减)数值。
- width为auto,margin-left或margin-right中有一个为auto,width为最大,margin-left(margin-right)为0。
- 三个值都为auto,外边距为0,宽度最大
8.垂直布局
元素溢出:子元素是在父元素的内容区中排列的,如果子元素的大小超过了父元素,则子元素会从父元素中溢出
可以在父元素的overflow属性来管理溢出内容
- visible:默认值,子元素超过父元素的部分直接显示出来
- hidden:子元素超过父元素的部分隐藏
- scroll:生成横向,纵向的滚动条
- auto:根据需要,自动生成需要的滚动条
9.边距折叠
垂直外边距的重叠(折叠):相邻的垂直方向外边距会发生重叠现象
- 兄弟元素
兄弟元素的相邻,会取两者绝对值的最大值。特殊情况如果,一正一负,则取两者之和。
- 父子元素
父子元素间相邻外边距,子元素会传递给父元素(上外边距),由于父子元素之间的折叠会影响开发的效果,因此必须处理。主要处理方案如下:
解决方案
- 转换思路,从移动子元素改为父元素。
- 由于父子元素的垂直边距相同导致编剧折叠问题,因此需要我们将父子元素的边距分离。
10.行内元素的盒子模型
- 行内元素的盒子模型不能设置width和height属性
- padding,border,margin不能产生垂直效果,只能产生水平效果
如果想要行内元素产生垂直效果,可以使用display属性,将当前元素改为块元素
- display的属性
- inline:行内元素
- block:块状元素
- table:表格
- inline-block:行内块元素,相当于文字
- none:将当前元素删除
display:none与visibility:hidden的区别,display:none相当于删除当前标签,但是visiblity:hidden只是将元素隐藏,位置依然存在。
11.浏览器的默认样式
在当今网页设计/开发实践中,使用 CSS 来为语义化的(X)HTML 标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有 CSS 规则,并且呈现相同的视觉效果(没有兼容性问题)。但是,我们并没有生活在这个完美的世界,现实中发生的失窃却总是恰恰相反,很多 CSS 样式在不同的浏览器中有着不同的解释和呈现。
当今流行的浏览器(如:Firefox、Opera、Internet Explorer、Chrome、Safari 等等)中,有一些都是以自己的方式去理解 CSS 规范,这就会导致有的浏览器对 CSS 的解释与设计师的 CSS 定义初衷相冲突,使得网页的样子在某些浏览器下能正确按照设计师的想法显示而且有些浏览器却并没有按照设计师想要的样子显示出来,这就导致浏览器的兼容性问题。更糟的是,有的浏览器完全无视 CSS 的一些声明和属性。
为了解决以上问题,我们提出了两种解决方案。
- reset样式(https://meyerweb.com/eric/tools/css/reset/)
将所有的样式的默认格式都取消掉,重新设置
<link rel="stylesheet" href="assets/reset.css" />
- normalize样式(https://necolas.github.io/normalize.css/8.0.1/normalize.css)
统一所有样式
<link rel="stylesheet" href="assets/normalize.css">
12.盒模型补充
12.1盒子大小(box-sizing)
默认情况下,盒子可见框的大小由内容区,内边距和边框共同决定。
box-sizing用来设置盒子尺寸的计算方式(设置width和height的作用)
-
content-box:默认值,宽度和高度用来设置内容区的大小
-
border-box:宽度和高度用来设置整个盒子可见框的大小
12.2轮廓(outline)
outline和border的用法相似,不同的是outline不会影响盒子可见区的大小
12.3阴影(box-shadow)
使用box-shadow可以设置图形的阴影区域
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);
- 第一个值-水平偏移量:设置阴影的水平位置
- 正值向右移动
- 负值向左移动
- 第二个值-垂直偏移量:设置阴影的垂直位置
- 正值向下移动
- 负值向上移动
- 第三个值-阴影的模糊半径
- 第四个值-阴影的颜色
12.4圆角(border-redius)
border-radius 用来设置圆角,圆角设置的是圆的半径大小,以该方向的角为起始点,分别向图形内延深对应的值,作为圆心,画圆,取1/4圆极为圆角。
- border-top-left-radius
- border-top-right-radius
- border-bottom-left-radius
- border-bottom-right-radius
12.5浮动(float)
通过浮动可以使一个元素脱离文档流向其父元素的左侧或右侧移动
- none:默认值,元素不浮动
- left:元素向左移动
- right:元素向右移动
注意 - 元素设置浮动以后,水平布局的等式便不需要成立
- 元素设置浮动以后,完全从文档中脱离,不在占用文档流的位置,所以元素下边的还在文档流中的元素会自动向上移动
- 同一个位置,浮动的对象会在文档流中的对象下面
- 浮动的元素不会从默认父对象中移出
- 浮动元素向左或向右移动时,不会超过前面的浮动元素
- 浮动元素不会超过上边的浮动的兄弟元素,最多就是和它一样高
- 如果浮动元素的上边是一个没有浮动的块元素,则浮动元素无法上移
- 浮动元素不会盖住文字,文字会自动环绕在浮动元素的周围,所以我们可以利用浮动来设置文字环绕图片的效果
13.高度塌陷
在浮动布局中,父元素的高度默认是被子元素撑开的,当子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离将会无法撑起父元素的高度,导致父元素的高度丢失,,父元素高度丢失后,其下的元素会自动上移,导致页面的布局混乱。
13.1BFC (块区域格式化环境)
为了解决高度塌陷的问题,我们引入了BFC:
BFC全称为块区域格式化环境,是CSS的一个隐藏属性,开启BFC,该元素会变成一个独立的布局区域。开启BFC后,具有以下特点:
- 不会被浮动元素覆盖
- 父子元素外边距不会重叠
- 可以包含浮动的元素
开启BFC的方法:
- 将父元素浮动化(float):不推荐,会隐藏父元素下的属性,同时使父元素的宽度等于子元素,父元素宽度丢失。
- 将父元素改为行内元素:不推荐,使父元素的宽度等于子元素,父元素宽度丢失。
- 将overflow改为非visible的值。常用的使auto喝hidden
13.2clear
消除浮动元素对当前元素的影响
- left:消除左侧浮动元素的影响
- right:消除右侧浮动元素的影响
- both:消除左右两侧浮动中最大的影响
13.3使用::after解决高度塌陷的问题
如果我们在浮动元素的后面添加一个块级元素,并让这个元素设置为空,用clear清楚高度坍塌对当前元素的影响不久可以解决这个问题了?
由此,我们采用了::after(创建一个伪元素,作为选中元素的最后一个子元素)的方式
.one::after {
content: "";
clear: left;
display: block;
}
14.定位(position)
14.1 不开启定位(static)
- 默认定位,根据文档流的规则排序,只要设置position为非static,将开启定位
14.2相对定位(relative)
参考文档流中的元素的位置进行定位
14.2.1偏移量
默认top的正方向为下,left向右,right向左,bottom向上
14.2.2特点
- 当文档开启相对定位以后,如果不设置偏移量,则元素不会发生任何变化
- 相对定位是参照元素在文档流中的位置进行定位的
- 相对定位提升元素的层级(可以覆盖其他元素)
- 相对定位不会更改元素的性质
- 相对定位没脱离文档流
- 相对定位开启越晚,层级越高
14.3绝对定位(absolute)
以包含块为定位元素作为定位
包含块
- 包含块就是离当前元素最近的开启了定位的祖先块元素
- 如果所有的祖先元素都没有开启定位,则html(根元素、初始包含块)就是它的包含块
14.3.1特点
- 开启绝对定位后,未设置偏移量,元素的位置不会发生改变
- 开启绝对定位后,元素会从文档流中脱离
- 绝对定位会改变元素的性质:行内元素变为块,块变为行内
- 绝对定位会使元素提升一个层级
14.4固定定位(fixed)
固定定位也是一种绝对定位,只不过定位元素为当前窗口,但不会随网页的滚动条滚动。
14.5粘滞定位(sticky,不兼容IE)
- 该元素是根据文档流进行定位的,即相对于包含块进行偏移
- 偏移量不会影响任何其他元素的位置
- 粘性元素总是“粘”到其最近的具有“滚动机制”的祖先元素(当overflow为hidden、scroll、auto、overlay时创建),即使该祖先不是最近的实际滚动祖先
- 粘滞定位和相对定位的特点基本一致(视频中说是和相对定位一致,不过我对比了一下,很多特点是不同的,感觉倒是和固定定位更相似,这里存疑)
- 不同的是粘滞定位可以在元素到达某个位置时将其固定
15.字体
15.1常用的属性
- font-size:字体大小
- em:以当前元素的font-size为单位,1em相当于1个font-size
- rem:以根元素的font-size为单位
- color:字体颜色
- font-family:字体格式(font-family可以同时指定多个字体,多个字体间使用,隔开字体生效时优先使用第一个,第一个无法使用则使用第二个,以此类推)
- serif:衬线字体
- cursive:手写体
- 引用字体(@font-face)
- serif:衬线字体
@font-face {
/* 指定字体名字 */
font-family: "myFont1";
/* 服务器中字体路径 */
src: url("/font/ZCOOLKuaiLe-Regular.woff"),
url("/font/ZCOOLKuaiLe-Regular.otf"),
url("/font/ZCOOLKuaiLe-Regular.ttf") format("truetype"); /* 指定字体格式,一般不写 */
}
p {
font-size: 30px;
color: salmon;
font-family: myFont1;
}
15.2 Font-awesome
15.2.1使用步骤
1.下载(https://fontawesome.com/)
2.下载买免费包
3.将包中的的css文件夹和webfonts拉入到项目中,记得要放到同一个目录中
4.在zeal中下载fontawesome包(只有fas和fab才能用免费的)
16.行高(line height)
文字占有的实际高度,可以通过line-height来设置行高
- 可以直接指定一个大小 px/em
- 也可以直接为行高设置一个小数(字体大小的倍数)
行高经常还用来设置文字的行间距行间距=行高 - 字体大小
17.文字对齐方式(text-align)
17.1水平对齐
text-align属性值 | 对齐方式说明 |
---|---|
left | 左侧对齐 |
right | 右侧对齐 |
center | 居中对齐 |
jestify | 两端对齐 |
17.2垂直对齐
vertical-align属性值 | 对齐方式说明 |
---|---|
baseline | 基线对齐 |
top | 顶端对齐 |
bottom | 底端对齐 |
middle | 两端对齐 |
18.背景(background)
18.1常用的属性
- background-color:设置背景色
- background-image:设置背景图片
- 如果背景图片大小小于元素,则背景图片会自动在元素中平铺将元素铺满
- 如果背景图片大小大于元素,则背景图片一部分会无法完全显示
- 如果背景图片大小等于元素,则背景图片会直接正常显示
- background-repeat 设置背景图片的重复方式
- repeat 默认值,背景图片沿着 x 轴和 y 轴双方向重复
- repeat-x 背景图片沿着 x 轴方向重复
- repeat-y 背景图片沿着 y 轴方向重复
- no-repeat 背景图片不重复
- background-position 设置背景图片的位置
- 通过top left right bottom center几个表示方位的词来设置背景图片的位置:使用方位词时必须要同时指定两个值,如果只写一个则第二个默认就是center
- 通过偏移量来指定背景图片的位置:水平方向偏移量、垂直方向变量
- background-clip 设置背景的范围
- border-box 默认值,背景会出现在边框的下边
- padding-box 背景不会出现在边框,只出现在内容区和内边距
- content-box 背景只会出现在内容区
- background-origin 背景图片的偏移量计算的原点
- border-box 背景图片的变量从边框处开始计算
- padding-box 默认值,background-position从内边距处开始计算
- content-box 背景图片的偏移量从内容区处计算
- background-size 设置背景图片的大小
- 第一个值表示宽度,第二个值表示高度;如果只写一个,则第二个值默认是auto
- cover 图片的比例不变,将元素铺满
- contain 图片比例不变,将图片在元素中完整显示
- background-attachment 背景图片是否跟随元素移动
- scroll 默认值,背景图片会跟随元素移动
- fixed 背景会固定在页面中,不会随元素移动
19雪碧图(CSS-Sprite)
将多个小图片统一保存到一个大图片中,然后通过调整background-position来显示响应的图片,这样图片会同时加载到网页中就可以有效的避免出现闪烁的问题。
20过渡(transition)
通过过渡可以指定一个属性发生变化的切换方式,创建好的效果,提升用户的体验。
20.1常用的属性
- transition-perperty:指定过渡的属性
多个属性用,隔开。如果所有属性都过渡,则使用all关键字,
- transition-duration:指定过渡效果的持续时间(单位:s和ms)
- transition-delay:过渡效果的延迟,等待一段时间后再执行过度。
- transition-timing-function:过渡的时序函数。
21动画(animation)
动画是以动画帧为基本单位,所以在使用动画的时候,要先使用动画帧。
21.1动画帧(keyframes)
@keyframes test {
/**开始属性**/
from {
margin-left: 0;
}
/**结束属性**/
to {
margin-left: 700px;
}
}
21.2常用的属性
/**定义的动画帧**/
animation-name: test;
/**动画的持续时间**/
animation-duration: 2s;
/**延时动画的开始时间**/
animation-delay: 2s;
/**动画的执行次数**/
animation-iteration-count: 3;
/**动画的持续方向**/
animation-direction: reverse;
animation-play-state: 设置动画的执行状态
animation-fill-mode: 动画的填充模式
22.变换(transform)
变形就是指通过 css 来改变元素的形状或位置,变形不会影响到页面的布局,transform用来设置元素的变形效果
22.1平移(transform:translate)
- translateX()沿着有方向平移
- translateY()沿着有方向平移
- translateZ()沿着有方向平移
z轴平移,调整元素在Z轴的位置,正常情况就是调整元素和人眼的距离,距离越大,元素离人越近,Z轴平移属于立体效果(近大远小),默认情况下网页是不支持透视,如果需要看见效果必须要设置网页的视距
22.2旋转(transform:rotate)
- rotateX() X轴旋转
- rotateY() Y轴旋转
- rotateZ() Z轴旋转
22.3缩放(transform:scalex)
- scalex() 水平方向缩放
- scaleY() 垂直方向缩放
- scale() 双方向的缩放
23.less
23.1语法
23.1.1注释
//注释
23.1.2父子关系嵌套
body {
--height: calc(200px / 2);
--width: 100px;
div {
height: var(--height);
width: var(--width);
}
.box1 {
background-color: #bfa;
.box2 {
background-color: red;
.box3 {
background-color: yellow;
}
> .box4 {
background-color: green;
}
}
}
}
23.1.3变量
变量,在变量中可以存储一个任意的值,并且我们可以在需要时,任意的修改变量中的值,变量的语法:@变量名
- 直接使用使用变量时,则以@变量名的形式使用即可
- 作为类名、属性名或者一部分值使用时,必须以@{变量名}的形式使用
- 可以在变量声明前就使用变量(可以但不建议)
23.1.4 其他
- & 父元素
- :extend() 对当前选择器扩展指定选择器的样式(选择器分组)
- .p1() 直接对指定的样式进行引用,这里就相当于将p1的样式在这里进行了复制(mixin 混合),使用类选择器时可以在选择器后边添加一个括号,这时我们实际上就创建了一个mixins混合函数
23.1.5混合函数
在混合函数中可以直接设置变量,并且可以指定默认值
/*这种形式定义了形参的位置,并设置了默认值*/
.test(@w:200px, @h:100px, @bc:red) {
width: @w;
height: @h;
background-color: @bc;
}
23.1.6引入其他less
@import "style.less";
@import "syntax.less";
24.Flex(弹性盒)
是CSS中的又一种布局手段,它主要用来代替浮动来完成页面的布局,flex可以是元素具有弹性,让元素可以跟随着页面的大小的改变而改变
24.1弹性容器
要使用弹性盒,必须先将一个元素设置为弹性容器
我们通过display来设置弹性容器
- display:flay 设置块级弹性容器
- display:inline-flay 设置行内的弹性容器
24.1.1弹性容器的属性
- flex-direction:设置弹性容器的方向
- row:从左往右排列
- row-reverse:从右往左排列
- column:从上往下排列
- column-reverse:从下往上排列
主轴和侧轴的概念:
主轴:元素排列的方向,row就是从左往右,row-reverse就是从右往左
侧轴:与主轴垂直的方向
- flex-wrap:设置元素是否换行
- nowrap:不换行
- wrap:沿着辅轴换行
- warp-reverse:沿着辅轴反方向换行
- flex-flow:wrap和diraction的简写属性
- justfy-content:如何分配主轴上的空白空间
- flex-start:元素沿着主轴的开始位置排列
- flex-end:元素沿着主轴终边排列
- center:元素居中排列
- space-around:空白分布到元素两边
- space-between:空白均匀分不到元素间
- space-evenly:空白分布到元素的单列==(存在兼容性问题)==
- align-items: 元素在辅轴上的对齐方式
- stretch:默认值,将元素的长度设置为相同的值
- flex-start:元素不会拉伸,沿着辅轴起边对齐
- flex-end:沿着辅轴终边对齐
- center:居中对齐
- baseline:基线对齐
24.2弹性元素
弹性元素就是弹性容器的子元素,一个元素可以同时是弹性元素和弹性容器。
24.2.1弹性元素的属性
- flex-grow:指定弹性元素的生长系数,父元素的剩余空间,会按照子元素的生长系数进行分配。
- flex-shrink:当父元素的空间不够的时候,会按照收缩系数进行分配。
- flex-self:覆盖弹性容器的agile-items属性
- flex-basis 指定的是元素在主轴上的基础长度
- 如果主轴是横向的,则该值指定的就是元素的宽度
- 如果主轴是纵向的,则该值指定的就是元素的高度
- 默认值是auto,表示参考元素自身的高度或宽度
- 如果传递了一个具体的数值,则以该值为准
- order 决定弹性元素的排列顺序
JavaScript
1.使用位置
- 1.直接在HTML元素中使用
<!--使用事件-->
<button onclick="alert('Hello Word')">打开</button>
<!--在链接上使用-->
<a href="javascript:alert('Hello Word')">链接</a>
<!--如果不想让该连接进行跳转,可以使用如下方式-->
<a href="javascript:">超链接</a>
- 2.在script块中使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
test = function () {
alert("Hello Word");
}
</script>
</head>
<body>
<button onclick="test()">按钮</button>
</body>
</html>
- 3.引入外部文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<button onclick="test()">按钮</button>
</body>
</html>
2.常用的输出语句
- 在浏览器上输出一个弹框
alert("Hello Word");
- 在页面上打印一句话
document.write("Hello Word");
- 在控制台上打印一句话
console.log("Hello Word");
3.函数的声明
test1 = function(arg1, arg2) {
console.log(arg1, arg2);
}
function test2(arg1, arg2) {
console.log(arg1, arg2);
}
注意事项
- JS 严格区分大小写
- JS中每条语句以分号(;)结尾如果不写分号,浏览器会自动添加,但是会消耗一些系统资源, 而且有些时候,浏览器会加错分号,所以在开发中分号必须写
4.字面值和变量、标识符
4.1字面值
字面量实际上就是一些固定的值,比如 1 2 3 4 true false null NaN “hello”,字面量都是不可以改变的。由于字面量不是很方便使用,所以在JS中很少直接使用字面量.
4.2变量
注意,JS是弱类型语言,是通过定义的值来推断类型的,var本身不带便任何一种类型,比如a赋予1,那么a就是number类型,a赋予‘str’,那么a就是String类型。
//变量的定义
var a = 1;
4.3标识符
在JS中所有的可以自主命名的内容,都可以认为是一个标识符,是标识符就应该遵守标识符的规范。比如:变量名、函数名、属性名
规范:
- 1.标识符中可以含有字母、数字、_、$
- 2.标识符不能以数字开头
- 3.标识符不能是JS中的关键字和保留字
- 4.标识符一般采用驼峰命名法
5.数据类型
5.1String字符串
JS中的字符串需要使用引号引起来 双引号或单引号都行。注意在字符串中使用\作为转义字符
5.2Number数值
JS中所有的整数和浮点数都是Number类型
- Infinity 正无穷,-Infinity 负无穷
- NaN 非法数字(Not A Number)
- 0b 开头表示二进制(但是不是所有的浏览器都支持),0x 开头表示十六进制
5.3Boolean布尔值
布尔值主要用来进行逻辑判断,布尔值只有两个,true 逻辑的真,false 逻辑的假。
5.4Null空值
空值专门用来表示为空的对象
5.5Undefined未定义
如果声明一个变量但是没有为变量赋值此时变量的值就是undefined
5.6Object引用数据类型
对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔。
test = function () {
//对象的定义
var user = {
name : "admin",
sex : "男"
}
//对象的两种方式
document.write(user.name);
document.write(user["sex"])
}
5.7类型转换
5.7.1强制类型转换
- String类型
//调用变量的toString()方法
var a = 1;
var b = a.toString();
//调用String()方法
var c = String(b);
- Number类型
//使用Number()方法
var a = 1;
var b = Number(a);
//使用parseInt()或parseFloat(),这两个函数专门用来将一个字符串转换为数字的,可以将一个字符串中的有效的整数位提取出来,并转换为Number
var a = "123.456px";
a = parseInt(a); //123
需要注意的:
- 字符串 > 数字
* 如果字符串是一个合法的数字,则直接转换为对应的数字
* 如果字符串是一个非法的数字,则转换为NaN
* 如果是一个空串或纯空格的字符串,则转换为0- 布尔值 > 数字
* true转换为1
* false转换为0- 空值 > 数字
* null转换为0- 未定义 > 数字
* undefined 转换为NaN
- Boolean类型
使用Boolean()函数
var s = "false";
s = Boolean(s); //true
需要注意的是
- 字符串 > 布尔
除了空串其余全是true- 数值 > 布尔
除了0和NaN其余的全是true- null、undefined > 布尔
都是false- 对象 > 布尔
都是true
5.7.2隐式类型转换
- String类型
var a = true;
a = a + "";
- Number类型
var a = "123";
a = +a;
- Boolean类型
为任意的数据类型做两次非运算,即可将其转换为布尔值
var a = "hello";
a = !!a; //true
6.运算符
运算符也称为操作符,通过运算符可以对一个或多个值进行运算或操作。
6.1typeof运算符
用来检查一个变量的数据类型,语法:typeof 变量,它会返回一个用于描述类型的字符串作为结果
6.2算数运算符
- + 对两个值进行加法运算并返回结果
- - 对两个值进行减法运算并返回结果
- * 对两个值进行乘法运算并返回结果
- / 对两个值进行除法运算并返回结果
- % 对两个值进行取余运算并返回结果
- ++ 自增可以使变量在原值的基础上自增1,++a的值是变量的新值(自增后的值),a++的值是变量的原值(自增前的值)
- – 自减可以使变量在原值的基础上自减1,–a的值是变量的新值(自减后的值),a–的值是变量的原值(自减前的值)
需要注意的:
- 除了加法以外,对非Number类型的值进行运算时,都会先转换为Number然后在做运算。
- 而做加法运算时,如果是两个字符串进行相加,则会做拼串操作,将两个字符连接为一个字符串。任何值和字符串做加法,都会先转换为字符串,然后再拼串
6.3逻辑运算符
- !非运算可以对一个布尔值进行取反
- &&短路与
- || 短路或
6.4赋值运算符
- = 可以将符号右侧的值赋值给左侧变量
- +=
- -=
- *=
- /=
- %=
6.5关系运算符
- >
- <
- >=
- <=
6.6相等运算符
- ==:相等,判断左右两个值是否相等,如果相等返回true,如果不等返回false。相等会自动对两个值进行类型转换,如果对不同的类型进行比较,会将其转换为相同的类型然后再比较。
- !=:不等,判断左右两个值是否不等,如果不等则返回true,如果相等则返回false。不等也会做自动的类型转换。
- ===:全等,判断左右两个值是否全等,它和相等类似,只不过它不会进行自动的类型转换,如果两个值的类型不同,则直接返回false。
- !==:和不等类似,但是它不会进行自动的类型转换,如果两个值的类型不同,它会直接返回true。
需要注意的
- null和undefined:
由于undefined衍生自null,所以null == undefined 会返回true。但是 null === undefined 会返回false。- NaN:
NaN不与任何值相等,报告它自身 NaN == NaN //false。判断一个值是否是NaN,使用isNaN()函数。
6.7三元运算符
条件 ? 符合条件的值 : 不符合条件的值
7.流程控制语句
7.1条件控制语句
//if语句
if() {
} else {
}
//switch语句
switch(条件表达式){
case 表达式:
语句...
break;
case 表达式:
语句...
break;
case 表达式:
语句...
break;
default:
语句...
break;
}
7.2循环语句
//while语句
while() {
}
//do-while语句
do {
}while();
//for语句
for(①初始化表达式 ; ②条件表达式 ; ④更新表达式){
③语句...
}
//死循环
while(true){
}
for(;;){
}
8对象
对象是JS中的引用数据类型,对象是一种复合数据类型,在对象中可以保存多个不同数据类型的属性
8.1对象的分类
- 内建对象
由ES标准中定义的对象,在任何的ES的实现中都可以使用。比如:Math String Number Boolean Function Object…
- 宿主对象
由JS的运行环境提供的对象,目前来讲主要指由浏览器提供的对象。比如 BOM DOM…
- 自定义对象
由开发人员自己创建的对象
8.2对象的创建
- new
var obj = new Object();
- {}
var obj = {
属性名:属性值,
...
};
- 向对象中添加属性
语法:
对象.属性名 = 属性值;
对象[“属性名”] = 属性值; //这种方式能够使用特殊的属性名
对象的属性名没有任何要求,不需要遵守标识符的规范,但是在开发中,尽量按照标识符的要求去写。
属性值也可以任意的数据类型。- 读取对象中的属性
语法:
对象.属性名
对象[“属性名”] //"属性名"可以使字符串常量,也可以是字符串变量
如果读取一个对象中没有的属性,它不会报错,而是返回一个undefined- 删除对象中的属性
delete 对象.属性名
delete 对象[“属性名”]- 使用in检查对象中是否含有指定属性
语法:“属性名” in 对象
如果在对象中含有该属性,则返回true
如果没有则返回false
for (var field : object) {
console.log(field);
}
9.Unicode编码
nicode编码我们又可以叫做是统一码。在计算机科学领域中是一中业界标准
- 在js中使用unicode编码
//在js中使用unicode编码:\u + 编码号的十六进制表示
function test() {
console.log("\u003D")
}
- 在html中使用unicode编码
<!--在html中,使用unicode编码:\u + 编码号的十进制表示-->
<div>=</div>
10.函数
10.1函数的声明
function 函数名([形参1,形参2...形参N]){
语句...
}
var 函数名 = function([形参1,形参2...形参N]){
语句...
};
注意:
- 如果函数的形参数量大于实参,多余的形参将会是undefind
10.2立即执行函数
(function(a,b){
console.log("a = "+a);
console.log("b = "+b);
})(123,456);
10.3函数的方法
- call();
第一个参数会作为方法的this,其余参数作为实参
方法.call(this指向变量, 实参...);
- apple();
第一个参数会作为方法的this,其余参数作为实参,实参以数组封装
方法.apple(this指向变量,[实参...];
11.作用域
- 全局作用域:
- 在Script标签中创建的对象都被称为全局对象
- 全局对象是在页面打开的时候创建,页面关闭时销毁
- 在全局作用域中有一个window对象,我们创建的全局对象,都会被当作window的属性。我们创建的方法,会被当做window的方法。可以用window.field/window.method调用这些属性/方法。
- 函数作用域:
- 每创建一个函数,就是一个函数作用域。
- 各个函数作用域是互不相通的,即A作用域中的变量B不能在C作用域中使用
- 函数作用域中,对相同的变量取值,遵寻最近原则
- 在函数作用域中,如果变量没有用var定义,则该变量为全局变量
注意:
- 变量的提前声明:
使用var a = 1这种形式定义的变量,会在所有代码执行前进行定义,然后在当前行进行赋值。- 函数的提前声明
使用function a() {}这种形式声明的函数,会在所有代码前声明,因此可以在该函数前面执行该函数。
12.this
this在JS中就是函数执行的上下文对象
==需要注意的:==当对象.方法(),那么传入方法的this就是对象,如果是方法()这种形象,则this就是window。
构造函数的this就是将创建的对象。
13.构造函数
13.1语法
//类名首字母大写
function 类名() {
}
13.2构造函数的构造流程
1.立即创建一个新的对象
2.将新建的对象设置为函数的this
3.逐行执行函数的代码
4.将新建的对象作为返回值返回
13.3instanceof
用来判断当前对象的类型
对象 instanceof 类名
14.原型对象
14.1概念
我们每创建一个函数,解析器都会想函数中添加一个属性prototype,这个属性对应着一个对象,这个对象就是原型对象,原型对象是由浏览器帮我们创建的。
14.2获取原型对象的方式
- 由构造函数获取
Person.prototype
- 由对象获取
person.__proto__
注意
如果在我们所有对象中都是用到的属性,我们可以把它添加到原型中。如果我们调用这个属性,对象中没有,就会向原型对象中寻找。
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.type = "人类";
var person = new Person("Mick", 1);
console.log(person.type);
person.type = "高级动物";
console.log(person.type);
console.log(Person.prototype.type)
14.3查看对象中的属性
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.type = "人类";
var person = new Person("Mick", 1);
//用in判断,会检验对象和原型中的数据
console.log("type" in person);
//用hasOwePerson,只会检验对象中的数据
console.log(person.hasOwnProperty("type"))
15.toString()
当我们直接将对象用console.log输出的时候,就会调用对象的toString()方法,这里和java一样,当然在java中我们是重写类的toString方法,在这里我们需要重写prototype的toString()方法
16.GC垃圾回收
尚硅谷视频中只有一个句话:如果对象为null,浏览器会对对象进行回收,不同浏览器有不同的垃圾回收机制。
17.数组(Array)
java出身的,所以这边我就没记录,跟java中的数组一致,但是Array慢慢被ArrayList取代了。
17.1常用的方法
//创建空数组
var array = new Array();
//
var arr = new Array(1,2,3);
var arr2 = new Array(10);
//向数组中插入元素
array.push(1);
//取出数组中的元素
var arrayElement = array[2];
//计算数组的长度
console.log(array.length);
//数组的遍历
for (var i=0;i<s.length;i+=1) {
}
- push 向数组后面添加一个或多个元素,返回值是push之后的长度
- pop 删除然后返回数组的最后一个元素
- unshift 向数组开头添加一个或多个元素,返回数组长度
- shift 删除第一个元素,返回第一个元素值
- slice(begin,end)获取数组[begin,end)的子数组
- splice()删除指定位置的元素,第一参数是要删除的位置(接受负数),第二个参数是删除的个数(如果是0就不删除),第三个是要添加的元素(可选)
- arr.concat(arr2,arr3,…)链接多个个数组,然后将结果返回,不会修改原来的数组,当然,数组位置直接放元素也是接受的
- join(“连接符”)返回将元素转化为字符串的结果,不影响原数组,同时括号内可以选择拼接元素
- reverse() 反转数组注意这个方法会直接修改原数组
- sort()对数组元素进行排序,unicode顺序,可以直接输入一个方法作为入参,这个入参就是排序方式。
注意
- 对于不连续的数组,会返回元素最大占用索引+1
- 读取不存在的索引返回Undefined.
18.arguments
arguments是方法的隐形参数,和this一样,arguments是实参列表,长度就是参数列表的长度。
function method2() {
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
注意:
argument-callee:当前正在执行的函数对象。
19.Date对象
日期对象
- 日期的创建
//日期的创建(不指定时间,默认为当前时间)
var date = new Date();
//也可以用Date.now()获取当前时间
var currentDate = Date.now();
//日期创建(指定时间,格式为:yyyy/MM/dd HH-mm-ss)
var dateOfHasArgument = new Date("2022/12/12 12:00:00");
- 获取日期年月日方法
- .getDate() 是几号
- .getDay() 是一周中年那一天,注意,周日是0,周一是1,以此类推
- .getMonth() 当前对象是第几月 1月是0
- .getFullYear() 返回YYYY
- .getYear() 废除
- .getTime() 输出时间戳(从1970.1.1 0:0:0 花费的ms数,注意与C++不同,没有系统时钟)
20.Math对象
数学工具类
- 常用的方法
- .PI 表示圆周率,一般全大写的表示常量
- .abs(n) n的绝对值
- .cos(x)/.tan(x)/.sin(x) 三角运算
- .ceil(x)/.floor(x) 向上向下取整
- .round() 四舍五入取整
- .random() 生成(0,1)的随机数
- .max()/.min() 最大最小值,参数数目不限
- .pow(x,y) 返回x^y
- .sqrt(x) 开方运算
21.包装类
众所周知,JS的六种基本类型中,string,number,null,boolean,undefined都是基本数据类型。因此我们想对基本数据类型的对象添加方法的时候就很不方便。因此JS给我们提供了三种包装类,从而实现这个需求
21.1包装类的分类
- Boolean
- String
- Number
注意: - 包装类存在的问题
虽然包装类有以上的特点,但是存在一个问题,比如我们使用Boolean判断,程序如下:
var boolean = new Boolean(false);
if (boolean) {
console.log("into")
}
奇怪的是,输出了into,那是因为在对象转换的时候由于对象非空,因此将boolean转换为true,所以输出了into,因此开发过程中,不要使用包装类。
- 自动包装:
这边的概念和java就比较相似,就是说我们调用基本数据类型的方法的时候,会将基本数据类型转换为包装类,执行完方法或者属性后,再转换为基本数据类型,在java中,也叫自动装箱完后自动拆箱。
22.String
学过Java的同学,这边就学习着比较简单了,方法基本相似。
- str.charAt()指定位置的元素,与[]方式获取的结果一样
- str1.indexOf(str2)检索字符串str1中是否包含指定内容str2,返回第一次出现的位置,找不到返回-1
- str1.indexOf(str2,i)从第i位开始检索字符串中是否包含指定内容,返回第一次出现的位置,找不到返回-1
- str1.lastIndexOf(str2,i)与indexOf相同,是从后往前找,注意同样可选i,表示从正数第几个开始往前找
- substring() 截取字符串,与slice不同的是不接受负数,遇到负数自动换成0,遇到前大于后会自动调整参数位置
- str1.split(str2)用str2为标记拆分str1,返回字符串数组
- str.toUpperCase() 字符串转全大写
- str.toLowerCase() 字符串转全小写
- slice()截取字符串
- String.fromCharCode(X)注意前面两个函数是字符串的函数,这个函数是字符串构造函数的,作用是Unicode转文字(支持0x的16进制)
- str1.concat(str2,str3…)连接字符串
23.正则表达式
23.1正则表达式的创建
//通过构造函数创建
var regExp = new RegExp(正则表达式, 匹配格式);
//通过字面量创建,不需要引号
var regExp = /正则表达式/匹配模式;
匹配模式分为两种:
- ‘i’:忽略大小写
- ‘g’:全局匹配
23.2正则表达式的使用
var 检验结果 = regExp.test(检验的字符串);
23.3常用的符号
- “a”: 这个正则表示字符串中是否包含"a"
- “a|b” 使用|表示或者的意思,也就是匹配a或b
- “[ab]” 匹配a或b
- “[a-z]” 匹配a到z,相当于匹配所有小写字母
- “[A-Z]” 匹配A到Z,相当于匹配所有小写字母
- “a[bde]c” 第一个是a,最后是c,中间bcd随意
- “[^ab]” 匹配除了ab以外的
- “[0-9]” 匹配任意数字
- “a{3}” 连续出现三次a的字符串
- “(ab){3}” ab连续出现3次
- “(ab){1,3}” ab连续出现1-3次(1或2或3)
- “(ab){3,}” ab连续出现三次以上
- “(ab)+” 至少出现一次,·相当于{1,}
- “(ab)*” 有没有都可以, 相当于{0,}
- “(ab)?” 0或1个,相当于{0,1}
- “^a” 以a开头的,注意于[a]不同/[(a)(b)(c)]ba{3}/.test(“abaaa”)区分
- “a$” 以a结尾
- “^a$” a即使开头也是结尾,注意相当于只能匹配"a"不能是"aaa"
- “.” 除了"\n","\r"的任意字符,如果想表示单纯的.可以使用转移.,同理\表示\
- “\d” 匹配0-9
- “\D” 匹配非数字
- “\s” 匹配空格
- “\S” 匹配非空格
- “\b” 匹配单词边界,就是这个字符是两个单词的分界点
- “\B” 匹配非单词边界
- "[(^\s)(\s$)]*"开头或者结尾的空格
23.4可以使用正则表达式的String方法
- str.split()还是原来的正则拆分函数
- .search()搜索字符串中是否含有指定内容,搜索到内容返回指定索引与indexOf类似,只找第一个,即使开了全局也不可以
- .match()从一个字符串中将符合条件的提取出来
- replace()两个参数,被替换的正则表达式,替换之后的内容,默认只替换第一个,需要开启全局模式,第二个参数不写相当于就是删除
24.DOM
DOM的全称是:Document Object Mode,文档对象模型。可以理解成文档对象集合,简单来说,就是HTML中所有节点的集合,js给我们提供了document对象,我们可以通过document操作文档对象模型。
24.1节点
构成HTML文档最基本的元素,常见的节点如下:
- 文档节点:整个HTML文档
- 元素节点:HTML文档中的HTML标签
- 属性节点:元素的属性
- 文本节点:HTML标签中的文本内容
25.事件
时间就是网页与用户的交互行为,如:鼠标点击、关闭网页…
25.1head标签中的script标签的内容无法执行
由于方便代码的管理,我们通常都会把代码放到head标签中的script标签。但是由于JS的执行顺序都是从上往下,往往在页面没加载之前,就把js代码执行了,所以我们提供两种做法。
- 1.将js代码放到body标签中,并放到元素的下面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="but">按钮</button>
<script>
var but = document.getElementById("but");
but.onclick = function click() {
alert("点击我干嘛");
}
</script>
</body>
</html>
- 2.使用onload事件包裹js代码<使代码在页面加载完后执行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function click() {
var but = document.getElementById("but");
but.onclick = function click() {
alert("点击我干嘛");
}
}
</script>
</head>
<body>
<button id="but">按钮</button>
</body>
</html>
25.2获取元素节点对象
- document.getElementById()通过ID获取一个元素节点的对象,注意是Element不是Elements所以必须是一个元素
- document.getElementsByTagName()注意这里是Elements,所以是返回一组对象 通过节点标签名获取,例如:
//获取页面中的button
window.onload = function click() {
var buttons = document.getElementsByTagName("button");
for (let i = 0; i < buttons.length; i++) {
console.log(buttons[i]);
}
}
- document.getElementsByName()注意这里是Elements,所以是返回一组对象 通过元素的Name属性获取
- document.getElementsByCalssName():根据class名获取元素节点,IE9以下不支持
- document.querySelector();根据CSS的元素选择器,返回标签节点,只会返回查询结果的第一个元素。
- document.querySelectotAll();根据CSS的元素选择器,返回查询标签节点集合,IE8以下不支持
25.3获取元素的子节点
- Elem.getElementsByTagName()在Elem元素的子节点中搜索
- Elem.childNodes当前元素的所有子节点(存在兼容性问题)
<!--如果尝试查询ul的childNodes会发现有9个,1个是: ul后面的那个回车与空格,4个是: li后面的那个回车与空格,4个是li标签-->
<ul id="test_ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
- Elem.children获取元素的所有子节点,不会获取空格和回车
- Elem.firstChild当前节点的第一个子节点
- Elem.lastChild当前节点的最后一个子节点
25.4获取父节点和兄弟姐妹节点
- parentNode,获取当前节点的父节点
- previousSibling,获取前一个兄弟节点
- nextSibling,获取后一个兄弟节点
- innerText() 与innerHTML()唯一的不同就是去除了HTML标签
25.5其他方法
- document.body,获取body对象
- document.html,获取html根标签
- document.all,获取页面的所有元素
25.6使用DOM操作CSS样式
- 修改内联样式
语法:标签.style.样式名 = "样式值";
注意:
- 如果样式名中带有-,将样式名驼峰化
- 如果样式中写了!important,则此时样式会有最高的优先级
- 读取内敛样式
语法:标签.style.样式名;
- 获取当前样式(只支持ie浏览器,只读,不能修改)
语法:标签.current.样式名;
- 获取其他浏览器的样式(不支持IE8及其以下,只读,不能修改)
语法:getComputedStyle(元素,伪元素表达符);
解决获取样式版本不兼容的问题
function getStyle(tag, styleName) {
return window.getComputedStyle ? getComputedStyle(tag, null).styleName : tag.currentStyle.styleName;
}
25.7其余操作函数
- elem.clientHeight 获取元素可见高度的属性(包括填充),无单位,Number类型,可计算, 只读
- elem.clientWidth 获取元素可见宽度的属性(包括填充),无单位,Number类型,可计算, 只读
- offsetParent 定位父元素:获取最近的包含块
- offsetLeft 相对于定位父元素左偏移量:获取最近的包含块左偏移量
- offsetRight 相对于定位父元素右偏移量:获取最近的包含块右偏移量
- scrollWidth 元素在滚动的时候最大宽度
- scrollHeight 元素在滚动的时候最大高度
- scrollLeft 水平滚动条滚动的距离
- scrollTop 垂直滚动条滚动的距离
26.事件
26.1Event
在js程序中,我们如果在事件函数中传入一个形参,浏览器会自动把当前事件对象传入当作实参,程序如下
x1.onmousemove = function (event) {
let clientX = event.clientX;
let clientY = event.clientY;
box2.innerHTML = "X轴坐标:" + clientX + "," + "Y轴坐标:" + clientY;
}
但是存在一个问题,IE8及其以下版本不支持,只支持以下形式
x1.onmousemove = function (event) {
let clientX = window.event.clientX;
let clientY = window.event.clientY;
box2.innerHTML = "X轴坐标:" + clientX + "," + "Y轴坐标:" + clientY;
}
我们可以将以上形式改造一下,就解决了兼容性问题
x1.onmousemove = function (event) {
event = event || window.event;
let clientX = window.event.clientX;
let clientY = window.event.clientY;
box2.innerHTML = "X轴坐标:" + clientX + "," + "Y轴坐标:" + clientY;
}
26.2事件的冒泡
冒泡指的是时间向上传导,当后代元素的某个事件被触发,他的祖先元素如果拥有相同的事件,那么也将会被触发,子元素优先执行。
注意
//取消冒泡
event.cancelBubble=true;
26.3事件的委派
如何让父元素下的子元素统一指定事件执行函数,并让新创建的元素也具备这个事件执行函数?
解决方式:
设置父元素的绑定事件,利用冒泡机制可以使子元素触发,同时可以通过event对象的target属性限制只允许子元素出发对应事件,这就叫做事件的委派。
26.4事件的绑定
- 使用对象.事件=function(){}的方法绑定元素之可以绑定一个事件,如果绑定多个会导致后面的函数覆盖前面的的函数
- 使用addEventListener(“事件字符串去掉on”,回调函数,是否在捕获阶段触发事件一般false)通过这个方法也可以为元素绑定响应函数. 注意,如果事件字符串有on一定要删除,例如
box.addEventListener("click",function(){
//...
},false);
本来是要绑定onclick但是现在换成了click,绑定的事件是先绑定先执行,函数的this是调用元素
- IE8及以下不支持,IE5-10提供了:.attachEvent(),用法是.attachEvent(“事件字符串不能删去on”,函数),不需要第三个参数,有on的事件的on不能删除,绑定的事件是后绑定先执行,其中的this是window
- 要解决兼容性还想需要我们自己抽象函数
function bind(obj,eventstr,callback){
if(obj.addEventListener)
obj.addEventListener(eventstr,callback,false);
else
obj.attachEvent("on"+eventstr,function(){
// 解决IE this为window的问题
callback.call(obj);
});
}
26.5事件的传播
对于事件的传播网景与微软有着不同的理解,微软认为元素的事件应该是由内而外的传播,应该先触发当前元素上的事件,然后传播到祖先元素,网景因为由祖先元素先触发
W3C综合了两方观点,将事件分成了三个阶段:
- 捕获阶段: 捕获阶段从最外层祖先元素开始,想目标元素进行捕获,凡是此时默认不触发事件
- 目标阶段: 捕获的目标元素
- 冒泡阶段: 事件从祖先目标元素开始传递,依次触发祖先元素
如果想要设置元素在捕获阶段出发时间,可以设置addEventListener()的第三个参数为true;
27.滚轮事件
- onwheel:鼠标滚动(火狐和谷歌均已支持)
- event.deltaY:表示鼠标滚动的方向,向上为负,向下为正。
28.键盘事件
- onkeyup:按键按下事件
- onkeydown:案件松开事件
- event.key:获取按下按键
29.BOM
浏览器对象模型,可以通过BOM对象来操作浏览器。
29.1Windows
代表的是整个浏览器的窗口,同时window也是网页的全局对象。
29.1.1常用的一些函数
- alert 只有确定的警告框
- confirm 有确定和取消的警告框
- prompt 可以输入数据的警告框,返回值为输入的内容。
- setInterval(回调函数,时间ms);开启定时器,window的方法,将一个函数每隔一段时间执行一次, 返回number类型的数据,作为定时器的标识id
- clearInterval(n);关闭标识为n的定时器,n为undefined不报错,注意 setInterval 调用多次会调用多个计时器,在开的时候注意要不要清除以前的
- setTimeout(function(){},时间ms);定时之后执行一次
29.2Navigator
代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器
注意:
由于历史原因,Navigator的好多属性都不能使用,我们只介绍UserAgent
29.2.1UserAgent
携带浏览器的相关信息,forefix是火狐,MSIE是IE10及以下版本,chrome是谷歌。另外IE11以上可以通过下面来实现
"ActiveXObject" in Window
29.3Location
代表当前浏览器的地址栏信息,通过localtion可以获取地址栏的信息,或者操作浏览器跳转页面。直接打印location就可以获得当前页面的完整路径,如果修改了路径值,浏览器会自动刷新到修改的路径,同时生成历史记录
29.3.1常用的一些属性
- window.location.href 返回当前页面的 href (URL)
- window.location.hostname 返回 web 主机的域名
- window.location.pathname 返回当前页面的路径或文件名
- window.location.protocol 返回使用的 web 协议(http: 或 https:)
- window.location.assign 加载新文档和直接修改值一样
- window.location.reload() 重新加载文档(保存表单等缓存)
- window.location.reload(true) 重新加载文档(强制清空缓存)
- window.location.replace() 跳转链接(不保存历史记录)
29.4History
代表浏览器的历史记录,可以通过该对象来操作浏览器的历史记录。但是由于隐私原因,该对象不能获取到具体的历史记录,只能操作浏览器向前或者向后翻页,而且该操作只在档次访问时有效。
29.4.1常用的一些函数
- length:历史记录长度
- go();可以传递一个整数作为一个参数,整数向前,负数向后,绝对值表示跳转页面数。
- back();回到上个页面,与浏览器的回退一样。
- forward();去下个页面,与浏览器的前进一样。
29.5Screen
代表用户的屏幕信息,通过该对象可以获取到用户显示器的相关信息
注意:
在浏览器中,Navicator、Location、History、Screen都是以window的属性存在的。而由于window属性的特殊性,navicator、location、history、screen都可以独自使用