专注收集记录技术开发学习笔记、技术难点、解决方案
网站信息搜索 >> 请输入关键词:
您当前的位置: 首页 > HTML/CSS

学习HTML的第二回课

发布时间:2010-05-20 14:01:29 文章来源:www.iduyao.cn 采编人员:星星草
学习HTML的第二次课

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

友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。

其他相似内容:

热门推荐: