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>

代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="keyword" content="关键字"/>

     <meta name="discraption" content="描述"/>

     <title>Second Lesson</title>

     <style>

         table tbody tr td:hover{

                             background-color:burlywood;

                             color: dimgrey;

                                 }

     </style>

 </head>

 <body bgcolor="#faebd7" height="10000px">

     <marquee behavior="alternate" direction="right">

         <table border="1">

             <tr>

                 <td>画名</td>

                 <td>作者</td>

                 <td>时间</td>

             </tr>

             <tr>

                 <td>

                     <a href="#a">蒙娜丽莎</a>

                 </td>

                 <td>列奥纳多·达·芬奇 </td>

                 <td>1503-1506</td>

             </tr>

             <tr>

                 <td>

                     <a href="#b">跨越阿尔卑斯山圣伯纳隘口的拿破仑</a>

                 </td>

                 <td>雅克·路易·大卫</td>

                 <td>1800--1801</td>

             </tr>

             <tr>

                 <td>

                     <a href="#c">桌球</a>

                 </td>

                 <td>路易斯－利奥波德·布瓦伊</td>

                 <td>1807年</td>

             </tr>

             <tr>

                 <td>

                     <a href="#d">最后的晚餐</a>

                 </td>

                 <td>列奥纳多·达·芬奇 </td>

                 <td>1494年~1498年</td>

             </tr>

         </table>

     </marquee>

     <table border="1px" cellpadding="0px">

         <thead>

             <caption>

                 <h1 id="top">画展</h1>

             </caption>

         </thead>

         <tbody>

             <tr>

                 <td>

                     <img id="a" height="300px"width="200px" src="img/mengnalisha.jpg" alt="蒙娜丽莎" title="蒙娜丽莎">

                 </td>

                 <td>

                    《蒙娜丽莎》是一幅享有盛誉的肖像画杰作。它代表达·芬奇的最高艺术成就，成功地塑造了资本主义上升时期一位城市有产阶级的妇女形象。

                    画中人物坐姿优雅，笑容微妙，背景山水幽深茫茫，淋漓尽致地发挥了画家那奇特的烟雾状“无界渐变着色法”般的笔法。

                    画家力图使人物的丰富内心感情和美丽的外形达到巧妙的结合，对于人像面容中眼角唇边等表露感情的关键部位，

                    也特别着重掌握精确与含蓄的辩证关系，达到神韵之境，从而使蒙娜丽莎的微笑具有一种神秘莫测的千古奇韵，

                    那如梦似的妩媚微笑，被不少美术史家称为“神秘的微笑”。

                 </td>

             </tr>

             <tr>

                 <td>

                     <img id="b" height="300px"width="200px" src="img/napolun.jpg" alt="跨越阿尔卑斯山圣伯纳隘口的拿破仑" title="跨越阿尔卑斯山圣伯纳隘口的拿破仑">

                 </td>

                 <td>

                     《跨越阿尔卑斯山圣伯纳隘道的拿破仑》再现了1799年——1802年第二次反法同盟战争期间，拿破仑率领4万大军，

                     登上险峻的阿尔卑斯山，为争取时间抄近道越过圣伯纳隘道，进入意大利的情景。拿破仑军队进入意大利后，

                     给那里的奥地利干涉军队出其不意的打击，最终获取马伦哥战役的胜利。跨越阿尔卑斯的壮举，堪与公元前3世纪迦太基统帅汉尼拔大败

                     罗马军队以及公元8世纪查理曼大帝征战意大利的战绩相媲美。这场战役的胜利，提高了拿破仑的威望和地位，为他后来登上权力的顶峰打开了通道。

                 </td>

             </tr>

             <tr>

                 <td>

                     <img id="c" height="300px"width="200px" src="img/zhuoqiu.jpg" alt="桌球" title="桌球">

                 </td>

                 <td>

                     在这幅画中，布瓦伊以极熟练的笔法与色彩，描绘了市民阶层的生活与风貌。在一个桌球俱乐部里，数十人集中在一起，打球，聊天，玩耍。

                     其场景被画家处理得井井有条，人物刻画体现出新古典主义画风的完整细致。色彩严谨，素描一丝不苟，成为一幅古典风味极浓的风俗画。

                 </td>

             </tr>

             <tr>

                 <td>

                     <img id="d" height="300px"width="200px" src="img/The%20Last%20Supper.jpg" alt="蒙娜丽莎" title="蒙娜丽莎">

                 </td>

                 <td>

                     据《新约圣经·马可福音》记载：耶稣最后一次到耶路撒冷去过逾越节，犹太教祭司长阴谋在夜间逮捕他，但苦于无人带路。

                     正在这时，耶稣的门徒犹大向犹太教祭司长告密说：“我把他交给你们，你们愿意给我多少钱？”犹太教祭司长就给了犹大30块钱。于是，犹大跟祭司长约好：他亲吻的那个人就是耶稣。

                     逾越节那天，耶稣跟12个门徒坐在一起，共进最后一次晚餐，他忧郁地对12个门徒说：“我实在告诉你们，你们中有一个人要出卖我了！”

                     12个门徒闻言后，或震惊、或愤怒、或激动、或紧张。《最后的晚餐》表现的就是这一时刻的紧张场面。

                 </td>

             </tr>

         </tbody>

     </table>

 </body>

 </html>

