目录
0.Web概述：B/S架构，使用Java语言开发基于互联网的项目
HTML
0.Web概述：B/S架构，使用Java语言开发基于互联网的项目
软件架构：
1. C/S:Client/Server 客户端/服务器端
在本地有一个客户端程序，在远程有一个服务器端程序
如：QQ,迅雷
优点：用户体验好
缺点：开发，安装，部署，维护麻烦
2.B/S:Browser/Server 浏览器/服务器端
只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
优点：安装，开发，部署，维护简单
缺点：
1.如果应用过大，用户体验可能受到影响
2.对硬件要求过高
B/S架构详解
资源分类：
1.静态资源
使用静态网页开发技术发布的资源
特点：
所有用户访问，得到的结果是一样的。
如：文本，图片，音频，视频，HTML,CSS,JavaScript
如果用户请求的是静态资源，那么服务其会直接将静态资源发送给浏览器，浏览器内置的静态资源解析引擎可以来监视静态资源
2.动态资源
使用动态网页技术及时发布的资源
特点：
所有用户访问，可能结果不一样
如：jsp/servlet，php，asp...
如果用户请求的是动态资源，那么服务器会执行将动态资源转换为静态资源，在发送给浏览器
要学习动态资源，先学习静态资源
静态资源:
HTML:用于搭建基础网页，展示页面的内容
CSS：用于美化页面，用于页面的布局
JavaScript：控制页面的元素，让页面有一些动态效果
1.概念：最基础的网页开发语言
Hyper Text Markup Language 超文本标记语言
超文本：
超文本是使用超链接的方法，将各种不同空间的文字信息组织再一起的网状文本
标记语言：
由标签构成的语言。<标签名称> 如 html，xml
标记语言不是编程语言
2.快速入门：
语法：
1.html文档后缀名 .html 或者.htm
2.标签分为
1.围堵标签：开始标签和结束标签。例如<html>和</html>
2.自闭和标签：开始标签和结束标签在一起。例如<br/>
3.标签可以嵌套
需要正确嵌套，不能你中有我，我中有你
错误：<a><b></a></b>
4.开始标签可以定义属性，属性是由键值对构成，值需要用引号引起来
5.html的标签不区分大小写，建议使用小写
<html>
<head>
<title>title</title>
</head>
<body>
<font color='red'>Hello Wrold</font><br/>
<font color='green'>Hello Wrold</font>
</body>
</html>
3.标签学习
1.文件标签：构成html最基本的标签
html：html文档的根标签
head：头标签。用于指定html文档的一些属性，引入一些外部的资源
title：定义标题标签。
body：体标签。
<!DOCTIYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
title
</body>
</html>2.文本标签：和文本有关的标签
<! -- 注释内容 -->:注释标签
<h1>~<h6>:标题标签，字体从大到小
<p>:段落标签
<br>:换行标签
<hr>:水平线
属性：
color：颜色
width：宽度
size：高度
align：对其方式
center：居中
left：左对齐
right：右对齐
<b>:字体加粗
<i>:字体斜体
<font>:字体标签
属性定义：
color：
1.英文单词：red,green,blue
2.rgb(值1，值2，值3）：值的范围：0~255 如rgb(0,0,255)
3.#值1值2值3：值的范围：00~FF之间.如：00FF00
width:
1.数值：width='20',数值的单位，默认是px(像素)
2.数值%:占比相对于父元素的比例
<center>:文本居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>黄鹤楼</title>
</head>
<body>
<!-- 注释 -->
<!--br 换行-->
白日依山尽，<!--<br/>--><br>
黄河入海流。
黑马旅游网
<!--标题标签 h1~h6-->
<h1>黑马旅游网</h1>
<h2>黑马旅游网</h2>
<h3>黑马旅游网</h3>
<h4>黑马旅游网</h4>
<h5>黑马旅游网</h5>
<h6>黑马旅游网</h6>
<!--段落标签 p-->
<p>
1.黑马旅游黑马旅游黑马旅游黑马旅游黑马旅游黑马旅游黑马旅游黑马旅游黑马旅游黑马旅游黑马旅游黑马旅游黑马旅游黑马旅游
</p>
<p>
2.黑马旅游黑马旅游黑马旅游黑马旅游黑马旅游黑马旅游黑马旅游黑马旅游黑马旅游黑马旅游黑马旅游
</p>
<p>
3.黑马旅游黑马旅游黑马旅游黑马旅游黑马旅游黑马旅游黑马旅游黑马旅游黑马旅游黑马旅游黑马旅游黑马旅游黑马旅游黑马旅游黑马旅游黑马旅游黑马旅游黑马
</p>
<!--hr 显示一条水平线-->
<hr color="'red" width="200" size="100" align="left"/>
<br>
<hr color="'red" width="50%" size="100" align="left"/>
<hr/>
<!--加粗 b-->
白日依山尽<br>
<b>白日依山尽</b>
<!--斜体 i-->
<br>
<br>
<br>
<br>
<i>白日依山尽</i>
<!--字体标签-->
<br>
<font color="red" size="10" face="楷体">白日依山尽</font>
<br>
<font color=FFFF00 size="10" face="楷体">白日依山尽</font>
<br>
<font color=FFFF00 size="10" face="楷体">白日依山尽</font>
<br>
<center><font color=FFFF00 size="10" face="楷体">白日依山尽</font>
</center>
</body>
</html>
3.图片标签：
img:展示图片
属性：
src：指定图片的位置
相对路径
*以.开头路径
./:代表当前目录 ./image/1.jpg (默认)
../:后退上一级目录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<!--展示一张图片-->
<img src="Burner-4k.jpg"align="right" alt="壁纸" width="300" height="200"/>
<!--
相对路径
*以.开头路径
./:代表当前目录 ./image/1.jpg (默认)
../:后退上一级目录
-->
<img src="./Burner-4k.jpg"align="left" alt="壁纸" width="300" height="200"/>
</body>
</html>4.列表标签：
有序列表：
ol：
li：
无序列表：
ul：
li：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<!--有序列表-->
早上起床干的事情
<ol type="A" start="6">
<li>睁眼</li>
<li>看手机</li>
<li>穿衣服</li>
<li>洗漱</li>
</ol>
早上起床干的事情
<UL >
<li>睁眼</li>
<li>看手机</li>
<li>穿衣服</li>
<li>洗漱</li>
</UL>
<!--早上起床干的事情-->
<!--<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>5.链接标签：
a:定义一个超链接
属性：
href：指定访问资源URF（统一资源定位符）
target:指定打开资源的方式
_self:默认值，在当前页面打开
_blank：在空白页面打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>连接标签</title>
</head>
<body>
<!--超链接-->
<a href="http://www.baidu.cn">点我</a>
<br>
<a href="http://www.baidu.cn" target="_self">点我</a>
<br>
<a href="http://www.baidu.cn" target="_blank">点我</a>
<br>
<a href="5_列表标签.html">列表标签</a>
<br>
<a href="mailto.itcast@itcast.cn">联系我们</a>
<br>
<a href="http://www.baidu.com"><img src="Burner-4k.jpg"></a>
</body>
</html>6.块标签
div：每一个div占满一整行。块级标签
span：文本信息在一行内展示，行内标签 内联标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块标签</title>
</head>
<body>
<!--
div 每一个div占满一整行，块级标签
span 文本信息在一行展示，行内标签 内联标签
-->
<span>黑马程序员</span>
<span>传智播客</span>
<hr>
<div>黑马程序员</div>
<div>传智播客</div>
</body>
</html>7.语义化标签:html5中为了提高程序的可读性提供的标签
1.<header>
2.<footer>
8.表格标签：
table:定义表格
width：宽度
border：边框
cellpadding：定义内容和单元格的距离
cellspacing：定义单元格之间的距离，如果指定为0，单元格的线会合为一条
bgcolor:背景色
align：对齐方式
tr:定义行
bgcolor：背景色
align：对齐方式
td：定义单元格
colspan：合并列
rowspan：合并行
th：定义表头单元格
<caption>：表格标题
<thbody>表示表格的体部分
<thead>:表示表格的头部分
<tfoot>：表示表格的脚部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<table align="center" bgcolor="#ffe4c4" border="1" width="50%" cellpadding="10%" cellspacing="0">
<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 align="center" bgcolor="#ffe4c4" border="1" width="50%" cellpadding="10%" cellspacing="0">
<caption>学生信息表</caption>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr bgcolor="gray" align="center">
<td>1</td>
<td>小龙女</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>2</td>
<td>杨过</td>
<td>50</td>
</tr>
</tfoot>
</table>
<hr>
<table align="center" bgcolor="#ffe4c4" border="1" width="50%" cellpadding="10%" cellspacing="0">
<tr>
<th rowspan="2">编号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr>
<td>小龙女</td>
<td>100</td>
</tr>
<tr>
<td bgcolor="#f0f8ff">2</td>
<td colspan="2">杨过</td>
</tr>
</table>
</body>
</html>
12万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
