A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© zgq_2012 初级黑马   /  2019-1-9 21:59  /  699 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

1、B/S架构
(1)资源分类
①静态资源
1)使用静态网页开发技术发布的资源
2)特点
a.所有用户访问,得到的结果是一样的
b.如文本,图片,音频,视频,
a)HTML 用于搭建基础网页,展示页面的内容
b)CSS 用于梅花页面,布局页面
c)JavaScript 控制页面的元素,让页面有一些动态效果
c.如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器,浏览器中内置了静态资源的解析引擎,可以用展示静态资源
②动态资源
1)使用动态网页开发技术发布的资源
2)特点
a.所有用户访问,得到的结果可能不一样
b.如jsp/servlet,php,asp..
c.如果用户请求的是动态资源,那么服务器就会将动态资源转换为静态资源,然后再发送给浏览器
2、HTML 超文本标记语言
(1)超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本
(2)标记语言—最基础的网页开发语言
①有标签构成的语言。<标签名称>如html,xml
②标记语言不是编程语言
(3)语法:html文档的后缀名 .html或者.htm
(4)标签分为:
①围堵标签:<html> 开始标签 </html> 结束标签,
1)标签可以嵌套,格式要对<b> <a> </a> </b>
②自闭和标签:开始标签和结束标签再一起,如换行标签 <br/>
③在开始标签中可以定义属性,如<font color=”red”>,属性是由键值对构成,值需要用引号引起来(单双都可以)
④Html的标签不区分大小写,但是建议使用小写。
(5)标签学习
①文件标签:构成html最基本的标签
a.Html:html文档的跟标签<html lang=”en”> 指定语言English
b.Head:头标签,用于去指定html文档的一些属性,引入外部的资源
c.<meta charset=”utf-8”> 指定编码格式
d.Title:标题标签,
e.Body:体标签
f.<!DOCTYPE html>:h5中定义该文档是html文档
②文件标签:和文本有关的的标签
1)注释:<!--注释内容-->
2)<h1> 。。。</h> 标题标签,h1~h6字体大小逐渐递减
3)<p> </p>段落标签
4)<hr> 展示一条水平线 ,自闭和标签
5)<b> <b/> 字体加粗
6)<i> <i/> 字体以斜体展示
7)&copy 显示一个圈C
8)人名币符号 &yen; 代替
9)<font color=”red” size=”5” width=”50” face=”楷体”> <font/>
a.字体颜色,  
a)color=”red”,
b)rgb(值1,值2,值3):值得范围:0-255,三原色配色
c)#值1值2值3 同上,值范围:00-FF之间,三原色配色,常用
b.字体大小,size=”5”
c.字体宽度,width=”50”,单位是像素PX,可以写占比50%,占一半
d.字体样式 face=”楷体”
e.<center> <left> <right> 居中,居左,居右 或者align=”center”格式
③图片标签:
1)<Img src=”图片文件路径” alt=”图片加载失败显示的文字信息”/> 自闭和标签,展示图片,可以再其中加其他属性,宽度width,高度height等等
2)图片路径一般都写相对路径,
a../image/1.jpg 前面的./代表当前目录,可以省略
b.../ 代表上一级目录
④列表标签 自闭和标签
1)有序列表<ol type=”A” strat=”5”> type以什么格式成列,A就是ABC...,1就是1234...,strat 就是从第几个字符开始
a.<li> 有序事件</li>
2)无序列表<ul type=”disc实心圆点””circle圆圈””square实心方块”/>
⑤超链接标签:
1)<a href=”http://www.i23.hao.cn指定访问资源的URL(统一资源定位符)” target=”_self在本页打开超链接/_blank 打开以一个空白页打开连接”> 点我 </a>需要指定属性 ,
2)也可以访问资源路径
3)Href=”mailto:邮箱号” 打开邮件客户端,收件人就是里面的邮箱号
4)图片关联超链接<a href=”http://www.i23.hao.cn> <图片标签> </a>
⑥表格标签:
1)<table border=”1一个边框一个线” width=50%> 定义表格
Cellpadding 定义内容与单元格的距离
Cellspacing 定义单元格之间的距离,为0则单元格的线何为一条
<tr> 定义行 (<th>定义表头单元格)
<td>bianhao</td> 定义单元格
</tr>
</table> bgcolor=”yanse”可以定义背景颜色
2)<caption>: 定义表名字,在table里面定义,一直跟着表走
3)<thead>:
4)<tbody>:
5)<tfoot>:
6)Colspan:合并列 写在td里面的

