web笔记(html+css+js)

HTMl,CSS,JAVASCRIPT(HTMl书写网页内容，CSS用来修饰网页效果，JS添加网页功能)

HTML：超文本传输语言

  标签语言：

  标签： 每一个表都提前设置好了特殊的功能 ，xml

  单标签：独立功能，跟其他无关，也没有作用范围

  双标签：作用范围

  属性：

  属性 = 赋值

  4大属性:

  id,class,style,title

  DOM标签关系：

  嵌套标签 父子关系，兄弟关系，血缘关系

  标签：

  head：网页的配置信息，相关设置，其他文件的引入，跟具体的内容无关

  body：网页实际展示的内容

  h1~h6：标题标签，独占一行

  hr:居中横线

 

  br:回车

  p:分段

  font:字体

  sub：下标

  sup：上标

  mark：强调

  超链接：标准用法：从一个网页链接到另一个网页

  点我

  链接的地址  ，点击的内容

  锚点用法：从当前网页的一个位置链接到当前网页的另一个位置

 

  锚点：

网上飞

  引入图片：

 

  src:本地资源，建议使用相对路径

  列表标签：

  ul：无序列表

 

 

• 列表项目1

 

• 列表项目2

 

  ol：有序列表

  dl：自定义列表

 

自定义列表题目1

自定义列表项目1.1

自定义列表项目1.2

自定义列表题目2

自定义列表项目2.1

自定义列表项目2.2

块标签：一定范文 ，配合CSS 进行布局操作的标签

div：块级标签：无论内容多少独占一行，一般可以指定高度

span：行内标签：允许和其他内容共享一行，无法指定高度

框架：

背景：

background="img/1.jpg"

实体符号：

空格  < <  >>  ©  ®

表格：

table

1		3
4	5
	8

表单：一块前后台数据交互的通道

method:数据传递的方式

get：不安全，效率高，快，地址栏传数据包，最大不能超过2k，不支持中文

post：安全（相对），效率低，慢，不用地址栏传数据，最大不能超过2g，有可能支持中文

控件：协助form采集数据和用户操作的标签

input：输入控件

type: 控件的类型

  text:文本类型 

  password:加密文本

  email：简单的@的检查

  date:日期格式的问题输入

  radio：单选按钮，想实现单选前提name必须相同；value建议把值进行修改，

（ 辅助选中）

label  for="id"

checkbox:多选框：checked 默认选中

number:数字

url：网址

hidden：隐藏

file：文件

非type:

select:下拉列表

option：下拉列表项

textarea ：文本框（rows,cols:大小）

常用属性：

size：输入框可见长度

maxlength：最大输入长度

selected：下拉列表默认项目

multiple：下拉列表多选

checked：按钮默认项目

disable：置灰，不可以传输数据，不能改

readonly:不能改，可以传递数据

name:传递的数据的键

id:唯一定位元素的值

value：控件的数据

autofocus：自动获取焦点

placeholder：提示信息

required：必填项

list:提示列表id

type（button）：submit提交，reset重置，button

HTML5中新的语义元素：分担div的语义标签，优化搜索引擎和语义引擎

CSS:层叠样式表 ，美化网页内容，布局网页

div：独占一行有高度的区域标签

span：可以和其他元素共处一行的没有高度的范围标签

引入方式：

内联：style属性：值等于css代码，（程序员临时测试用）

内嵌：style标签：只能写在head标签范围内，当前网页独有的效果

外联：link标签：引入css文件，整个网站通用的效果

（引包，导入）不建议用性能差

Css语法：

选择器{

属性:值

}

继承：部分属性默认允许继承

层叠：后续效果覆盖之前的效果，同时发生。

选择器：

基础选择器：

1.标签选择器：必须全选这个标签

2.id选择器：#开头

3.类选择器: .className

复合选择器：

