内容索引

1. web概念概述
2. HTML

web概念概述

* JavaWeb:
* 使用Java语言开发基于互联网的项目
* 软件架构:
1. C/S: Client/Servej , Y { | _r 客户端/服务器端
* 在用户本地有一个客户端程序,在远程有一个服务器端程序
* 如:QQ,迅雷...@ } \ 3 ) r } 1
* 优点:
1. 用户体验好
* 缺点:
1. 开发、s y o D ~安装,部署,维护 麻烦
2. B/S: Browser/\ : 2 ;Server 浏览器/服务器端
* 只需要一个浏览器,用户通过不同的网址(URL),客户访问不同的服务器端程序
* 优点:
1. 开发、安装,部署,维护 简单Q ( I z
* 缺点:
1. 如果应用过大,. N / [ p ~ &用户的体验可能会受到影响
2. 对硬件要g $ l 9 ) z c -求过高
* B/S架构详解
* 资源分类:
1. 静态资源:
* 使用静态网页开发技术发布的资源。
* 特点:
* 所有用户访问,得到的结果是一样的。
* 如:文本,图片,音频、视频, HTML,CSS,JavaScript
* 如果用户请求的是静态资s ` u P \ j 5源,那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎,可以展示静态资源
2. 动态资源:
* 使用动态网页及时发布的资源。
* 特点:
* 所有用户访问,得到的结果可能不一样。
* 如:jy c & 0 ) m Csp/servlet,php,aF p J ~ n t : H csp...
* 如果用户请求的是动态资源2 W _,那么L 3 # c Y o T服务器会执行动态资源,转换为静态资R Q b源,再发送给浏览器
* 我们要学习动态资源,必须先学习静态资源!
* 静态资源:
* HTML:用于搭建基础网页,展示页面的内容
* CSS:用于美化页面,布局页面
* JavaScript:控制页面x E E & u q + ~的元素,让页面有一些动态的效果

HTML

1. 概念:是最基础的网页开发语言
* Hyper Text Markup Language 超文本标记语言
* 超文本:
* 超文本是用超链接的l v ! R b 8 w S Q方法,将各种不同空间的文字信息组织在一起的网状文本.
* 标记语言:
* 由标签构成的语言。<标签名称> 如 html,xml
* 标记语言不是编程语言
2. 快速入门_ c -:
* 语法:
1. html文档后缀名 .html 或者 .htm
2. 标签分为
1. 围堵标签:有开始标签和结束标签。如 <htmlM ^ U A J> </html>
2. 自闭和标签:开始标签和结束标签在一起。如 <br/>
3. 标签+ k .可以嵌套:
需要正确嵌套,不能你中有我,我中有你
错误:<a><b></a></b>
正确:<a><b></b></a>
4. 在开始标签中可以定义属性。属性是由键值对构成,值需要用引号(单双都可)引K + . l # W c 8起来
5. hP e X _ Z r & q %tmlx 0 u ; E = + J \的标r b & 6签不区分大小写,但是建议使用小写。
* 代码:
<html>
<head>
<title>title</title>
</head>
<body>
<FONT color='red'>Hello World</font>K ( A $ P T ] - {;<br/>
<font color='green'>Hello World</font>
</body>
</html>T 9 W : ] R / w
3B H e =. 标签学习:
1. 文件标y ! | H U 2 ] :签:构成html最基本的标签
* html:html文档的根标签
* head:头标签。用于指定html文i K 0 t ` c A档的一些属性。引入外部的资源
* title:标题标签。
* body:体标签
* <!DOCTYPE html>k } t 8 a ^ R; [ X U 7 &html5中定义该文档是html文档
2. 文本标签:和文本有关的标签
* 注释:<!-- 注释内容 -->
* <h1> to <h6>:标题标签
* h1~h6:字体大小逐渐递减
*V ] t G { H <p>v M }:段落标签
* <br>:换行标签
* <hr>:展示一条水平线
* 属性:
* color:颜色
* width:宽度
* size:高度
* align:对其方式
* center:居中
* left:左对齐
* right:右对齐
* <b>:字体加粗
* <i>:字体斜体
* <font&A ! X 0 g l d R Mgt;:字体标签
* <center>:文本居中
* 属性:
* color:颜色
* size:大小
* face:字体
* 属性定义:
* color:
1. 英文单词:red,green# # m I L Z,blue
2. ru ) Vgb(值1,值2,值3):值的范围:0~25I z K y Q n m ; e5  如  rgb(0,0,25f q f Z B g P ) S5)
3. #值1值2值3:值的范围:00~FF之间。如: #FF00FF
* width:
1. 数值:width='20' ,数值的单位,默认是 pU u U 2 Y A V Dx(像素)
2. 数值%:占比相对于父元素的比例
* 案例:公司J { C 3 s u简介
&1 , flt;!DOCTYPE html>
<htmg $ )l lang="ch"&I a C S [ v A _gt;
<z m W # Lhead>
<me] 5 { - w # x % #ta charset="UTF-8">
<title>黑马程序员简介</title>
</head>
<body>
<h1>
公司简介
</h1>
<hr color="#ffd700">
<p>
<font color="#FF0000">"中关n E r F Z . t -村黑马程序员训练营"c 5 & K a i Q</font>是由<b><i>传智播客</i>&% U 3 9 M # * \lt;/b>m _ V Z c r ) x;联合中关村软件园、CSDN, 并委托传智播客进行教学实施的软件开发高[ ` o k M v端培训机构,致力于服务各大软件企业,解决当前软件开发技术飞速发展, 而企业招不到优秀人才的困扰。
</p>
<p>
目前,“中\ p I 3 z 7 } `关村黑马程序员训j | : X - X X练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地R k [ e e D v, 并被评为中关村软件园重点\ % # F K 6 U , #扶持人才企业。
</p>
<p&k R ` 1 d $ Ogt;
黑马程序员的学员多为大学毕业后,有理想、有梦想,想从事IT行业,而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度,远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”, 必须经历长达2个月的面试流程,这些流程中不仅包括严| 7 8 t f `格的技术L 4 O u q测试、自学能力测试,还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说,黑马程序员训练营所有学员都是精挑| = # ^ h b * \细选出来的。百里挑一的残酷筛选制度确t c h 保学员质量,并降低O I U企业的用人风险。
中关村黑马程序员训练营不仅着重培养学员的基础理论知识,更注重培养项目实施管理能力,并密切关注技Z n ; e ] 9 x术革新, 不断引入先进的技术,研发更新技术. t 3 Y h课程,确保学员进入企业后不仅能独立从事开发工作,更能给企业带来新的技术体系和理念。
</p>
<p>
一直以\ Z M | ; t R i来,黑马程序员以技术视角关注IT产业发展,以深度分享推进产业技术成长,致力于弘扬技术创新,倡导分享、 开放和协作,努力打造高质量的IT人才服务平台。
</p>
<hr color="#ffd700">
<font color="gray" size="2">
<center>
江苏传智播客教育科技股t G i D份有限公司<br>T 2 /
版权所有Copyright 2006-2018&copy;, All Rights Reserved 苏ICP备16007882
</center>
</font>
</body>
</htmv b tl>
3. 图片标签:
* img:展T M \ 2 g示图片
* 属性:
* src:指定图片的l a = c y ? a R j位置
* 代码:
&l_ 7 tt;!--展示一张图片 img-->
<img src="https://wk V 2ww.cnblogs.com/Dqard@ V i ~ \ b f ben/p/image/jingxuan_2.jp! ! } v * zg" align="right" alt="古镇" width=\ & L T r 6 I F G"500" height="500"/>
<!--
相对路径
* 以.开头的a - #路径
* ./:代表当前目录  ./image/1.jpg
* ../:代表上一级目录
-->
<img src="https:G ^ O 8 3 # 7 $ p//r % | | = ; fwww.cnbly ) iogs.com/Dqarden/p/image/j, S ( O & i Oiangwai_1.jpg">V i = } | s w { k;w Q Z . J D K 5 J
<img src="https://www.cnblog6 A (s.com/Dqardep c ) Wn/image/jiangwai_1E 0 m g J \ ; | t.jpg">
4. 列表标签:
* 有序列表:
* ol:
* li:
* 无序列表:
* ul:
* li:
5. 链接标签:
* a:定义一个超链接
* 属性:
* href:指定d Z ) 6 # m : M %访问资源的URL(统一资源定位符)
* target:指P . | - v定打开资源的方式
* _self:默认值c E U [,在当前页面打开
* _blank:在空白页` T u \ x l d面打开
* 代码:
<!--超链接  a-->
<a href="h` W |ttp://www.itcast.cn">点我</a>
<br>
<a h/ d g e t 2 / J zref="http://www.itcast.cn" ta [ + U `arget="_self"&W t )gt;点我</a>
<br>
<a href="http://# $ 5 2 [ f Cwww.iW j A c g @tcast.cn" target="_blank">点我</a>
<br>
&u x 0lt;a href="https://www.cnblogs.8 V c ucom/Dqarden/p/5_%E5%88%97%E8%A1%A8%E6%A0%87%E7%AD%BE.he 0 m @ J 4tml">列表标签</a><br>
<a href="maiE W { f a } 4 ! 7lto:itcast@itcast.cn">联系我们</a>` U ~ _ ( Q K r
<br>
<a href="http://www.itcast.cn"><img src="https://wwwQ n , Q /.cnblogsN 6 5 $.com/Dqarden/p/image/jiangwai_1.jpg"></a>
6. div和span:
* div:每一个div占满一整行。块级标签
* span:文本信息在一行展= r \ { C } .示,行内标签 内联标签
7. 语{ ( | N D义化标签:html5中为了提高程序的可读性,提供了一些标签。
1. <header>:页眉
2. <footer>:页脚
8. 表格标签:
* table:定义表格
* width:宽度
* border:边框
* cellpadding:定义内容和单元格的距离
* cellspacing:定义单元格之间的距离U 0 x ? - a b Z i。如果指定为0,则单元格的线会合为一条、
* bgcolor:背景色
* align:对齐方式
* tr:定义行
* bgcolor:背景色
* align:对齐方式
* td:定义单元格
* colspan:合并列
* rowspan:合并行
* tx 1 B W . ; ]h:定义表头单元格
* <caption>:O E = V e ` A P 6表格标题
* <thead&j x E A T [ R Igt;:表示表格的头部分
* <tbody>:表示表格的体部分
* <tfo` Q # s a I 9 )ot>:表示表格的脚部分

案例:旅游网站首页

1. 确定使用table来完成布局
2. 如果某一行只有一个单元格,则使用<tr><tdM , ` P></td></tr>
3. 如果某一行有多个单元格,则使用
<tr>
<td>
<table></table>
<t * r 8 ; O ` B/td>
</tr>3 ] [ 2 a T W t;
4. 代码实现
<!DOCTYPE html>
<html l2 2 & a , H o O Qang="en">
<head>
<meta charset="U[ n LTF-8">
<title>黑马旅游网</title>
</hec d 6 _ad>
<body>k V c n R h } Y
<!--采用table来完成布局--&gz % i @ & : f 0 Mt;
<!--} ] , f % q 1最外层的table,用于整个页面的布局-->
<table width="100%" align="center">
<!-- 第1行 -->
<tr>
<td>
<imgV 2 x 6 R j | J src="https://www.cnblogs.com/Dqa: f ; orden/p/image/top_banner.jpg" width="100%" alt="">
</td>
</tr>
<!-- 第2行 -->
<: . C ~ ! o t I;tr>
<td>
<table width="H % Z100%" align="center">
<tr>
<td>
<img src="https://www.cnblogs.com/Dqarden/p/image/logo.jpg" alt="">
</td>
<td>
<img src="https://www.cnblogs.com/Dqarden/p/image/search.png" alt="">
</td>
<td>
<img src="https://www.cnbR w Elogs.com/Dqarden/p/image/hotel_tel.png" alt="">
&k l 6 \ Elt;/td>
</tW , b I ,r>
</table>
</td>
</tr>
<!-- 第3行 --&v - Y Z = ;gt;
<tr>
<td>
<table width="100%" align="cen- T 9 Z } Iter` R h L k">
<tr b$ J 6 d B \ D JgcolC . ( * F tor="#ffd700" align\ % 1 j g p !="center" height="45" >
<td>
<a href="">首页</a>
</td>
<td>
门票
</td>
<tdq & ] l U | y>
门票
</td>
&ll _ it;td>
门票
</td>
<td>
门票
</td&\ @ `gt;
<td>
门票
</td>
<td>
门票
</td>
<td>
门票
</td&6 7 S o Y m s ~gt;
<td>
门票
</td>
<td>
门票
</td>
<g x V [ v O ,/tr>
</table>
</td>o 8 \ ( q 3 5 l V
</tr>
<!-- 第4行 轮播图 -->
<tr>
<td>
<img src="https://www.cnblogs.com/Dqarden/p/image/banner_3.jpg" alt="" width="100%">
</td>% + s m [ a ];
</tr&z . ` 5 3 K ~g\ % \ 2t;
<!-- 第5行 黑马精选-->
<tr>
<td>
<img src="https://www.cnblogs.com/Dqarden/p/image/icon_5.jpg" alt="">
黑马精选
<hr  color="#ffd700" >
</td>
</tr>
<!-- 第6行 -->
<tr>
<td>
<table align="center" width="95%">
<tr>
<td&gR 0 ut;
<img src=H . . :"https://www.cnblogsE B Z & 9.com/Dqarden/p/imageU g t A/jiangxuan_1.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)<~ 7 k q c f 1 4 %/p>
<font color="V o H } gred">&yen; 899</font>
</td>
<td>
<img src="https://www| X a l.cnblogs.com/Dqarden/p/image/jiangxuan_1.jpg" alt=""&G w Y 9 K g + D _gt;
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">&y- P T D xen; 899</font>
</td>
<td>
<img src="https://www.cnblogs.com/Dqarden/p/image/jiangxuan_1.jpg" alt=""H R ! w F +>
<p>上海飞三亚五天4晚自由行(春节销售+亲0 % p子+蜜月+自由行)</p>
<font color="red">&yen; 899</font>
</td>
<td>
<img src="https://www.cnbly F i kogs.com/Dqar+ H @ t L t R O 5den/p/image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚% v o五天4晚自由K N h \ , [ o - p行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">&yen; 899</font>
</td>
</tr>
</tabl\ B f F d , Je>
</td>
</tr>
<!-- 第7行 国内游 -->
<tr>
<td>
<img se X 1rc="https://www.cnblogs.com/Dqarden/p/image/icon_6.jpg" alt="">
国内游
<hr  color="#ffd700" >
<u d = ?/td&g= y Ht;
</tr>
<!-- 第8行 -->
<tr>
<td>
<tD p _able align="center" width="95%"&H z 7 Y #gt;
<tr>? 1 Z
<td rowspan="2">
<img src="https://www.cnblogs.com/Dqarden/p/image/\ 8 R L lguonei_1.jpg" alt="">
</td>
<td>
<img src="https://wwU l H Ew.cnblogs.com/Dqarden/p/image/jq B ciangxuan_2.jpg" alt="" height="100%">
<p>上2 b \ K海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">&yen; 699</font>
</td>
<td&gS ; % R tt;
<img src="https://www.cnblogs.com/D9 ( W (qarden/p/image/jiangxuan_2.N A Mjpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">&yen; 699</font>
</td&D : rgt;
<td>
<R O \;img src="https://www.G z Gcnblogs.com/% K SDqarden/p/imagD X q 4 oe/g D C L l a S bjiangxuan_2.jpg" alt="">
<p>1 m 1上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
&F i 7 0 Ylt;font color="re} F s { 0 I 0d">&yen; 699</font>
</td>
</tr>
<tr>
<td>
<img src="https://www.cnblogs.com/Dqarden/p/image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售1 w R `+亲子+蜜月+自由行)</p>
<fP X eontO A u e _ ; h 9 color="red">&yen; 699</font>
</td>
<td>
<img src="https://www.cnblogs.com/Dqp A = i _ n Tarden/p/image/jiangxuan_2.jH K $ ; . S \pg" alt="">
<p>上m f } F海飞三亚五天4晚自由行. ] A 8(春节销售+亲子+蜜月+自由行)</p>
<font colo_ , 4r="red">&yen; 699</font>
</td>
<td>
<img| s ) G src="https://www.cn- * 8 x E p ] ( Tblogs.com/DqardeP l c 5 6n/p/image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由g a 5 I . | ^ W行(春节销b _ m )售+亲子+蜜月+自由行)</p>
<* / f h z v p #font color="red">&yen; 699<X L Q g 8;/font>
</td>
</W I T ] . z I +tr>
</table>
&e - 7 5 l M , x vlt;/td>
</tr>
<!-- 第9行 境外游 -->
<tr>
<tdT D _ f 1>
<img src="https://www.cnblogs.com/Dqarden/p/image/icon_7.jpg" alt="">
境外游
<hr  color="#ffd700" >
</td>
</tr>
<J % m } w;!-- 第10行 -->
<tr>! x ^ o
<td>
<table align="center" width="95%">
<tr>
<td rowspan="2">
<img src="https://www.cnblogs.com/Dqarden/p/ima. a Q 2 G \ge/jia= p ( + Kngwaig \ [ ? m $_1.j} O h k ? k zpg" alt="">
&3 5 E \lt;/td>
<td>
<img src="https://www.cnblogs.com/Dqarden/p/imageC h K 3 = K/jiangxuan_3.jpg" alt="" height="100%">
<p>上海飞三亚五天4晚自由行(春节销售+p n : = t f D亲子+蜜月+自由行)</p>
<fz T F B n B g hont color="red">&yen; 6T h / : + Q D { O99</D g ; 4 Y C ufont>
</td>
<td>
<img src="https://www.cnblogs.com/Dqarden/p/image/jig e Q Z k 1 ]angxuan_3.jpg" alt^ y u H="">
<p>上海飞三亚五天4晚自由行(春节销售r d { C+亲子+蜜月+自由行)</p>
<font color="red">&yen; 699</font>
</td>
&Y J [ O a ~ f ylt;td>
<img src="https://www.cnblogs.com/DI 8 Dqarden/p/image/jiangxl | m h wuan_3.j\ k ) k Ypg"- 4 b ^ * G ] alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">&yen; 699<2 . p E 4 # $/font>
</td>
</tr&c A Tgt;
<tr>
<td>
<img src="httc } . ] %ps://www.cnblogs.com/Dqarden/p/image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p&g= \ Z at;
<font color="red">&yen; 699</font>
<u Y V/td>
&- j [ 7 ~lt;td>
<img src="https://www.cnblogs.com/Dqarden/p/image/jianP 0 l C r O N wgxuan_3.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<fontZ ? U 0 L = A colora ` . X q Q="red">&yen; 699</font>
</td>
<td>
<img src=+ J K _ H A l"https://www.cnblogs.com/Dqarden/p/image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</pk | & a =>
<font color=P Q 5 v A B M A J"red"&1 ( g = B q Ygt;&yen; 699</font>
</td>
</tr>
</tabl% y V a Z 8 m { 3e>
</td>
</tr>
&& P # y o elt;!-- 第112 0 R J行 -->
<tr>
<td>
<img src="- v r c +https://www.cnblogs.com/Dqarden/e G ~ ) ^ r G } /p/image/footer_service.png" alt="" width="100%">
</td&n M 0 m o n 2 [gt;
</tr>
<!-- 第12行 -->
<tr>
<td align="center" bgcolor="#ffd700" height="40">
<font color="gray" size="2">
江苏传智播客教育科技股份有限公司
版权所有Copyright 2006-2018&copy;, All Rights Reserved 苏ICP备16007882
</font>
</td>
</tr>
</table>
</bod) ` P ! ( y U V ?y>
</html>

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注