[Web 前端] 004 html 小练习

最新推荐文章于 2022-08-29 21:27:00 发布

weixin_30613727

最新推荐文章于 2022-08-29 21:27:00 发布

阅读量104

点赞数

文章标签：前端数据结构与算法 ViewUI

原文链接：http://www.cnblogs.com/yorkyu/p/10780222.html

版权

1. 锚点

用法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>锚点</title>
    </head>
    <body>
        <b id="top1">图片一</b>
        <img src="./images/001.jpg" alt="不好意思，加载失败了~"> <br>

        <b id="top2">图片二</b>
        <img src="./images/002.jpg" alt="不好意思，加载失败了~"> <br>

        <b id="top3">图片三</b>
        <img src="./images/003.jpg" alt="不好意思，加载失败了~"> <br>

        <a href="#top1">跳转到图片一</a>
        <a href="#top2">跳转到图片二</a>
        <a href="#top3">跳转到图片三</a>
    </body>
</html>

效果

锚点 图片一 不好意思，加载失败了~

图片二

图片三

跳转到图片一跳转到图片二跳转到图片三

说明
- 方便起见，图片并不存在
- 下方三个 a 标签相当于“超链接”，点哪个，回到哪张图

2. <label> 标签

记 html 的笔记时可以偷个懒（不写全），如下
用法

<form action="" method="POST">
    <p>
        <label>用户名：</label><input type="text" name="username" value="阿强">
    </p>
    <p>
        <label>密 码：</label><input type="password" name="password">
    </p>
    <p>
        <input type="submit" name="" value="提交">
        <input type="reset" name="" value="重置">
    </p>
</form>

效果

用户名：

密码：

3. 表格

之前的随笔已经介绍过表格了，这里是借表格挖个排序算法的坑
用法

<table  border="1" cellpadding="5px" cellspacing="0" width="700px" height="500px">
    <thead>
    <tr>
        <th colspan="7">常见排序列表</th>
    </tr>
    <tr>
        <th>中文名称</th>
        <th>英文名称</th>
        <th>平均<br>时间复杂度</th>
        <th>最坏<br>时间复杂度</th>
        <th>最好<br>时间复杂度</th>
        <th>空间<br>复杂度</th>
        <th>稳定性</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td>选择排序</td>
        </tr>
        <tr>
            <td>冒泡排序</td>
        </tr>
        <tr>
            <td>插入排序</td>
        </tr>
        <tr>
            <td>堆排序</td>
        </tr>
        <tr>
            <td>希尔排序</td>
        </tr>
        <tr>
            <td>归并排序</td>
        </tr>
        <tr>
            <td>快速排序</td>
        </tr>
        <tr>
            <td>桶排序</td>
        </tr>
        <tr>
            <td>计数排序</td>
        </tr>
        <tr>
            <td>基数排序</td>
        </tr>
    </tbody>
</table>

效果

常见排序列表
中文名称	英文名称	平均时间复杂度	最坏时间复杂度	最好时间复杂度	空间复杂度	稳定性
选择排序
冒泡排序
插入排序
堆排序
希尔排序
归并排序
快速排序
桶排序
计数排序
基数排序