*:所有元素都选择

                                        ，：组合选择器

                                        + ：兄弟选择器（只选弟弟）

                                        ' '：后代选择器

                                        >:直接子 元素选择器

                                        []：属性选择器

                                      :not() :取反选择器

                                        [attribute="value"]:属性值选择器

                            伪类选择器：

                            lvha

                            :link ->  当a标签被链接之前

                            :hover ->  当元素被鼠标悬浮之时

                            :active -> 当元素被鼠标左键点击之时

                            :visitied ->  当a标签发生超链接之后

                            :focus ->  当元素被获取焦点之时

优先级： 选择器： id>class>标签

引入方式：内联>内嵌>外联

就近原则

!important

属性：

color:颜色 rgba(r,g,b,透明参数)

font-family:字体 ，英文前 中文后

font-size: 字体大小

font-style: italic; 文字斜体

font-weight : bold; 粗细

letter-spacing:字母间距

word-spacing:单词间距

text-indent:字体两倍大小缩进

行内元素的水平居中：

text-align：center

列表：

list-style-type:none

去掉列表的默认选项

表格：

表标题位置

caption-side:bottom ;

其他：

鼠标的皮肤

cursor: text  ;

边框：

border: 1px solid red;

border-radius: 400px;

圆角矩形

范围（尺寸）：

height：高

width：宽

针对div有效，对于span无效

背景：

background-image: url( );

background-color: yellow;

background-repeat: no-repeat;

background-position: 50% 50%;

background-attachment:fixed;

CSS精灵（应用）

布局：

一般的布局模式：

最大的网页内容区准备一个大的父元素，margin： 0 auto

position：relative

默认文档流模式：所有元素默认出现在文档的左上位置

1.table:不灵活

2.盒子模型：格灵活

  任何元素（标签+文本）都自带一个矩形的包装盒（所在位置的格子），通过对盒的调整可以间接的调整元素的位置

  marging（外边距）+border(边框)+padding(内边距)+content(内容)

    默认指定的长宽是 content

    盒子中所有元素统一同页面对比换位置建议用marging

    box-sizeing ： border-size; 整个盒子的大小

    缺点：本质上是很少的格子的表格，比表格灵活简单，但是盒子之间还是容易互相影响

  居中：margin: 0 auto;

3.定位：不影响其他盒子，指哪放哪

定位的计算量比较大成本高，坐标原点固定，适配性不强

position：

static:默认文档流

absolute：绝对定位

relative ：相对定位

fixed:固定定位

绝对定位和相对定位的区别：

1.对后元素或者父元素会造成影响，相对定位保留自己所在行的空间，绝对定位放弃自己原来所在行的空间

2.相对定位的基础坐标系是自身左上角

  绝对定位的基础坐标系是（特殊（默认的特殊父元素是body））父元素的左上角

4.浮动：不需要计算纵坐标

缺点：浮动会导致后元素，或者父元素异常

清除浮动：

div id="clear"

#clear{

clear:both;

}

#main:after{

content: ".";

display: block;

clear: both;

visibility: hidden;

}

5.弹力..网格..:兼容性

JavaScript:表单验证，各种网页特效，数据传输，

代码使用方式：

a：

点我啊

onclick：

点我

内嵌：

外联：

ECMAscript：5.0 ：基于对象的语言

变量：动态语言，弱类型

var a; //变量的声明

作用域：1全局变量

2局部变量（函数内声明的叫局部变量）

3没有块这个概念

数据类型：

基础数据类型：

  number：数字型

  NaN:不是一个数的数，属于number

  Infinity：无限大的数

  -Infinity：负无穷大

  支持16进制，8进制

  String：字符串  ""  ''

  boolean：布尔型

  undifiend:未定义类型：只定义不赋值的数

  null：空类型  typeof null 返回object 是一个bug

复合（引用）数据类型：

  对象：

  函数（极其特殊）：

  数组：

  包装类：

  NUMBER

  STRING

  BOOLEAN

如何确定一个数据的类型：

1.typeof 擅长于基本数据类型，但是对于null和所有的对象无法细分

2.instanceOf 能帮我确认值是否属于某种复合数据类型

3.obj.constructor.toString()  ,可以用来区分所有的非null，undefined的复合数据类型

通过自定义函数：

function TypeOf(a){

var s = typeof a;

if(s=="object"){

if(a === null){

console.log(null);

}else{

console.log(a.constructor.name);

}

}else{

console.log(s);

}

}

