html a img table

最新推荐文章于 2022-08-13 17:05:23 发布

weixin_33964094

最新推荐文章于 2022-08-13 17:05:23 发布

阅读量67

点赞数

原文链接：http://www.cnblogs.com/flags-blog/p/10263339.html

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <a href="http://www.baidu.com" target="_blank">百度</a> <!--跳转。默认在当前页打开，target=blank是在新的也签打开-->
    <a>第一章</a>
    <a href="#i2">第二章</a>  <!--a标签做锚点，点击对应a标签跳转到对应div。div里面的id不能有重复-->
    <a>第三章</a>
    <div style="height: 1000px">第一章内容</div>
    <div id="i2" style="height: 100px">第二章内容</div>
    <div style="height: 600px">第三章内容</div>
    <a href="http//www.baidu.com">  <!--实现点击图片跳转到对应网页的效果-->
        <img src="37.jpg" style="height: 200px;width: 200px" alt="底层文字，图片无法显示时会出现" title="悬浮鼠标显示"> <!--image标签-->
    </a>

    <ul> <!--列表，还有类似ol-li  dl-dt/dd等，与world里面项目符号、列表等-->
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ul>



</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<table border="1"> <!--表格标签，thead是表头，tbody是表的内容。tr行，th是表头里面的列，td是内容的列。border=1显示表格边框-->
    <thead>
        <tr>
            <th>第一列</th>
            <th>第二列</th>
            <th>第三列</th>
            <th>第四列</th>
            <th>第五列</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">1</td> <!--上下合并单元格，占2行-->
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td> <!--col表示这个单元格跨2列，即在该行合并单元格,往右-->
            <td colspan="2">3</td>
        </tr>
    </tbody>
</table>


</body>
</html>