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第十二天