类型转换：

显示：

Boolean()：

数字，0，NaN为false

字符串，空字符串转为false

undefined false

null false

Number()

  true 1

  false 0

  null 0

  undefined  NaN

  "123"  123

  "123xp"  NaN  

String(): 把一切转成字符串

隐式：

基本数据类型的隐式转换

Boolean()

Number()

String()

如果做比较优先Numnber()

如果在+左右有字符串则使用String（）进行拼接； - 字符串则使用Number();做逻辑运算会优先使用Boolean（）

复合数据类型隐式转换：

obj.valueOf() ,再掉toString()

[]+{} ; {}+[]

运算符：

== 值 相等

=== 值和类型 同时相等（NaN ！= NaN,通过isNaN（）判断是否是NaN）

判断isFinite（是否有限）

运算方法：

0/0 = NaN

1/0 = infinity

运算方法：

||

    只要“||”前面为false,不管“||”后面是true还是false，都返回“||”后面的值。

    只要“||”前面为true,不管“||”后面是true还是false，都返回“||”前面的值。

&&

    只要“&&”前面是false，无论“&&”后面是true还是false，结果都将返“&&”前面的值;

    只要“&&”前面是true，无论“&&”后面是true还是false，结果都将返“&&”后面的值;

流程控制：

增强for循环：

for(var i in a){

console.log(a[i]);

}

try{}catch(e){} finally{}

函数：

自定义函数：

1.函数的定义：

function  函数名字(形参...){

}

2.函数表达式（声明）：

var 函数名 = function(形参){}

函数的调用：

函数名字(实参...)

定义：可以先调用后创建函数

表达式：不可以提前调用

函数的高级用法：

自更新：

var haha = function(){

console.log("haha");

haha = function(){

console.log("hehe");

}

}

回调函数：

console.log(getReturn(function() {

return 3 - 1;

}, function() {

return 1 - 2;

}));

arguments是实参的值的数组

重载：

function sum(){

var sums = 0;

for(var i in sum.arguments){

sums = sums + sum.arguments[i];

}

console.log(sums);

}

sum(1,2,3,9,6,8,4);

函数的闭包： function getA(){

var  a = 1;

a = a+1;

return  function(){

return a;

}

}

系统api函数：

encodeURI：转码

decodeURI：解码

eval：运行js源代码的字符串

isNaN：判断是否NaN

isFinite：判断是否有限

Number(),String(),Boolean基本数据类型转换

parseInt: 可以根据指定的进制把字符串转成数字，碰到第一个字符串就停止转换

parseFloat:

对象：

自定义对象：

var obj = {}  //空对象 ，对象字面量

var obj2 = new Object(); //空对象

添加属性：

.属性 = 值

删除属性：

delete obj.属性

增强for循环查看对象的所有属性：

for(var i in o){

  console.log("属性名:"+i+"  ,属性值为："+ o[i])

}

通过构造器来创建对象：

function Student(name,age){

// {}

this.name = name;

this.age = age ;

this.learn = function (){console.log("学习让我进步")}

//return

}

var chenhao = new  Student("陈浩",18);

js面向对象：

function Student(name,age){

this.name = name;

this.age = age ;

}

Student.prototype.learn = function (){

console.log("学习让我进步")

}

var chenhao = new  Student("陈浩",18);

var lichongyang = new  Student("李重阳",18);

console.log(chenhao.name+"  "+lichongyang.name);

chenhao.learn();

lichongyang.learn();

系统api对象：

Number:

parseInt()

parseFloat()

Object

String

：charAt（）指定位置的字符串

  charCodeAt()获取unicode编码

  indexOf（）指定字符串求位置

  lastindexof()

  replace:替换

  split：根据内容分数组

  substr： 起始到昌都截取

  substring： 坐标之间截取

  tolowerCase:转小写

  属性：length

Date：1900年

Math：

Math.floor(Math.random()*10)+1;

RegExp：正则表达式

三种模式：i g m

具体的语法：

