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
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...