客服端
- html:超文本标记语言,利用标记和子标记的方式描述网页元素;
- xml :可扩展标记语言;
- 企业应用计算模式:主机/哑终端计算方式,由主机承担所有的计算任务,哑终端只负责数据的录入和结果显示;
- 企业应用计算模式:客服机/服务器计算模式,C/S。客服机是一套独立的系统,会承担一部分计算功能。服务器主要提供数据,也承担一部分计算功能。缺点,维护麻烦,一旦系统需要升级,每个客户都需要更新;
- 企业应用计算模式:浏览器/服务器计算模式,简称B/S。客服端固定是浏览器,所以客服端无需维护,同时浏览器会承担显示和部分计算功能。服务器作为浏览器显示数据的提供者,承担大部分计算功能。一旦系统需要升级,只需要维护服务器就可以;
WEB应用程序
- 基于B/S结构开发的应用程序,称为WEB应用程序;
- 一个完整的WEB应用程序分为4部分:
- WEB服务器:接受客服端请求,根据客服端的请求,返回结果
- WEB浏览器:允许客服端请求服务器的某个资源,并显示由服务器返回的结果
- html协议:客服端和服务器通信所用的协议
- html网页:告诉浏览器如何向用户显示结果
- GBK,GB2312,UTF-8
块级元素,内嵌元素
- 块级元素要换行,内嵌元素不换行
- 块级元素:div,blockquote,列表元素,dl,ol,ul,fieldset,form,h1-h6,hr,p,pre,table;
- 内嵌元素:span,a,img,lable,所有表单输入元素,ifram,object;
在html中name属性和id属性的区别
- id属性是网页元素在网页中的唯一标识,不能重复,name属性是描述提交给服务器表单数据的名称,可以重复,如果两个文本框name属性一样,提交时可以出现两个同名的键值对;
- id属性可以用于网页的任何元素,但name属性一般用于表单元素;
- id属性值不会提交给服务器,但name属性值会随着表单提交给服务器处理;
readonly与disabled的区别
- readonly表示只读,也就是文本框的内容不可变,所以该属性只能用于文本框。
- disabled表示不可用,可以用于任何网页元素,元素加上disabled之后,内容不可变,同时不能响应事件;
- 表单元素加上readonly,表单值还是可以提交服务器,但表单元素加上disabled后,表单值就不能提交了;
xhtml与html的区别
表单元素
- input :text,password,radio,checkbox,hidden,file,submit,reset,image,button
- select:下拉框,列表框(multiple,表示可以选择多个)
- textarea:多行文本
CSS
- 层叠样式表,cascading style sheets
- 用于定义HTML元素的显示形式,是一种格式化网页内容的技术;
内联式
- 直接在元素中加入style属性,只能用于网页中的一个元素
<div style="border: 1px solid #000;width: 300px;height: 200px"></div>
嵌入式
- 书写style标签,在标签中指明样式,可以用于网页中的不同元素
外联式
- 将央视规则书写到文件中,可以用于不同的网页,重用度好;
层叠样式表的含义
- 如果有多个规则来描述同一个元素,那么会根据样式表的优先级,来决定最终样式的选择;
- 导入css方式的优先级:内联式>嵌入式>外联式
css选择器
- 元素选择器,利用元素的标签名称作用选择范围,div{}表示所有div元素都采用该样式;
- h1,h2{}表示h1标签和h2标签都采用该样式
类选择器
- 利用元素的class属性来引入类选择器的样式,可以用于多种元素,同一种元素也可以选择性引用
- .mm{}
-
该div采用mm样式
id选择器
- 让拥有id属性的元素,采用该样式;
<p id="p1">段落</p>
- #p1{
background-color: yellow;
} - id为p1的元素采用该样式
包含选择器
- 元素内的子元素采用该样式
<div id="mydiv"> </div>
- #mydiv span{
color: blue;
} - id号为mydiv元素中所有的span标签采用该样式
- div.aa{
color: ;
} - 所有div中 class属性为aa的元素采用该样式
通配符*
- 所有元素都采用该样式
- #onediv * {} 表示id为onediv中,所有元素都采用该样式
伪类选择器
- 执行完某个动作的元素采用该样式
#data tr:hover{
background-color: green;
}表示鼠标悬停在id为data下的tr元素时,采用该样式
定义颜色
- color:rgb(0,0,0)0-255之间
- 十六进制:#fc0eab
- 取名:green,red,blue
magin属性
- 外边距;
- 水平盒子的间距为两个盒子的间距和
- 垂直盒子的间距为两个盒子间距的较大者
- 可以为负;
padding
- padding属性用来描述盒模型的边框和内容之间插入多少空间
区别
- margin 是当前元素和border的距离
- padding是内容和border的距离
- magin是对外的,padding是对内的
- margin只对块级元素有效,padding对所有元素都有效
css盒模型
- 内容content
- margin 外边距
- border 边框
- padding 内边距 内容与元素边框之间距离
- 上右下左设置,如果仅给出两个或三个值,那么缺失边的属性值取与对边相同的值;
标准文档流
- 就是在不使用其他于排列和定位相关的特殊css规则时,各种元素的排列规则
- 文本元素从上到下,从左到右排列
- 块级元素从上到下
- 内嵌元素从左到右
visibility: hidden,元素看不见,但占用位置;display: none元素看不见,不占用位置
选择器优先级
- !important 优先级最高
- !important> id >class> elements> 伪类> *
word-break:break-all
- 自动换行
display
JavaScript客户端脚本语言
- scirpt插件
- 增强客户端的交互功能;
- js与java命名一样
- 解释性语言,被浏览器解释执行,从上到下
jscript加入网页方式
- 内嵌式:在网页中加入
<script>
做标记,中间的代码叫做js代码,只能用于本网页;<script></script>
- 外联式:将js代码独立成*.js文件,通过
<script src="*.js"></script>
导入,可以用于多个网页;不能在<script src="*.js"></script>
标签中再写js代码,除非新建<script></script>
- 在元素事件中,加入js代码
<input type="button" onclick="answer()" ondblclick="reset()" >
- 超链接伪url方式
<a href="javascript:alert('dd')"> 跳转 </a>
变量
- 弱类型,不一定要初始化
- 弱类型指的是什么数据都能够放,可以放数字,字符串,对象引用;
- javascript是弱类型语言,所以不能声明变量类型
- 变量的定义:var money;
- var title = “hello”,cost = 1000;
- var name = “Mike”
- 用户自定义的变量名和函数名不能和标签名相同
- 函数名也能和元素的id相同
js数据类型
- undefined 当声明的变量未初始化时,值为undefined
- 当函数无明确返回值时,其调用结果也是undefined
- null null == undefined
- null 表示不存在的对象
- string 可用单引号和双引号
- boolean true或false
- number NaN 表示非数字,它与自身不相等,一般发生在类型转换失败时,isNaN()校验是否为数字