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>
  • 效果
常见排序列表
中文名称 英文名称 平均
时间复杂度		 最坏
时间复杂度		 最好
时间复杂度		 空间
复杂度		 稳定性
选择排序
冒泡排序
插入排序
堆排序
希尔排序
归并排序
快速排序
桶排序
计数排序
基数排序

[Web 前端] 004 html 小练习的更多相关文章

  1. Web前端_微信小程序实战开发

    微信小程序开发实战教程 一.微信小程序 它是一种混合开发的方式. 是安装在微信中的程序(一个程序最多2M空间). 1.1 注册 1  2 点击立即注册:进入下方页面 3  4 点击小程序进入表单填写页 ...

  2. web前端页面设计小笔记

    input总是在点击的时候出现蓝色边框,这是input的默认属性,就算设置了border:none:也没有用! #解决方法:outline:none; 设置input框里的placeholder值得字 ...

  3. web前端几个小知识点笔记

    1.css实现宽度是百分比的盒子为正方形 <div style="width:50%;padding-bottom:50%;height:0px;background:#ccc;&qu ...

  4. web前端 -- 页面设计小技巧

    1:进入网页时淡入淡出的效果. <meta http-equiv=”Page-Exit”; content=”blendTrans(Duration=1.0)”> 在头部head之间加入此 ...

  5. 定一个小目标：明年1024能成功转行web前端，光荣地成为一个程序员！

    第一次在博客园写博,我为什么要选择这里吗? 据说博客园这里的IT大牛如云,作为一个求知若渴的小白,我屁颠屁颠的跟着过来了. 于是今天早上兴高采烈的注册了账号,迫不及待的打开我的博客,呃!注册账号成功了 ...

  6. web前端性能测试小点

    关于前端性能的文章: http://www.cnblogs.com/fnng/archive/2011/09/19/2181894.html web应用的前端性能响应时间指浏览器的页面加载时间.浏览器 ...

  7. 漫谈程序员(十一)老鸟程序员知道而新手不知道的小技巧之Web 前端篇

    老鸟程序员知道而新手不知道的小技巧 Web 前端篇 常充电!程序员只有一种死法:土死的. 函数不要超过50行. 不要一次性写太多来不及测的代码,而是要写一段调试一段. UI和编码要同步做. 多写注释方 ...

  8. Web 前端面试小知识

    简历投递 前期为了解自身短板, 可以海投一些试试. 不建议长期海投简历, 对用人单位简历筛选和你自身都没什么好处. 投简历之前最起码要关注以下几点(薪资范围, 公司位置, 职位要求, 是否为培训机构冒 ...

  9. Web前端开发最佳实践（7）：使用合理的技术方案来构建小图标

    大家都对网站上使用的小图标肯定都不陌生,这些小图标作为网站内容的点缀,增加了网站的美观度,提高了用户体验,可是你有没有看过在这些网站中使用的图标都是用什么技术实现的?虽然大部分网站还是使用普通的图片实 ...

随机推荐

  1. 用selenium启动chrome浏览器

    python 3.7 pycharm 1.安装selenium pip3 install selenium 2.下载与chrome匹配的chromdriver.exe,放到项目的解释器路径下,跟pyt ...

  2. kettle中使用mysql的tinyint 类型到slqserver的tinyint类型

    各个数据库之间的类型 定义还是有差别的 一下是我在工作中遇到的一个很奇葩的问题  mysql 中的 tinyint 类型 插入到sqlserver 的tinyint 类型 插入到 sqlserver的 ...

  3. 对Moment.js的研究

    创建npm install moment --save-dev 日期格式化 moment().format('MMMM Do YYYY, h:mm:ss a'); // 六月 4日 2019, 6:2 ...

  4. 关于Vuex的actions传入多个参数的方法:

    1.在state中:             state={    obj:{         name:'state中的数据'     } }         2.在actions定义的方法中:   ...

  5. css-外面元素的高度，由里面的元素进行撑开（由内部的高度决定）

    1.删除你的高度的固定值 2.将父元素的====>display:inline-block; 或者设置浮动====>float:left;

  6. visual studio 2017激活

    VS2017专业版和企业版激活密钥   Enterprise: NJVYC-BMHX2-G77MM-4XJMR-6Q8QF Professional: KBJFW-NXHK6-W4WJM-CRMQB- ...

  7. a标签禁止跳转

    方法一: <a href="javascipt:void(0)>....</a>

  8. asp.net (web)选择文件夹 上传文件

    1 背景 用户本地有一份txt或者csv文件,无论是从业务数据库导出.还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工.挖掘和共创应用的时候,首先要将本地文件上传至ODPS,普通的小文件通 ...

  9. 记一下今天上下班学的Thread

    1 Thread 默认为前台线程,即主程序退出后,线程还可以继续(曾经就掉入这个坑中,使用两线程分别进行UDP收发,结果发线程结束了退出方法,收线程还在继续) 2 Thread 没有可以暂停,可以重新 ...

  10. USACO2018 DEC(Platinum) (树上乱搞，期望+凸包)

    发现这跟\(Gold\)难度简直天差地别啊.. \(T1\) 传送门 解题思路 这道题还是很可做的,发现题意可以传化成一棵树每次从叶子节点删边,然后有\(m\)条限制,形如\(a\)在\(b\)前面删 ...