1. Web概念概述
JavaWeb:使用Java语言开发基于互联网的项目
软件架构:
-
C/S:客户端/服务器端
-
在用户本地有一个客户端程序,在远程有一个服务器端程序
-
如:QQ,迅雷..
-
优点:
-
用户体验好
-
-
缺点:
-
开发,安装,部署,维护,麻烦
-
-
-
B/S:浏览器/服务器端
-
只需要一个浏览器,用户通过不同的网址(URL),客户访问不同的服务器端程序
-
优点:
-
开发,安装,部署,维护,简单
-
-
缺点
-
如果应用过大,用户的体验可能会受到影响
-
对硬件要求过高
-
-
-
B/S架构详解
-
资源分类:
-
静态资源:
-
使用静态网页开发技术发布的资源。
-
特点:
-
所有用户访问,得到的结果是一样的。
-
如:文本,图片,音频、视频, HTML,CSS,JavaScript
-
如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎,可以展示静态资源
-
-
-
动态资源:
-
使用动态网页及时发布的资源。
-
特点:
-
所有用户访问,得到的结果可能不一样。
-
如:jsp/servlet,php,asp...
-
如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静态资源,再发送给浏览器
-
-
-
-
我们要学习动态资源,必须先学习静态资源!
-
静态资源:
-
HTML:用于搭建基础网页,展示页面的内容
-
CSS:用于美化页面,布局页面
-
JavaScript:控制页面的元素,让页面有一些动态的效果
-
-
2. HTML2.1 概念
HTML是最基础的网页开发语言
-
Hyper Text Markup Language 超文本标记语言
-
超文本
-
超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本.
-
-
标记语言
-
由标签构成的语言.<标签名称> 如 html,xml
-
标记语言不是编程语言
-
-
2.2 快速入门
-
语法
-
html文档后缀名 .html 或者 .htm
-
标签分为
-
围堵标签:有开始标签和结束标签.如<html>和</html>
-
自闭和标签:开始标签和结束标签在一起.如
-
-
标签可以嵌套
-
需要正确嵌套,不能你中有我,我中有你错误示范:<a><b></a></b>
正确示范:<a><b></b></a>
-
-
在开始标签中可以定义属性.属性是由键值对组成,值需要用引号(单双都可)引起来
-
html的标签不区分大小写,但是建议使用小写
-
2.3 标签学习
-
文件标签:构成html最基本的标签
-
html:标识html文档的根标签
-
head:头部标签.用于指定html文档的一些属性.引入外部的资源
-
title:标题标签
-
body:体标签
-
<!DOCTYPR>:html5中定义该文档是html文档
-
-
文本标签:和文本有关的标签
-
注释:<! - - 注释内容 -- >
-
h1 to h6:标题标签
-
h1~h6:字体大小逐渐递减
-
-
p:段落标签
-
br:换行标签
-
hr:显示一条水平线
-
属性
-
color:颜色
-
width:宽度
-
size:高度
-
align:对齐方式
-
center:居中
-
left:左对齐
-
right:右对齐
-
-
-
-
b:字体加粗
-
i:字体斜体
-
center:居中
-
font:字体标签,控制字体属性
-
属性
-
color:颜色
-
size:大小(1-7)
-
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(像素)
-
数值%:表示了占比相对于父元素的比例
-
-
-
-
图片标签:
-
img:展示图片
-
属性
-
src:指定图片的位置
-
width:宽
-
height:高
-
alt:未找到图片显示的内容
-
相对路径
-
以.开头的路径
-
./:代表当前目录 ./image/1.jpg
-
../:代表上一级目录
-
-
-
-
-
-
列表标签:
-
有序列表
-
ol
-
type(1-数字,a-字母标号,i-罗马编号,)
-
start(起始位置)
-
-
li
-
-
无序列表
-
ul
-
type(circle-空心圆,disc-实心圆,square-实心框)
-
-
li
-
-
-
连接标签:
-
a:定义一个超链接
-
属性
-
href:指定访问资源的url(统一资源定位符)
-
target:指定打开资源的方式
-
_self:默认值,在本页面跳转连接
-
_blank:在新的页面打开连接
-
-
mailto:打开邮箱
-
-
-
-
块标签
-
div:每一个div占满一整行.块级标签
-
span:文本信息在一行展示,行内标签,内联标签
-
-
语义化标签:html5中为了提高程序的可读性,提供了一些标签
-
header
-
footer
-
-
表格标签
-
table:定义表格
-
height:高度
-
width:宽度
-
border:显示边框
-
cellpadding:定义内容和单元格的距离
-
cellspacing:定义单元格之间的距离.如果指定为0,则单元格的线会合为一条
-
bgcolor:背景色
-
align:对其方式显示位置
-
-
tr:定义行,行标签
-
bgcolor:背景色
-
align:对其方式显示位置
-
-
td:定义单元格,列标签\
-
colspan:合并列
-
rowspan:合并行
-
-
th:定义表头单元格
-
caption:表格标题
-
thead:表示表格的头部分
-
tbody:表示表格的体部分
-
tfoot:表示表格的脚部分
-