WEB概念概述
- javaweb:
- 软件架构
- C/S: Client/Server 客户端/服务器端
- . 在用户本地有一个客户端程序，在远程有一个服务器端程序
- 如: qq, 迅雷…
- 优点：
- 缺点：
- B/S: Browser/Server 浏览器/服务器端
- 只需要一个浏览器,用户通过不同的网址(URL),客户访问不同的服务器端程序
- 优点:
- 缺点：
- 如果应用过大，用户的体验可能会受到影响
- 对硬件要求过高
- B/S架构详情
- 资源分类
- 静态资源：
- 使用静态网页开发技术发布的资源。
- 特点：
- 所有用户访问，得到的结果是一样的
- 如：文本、图片、音频、视频、HTML、CSS、JavaScript
- 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
- 动态资源
- 使用动态网页及时发布的资源
- 特点：
- 所有用户访问，得到的结果可能不一样
- 如： jsp/servlet，php，asp。。。
- 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器。
- 静态资源：
- HTML：用于搭建基础网页，展示页面的内容
- CSS：用于美化页面，布局页面
- JavaScript：控制页面的元素，让页面有一些动态的效果
HTML
- 概念 ： 是最基础的网页开发语言
- Hyper Text Markup Language 超文本标记语言
- 超文本：
- 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本
- 标记语言：
- 由标签构成的语言：<标签名称> 如 html ， xml
- 标记语言不是编程语言
- 快速入门：
- 语法：
- html文档后缀名.html 或者 .htm
- 标签分为:
- 围堵标签: 有开始标签和结束标签. 如< html>< /html>
- 自闭和标签: 开始标签和结束标签在一起如:< br />
- 标签可以嵌套
- 需要正确嵌套,不能你中有我,我中有你
- 错误: < a>< b>< /a> < /b>
- 正确< a>< b>< /b>< /a>
- 在开始标签中可以定义属性,属性是由键值对构成,值需要用引号(单,双都可以)引起来
- html的标签不区分大小写,但是建议使用小写.
- 代码
<html>
<head>
<title>title</title>
</head>
<body>
<font color='red'> hello world</font><br/>
<font coklor='green'> hello world</font>
</body>
</html>
- 标签学习:
- 文件标签: 构成html的最基本标签
- html: html文档的跟标签
- head: 头标签. 用于指定html文档的一些属性,引入外部资源
- title : 标题标签
- body: 体标签
- : html5中定义该文档是html文档
- 文本标签:和文本有关的标签
- 注释: <!-- 注释内容 – >
- < h1 > to < h6>: 标签标题
- < p > :段落标签
- < br > : 换行标签
- < hr >: 展示一条水平线
- 属性:
- color : 颜色
- width: 宽度
- size : 高度
- align: 对齐方式
- center : 居中
- left: 左对齐
- right: 右对齐
- < b > : 字体加粗
- < i >: 字体斜体
- < font > : 字体标签
- < center > : 文本居中
- 属性:
- 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(像素)
- 数值%：占比相对于父元素的比例
- 案例
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>案例练习</title>
</head>
<body>
<header>
<div id="header">
<h1>公司简介</h1>
</div>
</header>
<hr color="#ffd700">
<p>
<font color="#FF0000">"中关村黑马程序员训练营"</font>是由<b><i>传智播客</i></b>联合中关村软件园、CSDN， 并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展， 而企业招不到优秀人才的困扰。
</p>
<p>
目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地， 并被评为中关村软件园重点扶持人才企业。
</p>
<p>
黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”， 必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确 保学员质量，并降低企业的用人风险。
中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新， 不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。
</p>
<p>
一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。
</p>
<hr color="#ffd700">
<font color="gray" size="2">
<center>
江苏传智播客教育科技股份有限公司<br>
版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882
</center>
</font>
</body>
</html>
- 图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/>
<img src="./image/jingxuan_2.jpg"/>
<img src="../image/jingxuan_2.jpg" align="center">
</body>
</html>
- 列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
早上起床干的事情
<ol type="A" start="5">
<li>睁眼</li>
<li> 看手机</li>
<li> 穿衣服</li>
<li> 洗漱</li>
</ol>
早上起床干的事情
<ul type="disc">
<li>睁眼</li>
<li> 看手机</li>
<li> 穿衣服</li>
<li> 洗漱</li>
</ul>
早上起床干的事情
<ul type="square">
<li>睁眼</li>
<li> 看手机</li>
<li> 穿衣服</li>
<li> 洗漱</li>
</ul>
早上起床干的事情
<ul type="circle">
<li>睁眼</li>
<li> 看手机</li>
<li> 穿衣服</li>
<li> 洗漱</li>
</ul>
</body>
</html>
- 链接标签
- a : 定义一个超链接
- 属性:
- href : 指定访问资源的URL(统一资源定位符)
- target: 指定打开资源的方式
- _self: 默认值:, 在当前页面打开
- _blank: 在空白页面打开
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<a href="http://baidu.com">百度链接</a>
<br/>
<a href="http://baidu.com" target="_self">点我</a>
<br>
<a href="http://www.baidu.com" target="_blank">点我</a>
<br>
<a href="./4_列表标签.html">列表标签</a><br>
<a href="mailto:1464349650@qq.com">联系我们</a>
<br>
<a href="http://wwwbaidu.com"><img src="image/jingxuan_2.jpg"></a>
</body>
</html>
- 块标签
- div : 每一个div占满一整行,块级标签
- span: 文本信息在一行展示,行内标签,内联标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块标签</title>
</head>
<body>
<span>黑马程序员</span>
<span>传智播客</span>
<hr>
<div>黑马程序员</div>
<div>传智播客</div>
</body>
</html>
- 语义化标签: html5中为了提高程序的可读性,提供了一些标签
- < header >: 页眉
- < footer > :页脚
- 表格标签
- table：定义表格
- width：宽度
- border：边框
- cellpadding：定义内容和单元格的距离
- cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
- bgcolor：背景色
- align：对齐方式
- tr：定义行
- td：定义单元格
- th：定义表头单元格
- < caption >：表格标题
- < thead >：表示表格的头部分
- < tbody >：表示表格的体部分
- < tfoot >：表示表格的脚部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
<tr>
<th>编号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr>
<td>1</td>
<td>小龙女</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>杨过</td>
<td>50</td>
</tr>
</table>
<hr>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
<thead>
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr bgcolor="#7fffd4" align="center">
<td>1</td>
<td>小龙女</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>杨过</td>
<td>50</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>3</td>
<td>尹志平</td>
<td>10</td>
</tr>
</tfoot>
</table>
<hr>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
<tr>
<th rowspan="2">编号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr>
<td>小龙女</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td colspan="2">杨过</td>
</tr>
</table>
<hr>
</body>
</html>
案例
- 确定使用table来完成布局
- 如果某一行只有一个单元格，则使用
- 如果某一行有多个单元格，则使用
< tr>
< td>
< table>< /table>
< /td>
< /tr> - 代码
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>旅游网站</title>
</head>
<body>
<table width="100%" align="center">
<tr>
<td>
<img src="image/top_banner.jpg" width="100%" alt="">
</td>
</tr>
<tr>
<td>
<table width="100%" align="center">
<tr>
<td>
<img src="logo.jpg" alt="">
</td>
<td>
<img src="search.png" alt="">
</td>
<td>
<img src="hotel_tel.png" alt="">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" align="center">
<tr bgcolor="#ffd700" align="center" height="45" >
<td>
<a href="./综合案例_旅游网站.html">首页</a>
</td>
<td>
门票
</td>
<td>
门票
</td>
<td>
门票
</td>
<td>
门票
</td>
<td>
门票
</td>
<td>
门票
</td>
<td>
门票
</td>
<td>
门票
</td>
<td>
门票
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="banner_3.jpg" alt="" width="100%">
</td>
</tr>
<tr>
<td>
<img src="icon_5.jpg" alt="">
黑马精选
<hr color="#ffd700" >
</td>
</tr>
<tr>
<td>
<table align="center" width="95%">
<tr>
<td>
<img src="./jiangxuan_1.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 899</font>
</td>
<td>
<img src="./jiangxuan_1.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 899</font>
</td>
<td>
<img src="./jiangxuan_1.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 899</font>
</td>
<td>
<img src="./jiangxuan_1.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 899</font>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="icon_6.jpg" alt="">
国内游
<hr color="#ffd700" >
</td>
</tr>
<tr>
<td>
<table align="center" width="95%">
<tr>
<td rowspan="2">
<img src="guonei_1.jpg">
</td>
<td>
<img src="./jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 899</font>
</td>
<td>
<img src="./jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 899</font>
</td>
<td>
<img src="./jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 899</font>
</td>
</tr>
<tr>
<td>
<img src="./jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 899</font>
</td>
<td>
<img src="./jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 899</font>
</td>
<td>
<img src="./jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 899</font>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="footer_service.png" alt="" width="100%">
</td>
</tr>
<tr>
<td align="center" bgcolor="#ffd700" height="40">
<font color="gray" size="2">
江苏传智播客教育科技股份有限公司<br/>
版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882
</font>
</td>
</tr>
</table>
</body>
</html>
5081
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
