JAVA_web介绍基础 HTML
软件的结构：
C/S(Client Server)结构的软件：
比如： QQ、 *飞车、 飞信 、 迅雷
cs结构的软件的缺点：更新的时候需要用户下载更新包然后再安装，程序员则需要开发客户端与服务端。
cs结构软件的优点： 减轻服务端的压力，而且可以大量保存数据在客户端。
B/S（Browser Server）结构的软件：
比如： 微博 、 webQQ 、 web飞信、 web迅雷
优点：软件版本升级的时候不需要用户下载更新包，直接更新服务器的程序即可。程序员则只需要开发服务端而已。
缺点：增加了服务端的压力，bs结构的软件不能保存大量的 数据在用户机上。
网站的类别:
静态网站: 静态网页中的数据都是写死的，如果需要修改网页的内容是需要直接修改网页的代码。 是没有数据库提供数据给它。
动态网站: 动态网站的数据是来自于数据库的，背后是有一个后台程序管理页面中数据的。
html 语言就是开发网页的基础语言：
html(超文本标记语言)
标记 : 该门语言是有标签来构成的。 学习html不用怎么去理解，只要需要记住标签的作用即可。
html语言的特点：
1. html语言是与平台无关的，任何平台只需要安装了浏览器都可以运行。
2.html 是不区分大小写的。
html语言的结构：
<html> html语言的根标签.
<head></head> 网页的头信息
<body></body> 网页的体部分
</html>
html的注释： <!-- 注释的内容 -->
html头信息介绍
<html>
<!-- 头信息的作用
1. 可以设置网页的标题。
2. 可以通知浏览使用指定的码表解释html页面.
3.
-->
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>这个是我的第一个网页</title>
<meta name="keywords" content="java培训,php培训,C#培训，羊肉、狗肉、猪肉"/><!--一个网页的关键字最好是3-4个。 seo(搜索引擎优化) -->
</head>
<!-- 网页的内容应该写在body标签体内的。 -->
<body>
今天天气不错...
</body>
</html>
常用标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html常用的标签</title>
<!--
html常用的标签：
<h1>~<h6> 表示是一个标题
<p> 段落标签
<hr/> 水平线标签
<br/> 换行标签
<sub> 下标
<sup> 上标
<pre> 原样标签： 原样标签会保留空格和换行符。
<ol> <li> 有序的列表标签、
<ul> <li> 无序的列表标签。
项目列表标签(dl dt dd)
行内标签(span)
块标签<div> div标签的内容会独立占一行。
html的标签作用：用于描述一个网页的结构的。
如果需要操作数据的样式：通过标签的属性操作的。
标签的类型：
1. 有开始标签与结束标签。 <p> </p> 需要把网页的数据内容封装到标签中。
2. 开始标签与结束标签都是在一个标签体内的。 比如： <hr/> 功能单一不需要封装数据到标签中。
-->
</head>
<body>
<h1 align="center">0118java就业班开班了</h1>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<p> 今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，
今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，
今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错。</p>
我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，
今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，
今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了。
<hr/>
水的化学式：H<sub>2</sub>O
<br/>
2的16次方：2<sup>16</sup>
<hr/>
<pre>
静夜思
床前明月光，疑是地上霜。
举头看屏幕，低头写代码。
</pre>
<hr/>
今晚吃啥好呢？
<ol type="a">
<li>火锅</li>
<li>烤鸭</li>
<li>烤鱼</li>
</ol>
中午吃啥好呢？
<ul type="square">
<li>木桶饭</li>
<li>猪脚饭</li>
<li>白切鸡</li>
</ul>
公司的组织结构：
<dl>
<dt>技术总监</dt>
<dd>码农1号</dd>
<dd>码农2号</dd>
<dd>码农3号</dd>
<dd>码农4号</dd>
<dt>人事总监</dt>
<dd>妹子1号</dd>
<dd>妹子2号</dd>
</dl>
<span>我现在在学习html，</span><div>后天学习css+javascript</div>
</body>
</html>
实体标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<!--
为什么要学实体标签：
因为> < 等一些符号在html页面中是有着特殊含义，这些字符如果需要在页面中显示，这时候就应该使用实体标签。
常用的实体字符:
空格
小于号 <
大于号 >
-----------------------------
人民币 ¥；
版权 ©
商标 ®
-->
<body>
段落标签是使用<p>标"签"<br/>
该毛衣的价格：¥298<br/>
<<深入javaweb>>该书版权归属于：©张孝祥
<hr/>
本次活动最后的解释器归属于：®腾讯
</body>
</html>
媒体标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<!--
媒体标签：
<embed></embed>
hidden ： 设置隐藏插件是否隐藏。
src ：用于指定音乐的路径
<embed src="1.mp3" ></embed>
<marquee> 飘动标签
direction : 指定飘动的方向
scrollamount : 指定飘动的速度。
loop :指定飘动的次数
-->
<marquee loop="-1" scrollamount="30" direction="right"><font size="+6" color="red"> 我飞起来了...</font></marquee>
<body>
</body>
</html>
超链接标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<!--
<a> 超链接标签
a标签常用的属性：
href : 用于指定链接的资源
target: 设置打开新资源的目标。 _Blank 在独立的窗口上打开新资源 _self 在当前窗口打开新资源
file: file协议（文件协议）这种协议主要是用于搜索本地机器的资源文件的。
格式：
file:\\\f:\美女\1.jpg
a标签的原理：
1. a标签的href属性值如果是以http开头的，那么浏览器会马上启动http解释器去解释该网址，首先
会在本地机器去找一个hosts文件， 如果在hosts文件上该域名没有对应的主机，那么浏览器就去到对应的
dns服务器去寻找该域名对应的主机号。如果找到了对应的主机，那么该请求就会发给对应的主机。
2. 如果a标签的href属性值没有以任何协议开头，那么浏览就会启动file协议解释器去解释该资源路径。
3. 如果a标签的href属性值并不是以http开始，而且其他 的一些协议，那么这时候浏览器就回去到我们本地的注册
表中去查找是否有处理这种协议 的应用程序，如果有，那么马上启动该应用程序处理该协议。
邮件 的协议： mailTo
迅雷的协议： thunder
超链接标签的作用：
1. 可以用于链接资源。
2. 锚点点位.
1. 首先编写一个锚点 锚点的格式： <a name="锚点名字"> 数据</a>
2. 使用a标签 的herf属性连接到锚点出。 href=”#锚点的名字“
-->
<body>
<a href="www.baidu.com">百度</a>
<a target="_blank" href="2常用的标签.html">带你去看1.html</a><br/>
如果有需要请发送邮件至：<a href="mailTo:[email protected]">[email protected]</a><br/>
<a href="thunder://abc/aa一个人的武林.avi">一个人的武林(高清枪版).avi</a>
<a name="top">顶部</a> <!--锚点 -->
.......................................................................................<br/>
.......................................................................................<br/>
.......................................................................................<br/>
.......................................................................................<br/>
.......................................................................................<br/>
.......................................................................................<br/>
.......................................................................................<br/>
.......................................................................................<br/>
.......................................................................................<br/>
.......................................................................................<br/>
.......................................................................................<br/>
.......................................................................................<br/>
.......................................................................................<br/>
.......................................................................................<br/>
.......................................................................................<br/>
.......................................................................................<br/>
.......................................................................................<br/>
.......................................................................................<br/>
.......................................................................................<br/>
.......................................................................................<br/>
.......................................................................................<br/>
<a href="#top">回到顶部</a></body>
</html>
图片标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<!--
<img>图片标签：
img标签常用的属性:
width： 设置图片宽度
height 设置图片高度
alt: 如果图片资源无法找到，那么就显示对应的文字对图片进行说明。
热点图:
-->
</head>
<body>
<img src="11.jpg" alt="这个是路飞" width="400" height="300" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="171,178,304,227" href="http:\\www.baidu.com" target="_blank" />
<area shape="circle" coords="189,135,27" href="2常用的标签.html" target="_blank" />
</map>
</body>
</html>
表格标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<!--
<table>表格标签
表格使用到的标签：
<table> 表格
<tr> 行
<td> 单元格
<th> 表头 默认的样式是居中，加粗。
<caption> 表格的标题
表格常用的属性：
border 设置表格的边框
width : 设置表格的宽度
height: 设置表格的高度的。
colspan: 设置单元格占据指定的列数。
rowspan : 设置单元格占据指定的行数。
-->
<body>
<table align="center" border="1px" bordercolor="#0066CC" width="400px" height="300px">
<caption>期末考试成绩表</caption>
<thead>
<tr>
<th>姓名</th>
<th>分数</th>
<th>人品</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">凡江</td>
<td>98</td>
<td>优</td>
</tr>
<tr>
<td>100</td>
<td>优</td>
</tr>
<tr>
<td>居东东</td>
<td>99</td>
<td>非常好</td>
</tr>
<tr align="center">
<td>综合测评</td>
<td colspan="2">非常好</td>
</tr>
</tbody>
</table>
</body>
</html>
表单标签
表格组成部分
代码案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<!--
表单标签： 表单标签的作用是用于提交数据给服务器的。
表单标签的根标签是<form>标签
常用的属性：
action: 该属性是用于指定提交数据的地址。
method： 指定表单的提交方式。
get : 默认使用的提交方式。 提交的数据会显示在地址栏上。
post ： 提交的数据不会显示在地址栏上。
注意： 表单项的数据如果需要提交到服务器上面，那么表单项必须要有name的属性值。
-->
</head>
<body>
<form action="http://www.baidu.com" method="post">
<!-- 文本输入框 单行-->
用户名：<input name="userName" type="text"/><br/>
<!-- 密码框 -->
密码：<input name="password" type="password"/><br/>
<!-- 单选框 -->
性别： 男<input checked="true" value="man" name="sex" type="radio"/> 女<input name="sex" value="woman" type="radio"/><br/>
<!-- 下拉框 -->
来自的城市：<select name="city">
<option value="BJ">北京</option>
<option value="SH">上海</option>
<option value="GZ">广州</option>
<option value="SZ">深圳</option>
</select><br/>
<!-- 复选框 同一组的复选框name的属性值要一致 -->
兴趣爱好：java <input value="java" name="hobit" checked="checked" type="checkbox" />javascript <input type="checkbox" value="javascript" name="hobit" />android <input value="android" name="hobit" type="checkbox" /><br/>
<!-- 文件上传框-->
大头照：<input name="image" type="file" /><br/>
个人简介:
<!-- 文本域 -->
<textarea name="intro" rows="10" cols="30"></textarea><br/>
<!-- 提交按钮 -->
<input type="submit" value="注册"/>
<!-- 重置按钮 -->
<input type="reset" value="重置"/>
</form>
</body>
</html>
框架标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<!--
框架标签
frameSet ： 一个frameSet可以把一个页面切割成多份。
只能按照行或者列切割。
frame 不能被切割的。 frame是位于frameSet中。
iframe: 在一个网页中分隔一部分的位置显示另外一个网页的的信息。
注意： frameSet标签不能用于body标签体内容。
-->
</head>
<frameset rows="20%,70%,*" >
<frame src="top.html" />
<frameset cols="20%,*">
<frame src="left.html" />
<frame name="center" src="center.html"/>
</frameset>
<frame src="foot.html"/>
</frameset><noframes></noframes>
</html>