一、HTML部分：
1.web概念:
javaweb:使用java语言开发基于互联网的的项目
软件架构：
1.C/S架构：Client/Server 客户端/服务器端 ；优点：用户体验好；缺点：开发，安装，部署和维护都麻烦
2.B/S架构：Browser/Server 浏览器端/服务器端：优点：开发,安装,部署和维护简单;缺点：若应用过大,用户体验不好;对硬件要求过高
如：javase架构是c/s架构（client/server);javaee架构是b/s架构（broswer/server）
2.B/S架构详解:
资源分类：
1)静态资源：使用静态网页开发技术发布的资源。
特点：所有用户访问结果都是一样的；向用户展示的是静态资源(如:文本,音频,用HTML,JavaScript,css开发的),若用户请求的是静态资源那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
2）动态资源：使用动态网页及时发布的资源
特点：所有用户访问的结果可能不一样；利用jsp/servlet,php,asp等开发的，若用户请求的是动态资源，那么服务器会执行动态资源，转换为临时静态资源，在发给浏览器
页面由三部分组成：
内容(结构,html实现)--HTML:html是最基础的页面。用于搭建基础网页,展示页面内容
表现(展现形式,css实现)--CSS:用于美化、布局页面
行为(页面元素与设备的交互的相应,由JavaScript实现)--JavaScript：用于控制页面元素,让页面有些动固态元素
前端开发流程：
PS出预期效果(美术实现)->html静态实现（前端工程师实现）->将静态页面转换成动态页面（java工程师）
3.HTML:
1）概念：最基础的网页开发语言
Hyper Text Markup language超文本标记语言：
超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本
html通过标签来标记要显示的网页中的各个部分，网页文件本身是一种文本文件，通过在文本中添加标记符，可以告诉浏览器如何显示其中的内容（如图片，文字等）
标记语言：
由标签构成的语言。<标签名称>如html，xml
标记语言不是编程语言
2）快速入门：
语法：
1.HTML文档后缀名.html或者.htm
2.格式：
<标签名>封装的数据</标签名>
3.标签对大小写不敏感
4.标签拥有自己的属性：
A.基本属性(可以修改简单的样式效果) bgcolor="red"
B.事件属性(可以直接设置响应后的代码) οnclick="alert('你好！');"
onclick：表示单机事件
alert是JavaScript语言提供的一个
5.标签分为：
1.围堵标签(双标签)：有开始标签和结束标签。如 <html></html>
2.自闭和标签(单标签)：开始标签和结束标签在一起。如 <br/>
6.标签可以嵌套：
需要正确嵌套：<a><b></b></a>除此之外均不正确
7.在开始标签中可以定义属性。属性是由键值对构成的，值需要用引号（单双均可）引起来
8.html的标签不区分大小写，但建议使用小写
9.html注释：<!--这是html注释-->其中注释不能嵌套
3）标签：（HTML5主要针对的是移动web的开发）
1.文件标签：构成html最基本的标签
html：
html文档的根标签；
head：
头标签。用于指定html文档的一些属性。引入外部的资源
title：
标题标签
body：
体标签
《！DOCTYPE html》：
html5中定义该文档是html文档
2.文本标签：和文本有关的标签
<h1> to <h6>:
标题标签，其中h1最大，h6最小，大小随数字的增大而减小。
拥有对其属性：align,对其有left(默认)，center，right三种对其方式
<p>：
段落标签
<br>:
换行，等价于<br />
<hr>：
显示一条水平线，等价于<br />,
其属性：color；width；size；align(center;left;right)
<b>：
字体加粗
<i>：
字体是斜体
<font>：
字体标签，
其属性：修改文本的字体（face属性），颜色（color属性），大小（size属性{1-7}）
<center>:
相对于父元素文本居中
属性定义：
color
1.英文单词：red，green，blue
2.rgb(值1，值2，值3)：值得范围:0~255 如 rgb(0,0,255)
3.#值1值2值3：值的范围：00~FF之间，如#FF00FF
width:
1.数值：width='20'，数值的单位，默认是px(像素)
2.数值%：占比相对于父元素的比例{父元素值得是，使用标签的第一个嵌套外层标签}
3.图片标签
img：展示图片
属性：
src：图片存放地址连接;属性可以设置图片的路径(此处的路径分为相对路径和绝对路径两种)
align：对其方式
alt：图片加载失败则显示alt替换后的文字信息
width：修改图片宽度
height：修改图片高度
border属性可以对图片进行边框修饰，常用1
路径：
相对路径：
以.开头的路径
./：代表当前目录(默认),表示当前文件所在的目录
../：代表上一级目录,表示当前文件所在的上一级目录
文件名:表示当前文件所在目录的文件，相当于./文件名，其中./可以省略
绝对路径：
格式：http：//ip:port/工程名/资源路径
4.列表标签：
有序列表：
ol：列表
属性：type表示顺序类型，start表示起始数
li：列表项
无序列表：
ul：列表
属性：type表示顺序类型
li:列表项
5.链接标签：
a:定义一个超链接
属性
href：指定访问资源的url(统一资源定位符)
target：指定打开资源的方式
_self：默认值，在当前页面打开
_blank：表示打开新窗口页面进行跳转
6.特殊字符：常用的实体字符：
空格-- ；
小于--<；
大于-->；
与(&)--&；
引号--"；
撇号--'(IE不一定支持)
等等
7.div、span和p(结合css)：
div标签：div标签默认独占一行。即每一个div占满一整行。称为块级标签
span标签：span标签它的长度是封装数据的长度。文本信息在一行展示，称为行内标签，也称为内联标签
p段落标签：默认会在段落的上方或下方各空出一行来（如果已有就不再为空）
8.语义化标签(结合css)：
html5中为了提高程序的可读性，提供的一些标签
<header>
<footer>
9.表格标签：
在html中，表格的定义为，先定义行在定义每行中的单元格
table：定义表格
width：设置表格宽度
border：设置表格边框
height：设置表格高度
cellpadding：定义内容和单元格的距离
cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条
bgcolor：指定表格的背景颜色
align：设置表格相对于页面的对齐
tr：定义行
bgcolor：指定表格的背景颜色
align：对其方式
td：定义单元格
colspan：合并列。属性设置跨列，参数为列数个数，从2开始，同时被跨的列要删除
rowspan：合并行。属性设置跨行，参数为行数个数，从2开始，同时被跨的行要删除
align：设置单元格文本对其方式
th：定义表头单元格
可以使用<b>加粗标签和<td align="center">标签替代
b：加粗标签
<caption>:定义表格标题
<thead>:表示表格头部分
<tbody>:表示表格体部分
<tfoot>:表示表格尾部分
10.表单标签：
表单：
概念：
用于采集用户输入的数据的。用于和服务器进行交互。
表单就是html页面中，用于收集用户信息的所有元素集合，然后把这些信息发送给服务器
使用的标签：<from>
form：定义一个采集用户数据的范围
属性：
action：提交数据的url。属性设置提交的服务器地址
method：指定提交方式
分类：一共7种，常用2种：
get(默认)：
1.请求参数会在地址栏中显示，会封装到请求行中。action属性[+?+请求参数]；请求参格式：name=value&name=value
2.请求参数的长度是有限制的
3.不安全
post：
1.请求参数不会在地址栏中显示。会封装在请求体中(详见http协议)。浏览器地址栏中只有action属性值
2.请求参数的长度是没有限制的，理论上没有数据长度的限制
3.相对于get请求要安全
表单项中的数据要想被提交：必须指定其name属性
表单项：
input：可以通过type属性值，改变元素展示的样式
label标签：指定输入项的文字描述信息
注：
label的for属性一般会和input的id属性对应，若对应了，则点击label区域会让input输入框获取焦点
type属性：
text：文本输入框
value="默认值"
placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
password：密码输入框
radio：单选框
注：
1.要想让多个单选框实现单选的效果，则多个单选框的name属性值必须相同，name属性可以对其分组
2.一般会给每一个单选框提供value属性，指定其被选中后提交的值
3.check属性，可以指定默认值。checked="checked"表示默认选项
checkbox：复选框
注：
1.一般会给每一个单选框提供value属性，指定其被选中后提交的值
2.check属性，可以指定默认值
file：文件选择框即文件上传域
hidden：隐藏域，用于提交一些信息。当要发送某些信息，而这些信息不需要用户参与就可以使用隐藏域(提交的时候同时发送给服务器)
按钮：
submit：提交按钮，用于提交表单,value属性设置按钮上的文本，将信息提交给服务器
button：常和js结合使用,value属性设置按钮上的文本
image：图片提交按钮{input type="image" src="url"}src属性指定图片路径
reset：是重置按钮 value属性设置按钮上的文本
color：取色器
date：时间(精确到日)
datetime-local：时间(精确到秒)
email：邮箱
number:定义数字，即只能输入数字
select：下拉列表
子元素：option标签是下拉列表框中的选项，selected="selected"设置默认选中
textarea：文本域，即表示多行文本输入框(起始标签和终止标签中的内容是默认值)
cols：指定列数，每一行有多少个字符。属性表示每行可以显示几个字符宽度
rows：默认多少行。属性表示可以显示几行的高度
表单提交时，数据没有发送给服务器的三种情况
1.表单项没有name属性值
2.单选、复选(下拉列表中的option标签)都需要添加value属性，以便发送给访问器
3.表单向不在提交的form标签中
11.iframe框架标签：
iframe框架标签可以在一个html页面上，打开一个小区域窗口，去加载一个单独的页面
iframe和a标签组合使用步骤如下：
1.在iframe标签中使用name属性定义一个名称
2.在a标签的target属性上设置iframe的name属性值
4）一个简单的html页面解析：
<!DOCTYPE html><!--约束，声明-->
<html lang="zh_CN"><!--html标签，表示html的开始，其中lang="en"表示英文,lang="zh_CN"表示中文，html标签一般分为两部分，分别是：head和body-->
<head><!--表示头部信息，一般含三部分信息，title标题，css样式，js脚本代码-->
<meta charset="UTF-8"><!--表示当前页面使用UTF-8字符集-->
<title>Title</title><!--表示标题-->
</head>
<body><!--body标签是整个html页面显示的主体内容-->
hello world！！！
</body>
</html><!--表示整个html页面的结束--> tip1:html是最基础的页面;css用于对页面进行布局;javase架构是c/s架构（client/server);javaee架构是b/s架构（broswer/server）
tip2:前端开发流程：PS出预期效果(美术实现)->html静态实现（前端工程师实现）->将静态页面转换成动态页面（java工程师）
tip3:页面由三部分组成：内容（结构，html实现）；表现（展现形式，css实现）；行为（页面元素与设备的交互的相应，由JavaScript实现）
tip4:页面布局：在不使用css情况下用table来实现布局;若某一行只有一个单元格，则使用<tr><td></td></tr>;若某一行有多个单元格，则使用<tr><td><table></table></td></tr>
二、CSS部分
CSS页面美化和布局控制
1概念：
Cascading Style Sheets层叠样式表单
层叠样式表单，用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记语言
层叠：多个样式可以作用在同一个html的元素上，同样是生效
2.好处：
1.功能强大
2.将内容展示和样式控制分离
1.降低耦合度，解耦
2.让分工协作更容易
3.提高开发效率
3.css的使用：
css与html结合方式
1.内联样式
在标签内使用style属性指定css代码。即直接在标签后面使用style标签，设置相应属性
2.内部样式
在<head>标签内定义<style>标签，<style>标签体的内容就是css代码
<style type="text/css">
选择器p{
属性名称1:属性值1;
属性名称2:属性值2;
...
}
</style> 3.外部样式
定义css资源文件，内容为
选择器p{
属性名称1:属性值1;
属性名称2:属性值2;
...
} 在head标签内，
1定义link标签，引入外部的资源文件
2采用：
<style>@import "全路径/目标css文件.css";</style>或：
<link rel="stylesheet" type="text/css" href="目标css.css">
注：3种方式css作用范围越来越大
4.css语法：
格式：
选择器p{
属性名称1:属性值1;
属性名称2:属性值2;
...
}
选择器：筛选具有相似特征的元素
注：
每一对属性需要使用;隔开，最后一对属性可以不加；
5.选择器：
筛选具有相似特征的元素
分类
1.基本选择器
1、id选择器：选择具体的id属性值的元素
语法：#id属性值{}
注：
id选择器，可以让我们通过id属性选择性的去使用这个样式。
具体使用时在具体标签中加入id="id属性值"即可
2、元素选择器：选择就有相同标签的元素
语法：标签名称{}
注：
id选择器的优先级高于元素选择器；标签名选择器可以决定哪些标签被动的使用这个样式
3、类选择器：选择具有相同的class属性值的元素
语法：.class{}
注：
类选择器的优先级高于元素选择器
class类型选择器，可以通过class属性有效的去使用这个样式，用于解决id选择器不能复用的情况
2.拓展选择器
1.选择所有元素：
语法：*{}
2.并集选择器：
语法：选择器1，选择器2，选择器N{}
注：
组合选择器可以让多个选择器共用同一段css样式代码
3.子选择器：筛选选择器1元素下的选择器2元素
语法：选择器1 选择器2 选择器N{}
4.父选择器：筛选选择器2的父元素选择器1
语法：选择器1(父标签)>选择器2{}
5.属性选择器：选择元素名称，属性名=属性值的元素
语法： 元素名称[属性名="属性值"]{}
6.伪类选择器：选择一些元素所具有的状态
语法：元素:状态{}
如：<a>
状态：
link：初始化的状态
visited：被访问的状态
active：正在访问的状态
hover：鼠标悬浮状态
6.属性
1.字体、文本
1.font-size:字体大小
2.color：文本颜色
3.text：文本对齐方式
4.line-height：行高
5.text-align：调整文本对其
6.text-decoration:none:超链接去下划线
2.背景
background：背景
-color颜色
-image图片
3.边框
border：设置边框，符合属性
solid：实线
dashed：虚线
dotted：点实现
4.尺寸
width：宽度
height：高度
5.盒子模型：控制布局
margin：外边距
margin-lift:auto; 这是div左外边距，自动调整
margin-right:auto;这是div右边外边距，自动调整
padding：内边距
默认情况下内边距会影响整个盒子的大小
box-sizing: border-box;设置盒子的属性，让width和height就是最终盒子的大小
float：浮动
left
right
6.表格细线
table{
border：1px solid blick;设置边框
border-collapse:collapse;将边框合并
}
td,th{
border:1px solid blick;设置边框
}
7.列表去修饰：
ul{
list-style:none;
}
tip：javaee开发核心技术概念：
浏览器端：
CSS,HTML,JavaScript{jOuery}、ajax、Cookie
服务器：
servlet{jsp{EL,JSTL}},Filter,Listener、JSON、XML、Session、数据库
协议：
http
以上是本篇小节，不喜勿喷，感谢理解
相关链接：
458
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
