HTML_JavaScript

一、day_03知识点梳理

定位：页面中用于摆放元素位置的方式，通过定位可以随心所欲的将元素摆放在任意的位置。
1、 流定位：浏览器中元素的默认排列方式，垂直排列，水平排列。
       默认情况下，元素在浏览器中排列是占据一个位置的。
2、固定定位：相对于浏览器的窗口进行定位。
/*背景色*/
background-color: #6699CC;
/*position:fixed 固定定位*/

div进行position定位后，它的宽度不在是自适应，需要加width=100%；
HTML 和 body 本身也存在内边距和外边距 ，可以根据具体的情况进行调节
固定定位：脱离流。
相对定位：根据元素本身的位置进行定位。没有脱离流。
相对定位*/
position: relative;
/*偏移量*/
/*
top的偏移量为正数时，是相对于上边向下移动
left的偏移量为正数时，是相对于左边向右移动。       
相对定位：元素没有脱离流。
绝对定位：一个元素相对于它的父辈元素进行定位，要求父辈元素中要有position:realtive,当父辈
      元素中都没有position属性，可以找到body.
/*绝对定位*/
position: absolute;
浮动定位：可以使块级元素进行水平排列。
    一个元素可以向左或向右移动，当它碰到父元素的边缘时或其他移动元素框的
    边缘时就会停下来。
特性：脱离流。
右浮动：可以使块级元素以倒叙的方式水平排列
浮动影响：
浏览器会把页面中的文档信息尽可能的显示出来
消除浮动影响的方式：claer: left/right
1. 需要保留父元素的边框时:
      在父元素中加一个空的div，对此div进行消除浮动影响 。
2.不需要保留父元素的边框时，直接对父元素的同级元素进行消除浮动影响。
左浮动：可以使块级元素以正序的方式水平排列
float:left
也会造成浮动后的影响，消除的方式与右浮动相同。

设置背景图片
/*设置背景图片*/
background-image: url(../images/background.png);
/*取消平铺*/
background-repeat: no-repeat;
/*水平方向的平铺*/
background-repeat: repeat-x;
/*垂直方向的平铺*/
/*background-repeat: repeat-y;*/
/*改变背景图片的大小*/
/*background-size: 100%;*/
/*固定背景图片*/
background-attachment: fixed;
background-image:none (默认值) 表示没有添加任何图像
如果需要添加图像，就需要设置url值(表示图片的路径)

二、day_04知识点梳理

Javascript
JS的初衷：用于处理表单校验过程中，一些显而易见的错误。从而减少服务器的压力。
网站中的网页分为两种：

① 静态网页：HTML+CSS+Javascript编辑的网页就是静态网页，没有和服务器端产生任何的交互行为，只是网页的结构内容显示出来。
②动态网页：动态页面和静态页面是相对应的，动态网页通过服务端的管理系统可以更新网页的信息。
什么是Javascript:
    js是嵌入到HTML中的脚本语言，是一种网页编程技术，可以向HTML添加交互行为，由浏览器解释执行。
js的作用：
   客户端的数据计算   客户端的表单校验  添加事件效果 与服务端异步数据的交互
js的引入方式：
1. 内联方式 -
onclick:事件 用户的操作行为
alert(); 输出框 显示框 确认框
在双引号中表示字符串要用单引号
confirm():提示框。
prompt();用户输入框    
2. 内部嵌入方式
在onclick事件中添加函数，在<script>标记中
声明该函数，在函数中写具体js
function 函数对象
// 浏览器是从上到下的顺序解释执行代码
// 当浏览器执行到function时，只是创建了
// 函数的对象，只有用户执行事件才会调用函数
3.外部文件
定义一个Javascript文件，该文件以.js为后缀，在文件中写JS。
将js代码写在外部文件中，可以减少HTML页面的代码量，便于维护，更加精简，降低耦合度
Javascript中的变量
    变量本身没有类型，在声明变量时不用声明类型，浏览器不会对它进行类型校验。
    变量的类型是根据数据的类型来定的。
