图片、链接、列表的应用

图片、链接、列表的应用

1.图片

1.1 外链图片链接,img+src(图片地址)+alt(图片描述)+宽度

<img src="https://huaban.com/pins/4382365198" alt="妹汁" width="200">

1.2 本地图片链接,img+src(图片存储位置)+alt(图片描述)+宽度

<img src="images/001.webp" alt="卡通妹汁" width="300">

2.链接

2.1 跳转链接a标签+href(跳转的地址)+target(新打开页面/其他属性)

<p><a href="https://php.cn" target="_blank">php.cn</a>这里是20期php班</p>

2.2 下载附件a标签+href(文件)+tarfet(属性)

<a href="images.zip target="_blank">下载附件</a>

3.列表

3.1 有序列表 ul>li

<ul>
        <li><a href="">导航</a></li>
        <li><a href="">导航</a></li>
        <li><a href="">导航</a></li>
</ul>

3.2 无序列表 ol>li

<ol>
        <li><a href="">导航</a></li>
        <li><a href="">导航</a></li>
        <li><a href="">导航</a></li>
</ol>

3.3 自定义列表 dl>dt>dd

<dl>
        <dt>地址：
            <dd>深圳市宝安区</dd>
        </dt>
        <dt>邮箱：
            <dd>potatodesigner@aliyun.com</dd>
        </dt>
        <dt>电话：
            <dd>18506168888</dd>
        </dt>
</dl>

4.图片列表

ul>li*3>img{妹汁$@0};

<ul>
        <li><img src="https://img0.baidu.com/it/u=2301353428,260634576&fm=253&fmt=auto&app=120&f=JPEG?w=333&h=500" alt="妹汁0" width="200"></img></li>
        <li><img src="https://img0.baidu.com/it/u=950234826,2310429801&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=725" alt="妹汁1" width="200"></img></li>
        <li><img src="https://img1.baidu.com/it/u=3079431989,3499240801&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=729" alt="妹汁2" width="200"></img></li>
    </ul>

5. 表格

1.区分 表格：是用来展示多列多行 列表：多行单列
2.列表 ul>li / ol>li / dl>dt>dd
3.表格 table>caption+(thead>tr>th)(tbody>tr>th)+(tfoot>tr>td)
4.table：表格 caption：标题 thead：表头 th：表头的列 tbody：表格主体 tr：> 行 td：列 tfoot：表尾
5.tbody必须有，thead可以不要

实例

<table width="1200" border="1">
    <caption>数码宝贝进化表</caption>
    <thead bgcolor="#CBD69D" width="auto">
        <tr>
            <td width="170">/</td>
            <td width="170">一级形态</td>
            <td width="170">二级形态</td>
            <td width="170">三级形态</td>
            <td width="170">四级形态</td>
            <td width="170" colspan="3">五级形态</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th bgcolor="#9DAED6">哈克兽</th>
            <td>刃王哈克兽</td>
            <td>救星哈克兽</td>
            <td>杰斯兽</td>
            <td rowspan="2" colspan="4">无</td>
        </tr>
        <tr>
            <th bgcolor="#9DAED6">巴鲁兽</th>
            <td>仙人掌兽</td>
            <td>花仙兽</td>
            <td>蔷薇兽</td>
        </tr>
        <tr>
            <th bgcolor="#9DAED6">亚古兽</th>
            <td>暴龙兽</td>
            <td>机械暴龙兽</td>
            <td>战斗暴龙兽</td>
            <td>电光暴龙兽</td>
            <td>无限龙兽</td>
        </tr>
        <tr>
            <th bgcolor="#9DAED6">咪罗兽</th>
            <td>迪路兽</td>
            <td>天女兽</td>
            <td>天使兽</td>
            <td rowspan="2" colspan="4">无</td>
        </tr>
        <tr>
            <th width="70" bgcolor="#9DAED6">加布兽</th>
            <td>加鲁鲁兽</td>
            <td>狼人加鲁鲁兽</td>
            <td>钢铁加鲁鲁兽</td>
        </tr>
        <style>
            table{
                text-align: center;
                font-size: small;
                border-color: rgb(11, 50, 155)
            }
            th{
                color: #ffffff;
            }
        </style>
    </tbody>
</table>