java第二十一天（html）
案例一：網站資訊顯示頁面
1.什麼是HTML？(Hyper Text Markup Language:超文字標記語言)
超文字：功能比普通文字更加強大
標記語言：使用一組標籤對內容進行描述的一門語言(它不是程式語言)
2.為什麼要學習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>
---------------------------------------------------------------------------------------------------------------------------------------------------
<!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>
---------------------------------------------------------------------------------------------------------------------------------------------------
<!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>
---------------------------------------------------------------------------------------------------------------------------------------------