HTML基础（3）
溢出属性
# overflow 属性
指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条
# overflow: visible
默认情况下，溢出是可见的(visible)，这意味着它不会被裁剪，而是在元素框外渲染
# overflow: hidden
如果使用 hidden 值，溢出会被裁剪，其余内容被隐藏
# overflow: scroll
如果将值设置为 scroll，溢出将被裁剪，并添加滚动条以便在框内滚动
'请注意，这将在水平和垂直方向上添加一个滚动条（即使您不需要它）'
# overflow: auto
auto 值类似于 scroll，但是它仅在必要时添加滚动条
# overflow-x 和 overflow-y
overflow-x 和 overflow-y 属性规定是仅水平还是垂直地（或同时）更改内容的溢出
定位属性
# position 属性
规定应用于元素的定位方法的类型（static、relative、fixed、absolute 或 sticky）
# position: static;
HTML 元素默认情况下的定位方式为 static（静态）。
静态定位的元素不受 top、bottom、left 和 right 属性的影响。
position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位
# position: relative;
position: relative; 的元素相对于其正常位置进行定位。
设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间
# position: fixed;
position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。
固定定位的元素不会在页面中通常应放置的位置上留出空隙
# position: absolute;
position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。
然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。
z-index属性
在对元素进行定位时，它们可以与其他元素重叠。
z-index 属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）。
元素可以设置正或负的堆叠顺序：
# 代码示例：
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
JavaScript简介
# JavaScript是什么
是一门前端的编程语言
它是个脚本语言，需要有宿主文件，它的宿主文件是HTML文件。
# JavaScript与Java什么关系？
没有什么直接的联系，Java是Sun公司（已被Oracle收购了），JavaScript是netspace（网景公司，已被美国在线收购了），JScript是微软的，90%像JavaScript，一些功能只能在IE上使用。
# 它的用法：
在HTML中位置有三块：
（1）head里面
（2）body里面
（3）</html>之后
为了保险起见，一般写在</html>之后。
<script language="javascript">代码必须放在这里面</script>
# 三个常用对话框：
alert("")警告对话框，作用是弹出一个警告对话框。
confirm("")确定对话框，作用是弹出一个可供选择的确定对话框，点击确定之后，它返回ture，点击取消返回false，可以用变量来接收。
prompt("要显示的提示文字"),作用是弹出一个可以输入内容的对话框。
JS基本语法
"""
编写js代码的位置
1.pycharm提供的js文件
2.浏览器提供的js环境(学习阶段推荐)
"""
# 1.注释语法
// 单行注释
/*多行注释*/
# 2.结束符号
分号结束 console.log('hello world');
# 3.变量声明
在js中定义变量需要使用关键字声明
1.var
var name = 'jason'
2.let
let name = 'jason'
'''var声明都是全局变量 let可以声明局部变量'''
# 4.常量声明
const pi = 3.14
# 5.数组
数组的定义：new Array(); //它的长度是动态变化的，里面可以放任意类型的元素。
数组元素的赋值：a[0]=123; a[1]="hello"; //元素中的索引从0开始。
数组的取值：a[i];
数组属性：a.length; //数组元素的个数，长度。
方法：a.sort();//数组排序，按照每一个元素的第一个字符进行排序。a.reverse(); //翻转数组
# 6.函数
函数的四要素：名称、输入、返回值、加工。
定义函数：function add(形参){函数体} //函数名为add，输入为参数的形式，返回值可以是var类型，也可以return一个返回值。
函数必须经过调用才能执行。函数的调用：add（实参）
数据类型
#值类型(基本类型)：
字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
#引用数据类型（对象类型）：
对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）
#JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型
var x; // x 为 undefined
var x = 5; // 现在 x 为数字
var x = "John"; // 现在 x 为字符串
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 object
数值类型
# 相当于python里面的整型int和浮点型float
Number
NaN:属于数值类型 意思是'不是一个数字'(not a number)
parseInt('abc') 不报错返回NaN
parseFloat('abc')不报错返回NaN
'''NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值，来指示其不是数字值'''
字符类型
String
# 默认只能是单引号和双引号
var name1 = 'jason'
var name2 = "jason"
格式化字符串小顿号
var name3 = `jason`
# 可以使用索引位置来访问字符串中的每个字符
var character = carname[7];
字符串的索引从 0 开始，这意味着第一个字符索引值为 [0],第二个为 [1], 以此类推
# 字符串长度
可以使用内置属性 length 来计算字符串的长度
# 移除空白(不能指定)
js中使用trim()、trimLeft()、trimRight()
python中使用strip()、lstrip()、rstrip()
# 切片操作
js中使用substring(start,stop)、slice(start,stop)
前者不支持负数索引后者支持
python中使用[index1:index2]
var str = 'hello world'
str.substring(3,9)
'lo wor'
# 大小写转换
js中使用.toLowerCase()、.toUpperCase()
python中使用lower()、upper()
# 切割字符串
js中和python都是用split() 但是有点区别
str.split('')
(11) ['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']
str.split(' ')
(2) ['hello', 'world']
str.split('',3)
(3) ['h', 'e', 'l']
# 字符串的格式化
js中使用格式化字符串(小顿号)
console.log(`he speak${str}`)
VM664:1 he speakhello world
布尔类型
# Boolean 对象代表两个值:"true" 或者 "false"
如果布尔对象无初始值或者其值为:
0
-0
null
""
false
undefined
NaN
那么对象的值为 false。否则，其值为 true（即使当变量值为字符串 "false" 时）
数组对象
#JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...
此外，JavaScript 允许自定义对象
'''#数组对象的作用是：使用单独的变量名来存储一系列的值'''
# 追加元素
js中使用push() python中使用append()
# 弹出元素
js和python都用的pop()
# 头部插入元素
js中使用unshift() python中使用insert()
# 头部移除元素
js中使用shift() python中可以使用pop(0) remove()
# 扩展列表
js中使用concat() python中使用extend()
# forEach
li.forEach(function (a){console.log(a)})
VM987:1 11
VM987:1 22
VM987:1 33
li.forEach(function (a,b){console.log(a,b)})
VM1014:1 11 0
VM1014:1 22 1
VM1014:1 33 2
li.forEach(function (a,b,c){console.log(a,b,c)})
VM1044:1 11 0 (3) [11, 22, 33]
VM1044:1 22 1 (3) [11, 22, 33]
VM1044:1 33 2 (3) [11, 22, 33]
# splice
splice(起始位置,删除个数,新增的值)
l2 = [11,22,33,44,55]
l2.splice(3,2,'hello','world')
(2) [44, 55]
l2
(5) [11, 22, 33, 'hello', 'world']p
浙公网安备 33010602011771号