前端笔记

	 CSS的基本语法：
	 选择器{
		样式名称：样式的值；
		样式名称：样式的值；
		样式名称：样式的值；
	 }
	 选择器:用来定位页面元素
	 基本选择器
	 标签选择器：直接以标签名称当做选择器,当前文档中所有该标签都拥有这套样式
	 ID选择器：#id的名称   可以唯一定位页面某个元素设定样式
	 类选择器：.类名称   可以给页面的部分元素设定同样的样式
	 复合选择器
	 后代选择器：外层元素选择器 里层元素选择器   中间是空格间隔
	 交集选择器：由两个选择器构成，第一个必须是标签选择器，第二个必须是id或者类选择器  两个选择器
	            直接连在一起，中间没有任何字符
	 并集选择器：逗号间隔多个基本选择器，给多个元素设定同样的样式
	 CSS的引入方式：
	 行内样式：在标签名上添加style属性，书写样式
	 内部样式表：head中添加style标签用来书写样式
	 外部样式表：把css代码单独书写在一个.css的文件中，然后引入到某个html中   
	 推荐使用外部样式表：
		1. 做到html和css完全分离，易于程序的维护
		2. 单独的样式文件会在浏览器中进行缓存，一定程度上提高页面的访问速度
	CSS的继承
		子标签会直接继承父标签的样式
		子标签的样式不会影响父标签
	CSS的优先级：
	 1. id选择器>类选择器>标签选择器
	 2. 行内样式>内部样式表>外部样式表
	 3. !important提升优先级

	 <!-- 
	标准文档流：页面元素按照从上到下，从左到右的标准顺序进行布局
	 position实现页面元素的定位：
	 static:默认值  没有定位
	 relative:相对定位
		 top  left  right  bottom实现偏移    偏移量支持负数，相当于反方向偏移
		 相对定位不脱离标准流，原来位置保持不变，后面元素不能占用原来位置
	 absolute:绝对定位
	     子元素相对于父元素进行定位，top  left  right  bottom实现偏移
		 前提：父元素必须支持相对定位或者绝对定位
		 如果父元素不支持定位，则子元素会相对于body进行定位。因为body默认支持相对定位
		 绝对定位脱离标准流，后面元素可以占用它原来的位置
	 fixed:固定定位
	 z-index：设定层叠效果
	 
	 -->
	 <!-- 
	 div进行页面设计：
	 一个盒子主要有5个属性：width   height   padding   border   margin
	 宽度width：内容的宽度
		具体像素     百分比（相对于父元素）
	 高度height：内容的高度
	    具体像素     不写高度
	 内边距：padding    内容距离边框的距离
	 padding-left  padding-top  padding-right   padding-bottom 
	 边框：border   
	 border 复合样式：border-width   border-style   border-color 
	 border-left   border-right  border-top   border-bottom
	 盒子的宽度：width+padding+border
	 盒子的高度：height+padding+border
	 margin：外边距   距离相邻盒子的距离
	 margin: 0px auto; 实现整个盒子在网页中水平居中
	 -->
	 <!-- 
	 form标签：表单  用于收集和用户交互的信息
		method属性：设定表单提交的方式   get/post  
		name属性：表单的名称
		action属性：设定表单提交的路径
	 input标签：
	    type属性区分表单的类型：
		text:单行文本输入域   默认值
			maxlangth属性：设定文本框允许输入的最大字符数
			value属性：代表默认值
		password:密码输入域     数据暗文显示
			其他使用方式同text
		file: 文件上传控件
		hidden:隐藏域
		checkbox:复选框
			name属性：代表一组复选框
			value属性：是复选框提交时候的值
			checked属性：复选框默认选中状态
		radio：单选按钮
			name属性：实现一组单选按钮的互斥效果
			value属性：是提交时候的值
			checked属性：单选按钮默认选中状态
		三种按钮：
			button:普通按钮    没有默认效果
			reset:重置按钮     点击之后，会重置form表单，回到页面初始化状态
			submit:提交按钮    默认提交form表单
		textarea标签：多行文本输入域
			默认值书写在标签题的部分，不是value属性
		select标签：下拉菜单
			每一个选项用option标签生成  option必须要有value属性 用于提交
			selected属性用于设定某一个选项默认选中的状态
	 -->
	 <!-- 
	  video:用于播放视频文件
	  src：指定要播放的视频文件的路径
	  autoplay：浏览器加载完视频之后自动播放
	  controls：显示播放控件
	  muted：静音播放
	  loop：循环播放
	  audio：用于播放音频文件
	  -->
	  <!-- 
	 元素分类：
	 行级元素：a  font  strong  b   i   ...
		特性：
		1. 默认同行可以继续显示同类型标签
		2. 不支持宽高，内容决定宽度
		3. 不支持margin
	 块级元素：p div h1~h6 列表...
		特性：
		1.默认独占一行
		2.支持设定宽高，没有宽度时，默认占父元素的100%
		3.支持所有css命令
	 内联块元素：img
		特性：
		1. 同类型元素同行显示
		2. 支持宽度高度
	 -->
	 <!-- 
	 HTML是由一系列标签构成的
	 HTML的基本结构：
	 标签：
		由开始标记和结束标记构成，中间的部分叫做标签体
		单标签：在开始标记中直接结束标签
		标签是不区分大小写的
	 每一个标签都支持属性的书写，属性用来设定标签内容的特殊效果，属性必须写在开始标记中
	 属性的书写方式：属性名=属性值
	 一个标签是可以书写多个属性的，没有前后顺序
	 根标签：html标签
		head标签：用来设定文档头文件的内容
			meta标签：用来设定文档的编码字符集
			title标签：用来给文档设定标题
			style   link   script
		body标签：用来生成文档的主体内容
	HTML常用标签：
	标题标签：h1~h6
	段落标签：p
		自带还行效果  段落之间是有距离的
	换行标签：br
	水平线标签：hr
	字体标签
	图片标签：img
		src属性：指定图片位置
		alt属性：图片不能正常加载时的替代文本
		title:图片的标题  鼠标悬停在图片上显示的文字
		width:设定图片宽度
		height:设定图片高度
	绝对路径和相对路径：
	绝对路径：当要显示的图片资源不在当前工程中，src属性要使用绝对路径显示图片
	相对路径：当要显示的图片资源在当前工程中，src属性要使用相对路径显示图片
	超链接：a
		href属性：指定链接要跳转到的位置
		target属性：用来指定链接跳转的方式
			_blank:在新窗口中打开链接
			_self:默认值  在当前窗口中打开链接
			_parent:在父窗口中打开链接
			_top:在整个浏览器窗口打开链接
	预设格式文本：pre
		保留源代码的内容
	字体标签：font
		size:设置字体大小
		color:设置字体颜色
		face:设置字体类型
	实体字符：
		空格：&nbsp;
		< : &lt;
		>: &gt;
		&: &amp;
		": &quot;
	center：实现内容在页面中水平居中
	body标签：
		bgcolor:背景颜色
		background:背景图
	列表：
	无序列表：
	ul  li
	有序列表：
	ol  li
	定义列表：
	dl  dt  dd
	-->
	<!-- 
		JavaScript:JS
		用于实现页面动态效果的脚本语言
		Js基础知识
		JS BOM浏览器对象模型
		DOM编程
		JS基础知识：
		HTML中书写js代码的方式：
		1.html中嵌入js代码  使用script标签
		2.引入外部js文件
		
		JS基本语法：
		语法的注意事项：
		1.区分大小写
		2.变量是弱类型
		3.每一行结尾加分号
		4.括号代表代码块
		
		JS中的变量：
		弱类型   var声明
		变量的命名规则：
		1.以字母 _  $开头
		2.余下的字符可以是字母 _  $ 数字
		3.最长255个字符
		4.不能有空格  大小写敏感
		5.不能使用关键字保留字
		五种原始数据类型：
		Undefined  未定义类型
		Null    空类型
		Boolean: true/false
		Number: 数字
		String: 值用引号括起来
		数据类型的转换：
		1.数值和字符串相加，会自动把数值型转换成字符串类型
		2.布尔型和字符串相加，会自动把布尔型转换成字符串类型
		3.数值型和布尔型相加，会自动把布尔型转换成数值型。true转成1  false转成0
		字符串转换成数值型： parseInt  parseFloat
		
		== 和 ===的区别：
		==：比较两个操作符是否相等，只关心值，不关心数据类型
		===：比较两个操作符是否相等，要求值和数据类型都完全一致
		
	 -->
	 <!-- 
	  流程控制语句：
	  条件判断语言： if   switch
	  循环语句:for  while  do-while   for in
	  函数的声明：
	  function 函数名(参数列表){
		  函数体
		  return语句
	  }
	  -->
	  <!-- 
	 数组：存储多个数据的集合
	 JS中数组的特点： 不要求数据类型一致   长度是不固定的
	 JS中的数组没有默认值
	 length属性获取数组的长度
	 -->
	  */
		//Array对象的常用方法
		//concat:将多个数组拼接到一起成一个数组
		var arr1 = [1,2,3,4,5];
		var arr2 = [6,7,8];
		var arr3  =arr1.concat(arr2);
		console.log(arr3);
		//join:返回字符串；由数组中的所有元素连接到一起，元素间的间隔符由参数指定，
		//省略参数则用逗号分隔
		console.log(arr3.join(";"));
		//reverse():实现数组的反转
		var arr4 = arr3.reverse();
		console.log(arr4);
		//pop:移除数组中的最后一个元素并返回该元素
		var s = arr4.pop();
		console.log(s);
		console.log(arr4);
		//push:给数组增加新元素
		arr4.push(10);
		console.log(arr4);
		//shift:移除数组中的第一个元素并返回该元素
		arr4.shift();
		console.log(arr4);
		//slice(i,j):从索引值i开始,到索引值j-1结束,截成一个新的数组
		var arr5 = arr4.slice(1,3);
		console.log(arr5);
		//sort方法:返回排序之后的新数组
		var arr6 = arr5.sort();
		console.log(arr6);
		//toString()  将数组转换成字符串形式,,默认用逗号分隔
		console.log(arr6.toString());
		
		//创建对象
		/* var obj1 = new Object();
		obj1.name='test';
		obj1.sex='男';
		
		var obj2 = {
			name:'',
			sex:''
		} */
		/*
		Date对象:
		创建对象：
		1.构建系统时间
		2.根据年月日创建日期对象
		3.根据年月日时分秒 毫秒创建日期对象
		4.根据年月日创建日期对象 格式不同
		*/
		/* var now = new Date();
		 console.log(now);
		var date1 = new Date(2000,01,01);//月份实际值+1
		console.log(date1);
		var date2 = new Date(1999,04,01,10,10,10,200);
		console.log(date2);
		var date3 = new Date('1988/06/08');//月份值不变
		console.log(date3); 
		console.log(date3.getYear());
		console.log(now.getFullYear());//获取年数  4位的年数
		console.log(now.getMonth()); //获取月份  比实际值小1
		console.log(now.getDate()); 
		console.log(now.getDay()); //星期日返回的是0
		console.log(now.getHours());
		console.log(now.getMinutes());
		console.log(now.getSeconds());
		console.log(now.getTime());
		
		document.write(now.getFullYear()+'年'+(now.getMonth()+1)+'月'+now.getDate()+'日 '+now.getHours()+':'+now.getMinutes()+':'+now.getSeconds());
		
		var date3 = new Date('1988/06/08');
		date3.setHours(11);
		date3.setMinutes(02);
		date3.setSeconds(56);
		console.log(date3); 
		 */
		
		//Math对象
		/* console.log(Math.round(5.6));
		console.log(Math.random());
		var num = Math.ceil(Math.random()*10);
		console.log(num); */
		
		//字符串对象String
	/* 	var str = 'a b c d';
		var str1 = '123';
		console.log(str.length);
		console.log(str.charAt(0));
		console.log(str.charCodeAt(0));
		console.log(str.concat(str1));
		console.log(str.indexOf('aa'));
		console.log(str.replace('a','A'));
		console.log(str.slice(1,3));
		console.log(str.substring(1,3));
		console.log(str.substr(1,3)); */
		
		/* var date = new Date('2025/11/11');
		document.write("2025年的双十一是星期"+(date.getDay()==0?'日':date.getDay()));
		document.write("<br/>")
		var now = new Date();
		document.write("2025年的双十一距离当前有"+(date.getTime()-now.getTime())+"毫秒");
		document.write("<br/>")
		var ss = date.getTime()-now.getTime();
		var days = ss/1000/60/60/24;
		document.write("2025年的双十一距离当前有"+Math.round(days)+"天"); */
		//del();
		
			/* 
		 BOM浏览器对象模型:
		 顶级对象:window
			document   location   history   
		window的方法： window对象的方法在调用时，对象名可以省略
		alert():弹出提示框
		confirm():弹出确认框
		prompt()：弹出输入框 
		close():关闭窗口
		open()：打开新窗口  第一个参数是新窗口路径  第二个参数是新窗口名称  第三个参数是特性字符串
		setInterval:定义定时器，指定某个函数在指定时间间隔内反复执行
		clearInterval：清除定时器
		setTimeout():定义定时器，指定某个函数在指定时间后执行一次
		clearTimeout():清除定时器
		
		 */
		/* window.alert("提示信息"); */
		
		/*
		document对象:
		forms：代表页面中所有表单的集合   返回值是一个数组
		方法：
		write():文档中打印信息
		writeln():文档中打印信息,自带换行
		getElementById():根据元素的id值获取页面元素
		getElementsByName():根据元素的name获取一组页面元素，返回值是数组
		getElementsByTagName():根据元素的名称获取一组页面元素，返回值是数组
		getElementsByClassName():根据元素的class值获取一组页面元素，返回值是数组
		history对象:
		go()
		back()==go(-1)
		forward()==go(1)
		location对象：
		
		*/
					/*
		1.获取页面元素   document的四个方法
		2.操作页面元素
		  获取页面元素的内容：
			表单控件的值：value
			普通元素的内容：innerHTML获取元素标签体的全部内容   innerText获取纯文本内容
		  修改元素的内容：
			表单控件的值：value
			普通元素的内容：innerHTML   innerText
		  获取元素的属性值:
			getAttribute()      元素.属性名
		  修改元素的属性值
		    setAttribute()   元素.属性名=值 
		  获取元素的样式
		  修改元素的样式
		  元素.style.样式名
		  元素.className  更改样式
		 3.增加页面元素
			appendChild  追加子元素
			insertBefore
		4.删除页面元素
		    remove  删除当前元素
			removeChild   删除子元素
		*/