背：身份证！

    ip地址！

    邮箱！

    邮编！

    中文！

    test：判断是否匹配

    exec:返回具体的匹配值

Array：

var arr = [1,2,3,4,"56"];

join( ) :指定分隔符号，把所有的数组元素组合成一个字符串

concat():拼接数组，参数直接追加

pop(): 返回数组的最后一个元素，并删除

push(): 追加一个元素到数组的末尾

shift(): 返回数组的第一个元素，并删除

unshift(): 插入一个元素到当前数组的首位，其他元素顺移

reverse()：内容反转

sort():排序

a.sort(function(a,b){ if(a>b){return 1;}else if(a==b){return 0} else{return -1};})

    Events:

    代码执行：

    1.页面加载

    2.事件触发：

    1级事件  ：onclick  点击

      onmousemove  移动  event.clientX/Y

      onmouseout 

      onmousedown

      onselect 选中文本

      onfocus  获取焦点

      onblur  失去焦点

      onload  网页加载完成

      onkeyDown  按下

      onkeyup  抬起

      onkeypress  按下或抬起

      event.keycode

  2级事件:     var buttons=  document：.getElementsByTagName("button"); 

  buttons[0] = function(){ alert(1)}

      3级事件：

      chrome:buttons[0].addEventListener('click',haha);

      IE：buttons[0].attachEvent('onclick',haha);

    选中一个操作对象（html元素）+选择一个事件+书写一个事件处理的函数网页的内容（DOM +Dom可以修改网页的内容和CSS）

BOM:

Window  当前窗口

属性：

name

top:

常用API：

alert(""):通知

confirm(""):请求  确定返回true ，取消返回false

prompt("",""):提问  问题，默认回答 ； 更改的内容作为返回值

close():关闭当前窗口

open():打开指定的窗口 ，通过描述字符串可以指定打开窗口的样式和功能

moveBy():移动多少坐标

moveTo():移动到多少坐标

计时器：

setInterval(回调函数，毫秒数): 每隔多长时间执行一次功能

setTimeOut: 多久之后执行功能

--

setTimeOut 实现 setInterval 的功能

setInterval 实现 setTimeOut 的功能

clearInterval: 清除interval

clearTimeOut: 请成绩tomeOut

location:地址栏

属性：

href：完整url

reload：刷新页面，把当前的地址重新载入

History：历史

length：url数量

go：+ foward  - back

Screen ：屏幕

height

width

availheight

availwidth

Navigator :

userAgent

DOM:window对象的一个属性：当前网页的文档内容

当浏览器加载某个网页之后，会把网页中所有内容根据dom树模型生产对应的对象关系

js可以通过dom的api的操作来间接的改变文档内容

三种节点：Node

  Element( Attribute)    Text   

Document：

getElementsByTagName("div"):或者相同标签的数组

getElementById("asd") :通过ID获取对象

getElementsByName("username"):或者相同name属性值的数组

write():书写文本或者标签 ，容易覆盖之前的内容，不建议使用

Element:

属性：

innerHTML:双标签之间的内容

firsetChild:第一个子标签（手写代码中容易是文本标签）

lastChild:最后一个子标签

parentNode:父节点

nextSilbiling:下一个节点

previousSibiling:上一个同级节点

childNodes():返回所有子节点的集合

增加节点：

var el1= document.createElement("div")

//创造新元素节点

var div1 = document.getElementById("div1");

//寻找父元素

div1.appenedChild(el1;)

追加

//指定位置

var span1 = document.getElementById("span1");

div1.insertBefore(el1,span1);

删除子节点：

div1.removeChild(span1)；

替换字节点：

div.replaceChild(span1);

style.css属性（组合属性的单词去掉- ，首字母大写）

Form:

文本框：  select()：主动选择文本

  focus()：获取焦点

  checked：当前是否被选中，true选中，false没有

  select.options：下拉列表的列表项目集合

  new Option("菠萝",2)：生成一个新的下拉列表项

  select.options.length = 0;：清除所有的下拉列表项

  selectedIndex：当前选中的下拉列表项

原型链：

闭包：  突破作用域链

找个网页：

练习题：

带背