画展

学习HTML的第二次课的更多相关文章

  1. Deep Learning.ai学习笔记_第二门课_改善深层神经网络：超参数调试、正则化以及优化

    目录 第一周(深度学习的实践层面) 第二周(优化算法) 第三周(超参数调试.Batch正则化和程序框架) 目标: 如何有效运作神经网络,内容涉及超参数调优,如何构建数据,以及如何确保优化算法快速运行, ...

  2. 风炫安全WEB安全学习第二十二节课 DOM型XSS讲解

    风炫安全WEB安全学习第二十二节课 DOM型XSS讲解 Dom型XSS演示 通过Javascript,可以重构整个HTML文档,你可以添加.移除.改变或重排页面上的项目 要改变页面的某个东西,Java ...

  3. NeHe OpenGL教程 第二十七课：影子

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  4. NeHe OpenGL教程 第二十课：蒙板

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  5. 红帽学习笔记[RHCSA] 第二周

    目录 红帽学习笔记[RHCSA]第二周 环境 第七课[网络配置相关] 在Vmware中添加网卡 将网卡添加到虚拟机上 关于网卡命名规则 配置网络 网络配置命令总结 更改hostname 关于SSH的一 ...

  6. Stealth视频教程学习笔记（第二章）

    Stealth视频教程学习笔记(第二章) 本文是对Unity官方视频教程Stealth的学习笔记.在此之前,本人整理了Stealth视频的英文字幕,并放到了优酷上.本文将分别对各个视频进行学习总结,提 ...

  7. Kali Linux Web 渗透测试视频教—第二十课-利用kali linux光盘或者usb启动盘破解windows密码

    Kali Linux Web 渗透测试视频教—第二十课-利用kali linux光盘或者usb启动盘破解windows密码 文/玄魂 目录 Kali Linux Web 渗透测试视频教—第二十课-利用 ...

  8. Kali Linux Web 渗透测试— 第二十课-metasploit.meterpreter

    Kali Linux Web 渗透测试— 第二十课-metasploit.meterpreter 原文链接:http://www.xuanhun521.com/Blog/7fc11b7a-b6cb-4 ...

  9. NeHe OpenGL教程 第二十三课：球面映射

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

随机推荐

  1. Sublime Text、webstorm等编译器快速编写HTML/CSS代码的技巧

    Sublime Text.webstorm等编译器,如果你从事Web前端开发的话,对这几款软件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演 ...

  2. UI线程异常处理方法

    当应用程序启动,创建了一个叫“main”的线程,用于管理UI相关,又叫UI线程.其他线程叫工作线程(Work Thread). Single Thread Model 一个组件的创建并不会新建一个线程 ...

  3. 第1次作业：no blog no fun

    1.先回答老师的问题 第一部分:结缘计算机       读了进入2012 -- 回顾我走过的编程之路后,我试着回顾了我的编程生涯的开始.我最原始的记忆就是老爸教我用电脑玩连连看,那时候的显示器应该是C ...

  4. 【Alpha版本】冲刺阶段 - Day1 - 启航

    Alpha 阶段成员分工及任务量 成员 分工 任务量(小时) 袁逸灏 完成app用户车辆,子弹发射,背景移动,暂停界面,音乐界面,音乐查找,音乐播放 25 刘伟康 项目进度把控.分配任务.组织会议.整 ...

  5. 201621123062《java程序设计》第三周作业总结

    1.本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用 将这些碎片化的概念.知识点组织起来.请使用工具画出本周学习到的知识点及知识点之间的联系.步骤如下: 1.1写出你认为本周学 ...

  6. Twisted 介绍 及TCP广播系统实例

    twisted 提供更多传输层 udp,tcp,tls及应用层HTTP,FTP等协议的支持,在开发方法上更提供了丰富的特性来支持异步编程 安装twisted 建议使用anaconda 安装,conda ...

  7. AWS中，如果使用了ELB，出现outofservice

    平台:亚马逊AWS EC2 出现状况: 我创建了弹性平衡负载,也注册了实例,但是实例的状态一直是outofservice.为什么? 为什么会出现这个问题呢? 1:实例有问题: 2:负载平衡器创建的有问 ...

  8. Linux 目录与文件管理

    1. 目录与路径1.1 相对路径与绝对路径1.2 目录的相关操作: cd, pwd, mkdir, rmdir1.3 关于执行文件路径的变量: $PATH2. 档案与目录管理2.1 档案与目录的检视: ...

  9. Python 迭代器之列表解析

     [TOC] 尽管while和for循环能够执行大多数重复性任务, 但是由于序列的迭代需求如此常见和广泛, 以至于Python提供了额外的工具以使其更简单和高效. 迭代器在Python中是以C语言的 ...

  10. PHP分页初探 一个最简单的PHP分页代码的简单实现

    PHP分页代码在各种程序开发中都是必须要用到的,在网站开发中更是必选的一项. 要想写出分页代码,首先你要理解SQL查询语句:select * from goods limit 2,7.PHP分页代码核 ...