今日内容
- web概念概述
- HTML
1 web概念概述
1.1 JavaWeb
使用java语言开发基于互联网的项目
1.2 软件架构
- C/S:Client/Server 客户端/服务器端
*优点:用户体验好
*缺点:开发、安装、部署、维护 麻烦 - B/S:Browser/Server 浏览器/服务器端
用只需一个浏览器,用户通过不同(URL)网址,可以访问不同的服务器端程序
*优点:开发、安装、部署、维护 简单
*缺点:如果应用过大,用户体验受到影响而且对硬件要求过高
1.3 B/S架构详解
- 静态资源:使用静态网页开发技术发布的资源
- 所有用户访问,得到的结果一样
- 文本,图片,音频,视频,HTML,CSS,JavaScript
- 如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器。浏览器内置了静态资源的解析引擎,可以展示静态资源
- 动态资源:使用动态网页及时发布的资源
- 所有用户访问,得到的结果可能不一样
- jsp/servlet,php,asp…
- 如果用户请求的是动态资源,那么服务器会执行动态自愿,转换为静态资源,再发送给浏览器
- 静态资源:
- HTML:用于搭建基础网页,展示页面的内容
- CSS:用于美化页面,布局页面
- JavaScript:控制页面的元素,让页面有一些动态的效果
2 HTML
2.1 概念:是最基础的网页开发语言
Hyper Text Markup Language
- 超文本:用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本
- 标记语言:由标签构成的语言。<标签名称> 如 html,xml
标记语言不是编程语言
2.2 快速入门
- html文档后缀名 .html 或者 .htm
- 标签分为:
- 围堵标签:有开始标签和结束标签。如
- 自闭和标签:开始标签和结束标签在一起。如
- 标签可以嵌套:
<a><b></b></a>
- 在开始标签中可以定义属性。属性是由键值对构成,值需要用引号(单双都可以)引起来
- heml的标签不区分大小写,但是建议使用小写
<html>
<head>
<title>title</title>
</head>
<body>
<font color = 'green'>Hello World</font>
</body>
</html>
3 标签学习
3.1 文件标签:构成html的最基本标签
- html:html文档的根标签
- head:头标签。用于指定html文档的一些属性。引入外部的资源
- title:标题标签
- body:体标签
<!DOCTYPE heml>
:html5中定义该文档是html文档
3.2 文本标签:和文本有关的标签
- 注释:
<!--注释内容-->
<h1> to <h6>
:标题标签 h1->h6字体大小递减<p>
:段落标签<hr>
:展示一条水平线- color:颜色
- width:宽度
- size:高度
- align:对齐方式
- center:居中
- left:左对齐
- right:右对齐
<b>
:字体加粗<i>
:字体斜体<font>
:字体标签- color:颜色
- size:大小
- face:字体
<center>
:文本居中
- 属性定义:
- color:
- 英文单词:red,green,blue
- rgb(值1,值2,值3):值的范围:0~255如rgb(0,0,255)
- #值1值2值3:值的范围:00~FF之间,如#FF00FF
- width:
- 数值:width=‘20’,数值的单位,默认是 px(像素)
- 数值%:占比相对于父元素的比例,width=“50%”
- color:
3.3 图片标签
- img:展示图片
属性:src:指定图片的位置
<img src="image/xxx.jpg." align="right" alt="古镇" width="500" height="500">
- 相对路径:
*./:代表当前目录,可省略
./image/1.jpg
*…/:代表上一级目录
<img src="../../image/1.jpg">
- 相对路径:
3.4 列表标签
- 有序标签ol(ordere)
- 无序列表ul(unordere)
- 格式
<ol type="a" strat="1"或者ul type="square">
<li>内容</li>
<li>内容</li>
</ol或者/ul>
- 属性:type类型、strart开始索引
3.5 链接标签
- a:定义一个超链接
<a href="http://www.baidu.com" target="_blank">点我</a>
- 属性:
- href:指定访问资源的URL(统一资源定位符)
- targe:指定打开资源的方式
*_self:默认值,在当前选项卡页面打开
*_blank:在空白页面新选项卡打开
<a href="./5_标签.html">列表标签</a>
<a href="mailto:itcast@qq.com">邮件</a>
<a href="http://www.baidu.com"><img src="image/1.jpg"></a>
3.6 div和span
- div:每一个div占满一整行。块级标签
- span:文本信息在一行展示,行内标签 内联标签
3.7 语义化标签:
在html5中为了提高程序的可读性,提供了一些标签
<header>
:页眉<footer>
:页脚
3.8 表格标签:
- table:定义表格
- width:宽度
- border:边框
- cellpadding:定义内容和单元格的距离
- cellspacing:定义单元格之间的距离。定义为0,则单元格线条合为一条
- bgcolor:背景色
- align:对齐方式
- tr:定义行
- bgcolor:背景色
- align:对齐方式
- td:定义单元格
- colspan:合并列(左右合并)
- rowspan:合并行(上下合并)
- th:定义表头单元格
<caption>
:表格标题<thead>
:表示表格的头部分<tbody>
:表示表格的体部分<tfoot>
:表示表格的脚部分
4 案例
- 确定使用table来完成布局
- 如果某一行只有一个单元格,则使用
<tr><td></td></tr>
- 如果某一行有多个单元格,则使用
<tr>
<td>
<table></table>
</td>
</tr>
<!--多个单元格-->
<tr>
<td>
<table align="center" width="95%">
<tr>
<td>
<img src="image/1.jpg">
</td>
<td>
<img src="image/1.jpg">
</td>
<td>
<img src="image/1.jpg">
</td>
</tr>
</table>
</td>
</tr>