java第二十一天（html）
案例一：网站信息显示页面
1.什么是HTML？(Hyper Text Markup Language:超文本标记语言)
超文本：功能比普通文本更增强大
标记语言：使用一组标签对内容进行描述的一门语言(它不是编程语言)
2.为何要学习HTML？
html
3.语法和规范？
HTML文件都是以.html或者.htm结尾的。建议使用.html结尾。
HTML文件分为头部分(<head></head>)和体部分(<body></body>)
HTML标签都是由开始标签和结束标签组成。(<hr />)
HTML标签不区分大小写，建议使用小写。编程
4.HTML相关标签学习
标题标签<hn />
水平线标签 <hr />
段落标签<p></p>
字体标签<font></font>
属性：size:指定内容的大小
color：指定内容的颜色
face：指定内容的字体
加粗：<b></b>
斜体：<i></i>
下划线：<u></u>
浏览器
5.步骤分析：
①建立一个html文件
②建立一个标题标签显示公司简介
③建立一条水平线标签
④建立四个段落标签框架
案例二：网站图片显示页面
1.图片标签
<img />
属性：
src:指的是图片显示的路径(位置)
绝对路径：E:\Users\ThinkPad\Desktop\0703JavaEE就业班\WEB01_HTML\资料\WEB01\image
相对路径：
①同一级：直接写文件名称或者./文件名称
②上一级：../文件名称
③下一级：写上目录名称/文件名称
width:指定图片的宽度，取值能够是像素值，也能够是百分比
height：指定图片的高度，取值能够是像素值，也能够是百分比
alt：当图片没法正常显示的时候给出的提示信息(该属性的显示效果与浏览器以及浏览器版本有关)
案例三：网站友情连接显示页面
1.列表标签
有序列表：
<ol type="I" start="" reversed="reversed">
<li></li>
</ol>
无序列表：
<ul type="">
<li></li>
</ul>
2.超连接标签
<a href="" target=""></a>
href:指定跳转的位置
target：指定跳转页面显示的位置(取值：_self 、_blank)编程语言
案例四：网站首页显示页面
1.表格标签
<table border="" width="" height="" align="" bgcolor="" cellpadding="" cellspacing="">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
2.跨行跨列操做
跨行：rowspan
跨列：colspan
案例五：网站后台系统页面
框架集标签：
<frameset rows="" cols="">
<frame src=""/>
<frame name=""/>
</frameset>学习
综合示例：字体
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--网站名为情侣空间雏形-->
<title>情侣空间雏形</title>
</head>
<!--页面展现为三个板块，先分上下两个框架
注意框架标签不能在body内部-->
<frameset rows="20%,*">
<!--上面部分插入图片-->
<frame src="top.html">
<!--下面部分再分红左右两个框架-->
<frameset cols="20%,*">
<!--左边做为目录，能够跳转连接到右边展现-->
<frame src="left.html">
<!--右边命名为目录连接跳转界面-->
<frame name="rigth">
</frameset>
</frameset>
</html>网站
---------------------------------------------------------------------------------------------------------------------------------------------------spa
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>top</title>
</head>
<body>
<img src="u=1934213672,3615825740&fm=26&gp=0.jpg" width="10%" height="10%">
<font face="楷体" color="darkgray" size="4">爱你，从和你在一块儿的每一天起！</font>
</body>
</html>htm
---------------------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--序列标签-->
<ul type="disc">
<li><h4>目录</h4></li>
<li>
<!--超连接标签-->
<a href="Myphoto.html" target="rigth">
<font color="black" face="微软雅黑" size="3">个人自拍</font>
<a><br/><br/>
</li>
<li>
<a href="Yourphoto.html" target="rigth">
<font color="black" face="微软雅黑" size="3">我拍你</font>
<a><br/><br/>
</li>
<li>
<a href="Ourphoto.html" target="rigth">
<font color="black" face="微软雅黑" size="3">咱们的故事</font>
<a>
</li>
</ul>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Myphoto</title>
</head>
<body>
<h4>个人自拍</h4>
<table border="0px" bgcolor="blanchedalmond" width="1040px" height="520px" align="center" cellspacing="0px" cellpadding="0px">
<tr width="1040px" height="260px">
<td rowspan="2" width="173px" height="520px"><img src="i1.jpg" width="100%" height="100%"></td>
<td colspan="3"width="173px" height="260px"><img src="i1.jpg" width="100%" height="100%"></td>
<td width="173px" height="260px"><img src="i1.jpg" width="100%" height="100%"></td>
<td width="173px" height="260px"><img src="i1.jpg" width="100%" height="100%"></td>
</tr>
<tr width="1040px" height="260px">
<td width="173px" height="260px"><img src="i1.jpg" width="100%" height="100%"></td>
<td width="173px" height="260px"><img src="i1.jpg" width="100%" height="100%"></td>
<td colpan="2" width="346px" height="260px"><img src="i1.jpg" width="100%" height="100%"></td>
<td width="173px" height="260px"><img src="i1.jpg" width="100%" height="100%"></td>
<td width="173px" height="260px"><img src="i1.jpg" width="100%" height="100%"></td>
</tr>
</table>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Yourphoto</title>
</head>
<body>
<h4>我拍你</h4>
<table border="0px" bgcolor="blanchedalmond" width="1040px" height="520px" align="center" cellspacing="0px" cellpadding="0px">
<tr width="1040px" height="260px">
<td rowspan="2" width="173px" height="520px"><img src="y2.jpg" width="100%" height="100%"></td>
<td colspan="3"width="173px" height="260px"><img src="y1.jpg" width="100%" height="100%"></td>
<td width="173px" height="260px"><img src="y1.jpg" width="100%" height="100%"></td>
<td width="173px" height="260px"><img src="y1.jpg" width="100%" height="100%"></td>
</tr>
<tr width="1040px" height="260px">
<td width="173px" height="260px"><img src="y1.jpg" width="100%" height="100%"></td>
<td width="173px" height="260px"><img src="y1.jpg" width="100%" height="100%"></td>
<td colpan="2" width="346px" height="260px"><img src="y1.jpg" width="100%" height="100%"></td>
<td width="173px" height="260px"><img src="y1.jpg" width="100%" height="100%"></td>
<td width="173px" height="260px"><img src="y1.jpg" width="100%" height="100%"></td>
</tr>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ourphoto</title>
</head>
<body>
<h4>咱们的故事</h4>
<table border="0px" bgcolor="darksalmon" width="1040px" height="800px" align="center" cellspacing="0px" cellpadding="0px">
<tr>
<td>
<table>
<tr>
<td colspan="4" align="center"><font face="楷体" size="4">这个世界上总有那么一我的，是你的念想，是你的温暖。就算她不远不近，只要想到她，就永远会以为安定，以为踏实，以为内心有底。甚至连周围的空气，都变得笃定。</font></td>
</tr>
<tr>
<td width="260px" height="300px" align="center"><img src="w1.jpg"width="100%" height="100%"></td>
<td width="260px" height="300px" align="center"><img src="w1.jpg" width="100%" height="100%"></td>
<td width="260px" height="300px" align="center"><img src="w2.jpg" width="100%" height="100%"></td>
<td width="260px" height="300px" align="center"><img src="w2.jpg" width="100%" height="100%"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td colspan="4" align="center"><font face="楷体" size="4">我一辈子中最幸运的两件事：一件是时间终于将我对你的爱消耗殆尽；一件是好久好久之前有一天，我碰见你。</font></td>
</tr>
<tr>
<td width="260px" height="300px" align="center"><img src="w3.jpg"width="100%" height="100%"></td>
<td width="260px" height="300px" align="center"><img src="w3.jpg" width="100%" height="100%"></td>
<td width="260px" height="300px" align="center"><img src="w4.jpg" width="100%" height="100%"></td>
<td width="260px" height="300px" align="center"><img src="w4.jpg" width="100%" height="100%"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------------------------------------
- 1. Java第十二天
- 2. Java第二十天
- 3. Java--第2天--Html（二）
- 4. html第二天
- 5. 学习Java第二十一天
- 6. 再回首Java第二十一天
- 7. java第二十一天（网络编程）
- 8. Java学习第十二天
- 9. 学习Java第二十天
- 10. 学习Java第十二天
- 更多相关文章...
- • 第一个MyBatis程序 - MyBatis教程
- • 第一个Hibernate程序 - Hibernate教程
- • Java Agent入门实战（一）-Instrumentation介绍与使用
- • Java Agent入门实战（二）-Instrumentation源码概述
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Java第十二天
- 2. Java第二十天
- 3. Java--第2天--Html（二）
- 4. html第二天
- 5. 学习Java第二十一天
- 6. 再回首Java第二十一天
- 7. java第二十一天（网络编程）
- 8. Java学习第十二天
- 9. 学习Java第二十天
- 10. 学习Java第十二天