复习一下第二耍：

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。 HTML第三耍 随笔 第1张 
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>复习二 列表的使用</title><!--title要收尾啊啊啊，不然整个网页都无法显示>
</head>
<body>
    <h1>这是一个对列表使用的演示</h1>
    <!--首先，无序列表-->
    <ul>
        <li>守鹤</li>
        <li>又旅</li>
        <li>矶怃</li>
        <li>孙悟空</li>
        <li>穆王</li>
        <li>犀犬</li>
        <li>重明</li>
        <li>牛鬼</li>
        <li>九喇嘛</li>
    </ul>
    <!--有序列表-->
    <p><font size="+16" color="red">记住！有序列表要加上排序的类型</font></p>
    <ol type="1">
        <li>天</li>
        <li>地</li>
        <li>君</li>
        <li>亲</li>
        <li>道</li>
        <li>法</li>
        <li>理</li>
    </ol>
    <!--定义列表-->
    <dl>
        <dt>主角</dt>
        <dd><font size="16+" color="red" face="小篆"><b>蒙奇D路飞</b></font></dd>
        <dd>卡卡罗特</dd>
        <dd>樱木花道</dd>
        <dd>凡多姆海威</dd>
        <dd>杀生丸</dd>
        <dd>黑崎一护</dd>
        <dd>漩涡鸣人</dd>
        <dd>基拉</dd>
    </dl>
    <!--混合列表-->
    <dl>
        <dt>主角</dt>
        <ol type="a">
        <li><dd>路飞</dd></li>
        <li><dd>索隆</dd></li>
        <li><dd>山治</dd></li>
        <li><dd>乌索布</dd></li>
        <li><dd>娜美</dd></li>
        <li><dd>乔巴</dd></li>
        <li><dd>罗宾</dd></li>
        <li><dd>布鲁克</dd></li>
        <li><dd>甚平</dd></li>
        <li><dd>弗兰奇</dd></li>
        </ol>
    </dl>
    <!--混合列表二-->
    <dl>
        <dt>主角</dt>
        <ol type="a">
            <li><dt>路飞</dt></li>
                <dl><!--再混合-->
                    <ol type="1">
                        <li><dd>路飞一号</dd></li>
                        <li><dd>路飞二号</dd></li>
                        <li><dd>路飞三号</dd></li>
                    </ol>
                </dl>
            <li><dd>索隆</dd></li>
            <li><dd>山治</dd></li>
            <li><dd>乌索布</dd></li>
            <li><dd>娜美</dd></li>
            <li><dd>乔巴</dd></li>
            <li><dd>罗宾</dd></li>
            <li><dd>布鲁克</dd></li>
            <li><dd>甚平</dd></li>
            <li><dd>弗兰奇</dd></li>
        </ol>
    </dl>
    <!--混合列表三-->
    <dl>
        <ul>
        <dt>主角:</dt>
        <li><dt>路飞</dt></li>
        <dl><!--再混合-->
            <ol type="1">
                <dt> </dt>
                <li><dd>路飞一号</dd></li>
                <li><dd>路飞二号</dd></li>
                <li><dd>路飞三号</dd></li>
            </ol>
        </dl>
        <li><dd>索隆</dd></li>
        <li><dd>山治</dd></li>
        <li><dd>乌索布</dd></li>
        <li><dd>娜美</dd></li>
        <li><dd>乔巴</dd></li>
        <li><dd>罗宾</dd></li>
        <li><dd>布鲁克</dd></li>
        <li><dd>甚平</dd></li>
        <li><dd>弗兰奇</dd></li>
        </ul>
    </dl>
    <!--大混合-->
    <dl>
        <ul>
        <dt>主角:</dt>
        <li><dt>路飞</dt></li>
        <dl><!--再混合-->
            <ol type="1">
                <dt> </dt>
                <hr/><li><dd>路飞一号</dd></li>
                <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp大家好，我是路飞一号，我是东海出生的，请大家多多关照！</p>
                <hr/><li><dd>路飞二号</dd></li>
                <p><font size="+10">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp大家好，我是路飞二号，我参加了顶上战争哦！</font></p>
                <hr/><li><dd>路飞三号</dd></li>
                <p>体验一下下划线加粗加删除线加斜体的效果吧！<b><s><u><i><font size="+10" color="blue">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp大家好，我是路飞二号，是我打败了卡塔库栗！</font></s></u></i></b></p>
            </ol>
        </dl>
        <li><dd>索隆</dd></li>
        <li><dd>山治</dd></li>
        <li><dd>乌索布</dd></li>
        <li><dd>娜美</dd></li>
        <li><dd>乔巴</dd></li>
        <li><dd>罗宾</dd></li>
        <li><dd>布鲁克</dd></li>
        <li><dd>甚平</dd></li>
        <li><dd>弗兰奇</dd></li>
        </ul>
    </dl>
</body>
</html>
View Code

  HTML中通过使用图像标签，可以在文档中显示图像。

 图像标签列表：

HTML第三耍 随笔 第3张

1.图像标签（<img>）和源属性（Src）

在 HTML 中，图像由 <img> 标签定义。<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。
       定义图像的语法是：
       <img src="url" />。URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于 www.w3school.com.cn 的 images 目录中，那么其 URL 为 https://www.cnblogs.com/images/cnblogs_com/wildness-priest/1440160/t_alone-cold-footprints-897014.jpg。
       浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

2.

3.

4.

5.

6.

7.

8.

9.

 

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