Second Lesson

来源:http://www.cnblogs.com/Fkuennhvo/archive/2017/05/08/6827499.html
-Advertisement-
Play Games

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>
畫展

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、日誌採集:從網路埠接收數據,下沉到logger 文件netcat-logger.conf: 啟動命令:#告訴flum啟動一個agent,指定配置參數, --name:agent的名字,flume-ng agent --conf conf --conf-file conf/netcat-logg ...
  • 持續的故事更新, 轉載 建造者模式(Builder)定義: 將一個複雜的對象的構造與它的表示分離, 是同樣的構建過程可以創建不同的表, 這樣的設計模式稱之為建造者模式 建造者模式主要需要註意的是 建造者模式解決的問題 建造者模式的使用場景 註釋 構建意思就是對象的創建 表示指的是構建對象的各種組合 ...
  • 在網上百度了很久,都是一樣的答案,而且根本執行不了~~~每次都會報錯,最後總算找到一個對的....不容易啊! 重點1:方法要寫在iframe onload裡面,載入完成再執行 重點2:用id獲取iframe元素,contentWindow獲取文檔對象 方法如下: var iFrame=documen ...
  • 最近在弄框架,用到了webpack打包,當然不可避免的遇到了開發實際問題。在實際開發中,我們不可能改一個文件,就去構建一次,於是想到了實時更新。查看webpack,看到了webpack-dev-server。 webpack-dev-server webpack已經想到了開發流程中的自動刷新,這就是 ...
  • HTML API localstorage在瀏覽器的API有兩個:localStorage和sessionStorage,存在於window對象中:localStorage對應window.localStorage,sessionStorage對應window.sessionStorage。loca ...
  • 一:不同空格符合的區別 &nbsp; 半形的不斷行的空白格(推薦使用) &ensp; 半形的空格 &emsp; 全形的空格 詳細的含義: &nbsp;:這是我們使用最多的空格,也就是按下space鍵產生的空格。在HTML中,如果你用空格鍵產生此空格,空格是不會累加的(只算1個)。要使用html實體表 ...
  • 軟體工程第二次作業——結對編程 ================================ 團隊 學號:1500802014;姓名:孟祥磊;博客地址: "http://www.cnblogs.com/MXLei1/" 學號:1500802013;姓名:劉哲乾;博客地址: "http://www ...
  • 今天在下載一個比較大的項目,經常shasum check failed,太煩了,於是想切淘寶源,分別嘗試nrm切換和傳遞 registry,結果都出現Unexpected end of JSON input錯誤。這是比較奇怪的,看起來是JSON數據沒有傳完。結合以前SwitchyOmega走priv ...
一周排行
    -Advertisement-
    Play Games
  • 前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器,其界面簡潔大方,操作體驗流暢。該播放器支持多種音頻格式(如 MP4、WMA、OGG、FLAC 等),並具備標記、實時歌詞顯示等功能。 另外,還支持換膚及多語言(中英文)切換。核心音頻處理採用 FFmpeg 組件,獲得了廣泛認可,目前 Git ...
  • OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統,完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面,查看已創建應用的Client ID和Clien ...
  • 解決了這個問題:《winForm下,fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自:https://www.fcnsoft.com/Home/Sho ...
  • 國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面,接收裸 Win 32 的 WM_Pointer 消息,從消息裡面獲取觸摸點信息,使用觸摸點 ...
  • 前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能,還集成了高性能的輕量級 POS 解決方案,確保頁面載入速度極快,提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI: ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的,因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 問題 問題是這樣的:第三方的webapi,需要先調用登陸介面獲取Cookie,訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面,返回的Headers中沒有找到Cookie信息。 分析 首先,使用Postman測試該登陸介面,正常返回Cookie信息,說明是HttpCli ...
  • 國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低,主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上,.NET曾因微軟的閉源策略發展受限,儘管後來推出了跨平臺的.NET ...
  • 在WPF開發應用中,動畫不僅可以引起用戶的註意與興趣,而且還使軟體更加便於使用。前面幾篇文章講解了畫筆(Brush),形狀(Shape),幾何圖形(Geometry),變換(Transform)等相關內容,今天繼續講解動畫相關內容和知識點,僅供學習分享使用,如有不足之處,還請指正。 ...
  • 什麼是委托? 委托可以說是把一個方法代入另一個方法執行,相當於指向函數的指針;事件就相當於保存委托的數組; 1.實例化委托的方式: 方式1:通過new創建實例: public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...