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. NeHe OpenGL教程 第二十七课:影子

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

  3. NeHe OpenGL教程 第二十课:蒙板

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

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

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

  5. Stealth视频教程学习笔记(第二章)

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

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

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

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

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

  8. NeHe OpenGL教程 第二十三课:球面映射

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

  9. NeHe OpenGL教程 第二十一课:线的游戏

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

随机推荐

  1. 利用js查找页面中的内链,外链

    起初没听说过内链外链,只有链接锚文本,在面试中被问到如何查找到页面中的内链和外链,就在想,什么是内链和外链啊??????? 后来面试官给我解释了一下他们的区别,自己稍微懂了,自己当时回答的是通过获取a ...

  2. C语言中把数字转换为字符串 【转】

    在将各种类型的数据构造成字符串时,sprintf 的强大功能很少会让你失望.由于sprintf 跟printf 在用法上几乎一样,只是打印的目的地不同而已,前者打印到字符串中,后者则直接在命令行上输出 ...

  3. LeetCode &quot;Design Tic-Tac-Toe&quot;

    We don't have to keep a complete chess board.. just counters! class TicTacToe { vector<int> cn ...

  4. Oracle配置

    1.安装Oracle11g--->通过Database Configuration Assistant创建新数据库 建数据库注意记住数据库名和SID,安装最后一步解锁scott[密码填tiger ...

  5. css动画,css过度,js动画

    1jQuery动画 语法a$(selector).animate(styles,options) 语法b$(selector).animate(styles,speed,easing,callback ...

  6. java项目组会议纪要

    上周五项目经理开例会让我记录会议纪要,以下是我记录的纪要.给大家分享一下! 一.时间:2014年04月25日 二.地点:研发部 三.人物:xx,xx,xx 四.内容(相关项目的一些事项): 1.对待需 ...

  7. mongo查询系统

    首先,我们先向集合(collections)中添加测试文档(documents).如下: > for(i=1;i<=5;i++) db.test.insert({x:i,y:i*i,z:6 ...

  8. 初探linux子系统集之led子系统(三)

    世界杯结束了,德国战车夺得了大力神杯,阿根廷最终还是失败了.也许3年,5年,或者10年后,人们就不知道巴西世界杯的亚军是谁,但是总是会记得冠军是谁.就像什么考试,比赛,第一永远会被人们所记住,所以我们 ...

  9. 计算机17-3,4作业A

    A货车过隧道问题 Description 输入若干组数据,每组数据中有三个整数分别表示某条公路沿途所经过的三个隧道的最大高度,数之间用单个空格分隔.输入高度单位是厘米,范围在0到762之间.现有一台高 ...

  10. intellij idea 配置web 项目

    Intellij Idea 创建Web项目入门(一)(转载)   相关软件: Intellij Idea14:http://pan.baidu.com/s/1nu16VyD JDK7:http://p ...