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. keras数据增强

    1.keras数据增强:https://www.cnblogs.com/hutao722/p/10075150.html 2 .keras fit 中的 verbose verbose:日志显示ver ...

  2. L3-015. 球队“食物链”

    某国的足球联赛中有N支参赛球队,编号从1至N.联赛采用主客场双循环赛制,参赛球队两两之间在双方主场各赛一场. 联赛战罢,结果已经尘埃落定.此时,联赛主席突发奇想,希望从中找出一条包含所有球队的“食物链 ...

  3. HDU-4280-Island Transport(网络流,最大流, ISAP)

    链接: https://vjudge.net/problem/HDU-4280 题意: In the vast waters far far away, there are many islands. ...

  4. 《SaltStack技术入门与实践》——执行结果处理

    执行结果处理 本章节参考<SaltStack技术入门与实践>,感谢该书作者: 刘继伟.沈灿.赵舜东 Return组件可以理解为SaltStack系统对执行Minion返回后的数据进行存储或 ...

  5. NOIP模拟赛(by hzwer) T3 小奇回地球

    [题目背景] 开学了,小奇在回地球的路上,遇到了一个棘手的问题. [问题描述] 简单来说,它要从标号为 1 的星球到标号为 n 的星球,某一些星球之间有航线. 由于超时空隧道的存在,从一个星球到另一个 ...

  6. vue-cli3热更新配置，解决热更新失败的问题，保存代码浏览器自动刷新

    在vue,config.js中配置css热更新 const IS_PROD = ['production', 'test'].includes(process.env.NODE_ENV) css: { ...

  7. RedisTemplate访问Redis数据结构（五）——ZSet

    Redis 有序集合和无序集合一样也是string类型元素的集合,且不允许重复的成员.不同的是每个元素都会关联一个double类型的分数.有序集合的成员是唯一的,但分数(score)却可以重复.red ...

  8. 高级软件测试技术（测试管理工具实践day1）

    今天进行了班级内部各小组选择测试工具,选择各自需要进行测试管理工具.我们小组暂定选择 禅道 但是班级内其他小组选择的工具还没确定,还没进行

  9. What does the dot after dollar sign mean in jQuery when declaring variables?

    https://stackoverflow.com/questions/22156664/what-does-the-dot-after-dollar-sign-mean-in-jquery-when ...

  10. vue +ts 在router的路由中import报错的解决方案

    在router.ts中引入.vue文件,会提示打不到module,但是编译可能成功,运行也不报错 找了好久,发现了这个答案 https://segmentfault.com/a/11900000167 ...