1.圖片 <img / > 圖片的格式: 1.1BMP 占用空間大,顏色豐富。 1.2JPEG 有損壓縮,占用空間較小。 1.3GIF 多幀動圖,支持透明色。 1.4PNG 無損壓縮,點陣圖(由無數小點組成)支持透明色/半透明色。 <img /> 屬性: src="PATH” PATH:圖片的所在路徑 ...
1.圖片 <img / >
圖片的格式:
1.1BMP 占用空間大,顏色豐富。
1.2JPEG 有損壓縮,占用空間較小。
1.3GIF 多幀動圖,支持透明色。
1.4PNG 無損壓縮,點陣圖(由無數小點組成)支持透明色/半透明色。
<img /> 屬性: src="PATH” PATH:圖片的所在路徑。 相對路徑、絕對路徑、網路鏈接。
alt="DISCRAPTION" DISCRAPTION:圖片的描述,用利於SEO搜索優化。
title="DISCRAPTION" DISCRAPTION:文字描述
height=" "指定圖片的高度。
width=" "指定圖片的寬度
2.列表(自動換行)
2.1無序列表: (樣式可用CSS替代)
<ul>
<li>無序列表</li>
</ul> 屬性:type=" " square(方塊)、disa(實心圓)、circle(空心圓)
2.2有序列表:
<ol>
<li>有序列表</li>
</ol> 屬性:type=" " 5種樣式的編號,分別為 "a" "A" "i" "I" "數字"
2.3自定義列表:
<dl>
<dt>
<dd>自定義列表</dd>
</dt>
</dl>
3.表格
<table> 屬性: border=" " 表格邊框
<caption>表格標題</caption>
<th>表格標題</th>
<thead>表格頭部
<tr>行
<td>單元格或者說是列</td> 屬性:rowspan="合併行數" 跨行合併 colspan="合併列數" 跨列合併
</tr>
</thead>
<tbody>表格正文
<tr>行
<td>單元格或者說是列</td>
</tr>
</tbody>
代碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="keyword" content="關鍵字"/> 6 <meta name="discraption" content="描述"/> 7 <title>Second Lesson</title> 8 <style> 9 table tbody tr td:hover{ 10 background-color:burlywood; 11 color: dimgrey; 12 } 13 </style> 14 </head> 15 16 <body bgcolor="#faebd7" height="10000px"> 17 <marquee behavior="alternate" direction="right"> 18 <table border="1"> 19 20 <tr> 21 <td>畫名</td> 22 <td>作者</td> 23 <td>時間</td> 24 </tr> 25 <tr> 26 <td> 27 <a href="#a">蒙娜麗莎</a> 28 </td> 29 <td>列奧納多·達·芬奇 </td> 30 <td>1503-1506</td> 31 </tr> 32 <tr> 33 <td> 34 <a href="#b">跨越阿爾卑斯山聖伯納隘口的拿破侖</a> 35 </td> 36 <td>雅克·路易·大衛</td> 37 <td>1800--1801</td> 38 </tr> 39 <tr> 40 <td> 41 <a href="#c">撞球</a> 42 </td> 43 <td>路易斯-利奧波德·布瓦伊</td> 44 <td>1807年</td> 45 </tr> 46 <tr> 47 <td> 48 <a href="#d">最後的晚餐</a> 49 </td> 50 <td>列奧納多·達·芬奇 </td> 51 <td>1494年~1498年</td> 52 </tr> 53 </table> 54 </marquee> 55 56 57 <table border="1px" cellpadding="0px"> 58 59 <thead> 60 <caption> 61 <h1 id="top">畫展</h1> 62 </caption> 63 </thead> 64 65 66 <tbody> 67 68 <tr> 69 <td> 70 <img id="a" height="300px"width="200px" src="img/mengnalisha.jpg" alt="蒙娜麗莎" title="蒙娜麗莎"> 71 </td> 72 <td> 73 《蒙娜麗莎》是一幅享有盛譽的肖像畫傑作。它代表達·芬奇的最高藝術成就,成功地塑造了資本主義上升時期一位城市有產階級的婦女形象。 74 畫中人物坐姿優雅,笑容微妙,背景山水幽深茫茫,淋漓盡致地發揮了畫家那奇特的煙霧狀“無界漸變著色法”般的筆法。 75 畫家力圖使人物的豐富內心感情和美麗的外形達到巧妙的結合,對於人像面容中眼角唇邊等表露感情的關鍵部位, 76 也特彆著重掌握精確與含蓄的辯證關係,達到神韻之境,從而使蒙娜麗莎的微笑具有一種神秘莫測的千古奇韻, 77 那如夢似的嫵媚微笑,被不少美術史家稱為“神秘的微笑”。 78 </td> 79 </tr> 80 81 <tr> 82 <td> 83 <img id="b" height="300px"width="200px" src="img/napolun.jpg" alt="跨越阿爾卑斯山聖伯納隘口的拿破侖" title="跨越阿爾卑斯山聖伯納隘口的拿破侖"> 84 </td> 85 <td> 86 《跨越阿爾卑斯山聖伯納隘道的拿破侖》再現了1799年——1802年第二次反法同盟戰爭期間,拿破侖率領4萬大軍, 87 登上險峻的阿爾卑斯山,為爭取時間抄近道越過聖伯納隘道,進入義大利的情景。拿破侖軍隊進入義大利後, 88 給那裡的奧地利干涉軍隊出其不意的打擊,最終獲取馬倫哥戰役的勝利。跨越阿爾卑斯的壯舉,堪與公元前3世紀迦太基統帥漢尼拔大敗 89 羅馬軍隊以及公元8世紀查理曼大帝征戰義大利的戰績相媲美。這場戰役的勝利,提高了拿破侖的威望和地位,為他後來登上權力的頂峰打開了通道。 90 </td> 91 </tr> 92 93 <tr> 94 <td> 95 <img id="c" height="300px"width="200px" src="img/zhuoqiu.jpg" alt="撞球" title="撞球"> 96 </td> 97 <td> 98 在這幅畫中,布瓦伊以極熟練的筆法與色彩,描繪了市民階層的生活與風貌。在一個撞球俱樂部里,數十人集中在一起,打球,聊天,玩耍。 99 其場景被畫家處理得井井有條,人物刻畫體現出新古典主義畫風的完整細緻。色彩嚴謹,素描一絲不苟,成為一幅古典風味極濃的風俗畫。 100 </td> 101 </tr> 102 103 <tr> 104 <td> 105 <img id="d" height="300px"width="200px" src="img/The%20Last%20Supper.jpg" alt="蒙娜麗莎" title="蒙娜麗莎"> 106 </td> 107 <td> 108 據《新約聖經·馬可福音》記載:耶穌最後一次到耶路撒冷去過逾越節,猶太教祭司長陰謀在夜間逮捕他,但苦於無人帶路。 109 正在這時,耶穌的門徒猶大向猶太教祭司長告密說:“我把他交給你們,你們願意給我多少錢?”猶太教祭司長就給了猶大30塊錢。於是,猶大跟祭司長約好:他親吻的那個人就是耶穌。 110 逾越節那天,耶穌跟12個門徒坐在一起,共進最後一次晚餐,他憂郁地對12個門徒說:“我實在告訴你們,你們中有一個人要出賣我了!” 111 12個門徒聞言後,或震驚、或憤怒、或激動、或緊張。《最後的晚餐》表現的就是這一時刻的緊張場面。 112 </td> 113 </tr> 114 115 </tbody> 116 117 </table> 118 119 </body> 120 121 </html>畫展