WEB 1

作业分析

使用table表格标签编写如下的效果：


image.png

点击表格上的图片，跳转到相应花朵的百科解释

比如：点击向日葵图片，跳转到以下界面
image.png

代码实现

使用html标签代码实现：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title >花种分类</title>
</head>
<body>
    <h1 align="center">花种分类</h1>
    <table border="1"  width="1300" height="auto" cellpadding="3" cellspacing="0" width="500" align="center" >
        <tr>
            <td align="center"width="50">科目</td>
            <td width="50"align="center">名称</td>
            <td align="center">图片</td>
            <td align="center">特征</td>
            <td align="center">花语</td>
        </tr>
        <tr>
            <td rowspan="3" align="center">菊科</td>
            <td  >向日葵</td>
            <td width="50" >
                <a  href="https://baike.baidu.com/item/%E5%90%91%E6%97%A5%E8%91%B5/6106" target="_blank">
                    <img src="https://ts1.cn.mm.bing.net/th/id/R-C.cf39b19ba9a415cef2313532236f2143?rik=zNxj8V0PEM7Q3A&riu=http%3a%2f%2fpic.baike.soso.com%2fp%2f20140210%2f20140210150842-203986797.jpg&ehk=gBTM6cEUnyOE4pqljiSHsMvOrw6Jaln9D8IDUdks2fM%3d&risl=&pid=ImgRaw&r=0" width="70" height="auto">
                </a>
            </td>
            <td>植株高大，通常能长到1-3米。茎直立，粗壮。叶互生，呈心状卵形或卵圆形。其花盘巨大，花瓣为黄色，呈舌状花，中间是大量的管状花，用于结籽。向日葵喜光，主要生长在开阔的田野、路边等地，种子可以用来榨油，也可食用。</td>
            <td align="center">沉默的爱、忠诚、光辉</td>
            
        </tr>
        <tr>
            
            <td align="center">雏菊</td>
            <td>
                <a  href="https://baike.baidu.com/item/%E9%9B%8F%E8%8F%8A/16619"target="_blank" >
                <img src="https://ts1.cn.mm.bing.net/th/id/R-C.ed2df3aeaaa113f20f9982795ebf34e3?rik=EwRzAoxDBNnpmA&riu=http%3a%2f%2fpic6.nipic.com%2f20100305%2f4156243_004333048226_2.jpg&ehk=VfVK3qviF2KW%2f20HlpZPo%2fnA%2bm%2beDSXUhDQJjlpF0wU%3d&risl=&pid=ImgRaw&r=0"width="70" height="auto" >
            </td>
            </a>
            <td>植株矮小，高度一般在 10 - 20 厘米左右。叶基生，呈匙形。它的花小巧玲珑，直径通常在 2 - 3 厘米，花瓣为白色或粉色，是舌状花，花蕊为黄色。雏菊多生长在草地、路边等环境中，常被用于花坛、花境的边缘布置，是一种很受欢迎的观赏花卉。</td>
            <td align="center">深藏在心底的爱，纯洁、天真</td>
        </tr>
        <tr>
          
            <td>万寿菊</td>
            <td>
                <a href="https://baike.baidu.com/item/%E4%B8%87%E5%AF%BF%E8%8F%8A/20177663?fromModule=lemma_search-box" target="_blank">
                <img src="https://img95.699pic.com/photo/60075/0120.jpg_wh860.jpg"width="70" height="60">
                </a>
            </td>
            <td>株高在 30 - 100 厘米之间。茎直立且粗壮。叶对生，羽状全裂。花朵较大，直径可达 5 - 10 厘米，颜色多为黄色或橙色，花瓣呈舌状，花头单生。万寿菊适应性强，能在多种土壤环境中生长，常用于园林景观的布置，也有一定的药用价值。 </td>
            <td align="center">健康、长寿，还象征着友情和甜蜜爱情</td>
        </tr>
        <tr>
            <td rowspan="3" >蔷薇科</td>
            <td align="center" >玫瑰</td>
            <td>
                <a href="https://baike.baidu.com/item/%E7%8E%AB%E7%91%B0/63206"target="_blank">
                <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.1TBHqPEGJA0-gEBQnEuPFQHaEa?w=297&h=180&c=7&r=0&o=5&dpr=2&pid=1.7"width="70" height="60">
                </a>
            </td>
            <td>是一种落叶灌木，茎枝有皮刺和针刺。叶子为奇数羽状复叶，小叶 5 - 9 片，椭圆形或椭圆状倒卵形。花单生或簇生于枝顶，花瓣呈紫红色至白色，有浓郁的香气。玫瑰喜阳光充足、耐寒、耐旱，主要用于提取香料、制作花茶、观赏等用途。</td>
            <td>红玫瑰热情、热爱着您、热恋。白玫瑰纯洁、天真、尊敬。粉玫瑰象征初恋、特别的关怀。</td>
        </tr>
        <tr>
            
            <td align="center">月季</td>
            <td>
                <a  href="https://baike.baidu.com/item/%E6%9C%88%E5%AD%A3%E8%8A%B1/14505544?fromtitle=%E6%9C%88%E5%AD%A3&fromid=32865"target="_blank"> 
                <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.84quyHXq2BCNv4mzAf_8DgHaEK?w=319&h=180&c=7&r=0&o=5&dpr=2&pid=1.7"width="70" height="55">
            </a>
            </td>
            <td>常绿或半常绿低矮灌木。茎有刺或近无刺。叶为奇数羽状复叶，小叶 3 - 5 片。花单生或几朵集生，颜色丰富，有红、粉、黄、白等多种颜色，花瓣为重瓣至半重瓣。月季适应性强，是世界著名的观赏花卉，在园林和家庭园艺中广泛应用。</td>
            <td >象征爱情，更能体现长久的爱情。粉色月季表示初恋、优雅、高贵。黄色月季有道歉的意思。</td>
        </tr>
        <tr>
            
            <td align="center">樱花</td>
            <td>
                <a  href="https://baike.baidu.com/item/%E6%A8%B1%E8%8A%B1/70387"target="_blank">
                <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.MAB9VpHa3jGzTyGRMGXJeQAAAA?w=275&h=184&c=7&r=0&o=5&dpr=2&pid=1.7"width="70" height="55">
           </a>
            </td>
            <td>乔木，树皮呈灰色。小枝淡紫褐色，无毛。叶互生，叶片呈椭圆卵形或倒卵形。樱花的花朵通常每枝3-5朵，呈伞形花序，花瓣为白或粉红色，有单瓣和重瓣之分。多生长在温带和亚热带地区的山林和公园中。</td>
            <td align="center">爱情与希望</td>
        </tr>
        <tr>
            <td rowspan="3" >百合科</td>
            <td align="center">百合</td>
            <td>
                <a  href="https://baike.baidu.com/item/%E7%99%BE%E5%90%88/7886"target="_blank">
                <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.zOT7YYSIiTzm54WNj7u5cwHaFj?w=269&h=202&c=7&r=0&o=5&dpr=2&pid=1.7"width="70" height="70">
           </a>
            </td>
            <td>多年生草本球根植物，鳞茎球形，淡白色。茎直立，不分枝。叶互生，呈披针形至椭圆状披针形。花单生或几朵排成近伞形，花朵较大，喇叭形，有白、粉、黄等多种颜色，花瓣6片，有反卷，有浓郁的香气。百合喜欢凉爽、湿润的环境，多生长在山坡草丛、林下等地方，它既可以观赏，鳞茎又可以食用和药用。</td>
            <td>白色百合象征着纯洁、庄严、心心相印。。粉色百合代表着高雅、纯净、梦幻。黄色百合象征着财富、高贵、荣誉。</td>
        </tr>
        <tr>
            
            <td>郁金香</td>
            <td>
                <a  href="https://baike.baidu.com/item/%E9%83%81%E9%87%91%E9%A6%99/13506"target="_blank">
                <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.pvi2J2J8-fIcM4aclP5eQwHaGo?w=222&h=200&c=7&r=0&o=5&dpr=2&pid=1.7"width="70" height="auto">
           </a>
            </td>
            <td>是多年生草本植物，鳞茎偏圆锥形。条状披针形至卵状披针形。花单朵顶生，大型而艳丽，花形有杯形、碗形、卵形等多种形状，多种色彩，花瓣6片。喜欢冬季较温和、夏季凉爽的气候，是世界著名的球根花卉，常用于花坛、花境布置。</td>
            <td>红色郁金香象征爱的告白、浓烈的爱意。紫色高贵、神秘。白色寓意着纯洁的恋情。</td>
        </tr>
        <tr>
           
            <td align="center">萱草</td>
            <td>
                <a  href="https://baike.baidu.com/item/%E8%90%B1%E8%8D%89/715946"target="_blank">
                <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C._pt7sjaTt_DHOf9YDtYiFgHaEy?w=285&h=184&c=7&r=0&o=5&dpr=2&pid=1.7"width="70" height="60">
            </a>
            </td>
            <td>多年生宿根草本，圆锥花序顶生，花大，漏斗形，花瓣6片，颜色为橘黄色或橘红色等。萱草性强健，耐寒，适应性强，多生长在山坡、草地等环境，在中国有 “母亲花” 之称，观赏价值高，部分品种可食用。</td>
            <td align="center">永远爱你，母亲的爱。</td>
        </tr>
    </table>   
   
</body>
</html>

个人总结

重点：
border 给表格添加边框
width 调整表格宽度
align 整个表格对齐方式 left/center/right
cellspacing 调整单元格之间的间距，一般设置为0
cellpadding 表格边框和内容之间的内边距
点击图片跳转，<a></a>内一定要加入照片链接

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML5
    img标签 功能：告诉浏览器需要显示一张图片; 参数：width、height、src、title、alt；wid...
    Latte_Bear阅读 3,663评论 0赞 0
  • web入门
    web入门 HTML html介绍 HTML作用：用于描述网页 HTML是指超文本标记语言：Hyper Text ...
    dingmouren123阅读 1,852评论 0赞 1
  • html&css合集
    前言：作为一名前端小白。html与css的入门很重要，以下资料大多是跟李南江老师学习记录并加上自己的一些见解。 什...
    小懵没被占用阅读 4,032评论 0赞 0
  • web前端总结
    HTML制作网页 一、HTML(超文本标记语言) W3C标准（World Wide Web Consortium）...
    11阅读 3,199评论 0赞 0
  • 大一html5题库
    [if !supportLists]1.[endif]html5文档结构由 和（ ）两部分组成？ A A. B. ...
    蔚蓝指明阅读 9,188评论 0赞 1