7)Rowspan:合并行

⑦<div> </div> 块标签,一个div占一行,会换行
⑧<span> </span> 块标签,文本信息在一行展示,行内标签/内联标签
语义化标签:<head
1、HTML标签-表单标签 form
(1)概念:用于采集用户输入的数据的,用于和服务器进行交互
(2)使用标签form 用于定义表单的,可以定义一个范围,范围代表采集用户数据的范围
(3)表单项中的数据要想被提交:必须指定其name属性
①属性action 指定提交数据的URL
②属性method 指定提交方式,7种,2种常用
1)Get :
a.请求参数会在地址栏中显示,会封装到请求行中
b.请求参数的长度是有限制的
c.不太安全
2)Post :
a.请求参数不会在地址栏中显示,会封装在请求体中
b.请求参数的长度是无限制的
c.较为安全
③表单项标签 <input type=””> 通过type属性来改变元素展示的样式
1)Type=” text” 文本输入框,默认值
a.Placelholder=”请输入用户名”,指定输入框的提示信息,输入框内容发送变化时,会自动清空
b.<label for=”username”></lable>标签 指定输入项的文字描述信息
a)For属性一般会和input的id属性值对应
2)Type=”password” 密码输入框(隐式输入)
3)Type=”radio” 单选输入框,
a.要想实现单选需要name值一致,选择了就是on,
b.一般会给每一个单选框提供value属性,表示提交的值
c.默认选中 属性checked=”checked” 指定默认值
4)Type=”checkbox” 复选框 也要加value ,name必不可少
a.默认选中 属性checked=”checked” 指定默认值
5)Type=”file”  选择文件
6)Type=”hidden” 隐藏域,用于提交一些信息
7)Type=”submit” 登录
8)Type=”button” 一个按钮
9)Tyep=”image” src=”” 以一个图片作为按钮,可以提交表单
10)Color 取色器 、 date 选择日期  number 只能输入数字
11)Emile 输入邮箱的时候会做一个基本的校验
12)<Select>:下拉列表 子元素<option>指定列表项
13)<textarea  cols指定列数,每一行有多少个字符,rows默认多少行> 文本域展示,
14)
2、CSS页面美化和布局控制
(1)概念:cascading style sheets层叠样式表
①层叠 多个样式可以作用同一个html的元素(标签)上,同时生效
②优点
1)功能强大
2)将内容展示和样式控制分离
a.降低耦合度,解耦
b.让分工合作更容易
c.提高开发的效率
(2)CSS使用
①内联样式 在标签内使用style属性指定css代码 范围 本标签
②内部样式 在HEAD标签内,定义style标签,style标签的标签体内容就是CSS代码 范围 本HTML内
③外部样式 在head标签内,定义style标签,引入外部资源 范围 本项目所有HTML
④3种方式作用的范围越来越大,常用2,3
⑤<>style></kstyle>
(3)CSS语法
①格式:
1)选择器{
属性名1:属性值1;
属性名2:属性值2;
...;
}
选择器:筛选具有相似特征的元素,每一对属性要用;隔开,最后也加
a.基础选择器
a)Id选择器 选择id属性值-语法 #id属性值{} 优先级最高,id尽量唯一
b)元素选择器 标签名称{} 优先级最低
c)类选择器 .class属性值{} 优先级次之
2)扩展选择器
1、javascript= ECMAscript+bom+dom
(1)Ecmascript:客户端脚本语言的标准
①基本语法
1)Html的结合方式
a.内部js  <script> alert(“你好”);// 弹窗展示 </script> 可以写在任意位置,只是影响执行顺序的问题
b.外部js  <script src=”文件路径”></script> // 弹窗展示文件里的内容
c.<script>可以定义多个。
2)注释
a.与Java的注释一致 // ; /**/
3)数据类型(原始/引用)
a.Number 数字,整数/小数/NAN(not a number)
b.String 字符串,字符/字符串”aSd” , ‘afs’
c.Boolean  true和false
d.null  一个对象为空的占位符
e.Undefined  未定义。如果一个变量没有给初始化值,则被默认赋值为undefined
f.对象(提供好的一个功能)
4)变量
a.一小块存储数的内存空间
b.Java是强类型语言,Javascript是弱类型语言,
c.它的一个内存空间可以赋值不同类型的变量,而Java是固定的
d.定义变量 var a=3; a=”abc”; var定义的变量是局部变量,如定义在方法内,只能在方法内用,而直接定义的变量是全局变量
e.输出到页面 document.write(a+”<br>”//输出之后换行);
f.Typeof(a); // 输出变量的数据类型
a)null-输出数据类型的时候是object,但仍然是原始值
5)运算符
a.特别的一个 全等于===,先判断数据类型,不等直接false,再判断内容是否相等,1==1(ture) 1==’1’(true) 1===’1’(false) ,字符串比较按字典顺序比较,z最大,a最小,按位逐一比较,为止
b.+(-):正负号,在js中,如果运算数不是运算符所要求的类型,那么会自动将运算数进行类型转换;+true ,+”123”,+’asda’
c.String转number 按字面值转换,如果字面值不是数值,就会转为NAN
d.Boolean转number  true转为1,false转为0;
e.其他类型转Boolean (逻辑运算时)
a)Number --非0为true,0或NaN为false
b)String -- 空字符串“”为false,其余皆为true
c)Null和undefined都是false
d)对象都为true ,如date d=new date();
f.三元运算,var c=a>b?d:e; true把d的值赋值给c,d可以是任意类型,false则把e的值赋给c


