web前端实训day01——html知识回顾02

web前端实训day01——html知识回顾02

div和span标签

div和span标签是占位标签(容器)，没有任何语义,是一组双标签
       总结：
              1.div自占一行
              2.可以多个span共占一行

    <div>
        演示div
    </div>
    <div>
        演示div1
    </div>
    <span>
        演示span
    </span>
    <span>
        演示span1
    </span>

图像标签：img图片标签：

属性：
       src:指向图片的资源
       alt:用于展示当图片不显示时的提示
       title:当鼠标放到图片上时展示的文字
相对路径：
       当前路径：引用时，什么也不加，""
       下一路径：/，images/image1.jpg
       上一层：…/，…/image1.jpg
       总的来讲：通过路径改变，改变到与图片同一目录下，然后在引用该图片
绝对路径：绝对路径是相对于电脑的盘符或者根目录来讲的
       E:\coursewareAndHome\2020_2\webqianduan\day01\images\image1.jpg
建议：使用相对路径

    <!--<img src="image1.jpg" alt="圣诞老人">-->
    <img src="images/image1.jpg" title="圣诞老人">
    <img src="E:\coursewareAndHome\2020_2\webqianduan\day01\images\image1.jpg" title="圣诞老人">

超链接：a

超链接：<a>链接的名称<a>
       属性：
              href：指向要跳转的界面
              target:页面跳转的方式，第一种在本身页面跳转(_self),第二种创建新的页面跳转(_blank)

   <h3>外部链接</h3>
    <a href="https://www.baidu.com" target="_blank">跳转百度</a>
    <h3>内部链接</h3>
    <a href="图片.html">跳转图片页面</a>
    <h3>空链接</h3>
    <a href="#">空链接</a>
    <h3>下载链接</h3>
    <a href="images.rar">下载链接</a>
    <h3>图片等多媒体资源链接</h3>
    <a href="images/image1.jpg">资源链接</a>

锚点

锚点使用时，需要跳转的地方要定义id，a标签的href属性指向#id
       #：代表自身
       id：跳转的位置

 <h1>目录</h1>
    <a href="#11">跳转11</a>
    <a href="#22">跳转22</a>
    <a href="#33">跳转33</a>
    <a href="#44">跳转44</a>

    <h1 id="11">111111111</h1>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <h1 id="22">222222222</h1>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <h1 id="33">333333333</h1>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <h1 id="44">444444444</h1>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

案例二

   <h2>目录</h2>
    <a href="#h1">1.历史沿革</a>
    <a href="#h2">2.常用树种</a>
    <a href="#h3">3.历史故事</a>

    <h2 id="h1">历史沿革</h2>
    <h4>发展演变</h4>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;据说圣诞树 [2]  最早出现在古罗马12月中旬的农神节，德国传教士尼古斯在公元8世纪用枞树供奉圣婴。随后，德国人把12月24日作为亚当和夏娃的节日，在家放上象征伊甸园的“乐园树”，上挂代表圣饼的小甜饼，象征赎罪；还点上蜡烛和球，象征基督。到16世纪，宗教改革者马丁·路德，为求得一个满天星斗的圣诞之夜，设计出在家中布置一颗装着蜡烛和球的圣诞树。</p>
    <img src="images/image1.jpg" alt="圣诞老人">


    <h4>时间演变</h4>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;传统上，直到平安夜（12月24日）圣诞树才会立起来装饰，然后在12夜（1月6日）之后移走。提前和推后这个日期都被认为是不吉利的。
    但是，现代圣诞节购物旺季让大多数商店在10月底就把圣诞树立起来。（在英国 Selfridge's的圣诞节部9月上旬就开始营业，包括圣诞树）。
    大多数美国家庭，其习惯在感恩节（11月的第四个星期四）后立即就竖起圣诞树直到新年之后。有些美国家庭直到12月第二个周才着手竖起圣诞树，圣诞树立到1月6日（主显节）。</p>

    <h2 id="h2">常用树种</h2>
    <h4>松柏类</h4>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;松伯类是对裸子植物门松柏纲中的松科（Pinaceae）、杉科（Taxodiaceae）、柏科（Cupressaceae）和南
        洋杉科（Araucariaceae）的统称。其中，柏科的树木大多不呈现三角塔状，极少被作为圣诞树使用；同时南洋杉科树木原产于南半球（位于南半球的新西兰、澳大利亚等地除外），通常只在南半球作为圣诞树来用，其他地区极少用来作为圣诞树；在松科和杉科中，由于松科所拥有的物种数可是杉科的十余倍，因此松科的植物常被作为圣诞树。 [2]</p> 
    <h4>松科冷杉属</h4>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;松科冷杉属（Abies）的十余种树木是世界上用作圣诞树最多的树种，由于冷杉的树形美丽、颜色和气味讨人喜欢以及叶片在砍伐干燥后也不容易脱，成为最受欢迎的圣诞树树种。其中欧洲冷杉（Abies alba，也称为枞树、白枞）被视为是最为传统的圣诞树。 [2] </p>
    <img src="images/image2.jpg" alt="圣诞树">

    <h2 id="h3">历史故事</h2>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;以前德国的亚尔萨斯（现一般译为阿尔萨斯，属法国），是出产圣诞树的地方。根据传说，有一位名叫弗乐伦亭的隐修圣人，住在亚尔萨斯的一个树林当中，他非常喜欢小孩子。有一年的圣诞节，他希望附近的小孩子，都能在一起快乐的玩，但是他很贫穷，没有钱买孩子们喜爱的玩具和糖果，因此他为这件事很伤脑筋。
    一天早上，弗乐伦亭在树林中散步的时候，忽然看见一棵小杉树，树上堆满了雪，枝上挂着许多小冰条，经过太阳一照射，闪闪发光，非常的漂亮。他就把那棵树弄回来，种在盆里面。又在树林中捡一些野果子，再和上面粉，做成一些十字架，或星星形状的小饼，挂在树枝上面。又用一些小蜡烛，插在树枝上，把那棵树装扮得五光十色，非常的美观。到了圣诞夜晚，弗乐伦亭打起钟来，孩子们听到了，都跑到他的茅屋里，大家围着那棵树，手舞足蹈的唱着圣诞歌曲，然后弗乐伦亭把糕饼分给孩子们吃，让大家过了一个快乐的圣诞节。以后，这个习俗流传起来。</p>