Table of Contents
1.复习内容
- em单位
- 默认是父元素字体大小，1em=16px
- 行内元素
- 是包裹内容的，text-align不生效
- text-align: justify（是两端对齐）
2.灵感代办
- 学的东西可以做出什么东西
3.学习内容
-
文本溢出，背景图片处理
-
溢出容器，要打点展示
-
单行文本
-
三件套 解决单行截断
- white-space:nowrap 不换行
- overflow:hidden 超出隐藏
- text-overflow:ellipsis; 圆点显示
- 包裹文字的要是块元素
-
多行文本
* 后端判断前端展示多少字符
* 只做截断，不做打点
- overflow:hidden
-
当网速不好，会屏蔽js和css
* 动态添加的图片元素一般都是IMG标签的图片，不动的一般都是背景属性设置
- 处理方法：把文字进行缩进，text-indent:，然后不能换行white-space:nowrap;在设置超出隐藏overflow:hidden;文本内容就会被图片顶出去，如果图片不加载，则显示文字
- padding里面可以填充图片,高度设置为0，padding-top设置为实际宽度，然后设置overflow:hidden;文本内容就会被图片顶出去，如果图片不加载，则显示文字
-
元素嵌套规则
- 行级元素只能嵌套行级元素
- 块级元素可以嵌套任何元素
- p是例外，不能用p套住div
- a标签不能套a标签
-
inline inline-block都是文本类元素
- 具有文本类特点（文本之间会有分隔符）
- 只要文本类元素途中有空格，就会被分割，（一个空格）
- 解决办法就是直接去掉空格
-
自动转换为inline-block的属性
- position:absolute
- float:left/right
- display:inline-block
-
行内块块元素对其
- 行内块元素有问题，行内块外的对其是和文本底部对齐
- verity-align:设置属性
-
Javascript
-
1.网页中常用在：
- 网页动态效果，用户交互，实现网络请求，游戏制作等
-
2.组成（主要的三部分）：
- 核心语法（ECMAScript）版本区别很小
- BOM（浏览器对象模型）window对象
- 提供浏览器窗口操作的方法
- DOM（文档对象模型）document对象
- 操作HTML文档的方法
-
3.如何使用：
-
1.元素绑定事件
- 事件：用户的行为或者元素的状态：
- 事件处理：元素监听到时间发生后做出的响应
- 事件名称（常用）：
- onclick() 单击事件
- ondblclick(双击事件)
- 语法：
- 将事件名称以便签属性的形式绑定到元素上
-
2.内嵌方式
- <script type=“text/javascript”></script>书写js语句
- 标签可以书写任意位置，浏览器解析到script会执行内部脚本代码
- type属性标明类型，src标明外部路径
-
3.外链方式
- 创建外部的JS文件（.js）
- script src=“引入”，引入就不要再使用内嵌方式书写代码
-
4.语法规范：
- JS区分大小写
- JS可以结尾可以加分号，避免意外错误
- Js注释 //单行 、/** 多行 **/
-
5.输出语句
- console.log(“”) 控制台输出
- alert(“”) 网页警告框
- prompt(“”) 带输入框的弹框
- document.write(“”) 在网页中输出，可以识别标签语法
- 代码的书写位置极为添加位置
- 使用元素绑定的方式去动态添加，因为页面已经加载完毕，所以会将页面覆盖重写
-
变量声明
- 字母数字下换线$组成
- 变量声明用var，省略var就是全局变量
- 常量用const来定义
- undefined 没有赋值的变量
- 引用未声明对象，报错is not defined
- 变量提升，先使用 后声明（执行js之前，会检索所有的var关键字声明，只要有声明就不会报错is not defined，显示undefined）
- 变量声明用多个单词，小驼峰表示,getElementById()
- 保留n位小数位，toFixed(n)
-
数据类型
-
基础数据类型（值）
- number
- string
- boolean
- undefined
- null（是object类型）
- chrome等浏览器打印类型可能会有一些不同，带引号的是字符串，string也是字符串
-
引用类型（对象）
-
检测数据类型typeof()
-
数据类型转换
-
强制类型转换
- 转换字符串 object.toString()
- 转换number
- Number(n) 将变量n转换为number值，返回转换后的结果，如果有非Nomber字符，转换就失败，返回NaN(not a number ，计算机无法操作的数据)
- parseInt(n)/parseFloat(n)解析number部分（方法属于字符串类型）传递一个参数，参数不是是字符串会转成字符串类型（true也会被转为字符串类型），每一位都进行转换操作，遇到解析失败，停止解析，返回转换的结果
- 转化布尔值
- Boolean()将变量转化布尔值，除了空值，其余都是真
-
自动类型转换
- 字符串与其他类型+运算，一律按照字符串拼接
- 其他情况下，自动转成Numer，参与数学运算
- 字符串与其他类型做非加法运行
- 布尔进行运算
- Number值与其他类型进行数学运算
-
运算符
- 赋值运算符 =
- 数学运算符 + -
- 复合运算符 += -=
- 自增自减运算符 ++ --
- 单独使用：就是加一或者减一，字符串自动转换为数字
- 复合使用：要看具体情况
- 比较运算符/关系运算
- === 全等：是严格比较，类型一致，值相等
- !== 不全等：
- == 综合比较，值相等
- 关系运算一定是布尔值
- 运算规则，
- 字符串之间比较是Unicode编码值,也是一位比较出大小，就返回结果
- 其他情况（数字跟字符串比较，布尔和数字比较，等等）也是转换Number进行比较
- NaN参与运算，一律是false
- 逻辑运算符 && and ,|| or
4.扩展延伸知识
5.知识内容个人梳理
-
float浮动元素：
- 最开始是为了展示报纸效果而设立
- 对行内块元素，行内元素，不遮挡显示，但是不被遮挡的前提是不能设置float属性，要是块元素
-
!important
-
三大元素总结：行内元素，块元素，行内块元素
-
行内元素：
- (1)设置宽高无效
- (2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
- (3)不会自动进行换行
-
块状元素
- (1)能够识别宽高
- (2)margin和padding的上下左右均对其有效
- (3)可以自动换行
- (4)多个块状元素标签写在一起，默认排列方式为从上至下
-
行内块状元素
- (1)不自动换行
- (2)能够识别宽高
- (3)默认排列方式为从左到右
-
换行的几种方法
-
1. 强制不换行
div{
white-space:nowrap;
}
2. 自动换行
div{
word-wrap: break-word;
word-break: normal;
}
3. 强制英文单词断行
div{
word-break:break-all;
}
6.今天都复习了之前的什么内容
- 默认是父元素字体大小，1em=16px
- 是包裹内容的，text-align不生效
- text-align: justify（是两端对齐）
- 学的东西可以做出什么东西
3.学习内容
-
文本溢出，背景图片处理
-
溢出容器，要打点展示
-
单行文本
-
三件套 解决单行截断
- white-space:nowrap 不换行
- overflow:hidden 超出隐藏
- text-overflow:ellipsis; 圆点显示
- 包裹文字的要是块元素
-
多行文本
* 后端判断前端展示多少字符
* 只做截断，不做打点
- overflow:hidden
-
当网速不好，会屏蔽js和css
* 动态添加的图片元素一般都是IMG标签的图片，不动的一般都是背景属性设置
- 处理方法：把文字进行缩进，text-indent:，然后不能换行white-space:nowrap;在设置超出隐藏overflow:hidden;文本内容就会被图片顶出去，如果图片不加载，则显示文字
- padding里面可以填充图片,高度设置为0，padding-top设置为实际宽度，然后设置overflow:hidden;文本内容就会被图片顶出去，如果图片不加载，则显示文字
-
元素嵌套规则
- 行级元素只能嵌套行级元素
- 块级元素可以嵌套任何元素
- p是例外，不能用p套住div
- a标签不能套a标签
-
inline inline-block都是文本类元素
- 具有文本类特点（文本之间会有分隔符）
- 只要文本类元素途中有空格，就会被分割，（一个空格）
- 解决办法就是直接去掉空格
-
自动转换为inline-block的属性
- position:absolute
- float:left/right
- display:inline-block
-
行内块块元素对其
- 行内块元素有问题，行内块外的对其是和文本底部对齐
- verity-align:设置属性
-
Javascript
-
1.网页中常用在：
- 网页动态效果，用户交互，实现网络请求，游戏制作等
-
2.组成（主要的三部分）：
- 核心语法（ECMAScript）版本区别很小
- BOM（浏览器对象模型）window对象
- 提供浏览器窗口操作的方法
- DOM（文档对象模型）document对象
- 操作HTML文档的方法
-
3.如何使用：
-
1.元素绑定事件
- 事件：用户的行为或者元素的状态：
- 事件处理：元素监听到时间发生后做出的响应
- 事件名称（常用）：
- onclick() 单击事件
- ondblclick(双击事件)
- 语法：
- 将事件名称以便签属性的形式绑定到元素上
-
2.内嵌方式
- <script type=“text/javascript”></script>书写js语句
- 标签可以书写任意位置，浏览器解析到script会执行内部脚本代码
- type属性标明类型，src标明外部路径
-
3.外链方式
- 创建外部的JS文件（.js）
- script src=“引入”，引入就不要再使用内嵌方式书写代码
-
4.语法规范：
- JS区分大小写
- JS可以结尾可以加分号，避免意外错误
- Js注释 //单行 、/** 多行 **/
-
5.输出语句
- console.log(“”) 控制台输出
- alert(“”) 网页警告框
- prompt(“”) 带输入框的弹框
- document.write(“”) 在网页中输出，可以识别标签语法
- 代码的书写位置极为添加位置
- 使用元素绑定的方式去动态添加，因为页面已经加载完毕，所以会将页面覆盖重写
-
变量声明
- 字母数字下换线$组成
- 变量声明用var，省略var就是全局变量
- 常量用const来定义
- undefined 没有赋值的变量
- 引用未声明对象，报错is not defined
- 变量提升，先使用 后声明（执行js之前，会检索所有的var关键字声明，只要有声明就不会报错is not defined，显示undefined）
- 变量声明用多个单词，小驼峰表示,getElementById()
- 保留n位小数位，toFixed(n)
-
数据类型
-
基础数据类型（值）
- number
- string
- boolean
- undefined
- null（是object类型）
- chrome等浏览器打印类型可能会有一些不同，带引号的是字符串，string也是字符串
-
引用类型（对象）
-
检测数据类型typeof()
-
数据类型转换
-
强制类型转换
- 转换字符串 object.toString()
- 转换number
- Number(n) 将变量n转换为number值，返回转换后的结果，如果有非Nomber字符，转换就失败，返回NaN(not a number ，计算机无法操作的数据)
- parseInt(n)/parseFloat(n)解析number部分（方法属于字符串类型）传递一个参数，参数不是是字符串会转成字符串类型（true也会被转为字符串类型），每一位都进行转换操作，遇到解析失败，停止解析，返回转换的结果
- 转化布尔值
- Boolean()将变量转化布尔值，除了空值，其余都是真
-
自动类型转换
- 字符串与其他类型+运算，一律按照字符串拼接
- 其他情况下，自动转成Numer，参与数学运算
- 字符串与其他类型做非加法运行
- 布尔进行运算
- Number值与其他类型进行数学运算
-
运算符
- 赋值运算符 =
- 数学运算符 + -
- 复合运算符 += -=
- 自增自减运算符 ++ --
- 单独使用：就是加一或者减一，字符串自动转换为数字
- 复合使用：要看具体情况
- 比较运算符/关系运算
- === 全等：是严格比较，类型一致，值相等
- !== 不全等：
- == 综合比较，值相等
- 关系运算一定是布尔值
- 运算规则，
- 字符串之间比较是Unicode编码值,也是一位比较出大小，就返回结果
- 其他情况（数字跟字符串比较，布尔和数字比较，等等）也是转换Number进行比较
- NaN参与运算，一律是false
- 逻辑运算符 && and ,|| or
4.扩展延伸知识
5.知识内容个人梳理
-
float浮动元素：
- 最开始是为了展示报纸效果而设立
- 对行内块元素，行内元素，不遮挡显示，但是不被遮挡的前提是不能设置float属性，要是块元素
-
!important
-
三大元素总结：行内元素，块元素，行内块元素
-
行内元素：
- (1)设置宽高无效
- (2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
- (3)不会自动进行换行
-
块状元素
- (1)能够识别宽高
- (2)margin和padding的上下左右均对其有效
- (3)可以自动换行
- (4)多个块状元素标签写在一起，默认排列方式为从上至下
-
行内块状元素
- (1)不自动换行
- (2)能够识别宽高
- (3)默认排列方式为从左到右
-
换行的几种方法
-
1. 强制不换行
div{
white-space:nowrap;
}
2. 自动换行
div{
word-wrap: break-word;
word-break: normal;
}
3. 强制英文单词断行
div{
word-break:break-all;
}
6.今天都复习了之前的什么内容
文本溢出，背景图片处理
-
溢出容器，要打点展示
-
单行文本
-
三件套 解决单行截断
- white-space:nowrap 不换行
- overflow:hidden 超出隐藏
- text-overflow:ellipsis; 圆点显示
- 包裹文字的要是块元素
-
-
-
多行文本
* 后端判断前端展示多少字符 * 只做截断，不做打点- overflow:hidden
当网速不好，会屏蔽js和css
* 动态添加的图片元素一般都是IMG标签的图片，不动的一般都是背景属性设置
- 处理方法：把文字进行缩进，text-indent:，然后不能换行white-space:nowrap;在设置超出隐藏overflow:hidden;文本内容就会被图片顶出去，如果图片不加载，则显示文字
- padding里面可以填充图片,高度设置为0，padding-top设置为实际宽度，然后设置overflow:hidden;文本内容就会被图片顶出去，如果图片不加载，则显示文字
-
元素嵌套规则
- 行级元素只能嵌套行级元素
- 块级元素可以嵌套任何元素
- p是例外，不能用p套住div
- a标签不能套a标签
-
inline inline-block都是文本类元素
- 具有文本类特点（文本之间会有分隔符）
- 只要文本类元素途中有空格，就会被分割，（一个空格）
- 解决办法就是直接去掉空格
-
自动转换为inline-block的属性
- position:absolute
- float:left/right
- display:inline-block
-
行内块块元素对其
- 行内块元素有问题，行内块外的对其是和文本底部对齐
- verity-align:设置属性
Javascript
-
1.网页中常用在：
- 网页动态效果，用户交互，实现网络请求，游戏制作等
-
2.组成（主要的三部分）：
- 核心语法（ECMAScript）版本区别很小
- BOM（浏览器对象模型）window对象
- 提供浏览器窗口操作的方法
- DOM（文档对象模型）document对象
- 操作HTML文档的方法
-
3.如何使用：
-
1.元素绑定事件
- 事件：用户的行为或者元素的状态：
- 事件处理：元素监听到时间发生后做出的响应
- 事件名称（常用）：
- onclick() 单击事件
- ondblclick(双击事件)
- 语法：
- 将事件名称以便签属性的形式绑定到元素上
-
2.内嵌方式
- <script type=“text/javascript”></script>书写js语句
- 标签可以书写任意位置，浏览器解析到script会执行内部脚本代码
- type属性标明类型，src标明外部路径
-
3.外链方式
- 创建外部的JS文件（.js）
- script src=“引入”，引入就不要再使用内嵌方式书写代码
-
-
4.语法规范：
- JS区分大小写
- JS可以结尾可以加分号，避免意外错误
- Js注释 //单行 、/** 多行 **/
-
5.输出语句
- console.log(“”) 控制台输出
- alert(“”) 网页警告框
- prompt(“”) 带输入框的弹框
- document.write(“”) 在网页中输出，可以识别标签语法
- 代码的书写位置极为添加位置
- 使用元素绑定的方式去动态添加，因为页面已经加载完毕，所以会将页面覆盖重写
-
变量声明
- 字母数字下换线$组成
- 变量声明用var，省略var就是全局变量
- 常量用const来定义
- undefined 没有赋值的变量
- 引用未声明对象，报错is not defined
- 变量提升，先使用 后声明（执行js之前，会检索所有的var关键字声明，只要有声明就不会报错is not defined，显示undefined）
- 变量声明用多个单词，小驼峰表示,getElementById()
- 保留n位小数位，toFixed(n)
-
数据类型
-
基础数据类型（值）
- number
- string
- boolean
- undefined
- null（是object类型）
- chrome等浏览器打印类型可能会有一些不同，带引号的是字符串，string也是字符串
-
引用类型（对象）
-
检测数据类型typeof()
-
-
数据类型转换
-
强制类型转换
- 转换字符串 object.toString()
- 转换number
- Number(n) 将变量n转换为number值，返回转换后的结果，如果有非Nomber字符，转换就失败，返回NaN(not a number ，计算机无法操作的数据)
- parseInt(n)/parseFloat(n)解析number部分（方法属于字符串类型）传递一个参数，参数不是是字符串会转成字符串类型（true也会被转为字符串类型），每一位都进行转换操作，遇到解析失败，停止解析，返回转换的结果
- 转化布尔值
- Boolean()将变量转化布尔值，除了空值，其余都是真
-
自动类型转换
- 字符串与其他类型+运算，一律按照字符串拼接
- 其他情况下，自动转成Numer，参与数学运算
- 字符串与其他类型做非加法运行
- 布尔进行运算
- Number值与其他类型进行数学运算
-
运算符
- 赋值运算符 =
- 数学运算符 + -
- 复合运算符 += -=
- 自增自减运算符 ++ --
- 单独使用：就是加一或者减一，字符串自动转换为数字
- 复合使用：要看具体情况
- 比较运算符/关系运算
- === 全等：是严格比较，类型一致，值相等
- !== 不全等：
- == 综合比较，值相等
- 关系运算一定是布尔值
- 运算规则，
- 字符串之间比较是Unicode编码值,也是一位比较出大小，就返回结果
- 其他情况（数字跟字符串比较，布尔和数字比较，等等）也是转换Number进行比较
- NaN参与运算，一律是false
- 逻辑运算符 && and ,|| or
-
5.知识内容个人梳理
-
float浮动元素：
- 最开始是为了展示报纸效果而设立
- 对行内块元素，行内元素，不遮挡显示，但是不被遮挡的前提是不能设置float属性，要是块元素
-
!important
-
三大元素总结：行内元素，块元素，行内块元素
-
行内元素：
- (1)设置宽高无效
- (2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
- (3)不会自动进行换行
-
块状元素
- (1)能够识别宽高
- (2)margin和padding的上下左右均对其有效
- (3)可以自动换行
- (4)多个块状元素标签写在一起，默认排列方式为从上至下
-
行内块状元素
- (1)不自动换行
- (2)能够识别宽高
- (3)默认排列方式为从左到右
-
换行的几种方法
-
1. 强制不换行
div{
white-space:nowrap;
}
2. 自动换行
div{
word-wrap: break-word;
word-break: normal;
}
3. 强制英文单词断行
div{
word-break:break-all;
}
6.今天都复习了之前的什么内容
float浮动元素：
- 最开始是为了展示报纸效果而设立
- 对行内块元素，行内元素，不遮挡显示，但是不被遮挡的前提是不能设置float属性，要是块元素
!important
三大元素总结：行内元素，块元素，行内块元素
-
行内元素：
- (1)设置宽高无效
- (2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
- (3)不会自动进行换行
-
块状元素
- (1)能够识别宽高
- (2)margin和padding的上下左右均对其有效
- (3)可以自动换行
- (4)多个块状元素标签写在一起，默认排列方式为从上至下
-
行内块状元素
- (1)不自动换行
- (2)能够识别宽高
- (3)默认排列方式为从左到右
换行的几种方法
-
1. 强制不换行
div{ white-space:nowrap; }2. 自动换行
div{ word-wrap: break-word; word-break: normal; }3. 强制英文单词断行
div{ word-break:break-all; }