6)流程控制语句
a.if(){...}else{...}
b.Swith(变量//所有数据类型都可以){
Case 值1:方法体1;break;
Case 值2:方法体2;break;
...
Default :break;
}
c.While(){...} / do-while
d.for(var i=1;i<=100;i++){...}
②基本对象
1)Function对象:函数(方法)对象
a.创建:
a)方式1:var fun = new Function(形式参数列表,方法体) ;
b)方式2:function 方法名称(形式参数列表){
方法体
} // 方法定义时,形参的数据类型(var)可以不写
c)方式3:var 方法名=function(形式参数列表){方法体}
b.特点:
a)定义2个同名方法的时候,后面的覆盖前面的方法,不会报错
b)方法定义时,形参的数据类型(var)可以不写
c)在JS中,方法的调用只与方法的名称有关,和参数列表无关
d)在方法声明中有一个隐藏的内置对象(数组),arguments[],封装所有的实际参数。
c.属性:fun1.length;// fun1方法的参数个数
d.调用:方法名(参数1,参数2...);// fun();
2)Date 对象
a.创建 var date = new Date()
b.方法
a)方法1  date.toLocaleString(); // 返回当前date对象对应的时间本地字符串格式
b)方法2  getTime();// 获取毫秒值,获取当前时间的毫秒值
3)Math 对象
a.特点:math对象不用创建,直接使用 Math.方法名();
b.方法
a)Random();返回0-1之间的随即小数,左闭右开

b)Ceil():向上取整
c)Floor():向下取整
d)Round():四舍五入
e)PI 圆周率
4)RegExp1正则表达式对象
a.定义字符串的组成规则
a)单个字符:[ ],如[ab],a或者b,[a-z] a到z的小写字母
i.\b:单个数字字符[0-9]
ii.\w:单个单词字符[a-zA-Z0-9]
b)量词符号:
i.?表示出现0次或1次
ii.*表示出现0次或多次
iii.+表示出现1次或多次
iv.{m,n}:表示m<=数量<=n
i)m如果缺省:{,n}:最多n次
ii)n如果缺省:{m,}:最少m次
c)开始结束符号
i.^ 开始符号
ii.$  结束符号  /^\w{6,10}$/;
b.正则对象:
a)创建
i.Var reg = new RegExp(“正则表达式^\\w{6,10}$”):
ii.Var reg = /正则表达式/;
b)方法
i.test(参数);验证指定的字符串是否符合正则定义的规范
5)Global对象
a.特点:全局对象,写了<script>那么他就存在于这个围堵标签里面,这个global中封装的方法不需要对象就可以直接调用。 方法名();
b.方法:
a)encodeURI(); // url编码 ,--http协议不识别中文,所以转码
b)decodeURI(); // url解码
c)encodeURIComponent(); // 编码一个url组件,编码得更多
d)decodeURIComponent(); // 解码一个url组件
e)parseInt(); // 将字符串转为数字,注意判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为number,”abc123”转为NaN
f)IsNaN(); //判断一个值是否是NaN,NaN参与的==比较全都是false,即使是判断NaN==NaN也是false,所以有isNaN()判断
g)eval(); // 将JS的字符串转为脚本来执行
c.URL编码

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马