javaweb 使用java语言开发基于互联网的项目
软件架构分为C/S和B/S即客户端client/服务器端server 和浏览器browser/服务器端server
C/S的优点:用户体验好 缺点:开发,部署.维护麻烦
B/S优点:开发部署维护等简单 缺点:如果应用较大用户体验可能会受到影响,对硬件要求较高,安全性差 只需要一个浏览器就可以通过不同的网址访问不同的服务器
B/S架构详解:
静态资源:使用静态网页开发技术发布的资源
特点:所有的用户访问,得到的结果是一样的 如:图片\文本\音频\视频\HTML\CSS\JavaScript
如果用户访问的是静态资源,那么服务器将会把静态资源发送至浏览器,浏览器中内置了静态资源解析引擎,解析后展示给用户
动态资源:使用动态网页技术发布的资源
特点:所有用户访问,得到的结果可能不一样 如jsp/servlet php asp等
如果用户请求的是动态资源,那么服务器将执行动态资源,然后转换为静态资源,再发给浏览器
静态资源:
HTML 用于搭建基础网页,展示页面的内容
CSS 用于美化页面,布局页面
JavaScript 控制页面的元素,让页面有一些动态的效果
HTML是最基础的网页开发语言
hyper text Markup language 超文本标记语言
超文本:是用超链接的方式将不同空间的文件信息组织起来的网状文本
标记语言:用标签构成的语言<标签名称> 如HTML和xml 标记语言不是变成语言
HTML文件的后缀名是HTML或htm
标签分为围堵标签(有开始标签,有结束标签入)和自闭合标签(开始和结束标签在一起
)
标签可以嵌套但需要正确的嵌套,不能你中有我,我中有你 正确格式:
在开始标签中可以定义属性,属性是由键值对构成的,值需要用引号引起来 单双都可以
HTML不区分大小写,建议小写
文件标签:
HTML 是HTML文件的根标签
head 是HTML文件的头标签,在其中可以指定一些HTML文档的属性,引入外部资源
title 是标题标签
body 是体标签
文本标签
注释
到
标题标签,字体大写逐渐递减
段落标签
换行标签
展示一条水平线
属性 color颜色 size高度 width宽度 align对齐方式(该属性有三个值 center居中 right右对齐 left左对齐)
字体加粗 斜体 字体标签
属性 color颜色 size大小 face字体
属性定义 颜色 1.直接赋值 color=‘green’ 2.color=‘rgb(值1,值2,值3)’ 值的取值是0-255 red green blue 3.color=’#值1值2值3’ 值的取值是00-FF之间 这是16进制数字的表达
width width=‘20’ 像素默认单位是px 或者 width='20%'占比相对于父元素的比例
img图片标签 属性有: src路径 width宽度 height高度 align对齐方式 alt不存在显示的内容
相对路径的问题 .代表当前目录 …代表上一级目录
列表标签 有序是ol li 无序是ul li
a标签 代表超链接 属性: href指定访问资源的URL路径(同一资源定位符) target打开方式 (有两种方式 _self在当前页面打开(默认) _blank在空白处打开)
div块级标签 每个div占满一整行 span文本信息在一行展示,行内标签 内联标签
语义标签header页眉 footer页脚
table表格标签 属性有width宽度 height高度 bgcolor背景颜色 border边框 align对齐方式 cellpadding内容和单元格之间的距离 cellspacing单元格和单元格之间的距离
tr行标签 属性 bgcolor背景色 align对齐方式
td单元格标签 colspan合并列 rowspan合并行
th表头单元格 属性 caption表格标题 thead表示表格的头部分 tfoot表示表格的脚部分 tbody表示表格体部分
黑马旅游网第一个练习的网页,是利用表格完成的,整个是一个大表,分成多个行,一行只有一个内容的直接填写内容,一行多个内容的再在此行内加表
表单标签 form 用于采集用户输入的数据的,用于和服务器进行交互
属性有两个 action提交的目的地URL method提交方式 常用的是get和post
get方式 请求的参数会显示在地址栏中,请求参数被封装到请求行中,大小有限制,不安全
post方式 请求参数不会显示在地址栏中,请求参数被封装在请求体中大小无限制,较安全
form表单项如果要提交必须有name属性
input表单项标签
属性 type类型 placeholder(对应type为text的表单项属性,文本框内显示提示值,输入内容后不再显示)
type的值:(text文本输入框,password密码输入框,radio单选框,checkBox复选框,file文件选择框,hidden隐藏域,用于提交一些信息 submit提交按钮,可以提交表单 button普通按钮 image图片按钮(src属性指定图片地址))
radio单选框需要注意,想要让多个单选框实现单选的效果,name属性值必须一样. 一般会给每个单选框提供value值,指定其被选定后提交的值 checked属性可以指定默认值(TRUE选中,false未选中)
checkbox复选框注意 一般会给每个选框提供一个value值,指定其被选中后提交的值 checked属性可以指定默认值
select下拉列表标签 子元素option指定列表项
textarea文本域 属性 cols列数 rows行数
CSS层叠样式表 casecading style sheets
多个样式可以作用于同一个HTML元素,同时产生效果
好处:功能强大 让内容展示和样式控制分离,降低耦合度,让分工协作更加容易,提高了开发效率
使用方式
1.内联样式 在标签内使用style属性指定CSS代码 多个属性用分号隔开,最后一个可不加分号
2.内部样式 在head标签内定义style标签 style标签的标签体内容就是css代码
3.外部样式 在head标签内定义link标签 属性rel=‘stylesheet’ href=’./a.css’ type=‘text/css’ rel是relation的缩写,关系 引入的文件和HTML文档的关系 href引入的链接
外部样式也可以这样写 在head标签内定义style标签 在标签体内些如下代码 @import’./a.css’ 即导入外部样式的意思
css语法 选择器{ 属性1:属性值1;属性2:属性值2…} 属性和属性值之间用: 属性之间用分号隔开 最后一个属性可以不加分号 选择器筛选具有相似特征的元素
选择器的分类 有基础选择器 和扩展选择器
基础选择器 有id选择器 类选择器 元素选择器
#id选择器 选择具体的id属性值的元素,在HTML中建议id值唯一 格式: #id属性值{ }
.class选择器 选择具有相同class属性值的元素 格式: .class属性值{ }
元素选择器 选择具有相同元素标签的元素 格式: 元素名称{ }
id选择器>class选择器>元素选择器 优先级
扩展选择器
*{} 所有元素选择器
选择器1,选择器2{}并集选择器 就是多个选择器都执行
选择器1 选择器2{}子选择器 筛选选择器1元素下的选择器2元素 只要是1下面的2元素都使用,间接的也可以
元素名[属性名=‘属性值’]{} 属性选择器
选择器1>选择器2 {} 父选择器 被元素1直接包裹的元素2(间接的不算)
元素:元素的状态{} 伪类选择器 如:a标签 状态有 link初始化的状态 visited被访问过的状态 active正在访问的状态 hover鼠标悬浮的状态
css中的一些属性
1.字体/文本的 color颜色 font-size字体大小 text-align对齐方式 line-height行高
2.背景 background
3.边框border
4.尺寸 width 宽度 height高度
5.盒子模型 控制布局 margin外边距 padding内边距 默认情况下内边距的大小会影响整个盒子的大小 box-sizing :border-box 设置盒子的属性,让width和height就是最终盒子的大小
6浮动float left左浮动 right右浮动
在css中定义样式 属性: 属性值1 属性值2 属性值3; 一个属性可能有多个属性值,如background 有图片背景地址\对齐方式\是否重复 等属性值 如border有 边框的宽度\颜色\线型
background: url("./dasda.jpg") center no-repeat border: 2px solid red
元素:first-child{} 也是伪类选择器 p:first-child 哪个元素的第一个元素是p,它的p元素采用此样式 (是别人第一个子元素的p元素采取此样式)
元素1> 元素2:first-Child{} 是元素1第一个子元素的元素2采用此样式
form表单中还是封装了一个table表格
text password email date都可以使用placeholder属性 label标签 用于显示提示内容 它的for属性和input表单项的id属性相同的话,当点击到label标签的时候input表单项将获得鼠标焦点