1.web概述1)web三要素(B/S架构)浏览器(B)代理作用,向服务器发送请求,服务器返回一个.html格式的文件,浏览器(渲染)解释执行文件(页面)服务器(S)接收浏览器的请求,做出相应的处理,响应一个页面HTTP协议通讯协议2)常用的浏览器IE,FireFox,Chrome,Safari,Opera3)html工作原理html文件部署在服务器端html页面运行在浏览器中浏览器发送请求,服务器接收请求,响应一个页面,然后浏览器渲染内容2.HTML概述1)什么是html(Hyper Text MarkUp Language)超文本标记语言是一种用来设计网页的标记语言,用该语言编写的文件,后缀为.html或.htm,由浏览器解释执行,生成相应的页面2)head元素主要用于描述页面数据<meta>,<title>,<link>,<style>,<script>...1>title元素主要用来显示当前页面的标题2>meta元素主要用来定义页面元数据和消息头<meta http-equiv="Content-Type"content="text/html; charset=UTF-8" />http-equiv消息头content消息内容消息头：浏览器向服务器发送请求,服务器返回一些键值对页面刷新参照-->页面刷新.html3)body元素显示页面的数据(内容)内容实体转义：'---'"---"<---<>--->&---&空格--- 1>分区元素div元素和span元素div元素：块级元素，独占一行(元素前后会自动换行),可以设置宽高span元素：行内元素，不会独占一行，设置宽高无效2>文本标题元素<h1>~<h6><h1></h1><h2></h2><h6></h6>h1字体最大,h6字体最小3>段落元素<p></p>特点：行于行之间有空白的段落间距4>列表元素有序列表<ol></ol>无序列表<ul></ul>列表项<li></li>注意：列表只能写列表项<li>,列表项中输出文本内容嵌套列表5>图片元素<img src="" width="" height=""/>必要的属性：src(URI)常用的属性：width,height 6>超链接元素<a href="" target=""></a>必要的属性：href(URL/URI)常用的属性：target 取值_blank(打开新的窗口),_self(在自身的窗口打开链接)等等锚点：利用a元素的name属性定义一个锚点<a name="mark"></a>超链接连接到锚点#告诉浏览器跳转不是一个链接,而是一个内部位置<a href="#mark">回到Mark位置</a>发送邮件:<a href="mailto:邮箱地址?subject=hello&body=尊敬的学码思:">发送邮件</a>//outlook,foxmail7>表格table表格通常用来组织结构化的信息table元素：定义(创建)表格属性：boder边框，默认值0，单位是像素pxcellpadding单元格与内容之间的垂直间距cellspacing单元格与单元格之间的间距align水平方向居左left(默认值)/居右right/居中centerwidthheighttr元素：创建行属性：align水平位置(left,center,right)valign垂直位置(top,middle,bottom)td元素：创建列(单元格,存放数据)属性：align水平位置valign垂直位置widthheightcolspan跨列属性rowspan跨行属性完整的表格表格的标题：<caption></caption>位于table第一行行分组：将多个行分为一组<thead></thead><tbody></tbody><tfoot></tfoot>提示：<thead>和<tfoot>只能出现一次,<tbody>可以出现多次8>表单form<form action="" method="" enctype="">input标记非input标记</form>action属性：表单提交之后哪一个程序处理method属性：表单提交的方式enctype属性：设置表单的MIME编码表单控件：文本框：<input type="text" name="username" value="张三"/>name属性：标记的一个名称,该名称用于生成一个请求参数, 如果没有命名,则浏览器不会该数据发送给服务器value属性：文本框内容密码框：<input type="password" name="" value=""/>单选框：<input type="radio" name="sex" value="男" checked/>男<input type="radio" name="sex" value="女"/>女name属性：标记的一个名称,该名称用于生成一个请求参数, 如果没有命名,则浏览器不会该数据发送给服务器,分组效果checked属性：选中复选框：<input type="checkbox" name="" value=""/>name属性：同上checked属性：选中隐藏域：<input type="hidden" name="" value=""/>文件上传：<input type="file" name=""/>普通按钮：<input type="button" value="普通按钮"/>重置按钮：<input type="reset" value="重置按钮"/>恢复到页面加载的最初状态提交按钮：<input type="submit" value="提交按钮"/>把form表单的数据提交给action指定的程序处理下拉框：<select name="" multiple><option value="nj">南京</option><option value="sh">上海</option><option value="bj">北京</option></select> name属性：设置参数名，同上value属性：设置参数值multiple属性：可以使用单选下拉框变成多选下拉框文本域：<textarea name="" rows="5" cols="5"></textarea>1.css简介css指层叠样式表(Cascading Style Sheets)1)css使用方式1>内联方式<p style="color:red;width:200px;height:200px;">段落元素</p> 2>内部方式<head><style>p{color:red;width:200px;height:200px;}</style></head>3>外部方式<head><link type="text/css" rel="stylesheet"href="css/外部的css.css" /></head>CSS文件后缀名为.css2)CSS语法规范css由多个样式规则组成,每个样式规则有两部分：选择器和样式声明样式声明：样式名和样式值例如：p{color:red}css的特性：继承性：子元素可以继承父元素的样式层叠性：子元素继承父元素不冲突的样式或者自身多个不冲突的样式是可以层叠的优先级：子元素继承父元素有冲突的样式或者自身多个冲突的样式,需要考虑优先级优先级从高到低：内联方式,内部方式或外部方式(就近原则),浏览器默认的样式3)选择器1>元素选择器table{boder:1px double red;}2>类选择器<div class="dclass">内容</div> <p class="dclass">内容</p>匿名类选择器.dclass{color:red;}有名字的类选择器div.dclass{color:blue;}3>ID选择器注意：ID属性值为唯一的<div id="did">内容</div>#did{color:red;}4>分组选择器将多个选择器用逗号隔开分成一组div,.cl,#d1,p{color:blue;}5>派生选择器子元素选择器：p>strong{color:red}后代元素选择器：p strong{color:red}选择器优先级：ID选择器(有名字的ID选择器>匿名的ID选择器)>类选择器(有名字的类选择器>匿名的类选择器)>派生选择器>元素选择器注意：操作同一个目标元素加载样式,相同的选择器需要考虑就近原则,不同的选择器不需要考虑就近原则,需要考虑选择器优先级6>伪劣(伪类)选择器伪类选择器用于设置同一个元素在不同状态下的样式:link 向未被访问的超链接添加样式:visited 向已被访问的超链接添加样式:active 向被激活的元素添加样式(左键按下去没有松开):hover 当鼠标悬浮至元素上面时添加样式:focus 当元素获取焦点时添加样式4)CSS声明1>盒子模型(box model)作用：元素边框和其内容间距以及与其他元素边框之间的间距(用于布局)padding:内边距padding:30px;上下左右间距30px(以上左为准)padding:10px 20px;上下左右padding: 1px 2px 3px 4px;上右下左(顺时针)padding-left/right/top/buttom:10px;盒子最终宽和高：内边距(padding)+宽(width)和高(height)margin:外边距margin:0 auto;//水平方向居中2>边框borderborder:宽度值样式值颜色值;border:1px solid red;border-width:1px;border-style:double;border-color:red;border-left/right/top/buttom:1px solid red;border-left-width:1px;border-left-style:double;border-left-color:red;3>宽和高(尺寸相关)width,height样式尺寸单位：px像素(相对单位)pt磅(绝对单位)%百分比in英寸cm厘米mm毫米overflow声明overflow:visible/hidden/scroll(不管是否溢出都会出现滚动条)/auto(只有溢出才会出现滚动条)样式颜色取值：a.英文颜色单词red,blue,green...b.十六进制表示颜色#000000#FFFFFF#fff(简写)c.rgb值rgb(0,0,0)rgb(255,255,255)rgb(0%,0%,0%)rgb(100%,100%,100%)4>背景设置参照day02/背景设置.html5>文本设置参照day02/文本设置.html6>表格设置参照day02/表格设置.html7>浮动参照day02/浮动.html8>列表参照day02/列表.html(重点导航栏)9>显示方式display参照day02/显示方式.html10>定位(布局)position1.JavaScript概述1>什么是JavaScript?JavaScript是一种网页编程技术,用来向HTML页面添加交互行为JavaScript还是一种基于对象和事件驱动的解释性脚本语言,具有JAVA和C语言类似的语法直接嵌入到HTML页面中浏览器解释执行代码,不进行预编译2>JavaScript的特点a.可以使用任何文本编辑工具编写,只需要浏览器就可以执行程序b.解释执行：事先不进行编译,逐行执行代码c.基于对象：内置大量现成对象适用的场景：--客户端数据计算--客户端表单的合法性验证--浏览器事件的触发--网页特殊显示效果制作--Ajax(异步请求)3>第一个JavaScript程序1>事件定义方式在定义事件时直接写入JS脚本2>嵌入方式在页面上嵌入<script></script>标签标签中放置JS代码3>文件调用方式将JS代码写入一个单独的文件,并保存为.js后缀外部文件不能包含<script>标签HTML页面中<head>标签中引入外部文件(.js文件)2.JavaScript基本语法1>编写JS代码由Unicode字符集编写注释：单行://多行:/* */语句：表达式,关键字,运算符组成大小写敏感使用分号或者换行结束2>常量,标识符,关键字常量：直接在程序中出现的数据值标识符：不能以数字开头的字母,数字,下划线,美元符组成常用于表示函数,变量等的名称关键字：function,if,break...3>变量var 变量名;//声明一个变量a.变量声明使用关键字var声明变量b.变量初始化使用= 赋值var a = 1;//数值类型a = '1';//字符串类型var b;没有初始化的变量则自动取值undefined(未定义)4>数据类型a.基本类型Number:数值表示整型或浮点型数值number对应的封装类(包装类)NumberNumber.MAX_VALUE最大值Number.MIN_VALUE最小值String:字符串string属于基本类型,没有char类型string对应的包装类StringBoolean:布尔取值true/falseb.特殊类型Null:空null在程序中代表"无值"或"无对象"可以通过赋值null来清空内容Undefined:未定义定义一个变量,没有初始化值,就取值undefinedc.复杂类型Array:数组Object:对象5>数据类型转换a.隐式转换JS是松散型的程序语言,变量在声明时不需要指定数据类型,变量的值是有类型的,不同类型的数据在计算中会自动转换字符串+ 数字：数字转换成字符串数字+ 布尔值：true=1,false=0字符串+ 布尔值：布尔值转换为字符串布尔值+ 布尔值：true=1,false=0b.显示转换toString():全部数据类型均可以转换为字符串parseInt():转换为整数,强转失败返回NaN(不是一个数字not a number)parseFloat():转换为浮点数,强转失败返回NaN(不是一个数字not a number)typeof():查询当前数据类型,返回number,string,object,undefined,function,boolean...例如：typeof('123')-->stirngvar a;typeof(a)-->undefinedisNaN():判断当前数据是不是不是一个数字true表示不是一个数字false表示是一个数字6>运算符数学运算符：+,-,*,/,%var a=1;a++;//1++a;//3a--;//3--a;//1比较运算符：>,>=,<,<=,==,!=,======全等:数据类型和数据内容都相等if(1=='1'){//true}if(1==='1'){//false}if(1===1){//true}逻辑运算符:||或&&并且(与)!非三元(三目)表达式:表达式1?表达式2:表达式3var a = '';if(a!=null||a!=''||a!=undefined)//不推荐if(a)//推荐表达式值布尔值0 false'' falsenull falseundefined falseNaN false'1' true2 true"非空"的值true3.JS对象概述JS包含很多的对象：内置对象,外部对象,自定义对象对象中有属性和方法对象.属性对象.方法()内置对象:1)String对象创建字符串对象有两种方式：var str = 'hello world';var str2 = new String("Hello World");String对象的属性：length长度String对象的方法：参照day03/字符串对象.html2)Number对象常用方法：toFixed(num):转换成字符串,四舍五入保留小数num 位,num取值0~20例如：var dataNum = 23.568;var dataStr = dataNum.toFixed(2);//23.573)Array对象创建数组对象：第一种方式：var arry = new Array();第二种方式：var ary = [];数组的长度是可以变化的参照day03/数组对象.html4)Math对象直接就可以使用Math.属性/方法参照day03/Math对象.html1.外部对象1)BOM(Browser Object Model)浏览器对象模型,用来访问和操作浏览器窗口window对象document文档对象history浏览器历史记录对象location窗口地址对象window对象常用的方法：alert(str)对话框confirm(str)确认框,点击确定返回true,其他返回falseprint()打印当前窗口信息open()打开新的窗口prompt()显示提示用户输入的对话框周期性定时器：window.setInterVal(fn,time);详细参照定时器.html一次性定时器：window.setTimeOut(fn,time);详细参照一次性定时器.html/*获取当前窗口的地址* 设置属性值,达到刷新效果*///window.location.href=window.location.href;/*刷新页面*/window.location.reload();2)DOM(Document Object Model)文档对象模型用来访问和操作节点树(文档树)删除节点,新增节点,修改节点信息,修改属性,删除属性,添加属性添加文本内容,清空文本内容等等查询节点：1>document.getElementById();通过元素中ID属性值查询元素忽略整个文档结构找不到返回null2>通过层次查询无法忽略整个文档结构parentNode:查询父节点childNodes:查询子节点previousSibling:查询前一个兄弟节点previousElementSibling:查询前一个兄弟元素nextSibling:查询下一个兄弟节点firstChild:查询第一个子节点lastChild:查询最后一个子节点3>通过标签名称document.getElementsByTagName();返回一个数组如果找不到,返回长度等于0的数组4>通过class属性获取元素document.getElementsByClassName();同上5>通过name属性获取元素document.getElementsByName();同上节点类型：nodename:节点名称元素节点和属性节点：标签名和属性名文本节点：#text文档节点：#document注释节点：#commentnodeType:节点类型元素节点：1属性节点：2文本节点：3注释节点：8文档节点：9nodeValue:节点内容属性值,null,文本内容,注释内容设置节点文本内容：innerText:设置或获取开始标签和结束标签内的文本innerHtml:设置和获取开始标签和结束标签内的HTML。