第 1 章 Web 1.1 Web 概念
JavaWeb：用 Java 语言编写的基于 Internet 的项目
1.2 软件架构 1.2.1C/S：Client/Server 客户端/服务器
概述：用户本地有一个客户端，通过客户端访问远程服务器
优点：良好的用户体验
缺点：开发、安装部署、维护麻烦
1.2.2 B/S：浏览器/服务器
概述：用户通过浏览器发送网址（URL）来访问服务器
优点：开发、安装部署、维护简单
缺点：可能会带来糟糕的用户体验
1.3B/S说明 1.3.1 静态资源
概述：使用静态 Web 技术发布的资源
特点：所有用户听到相同的界面
技术：html、css、JavaScript(js)
1.3.2 动态资源
概述：使用静态 Web 技术发布的资源
特点：不同的用户可能听到不同的界面
技术：jsp/servlet、php、asp...
注意：所有动态资源最终都会转换为静态资源进行显示。
1.4 核心技术
HTML：用于建立网页的结构，定义网页包含的内容
CSS：层叠样式表，用于创建网页的布局、外观和美化
JS（JavaScript）：脚本语言，用于建立网页行为，与用户交互，使用户获得更好的体验
通常在web后端，HTML是结构层，CSS是表现层，js是行为层
第 2 章 HTML 2.1 概念 HTML 2.1.1 概念
最基本的Web开发语言
2.1.2 解释
HyperTextMarkupLanguage 超文本标记语言
超文本：超链接
TagLanguage：由标签组成的语言，()
2.2 句型
2.3 标签 2.3.1 常用标签
2.3.2 表单标签属性名称含义常用属性值
边界
设置表格的边框（默认border=”0”无边框）
像素值
细胞间距
设置单元格与单元格边框之间的空白宽度
像素值（默认为2像素）
单元格填充
设置单元格内容和单元格边框之间的空间宽度
像素值（默认为1像素）
宽度
设置表格长度
像素值
高度
设置桌子的高度
像素值
对齐
设置网页中表格的水平对齐方式
左、中、右
行跨度
跨行合并单元格
行数
科尔斯潘
跨列合并单元格
列数
2.3.3 表单标签
句型：
<form action=”url地址” method=”提交方式” name=”表单名称”>
各种表单控件
</form>
概念：
用于收集用户输入的数据并用其与服务器进行交互
属性：
action：表单收集信息后，需要将信息传递给服务器进行处理
method：用于设置表单数据的提交方式，其值为get或post
name：用于指定表单的名称，以区分同一页面的多个表单
2.3.4 常用的新标签头定义文档的脚注 返回
导航
定义导航链接的部分
页脚
定义文档或部分顶部的页码
文章
定义文章
部分
定义文档的部分（节、节）
在旁边
定义内容所在内容之外的侧面
日期列表
标签定义行选择列表，与输入元素结合使用
字段集
元素可以对表单中的相关元素进行分组和打包
2.3.5 特殊字符标签
第 3 章 CSS 3.1 CSS 概念 3.1.1 概念
层叠样式表，用于创建网页布局、外观、美化页面
3.1.2 解释
CSS指的是层叠样式表（CascadingStyleSheets）
3.1.3 目的
强大的
开发方便、分工明确
3.2 CSS 样式格式 3.2.1 样式规则
3.2.2 CSS的使用：与HTML结合
直插式
内部风格
外型
句型：
<head>
<link href=”CSS文件的路径” type=”text/CSS” rel=”stylesheet” />
</head>
注意：
href：定义链接的外部样式表文件的URL，可以是相对/绝对路径 type：定义链接文档的类型
rel：定义当前文档与链接文档的关系，stylesheet表示链接文档是样式表文件
样式表优点缺点使用控制范围
内联样式表
易写、重量高
风格和结构没有分离
较少的
控制选项卡（较少）
内部样式表
有些结构和样式是分离的
没有完全分开
更多的
控制页面（中）
外部样式表
完全实现结构与风格分离
需要介绍一下
最多
控制整个站点（多个）
3.2.3 标签显示方式
注意：
只有文本才能构成段落，因此块级元素不能放置在 p 之上。 同样，还有h1、dt等标签。 它们都是文本类型的块级标签，上面不能放置其他块级元素。
链接上不能再放置其他链接
3.3 选择器：具有相同特性的过滤元素 3.3.1 基本选择器
3.3.2 扩展选择器
3.4 CSS字体样式属性
关于字体系列的注释：
（1）英文字体在英文状态下需要加冒号，英文字体一般不需要加冒号； 当需要设置中文字体时，必须将中文字体名称放在英文字体名称之前
（2）如果字体名称中含有空格、#、$等符号，字体必须添加英文单冒号或双冒号，如font-family:“TimesNewRoman”；
属性含义解释
字体大小
字体大小
常用px，一般为14px
字体系列
字体
可以同时指定多种字体，用冒号分隔，表示如果浏览器不支持第一种字体，则会尝试下一种，直到找到合适的字体
字体粗细
字体粗细
b. 强标签 正常：400px 默认值 粗体：700px 更粗，更淡，100~900
字体样式
字体样式
i、em标签normal：默认值斜体，oblique：倾斜
字体
综合设置字体样式
顺序：font-stylefont-weightfont-size/line-heightfont-family；
3.5 CSS 文本样式属性
英文都可以设置 letter-spacing 和 word-spacing，区别是 word-spacing 定义英文短语之间的宽度，letter-spacing 定义字母之间的宽度
3.6 背景
3.7 边框
3.8 浮动（浮动）
浮动会向左或向右连接元素html知识点，周围的元素也会重新排列
元素水平方向浮动，即元素只能左右连接，不能上下连接
实现两个div并排的方法：float="left" 向左对齐（right、left、none、initial...）
第 4 章 JavaScript 4.1 JavaScript 概念
JavaScript 是一种脚本语言，一种轻（弱）编程语言，而 Java 是一种强类型编程语言。 两者没有任何关系，只是名字相似而已。
4.2 JavaScript使用描述归属
窗户。 警报（消息）
浏览器弹出警告框
浏览器
consloe.log(msg)
浏览器控制台复制输出信息
浏览器
提示（信息）
浏览器弹出输入框，用户可以输入
浏览器
文档。 写（）
输出html知识点，将标签写入html
浏览器
内部HTML()
获取标签中的文字
浏览器
4.3 选择器选择器说明
类选择器
getElementsByClassName 获取元素列表
标签选择器
GetElementsByTagName 通过标签名 getElementsByTagName 就是元素列表
id选择器
GetElementsById通过id名称就是标签元素对象
4.4 数据类型
var代表所有数据类型
数据类型 描述 默认值
数字
数字，包括整数和浮点值
布尔值
布尔类型
错误的
细绳
字符串类型
””
不明确的
瓦拉； 声明了变量a，没有给定值，此时a=undefined
不明确的
无效的
变量=空； 声明变量 a 为 null
无效的
4.5 自定义函数
句型：
执行某一功能的代码块 参数不用加var
function + 函数名(参数){
}
4.6 运算符
JavaScript 运算符与 Java 相同： 算术运算符 逻辑运算符 关系运算符 三元运算符
4.7 过程控制
如果（）{}
如果别的{}
if(){}elseif(){}else{}
开关(){中断}
为了（）{}
尽管 （） {}
4.8 创建链表
字段对象用于在单个变量名中存储一系列值
创建链表的方法：vararr=newArray();vararr=[value];
4.9 创建对象
JavaScript 对象与 Java 中的对象名称相同。 属性名称对象名称。 方法名称
首先：
var person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
第二种：
var person1={
name:"张三",
age:22,
sex:"男"
}
4.10 比较
==：无论类型如何，比较的值都相等
===：相等的值和相等的类型
4.11 类型
typeOf 返回数据类型
用法：typeOf(variable) 或 typeOf 变量
4.12DOM（DocumentObjectModel）文档对象模型
该文档虽然是一个网页：
1.通过id查找HTML元素
2.通过标签名称查找HTML元素
3.通过类名查找HTML元素
4.13 BOM（BrowserObjectModel）浏览器对象模型
警报框：window.alert()
确认框：window.confirm("真的吗？")
提示框：window.prompt()
网页跳转：window.location.href="";window.open("")
4.14 正则表达式
JavaScript中的正则表达式与Java中的正则表达式相同，IT中的正则表达式也相同
正则表达式：满足一定规则的字符串。 正则表达式是由字符序列生成的搜索模式。 由于字符串是不断变化的，只有正则表达式才能过滤出想要的字符串。
创建：varregex = newRegExp(“规则”)
4.15日期
Java获取日期的时间戳：NewDate().getTime();System.currentTimeMillis();
JavaScript 创建日期：varnow=newDate();
getFullYear()：获取年份
getTime()：返回从1970年1月1日到现在的微秒数
setFullYear()：用于设置具体日期
toUTCString()：将当天的日期（根据UTC）转换为字符串
getDay()：使用 getDay() 和字段来显示一周中的几天，而不仅仅是数字
第 5 章 JQuery 5.1 JQuery 概述 5.1.1 概述
JQuery 是一个快速、简洁的 JavaScript 框架。 封装了JavaScript的一些功能，存放在库中，方便使用； JavaScript 函数 > JQuery 函数
5.1.2 JQuery轻量级的优点。 核心文件只有几百kb，不会影响页面加载速率，跨浏览器兼容。基本兼容当今主流浏览器链式编程，对风暴、样式、动画的隐式迭代支持，极大简化了DOM操作，支持插件扩展开发，拥有丰富的第三方插件免费开源5.1.3使用
基本句型：$(selector).action()
$define-jQuery
选择器“查询”和“查找”HTML 元素
JQuery的action()对元素执行操作
如何使用
JQuery 设置样式
$('div').css('属性','值')
显示和隐藏标签
hide() 隐藏 show() 显示
5.2 DOM 对象和 JQuery 对象 5.2.1 DOM 对象
概述：用原生JavaScript获取的对象就是DOM对象
示例：varmyDiv=document.querySelector('div');//myDiv是一个DOM对象
5.2.2 JQuery对象
概述：JQuery方法获取到的对象是一个JQuery对象
本质：用$包裹DOM元素
示例： ('div');//('div');//('div');//('div') 是一个 JQuery 对象
5.2.3 JQuery对象只能使用JQuery方法，而DOM对象使用原生JavaScript属性和技术
myDiv.hide();//myDiv是DOM对象，不能使用JQuery上面的hide方法
$('div').style.display='none';//这个$('div')是一个JQuery对象，不能使用原生JavaScript属性和技术
5.2.4 交换
因为原生js比JQuery大，一些原生的属性和技巧JQuery并没有为我们封装。 要使用这个属性和技巧，需要将JQuery对象转换为可以使用的DOM对象
将 DOM 对象转换为 JQuery 对象：$(DOM 对象)
将JQuery对象转换为DOM对象（两种形式）
$('div')[index] 或 $('div').get(index)index 是冒号
5.3 JQuery选择器名称使用说明
id选择器
$(“.#id”)
获取指定id的元素
选择所有选择器
$(“*”)
匹配所有元素
类选择器
$(“.class”)
获取同一类的元素
标签选择器
$(“div”)
获取同一标签的所有元素
联合选择器
$("div.p.li")
选择多个元素
交叉点选择器
$("li.当前")
交集元素
子选择器
$("ul>li")
使用 > 符号获取同级级别的元素
后代选择器
$(“乌利”)
对于后代选择器使用空格
5.4JQuery过滤选择器语句使用说明
：第一的
$("李：第一")
获取第一个 li 元素
：最后的
$("li:最后")
获取最后一个li元素
:eq(索引)
$("li:eq(2)")
选择索引冒号为2的元素，从0开始
： 奇怪的
$("李：奇数")
选择索引冒号为质数的元素
：甚至
$("li:偶数")
选择索引冒号为质数的元素
5.5风暴
Storm：页面对不同访问者的响应，触发某种操作所执行的代码
键盘干扰：click、dblclick、mouseenter、mouseleave、hover
按钮风暴：keypress、keydown、keyup
形式干扰：提交、更改、聚焦、模糊
文档/窗口干扰：加载、调整大小、滚动、卸载
代码示例
<body>
<input type="text" name="" id="" value="" />
jquery事件</div>
</body>
点击风暴
$("div").click(function(){
$("div").html("div变了");
})
双击风暴
$("div").dblclick(function(){
$("div").html("div双击了");
})
键盘动进风暴
$("div").mouseenter(function(){
$("div").css("background-color","red")
})
键盘远离风暴
$("div").mouseleave(function(){
$("div").css("background-color","yellow")
})
键盘指针悬停风暴
$("div").hover(function(){
$("div").css("background-color","blue")
})
鼠标按下过程风暴
$("input").keypress(function(){
var val=$("input").val();
$("div").html(val)
})
鼠标按下风暴
$("input").keydown(function(){
var val=$("input").val();
$("div").html(val)
})
键盘风暴
$("input").keyup(function(){
var val=$("input").val();
$("div").html(val)
})
失去焦点
$("input").blur(function(){
})
第 6 章 XML 和 JSON6.1XML 概述
XML是指可扩展标记语言（EXtensibleMarkupLanguage）
作用：传输和存储数据
XML文件中没有单行多行注释，XML标签都是自定义的
6.2 XML 的三个要素
