web
-
JavaWeb:
使用Java语言开发基于互联网的项目 -
软件架构:
1.C/S: Client/Server 客户端/服务器端
* 在用户本地有一个客户端程序,在远程有一个服务器端程序
* 如:QQ,迅雷…
* 优点:
1. 用户体验好
缺点:
1. 开发、安装,部署,维护 麻烦
2.B/S: Browser/Server 浏览器/服务器端
只需要一个浏览器,用户通过不同的网址(URL),客户访问不同的服务器端程序
* 优点:
1. 开发、安装,部署,维护 简单
* 缺点:
1. 如果应用过大,用户的体验可能会受到影响
2. 对硬件要求过高**补充:B/S架构也是一种特殊C/S架构
chrome 谷歌浏览器
firefox 火狐浏览器
IE 浏览器 -
B/S架构详解
- 资源分类:
1.静态资源:
* 使用静态网页开发技术发布的资源。
特点:
* 所有用户访问,得到的结果是一样的。
* 如:文本,图片,音频、视频, HTML,CSS,JavaScript
* 如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静 态资源的解析引擎,可以展示静态资源
2.动态资源:
* 使用动态网页及时发布的资源。
特点:
* 所有用户访问,得到的结果可能不一样。
* 如:jsp/servlet,php,asp…
* 如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静态资源,再发送给浏览器
* 我们要学习动态资源,必须先学习静态资源!
- 资源分类:
-
静态资源:
HTML:用于搭建基础网页,展示页面的内容
* CSS:用于美化页面,布局页面
* JavaScript:控制页面的元素,让页面有一些动态的效果
HTML:
-
概念:是最基础的网页开发语言
- Hyper Text Markup Language 超文本标记语言
- 超文本:
- 超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本.
- 标记语言:
- 由标签构成的语言。<标签名称> 如 html,xml
** 标记语言不是编程语言**
- 由标签构成的语言。<标签名称> 如 html,xml
- 超文本:
- Hyper Text Markup Language 超文本标记语言
-
快速入门:
-
语法:
- html文档后缀名 .html 或者 .htm
- 标签分为
1. 围堵标签:有开始标签和结束标签。如
2. 自闭和标签:开始标签和结束标签在一起。如
3. 标签可以嵌套:
需要正确嵌套,不能你中有我,我中有你
错误:
正确:
\- 在开始标签中可以定义属性。属性是由键值对构成,值需要用引号(单双都可)引起来
- html的标签不区分大小写,但是建议使用小写。
3. 标签学习:
1. 文件标签:构成html最基本的标签
- html:html文档的根标签
- head:头标签。用于指定html文档的一些属性。引入外部的资源
- title:标题标签。
- body:体标签
*** :html5中定义该文档是html文档**
2. 文本标签:和文本有关的标签 - 注释:
-
to
:标题标签 * h1~h6:字体大小逐渐递减
- :段落标签
:换行标签-
:展示一条水平线 -
- 属性:
- color:颜色
- width:宽度
- size:高度
- align:对其方式
- center:居中
- left:左对齐
- right:右对齐
- 属性:
- bold:字体加粗
- italic:字体斜体
- :字体标签
-
:文本居中 * 属性: * color:颜色 * size:大小 * face:字体 - 属性定义:
- color:
- 英文单词:red,green,blue
- rgb(值1,值2,值3):值的范围:0~255 如 rgb(0,0,255)
- #值1值2值3:值的范围:00~FF之间。如: #FF00FF
- width:
- 数值:width=‘20’ ,数值的单位,默认是 px(像素)
- 数值%:占比相对于父元素的比例
3. 3. 图片标签:
- color:
- img:展示图片
- 属性:
- src:指定图片的位置* 代码:
- 属性:
-
<!--展示一张图片 img-->
<img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/>
常用属性:
src:图像路径
相对路径
绝对路径
alt:图像丢失时显示文字
width:宽度,根据纵横比缩放高度会自动调整
height:高度
title:鼠标上移显示标题
相对路径
* 以.开头的路径
* ./:代表当前目录 ./image/1.jpg
* …/:代表上一级目录
<img src="./image/jiangwai_1.jpg">
<img src="../image/jiangwai_1.jpg">
4. 列表标签:
* 有序列表:
* ol:
* li:
* 常用属性:
type:排序类型
取值:1(默认值)a A i I
* 无序列表:
* ul:
* li:
常用属性:
type:符号类型
取值:disc、circle、square
5. 链接标签
a:定义一个超链接
常用属性:
href:请求跳转路径
相对路径
方式一:根据当前文件位置,查找目标文件
./ 表示当前目录
…/ 表示上级目录
方式二:以当前项目根目录,查找目标文件
绝对路径
http://www.itcast.cn
mailto:唤醒邮箱客户端
mailto:luqing@itcast.cn?subject=上门服务&body=小宝剑199,大宝剑299
target:跳转方式
取值:_self 本身(默认值)、_blank 新页面
title:鼠标上移显示标题
6. div和span:
div:每一个div占满一整行.块级标签
span:文本信息在一行展示,行内标签 内联标签
7. 语义化标签:html5中为了提高程序的可读性,提供了一些标签*。
1. <header>:页眉
2. <footer>:页脚\
<header></header>
<nav></nav>
<main></main>
<footer></footer>
特点:
1.文档结构清晰
2.代码可读性较高
3.方便团队维护开发
4.便于爬虫技术识别
8. 表格标签:
* table:定义表格
* width:宽度
* border:边框
***cellpadding:定义内容和单元格的距离
* cellspacing:定义单元格之间的距离。如果指定为0,则单元格的线会合为一条、**
* bgcolor:背景色
* align:对齐方式
* tr:定义行
* bgcolor:背景色
* align:对齐方式
* td:定义单元格
* colspan:合并列
* rowspan:合并行
* th:定义表头单元格
* <caption>:表格标题
* <thead>:表示表格的头部分
* <tbody>:表示表格的体部分
* <tfoot>:表示表格的脚部分