内容索引
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©, 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" />
<!--
相对路径
* 以.开头的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" >
<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">¥ 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">¥ 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">¥ 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">¥ 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">¥ 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">¥ 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">¥ 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">¥ 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">¥ 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">¥ 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">¥ 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">¥ 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">¥ 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">¥ 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;¥ 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" >
<font color="gray" size="2">
江苏传智播客教育科技股份有限公司
版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882
</font>
</td>
</tr>
</table>
</bod) ` P ! ( y U V ?y>
</html>特别声明：本站所收录作品、热点评论等信息来源互联网，目的只是为了系统归纳学习和传递资讯所有作品版权归原创作者所有，与本站立场无关，图文源自网络，如有侵权，请联系删除！请联系我们邮箱：908164873@qq.com/电话：187-8421-3206，我们将做删除处理！
