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)© 显示一个圈C
8)人名币符号 ¥ 代替
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编码
|
|
收藏
淘帖
踩
