基于HTML整理02
html簡介
hyperTest Markup Language 超文本標記語言,網頁語言
后綴名:.html或者.htm
規則:
1.一個html文件都有開始標簽和結束標簽
2.html包含兩部分內容:
<head>設置相關信息</head>
<body>顯示在頁面上的內容都寫在body標簽里面</body>
3.html代碼不區分大小寫
有的標簽是雙標簽,有的是單標簽(也就是沒有結束標簽)
比如換行標簽
html的操作思想(理解)
1.網頁中有很多的數據,不同的數據可能需要不同的顯示效果,這就需要
使用標簽將數據包(封裝)起來.通過修改標簽的屬性值來顯示不同的效果.
2.一個標簽相當于一個容器,想要改變容器內數據顯示樣式,
就只需要改變容器內數據的屬性值.來實現樣式的不同.
html中常用的標簽
文字標簽和注釋標簽
1.文字標簽:修改文字的樣式
*size:文字的大小
取值范圍是1~7 超過7默認為7
*color:文字的顏色
,兩種表示方式
英文單詞:blue green red white yellow gray....
十六進制:#66cc66 RGB
2.注釋標簽:
html注釋標簽
標題標簽,水平線標簽和特殊字符
3.標題標簽:雙標簽
<h1>標題一</h1>,<h2>標題二</h2>,<h3>標題三</h3> .....<h6>標題六<h6>
標題從h1到h6,字體逐漸變小 自動換行
4.水平線標簽:單標簽
<hr size="5",color="blue"/>
- 屬性
size:表示水平線的粗細 取值范圍是1~7 超過7默認為7
color:表示水平線的顏色
兩種表示方式
英文單詞:blue green red white yellow gray....
十六進制:#66cc66 RGB
5.特殊字符
想要在頁面顯示這樣的內容: <html>:是網頁的開始
需要對特殊字符進行轉義
> <
< >
空格
& &
超鏈接標簽
a標簽:
href : 要跳轉的網頁的資源路徑
本地資源路徑: 相對路徑
網絡資源: 網絡資源(網頁)的URL
target : 指明要跳轉的網頁資源的顯示位置
_self (默認) 在當前頁中刷新顯示
_blank 在新的標簽頁中顯示
_top 在頂層頁面中顯示
_parent 在父級頁面中顯示
注意:
超鏈接標簽中一定要聲明訪問方式,訪問方式可以是圖片或者文字.
瞄點:
作用: 在一張網頁中進行資源跳轉
使用:
先試用超鏈接標簽在指定的網頁位置增加瞄點
格式為 : <a name="#瞄點名" ></a>
使用a標簽可以跳轉到指定的瞄點,達到網頁內部資源的跳轉的目的
格式為 : <a href="#瞄點名"></a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超鏈接標簽</title>
</head>
<body>
<h4>本地資源:</h4>
<a href="06圖片標簽.html">圖片標簽</a><br>
<a href="04列表標簽_有序無序.html" target="_blank">
<img src="img/1.jpg" alt="未來的自己" height="200px">
</a><br>
<!--網絡資源-->
<h4>網絡資源</h4>
<a >淘寶一下</a><br>
<a >百度一下</a><br>
<a target="_blank">
<img src="../imgs/4.jpg" alt="點擊進入淘寶"
title="點擊進入淘寶">
</a>
</body>
</html>
顯示效果
圖片.png
瞄點
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瞄點</title>
</head>
<body>
<h3>瞄點</h3>
<hr>
<a href="#first">第一章</a><br>
<a href="#second">第二章</a><br>
<a href="#third">第三章</a><br>
<a href="#fourth">第四章</a><br>
<a href="#fifth">第五章</a><br>
<dl title="一簾幽夢，我心所屬">
<a name="first"></a>
<dt>第一章</dt>
<dd>
也許，每一個人的青春是美好的；
也許，每一個人的青春是閃光的。所不同的，只是每一個人的心境；所不同的，<br>
只是社會不一般的評價。曾經的那些日子里，讓我看到了什么是青春，也讓我懂得了人生的意義。<br>
青春不是季節，青春不是時間，青春不是片斷，青春是人生得以沉淀的每一個堅實的腳印。<br>
人生的意義不在于活了多少年，而是活著的那些日子做了些什么。<br>
人的一生，在歷史的長河中顯得十分的短暫，有時候，短得來不及問一句，什么是青春？每一個人都選擇自己的人生坐標，每一個人總是在努力，<br>
讓自己的人生有意義而放光彩，用社會的觀念，世界的觀念去衡量一個人的價值，身邊就會有精彩， 身邊就會有美好。<br>
在那樣一個角落里，有那樣的一個人，用堅強的信念丈量著人生，用精彩的文字書寫著人生。<br>
曾經的青春，仿佛已經在二十一歲那年逝去，不復存在。人的一生，許多是未知的，也不會有如果，走過的每一步，<br>
都不會再回來。在我眼前，那樣真切地出現了令許多人心碎的一幕。<br>
</dd>
<a name="second"></a>
<dt>第二章</dt>
<dd>
獨坐歲月，一季喧囂里，守著一簾幽夢，走走停停的站臺上，感動著一次次遇見，或深或淺，倍感溫暖，<br>
動蕩的站臺，起伏的心音，誰是你的心里的暖香，你眉底的脈脈含情？人生這場無止境的修行，體會中感悟，<br>
感動中珍惜，這冥冥中的定數，深情了三生石上的一抹嫣然一笑，今世停泊的港口，是否興盛著煙火？<br>
你可知，那一簾幽夢，正是我心所屬！
安坐夏季清風中，一絲竊竊私語，穿過耳畔，激發陳藏的心語，思緒蔓延出濃濃的想念，一紙誓言契約，于溫潤的<br>
紅塵中，翼化為蝶戀的唇語，輕輕抖動夢的蟬翼，那一簾幽夢，搖曳生姿，舞擺著無盡的癡纏，如蜻蜓點水般，<br>
溫柔劃過心脈，寫意出似水年華中風花雪月的流年，你在那筆殷殷期盼里，脈脈暈開，靜靜回味……<br>
夏季的雨，來的突然，走的匆匆，像突如其來的心情，輾轉思緒，萬千頭緒而來，卻不知怎樣去梳理，去雨里<br>
走走吧，撐起一把傘，漫步走在雨里，嘀嗒嘀嗒的聲音，像極了此刻的心情，深深淺淺的腳步，踩在濕滑的馬路上，<br>
鞋子濕了許些，鞋子濕了可換，那心中的鞋子呢？前面的薔薇剛開，便打濕了花蕊，一場花期，不知怎去安排了，<br>
那自己的呢？這場夢做的太久太久，不知能否待到雨歇晴空，這份所屬，你可知曉？<br>
</dd>
<dt>第三章</dt>
<a name="third"></a>
<dd>
灰蒙蒙的街道，看不清的人群，漸行漸遠的花季，在這一襲煙雨下，散落去，不知哪里，僅有極遠處，那一樹樹 <br>
蔥蘢，在雨里，越發的青綠茂盛，一片片葉子，在雨水的洗禮下，清新了起來，而那些花兒呢，雨打后萎靡了花瓣，<br>
即便色彩明艷了許多，看著卻無不心生憐憫，實在讓人心疼的不得了，這季的花期也要改了嗎？如此不爭，怎也要<br>
折損年華，漫漫等待，度此余生,此刻無言以對，沉默不語，靜立在雨中，就讓這簾幽夢，逐著雨滴，自己尋根尋源去吧！<br>
守望素年錦時那一掬馨香，遙念中逐夢，頻頻倚著光陰的窗臺，悉數滿地落紅，哪一片是陌上蝕骨的花蕊，<br>
是生死相依的山盟，捱著時光，催人老的孤寂，彌漫在空氣中，處處是念想的氣息， 撥開時間沉寂的厚重，誰在霞光的艷麗中嫵媚，酌一筆小令，<br>
錦上添花一瓣心香，潺潺而流，冥想與你相遇，那是何等的歡喜的事情，不問悲喜，不言離散，只許在這盞琉璃花盞里，綻放一簾幽夢的清喜。<br>
總在午夜，千回百轉，捻頌心語，流淌成歌，一腔深情自醉，柔情似水低眉含笑間，你總在嘴角邊，<br>
浮動百媚，暗香盈袖，在恰好；這一脈心念，在朗月清風中，只為一人，綻放風景，或濃或淡，或深或淺，都在輕輕回眸間莞爾，潺潺心音，幽幽情在一盞杯影里，<br>
一簾幽夢里，回溯剪影，遐想著雁子回時月滿西樓，共剪西窗燭，巴山夜話。<br>
那一簾幽夢，美好愿望，在時間煮雨中，散發出淡淡的清喜，取一盞淺酌慢品，獨坐山之巔，水之湄，去飄香淺笑的嫣然 ，<br>
溫暖簡單的喜歡，陪伴日思夜想的眷戀，回歸夢的原鄉……那便，<br>
拾一枚風花雪月，捻一指綠葉細語，去文字鋪墊一窗流光瑰麗，點燃記憶中的那城傾城三千，<br>
可否？凝滯那段時空，重故錦瑟年華里那段芳華，嗅著裊裊生香的記憶，感受清風入懷幸福盈滿的溫存。<br>
</dd>
<a name="fourth"></a>
<dt>第四章</dt>
<dd>
一簾幽夢，我心所屬，堪那紅塵繁華，塵埃落定時，鐘愛的僅此一朵，弱水三千，也只飲此一瓢，夏花鋪陳再多，<br>
也只為一人凝眉，也僅為一人埋心于詩行里長情，那一懷詩情，畫意了一闕闕平仄意境，許是在三千年之外的荒漠，策馬而過，許是墨雨江南，青黛高墻深處，<br>
在這也好，在那也罷，從此情絲深種眉底，不言相離，不道相忘，只要相依相偎，便是一生的歡愉！<br>
獨坐歲月，一季喧囂里，守著一簾幽夢，走走停停的站臺上，感動著一次次遇見，或深或淺，倍感溫暖，<br>
動蕩的站臺，起伏的心音，誰是你的心里的暖香，你眉底的脈脈含情？人生這場無止境的修行，體會中感悟，感動中珍惜，這冥冥中的定數，深情了三生石上的一抹嫣然一笑，<br>
今世停泊的港口，是否興盛著煙火？你可知，那一簾幽夢，正是我心所屬！<br>
安坐夏季清風中，一絲竊竊私語，穿過耳畔，激發陳藏的心語，思緒蔓延出濃濃的想念，一紙誓言契約，于溫潤的紅塵中，<br>
翼化為蝶戀的唇語，輕輕抖動夢的蟬翼，那一簾幽夢，搖曳生姿，舞擺著無盡的癡纏，如蜻蜓點水般，溫柔劃過心脈，寫意出似水年華中風花雪月的流年，你在那筆殷殷期盼里，脈脈暈開，靜靜回味……<br>
夏季的雨，來的突然，走的匆匆，像突如其來的心情，輾轉思緒，萬千頭緒而來，卻不知怎樣去梳理，<br>
去雨里走走吧，撐起一把傘，漫步走在雨里，嘀嗒嘀嗒的聲音，像極了此刻的心情，深深淺淺的腳步，踩在濕滑的馬路上，鞋子濕了許些，鞋子濕了可換，那心中的鞋子呢？<br>
前面的薔薇剛開，便打濕了花蕊，一場花期，不知怎去安排了，那自己的呢？這場夢做的太久太久，不知能否待到雨歇晴空，這份所屬，你可知曉？<br>
灰蒙蒙的街道，看不清的人群，漸行漸遠的花季，在這一襲煙雨下，散落去，不知哪里，僅有極遠處，那一樹樹蔥蘢，在雨里，越發的青綠茂盛，<br>
一片片葉子，在雨水的洗禮下，清新了起來，而那些花兒呢，雨打后萎靡了花瓣，即便色彩明艷了許多，看著卻無不心生憐憫，實在讓人心疼的不得了，這季的花期也要改了嗎？如此不爭，怎也要折損年華，<br>
漫漫等待，度此余生，此刻無言以對，沉默不語，靜立在雨中，就讓這簾幽夢，逐著雨滴，自己尋根尋源去吧！<br>
</dd>
<a name="fifth"></a>
<dt>第五章</dt>
<dd>
守望素年錦時那一掬馨香，遙念中逐夢，頻頻倚著光陰的窗臺，悉數滿地落紅，哪一片是陌上蝕骨的花蕊，<br>
是生死相依的山盟，捱著時光，催人老的孤寂，彌漫在空氣中，處處是念想的氣息， 撥開時間沉寂的厚重，誰在霞光的艷麗中嫵媚，酌一筆小令，錦上添花一瓣心香，<br>
潺潺而流，冥想與你相遇，那是何等的歡喜的事情，不問悲喜，不言離散，只許在這盞琉璃花盞里，綻放一簾幽夢的清喜。<br>
總在午夜，千回百轉，捻頌心語，流淌成歌，一腔深情自醉，柔情似水低眉含笑間，你總在嘴角邊，<br>
浮動百媚，暗香盈袖，在恰好；這一脈心念，在朗月清風中，只為一人，綻放風景，或濃或淡，或深或淺，都在輕輕回眸間莞爾，潺潺心音，幽幽情在一盞杯影里，<br>
一簾幽夢里，回溯剪影，遐想著雁子回時月滿西樓，共剪西窗燭，巴山夜話。<br>
那一簾幽夢，美好愿望，在時間煮雨中，散發出淡淡的清喜，取一盞淺酌慢品，獨坐山之巔，<br>
水之湄，去飄香淺笑的嫣然，溫暖簡單的喜歡，陪伴日思夜想的眷戀，回歸夢的原鄉……那便，拾一枚風花雪月，捻一指綠葉細語，去文字鋪墊一窗流光瑰麗，<br>
點燃記憶中的那城傾城三千，可否？凝滯那段時空，重故錦瑟年華里那段芳華，嗅著裊裊生香的記憶，感受清風入懷幸福盈滿的溫存。<br>
一簾幽夢，我心所屬，堪那紅塵繁華，塵埃落定時，鐘愛的僅此一朵，弱水三千，也只飲此一瓢，夏花鋪陳再多， <br>
也只為一人凝眉，也僅為一人埋心于詩行里長情，那一懷詩情，畫意了一闕闕平仄意境，許是在三千年之外的荒漠，策馬而過，許是墨雨江南，青黛高墻深處，在這也好，在那也罷， <br>
從此情絲深種眉底，不言相離，不道相忘，只要相依相偎，便是一生的歡愉！ <br>
一簾幽夢，我心所屬，為你鋪就了一地詩行，遙望著滄海桑田，尋夢回來！ <br>
</dd>
</dl>
<a href="#">回到頂部</a>
</body>
</html>
顯示效果
圖片.png
表格標簽及其單元格合并
表格標簽:
table : 聲明一個表格
tr : 聲明一行,可設置行高及其所有單元格的高度
th : 聲明一個單元格 表頭格 默認居中加黑顯示
td : 聲明一個單元格 默認居左顯示數據
注意 :
行高即該行所有的單元格的高度
單元格的寬度 列寬
屬性:
border : 給表格添加邊框
width : 設置表格的寬度
height : 設置表格的高度
寬高一般設置在tr標簽內
cellpadding ：設置單元格內容距邊框的距離
cellspacing ： 設置邊框的大小
特點;
默認根據數據的多少進行表格大小的顯示
快捷生成table表格:
比如生成4行5列的表格 table>tr*4>td*5 按tab鍵自動生成
單元格的合并：
第一步：
首先要確保表格是一個規整的表格
第二步：
根據需要合并的單元格找到所在的源碼位置
第三步：
行合并（兩行或多行的合并）：
要在合并的單元格添加屬性 rowspan="合并的單元格的個數"，刪除其他的合并的單元格
列合并（兩列或多列的合并）：
合并的任意一個單元格上添加屬性 colspan="合并的單元格的個數"，刪除要合并的其他單元格
常用表格標簽及其單元格合并操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格標簽</title>
</head>
<body>
<h3>表格</h3>
<hr>
<h4>表格標簽的常用標簽</h4>
<table border="1px" cellpadding="0" cellspacing="0">
<tr height="50px">
<th width="100px">學號</th>
<th width="100px">姓名</th>
<th width="100px">語文</th>
<th width="100px">數學</th>
<th width="100px">外語</th>
<th width="100px">綜合</th>
<th width="100px">總分</th>
</tr>
<tr>
<td>10010</td>
<td>張三</td>
<td>100</td>
<td>120</td>
<td>110</td>
<td>200</td>
<td>530</td>
</tr>
<tr>
<td>10011</td>
<td>李四</td>
<td>100</td>
<td>110</td>
<td>110</td>
<td>200</td>
<td>520</td>
</tr>
<tr>
<td>10012</td>
<td>李小龍</td>
<td>120</td>
<td>120</td>
<td>120</td>
<td>200</td>
<td>560</td>
</tr>
<tr>
<td>10013</td>
<td>王楚楚</td>
<td>90</td>
<td>120</td>
<td>100</td>
<td>200</td>
<td>510</td>
</tr>
</table>
<hr>
<h3>單元格合并</h3>
<table border="1px" cellpadding="0" cellspacing="0">
<tr height="35px">
<td width="100"></td>
<td width="100"></td>
<td width="100"></td>
<td width="100"></td>
<td width="100"></td>
</tr>
<tr height="35px">
<td colspan="2"></td><!--合并第二行一二列單元格-->
<td rowspan="3"></td><!--合并第三列的二三四行單元格-->
<td></td>
<td></td>
</tr>
<tr height="35px">
<td></td>
<td></td>
<td colspan="2" rowspan="2"></td> <!--合并右下角的四個單元格-->
</tr>
<tr height="35px">
<td></td>
<td></td>
<!--<td colspan="2"></td>-->
</tr>
</table>
</body>
</html>
效果顯示
圖片.png
表格標簽簡歷制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>簡歷表單</title>
</head>
<body>
<h2 align="center" >簡歷表</h2>
<br>
<table border="1px" cellpadding="0" cellspacing="0" align="center" style="border-bottom: none">
<tr height="25px">
<td colspan="5" align="left" bgcolor="#7fffd4">基本情況</td>
</tr>
<tr height="25px" >
<td width="100">姓名</td>
<td width="104"></td>
<td width="85">性別</td>
<td width="105"></td>
<td width="105" rowspan="7"></td>
</tr>
<tr height="25px">
<td>民族</td>
<td></td>
<td>出生年月</td>
<td></td>
</tr>
<tr height="25px">
<td>政治面貌</td>
<td></td>
<td>健康情況</td>
<td></td>
</tr>
<tr height="25px">
<td >籍貫</td>
<td></td>
<td >學歷</td>
<td></td>
</tr>
<tr height="25px">
<td >電子信箱</td>
<td></td>
<td>聯系電話</td>
<td></td>
</tr>
<tr height="25px">
<td >專業</td>
<td colspan="3"></td>
</tr>
<tr height="25px">
<td >畢業院校</td>
<td colspan="3"></td>
</tr>
<tr height="25px">
<td>求職方向</td>
<td colspan="4"></td>
</tr>
</table>
<table border="1px" cellpadding="0" cellspacing="0" align="center" style="border-bottom: none" >
<tr height="25px" >
<td align="left" colspan="4" bgcolor="#7fffd4">教育情況</td>
</tr>
<tr height="25px">
<td width="130px">時間</td>
<td width="120px">院校名稱</td>
<td width="120px">專業</td>
<td width="130px">學歷</td>
</tr>
<tr height="25px">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr height="25px">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr height="25px">
<td colspan="4" bgcolor="#7fffd4">培訓經歷</td>
</tr>
<tr height="25px">
<td>時間</td>
<td>培訓機構</td>
<td>課程</td>
<td>證書</td>
</tr>
<tr height="25px">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr height="25px">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr height="25px">
<td colspan="4" bgcolor="#7fffd4">技能特長</td>
</tr>
<tr height="25px">
<td colspan="4" rowspan="3"></td>
</tr>
<tr height="25px">
</tr>
<tr height="25px">
</tr>
</table>
<table border="1px" cellpadding="0" cellspacing="0" align="center">
<tr height="25px">
<td align="left" colspan="4" bgcolor="#7fffd4">工作經驗</td>
</tr>
<tr height="25px">
<td width="120px">時間</td>
<td width="140px">公司名稱</td>
<td width="100px">職位</td>
<td width="140px">工作內容</td>
</tr>
<tr height="25px">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr height="25px">
<td colspan="4" bgcolor="#7fffd4">英語、計算機水平</td>
</tr>
<tr height="25px">
<td colspan="4" rowspan="2"></td>
</tr>
<tr height="25px">
</tr>
<tr height="25px">
<td colspan="4" bgcolor="#7fffd4">獎勵榮譽</td>
</tr>
<tr height="25px">
<td colspan="4" rowspan="2"></td>
</tr>
<tr height="25px">
</tr>
<tr height="25px">
<td colspan="4" bgcolor="#7fffd4">自我評價</td>
</tr>
<tr height="25px">
<td colspan="4" rowspan="2"></td>
</tr>
<tr height="25px">
</tr>
</table>
</body>
</html>
效果顯示
殘缺部分省略.png