Javascript中的数据类型
    1.数字类型 ：整数 ，浮点数(小数)
    2.字符类型 ：字符，字符串
    3.布尔型   ：true ,false
    4.函数     ：function
数据类型之间的相互转换：
    1. 数字类型+字符串：结果为字符串类型，数字类型变成字符串。
    2. 数字类型+布尔型：true 变为1 进行运算。false变为0进行运算。
    3. 布尔型+字符串  ：true变为字符串形式，false同上。
强制转换：就是把数据类型强制的变成其他数据类型。
toString();可以将其他的数据类型转为字符串
parseInt():将其他的数据类型转为整数
NaN : not a number
javascript中的分支结构
   1. if - else 逻辑结构判断 根据不同逻辑表达式，运行不同的语句块。
      逻辑表达式结果为true 运行 if语句块
      逻辑表达式结果为false运行 else语句块
   2. if - else - if 多个选择，只走一个
   3. switch -case:表达式的值为switch结构的入口，相对于case的值。
javascript中的循环结构
   1. for 循环
    三要素：循环变量的初始化，循环条件，循环变量的改变
   2. 循环嵌套：for嵌套 两层循环
         案例：冒泡排序
   3. while ：循环结构 while( 逻辑表达式 ){ 循环体 }
          当while变成死循环时，可以通过break跳出
document :Javascript中的外部对象。
作用：可以操作HTML页面上的内容
document.getElementById(" id ");----通过ID选择器的值获取对应的标签。
innerHTML：向HTML标记中填充内容。
Javascript中的内部对象：
    1. 数组对象 var arr = new Array();
    2. javascript中数组不存在下标越界
    数组中的元素类型没有限制
    添加元素的方式：
    1. arr=[1,2,3] / arr=[1,"abc",true]
    2. push()；
    String对象：字符串对象。
    charAt(index):根据给定的下标，返回下标所对应的字符。
    indexOf(str):对比给定字符串在当前字符串中的位置，这个位置由str第一个字母决定 要求给定str与当前字符串完全匹配。若在当前字符串中没有与给定字符串完全匹配的字符，返回-1；
    lastIndexOf(str):返回给定字符串在当前字符串中最后一次出现的下标

三、day_05知识点梳理

String 对象
    substring(index1,index2);
    // 截取字符串，以下标范围截取，但是含头不含尾
    //只有启始下标时，会从该下标截取到字符串末尾
    toLowerCase();
    // 将当前字符串中的字母全转为小写
    toUpperCase();
    // 将当前字符串中的字母全转为大写
Date 对象 (时间对象)
表示的是用户浏览器或电脑的当前系统时间。
//创建一个日期对象
var date=new Date();
/原始状态是格林威治时间格式。         
/把本地系统时间，转为字符串形式
//var newDate =date.toLocaleString();
//返回当前月份中的一天
var day=date.getDate();
//返回一周中的某一天
var week=date.getDay();
http://www.12306.cn/mormhweb/
// 获取当前月份，比实际少1
var month=date.getMonth();
// 返回当前年份
var year=date.getFullYear();
eval();
//eval();可以将字符串转为数字类型的数据  如:将1+5 转换为6
//对于一些无法转换的字符串会出现异常
//解决异常：try{ }catch(e){ }
//把有可能出现异常的代码
//放在try块当中
//try用于捕获异常
//当捕获到异常时，就会进入
//catch当中
window:可以操作浏览器中的一些功能
window.alert();//window可以省略   
     1.navigator:包含了浏览器的信息
     2.screen:电脑或显示器信息数据
     3.history:浏览器中的历史记录
     4.location：浏览器中的地址
     5.document:浏览器的文档对象
     DOM树结构：浏览器接受到页面之后会对齐进行拆分，形成树结构
            每一个标记就是一个节点
     定时器：
    一次性定时器：经过一段时间后，调用某个事件。
    事件只执行一次，不会循环执行。
     周期性定时器：经过一段时间，调用某个事件，并且循环往复的执行。
//在浏览器加载后自动调用——window.οnlοad=function(){ }