1. 锚点

  • 用法
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>锚点</title>
  6.     </head>
  7.     <body>
  8.         <b id="top1">图片一</b>
  9.         <img src="./images/001.jpg" alt="不好意思，加载失败了~"> <br>
  11.         <b id="top2">图片二</b>
  12.         <img src="./images/002.jpg" alt="不好意思，加载失败了~"> <br>
  14.         <b id="top3">图片三</b>
  15.         <img src="./images/003.jpg" alt="不好意思，加载失败了~"> <br>
  17.         <a href="#top1">跳转到图片一</a>
  18.         <a href="#top2">跳转到图片二</a>
  19.         <a href="#top3">跳转到图片三</a>
  20.     </body>
  21. </html>
  • 效果

锚点

图片一


图片二


图片三


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

  • 说明

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

2. <label> 标签

  • 记 html 的笔记时可以偷个懒（不写全），如下
  • 用法
  1. <form action="" method="POST">
  2.     <p>
  3.         <label>用户名：</label><input type="text" name="username" value="阿强">
  4.     </p>
  5.     <p>
  6.         <label>密 码：</label><input type="password" name="password">
  7.     </p>
  8.     <p>
  9.         <input type="submit" name="" value="提交">
  10.         <input type="reset" name="" value="重置">
  11.     </p>
  12. </form>
  • 效果

用户名：

密 码：

3. 表格

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

  • 用法

  1. <table  border="1" cellpadding="5px" cellspacing="0" width="700px" height="500px">
  2.     <thead>
  3.     <tr>
  4.         <th colspan="7">常见排序列表</th>
  5.     </tr>
  6.     <tr>
  7.         <th>中文名称</th>
  8.         <th>英文名称</th>
  9.         <th>平均<br>时间复杂度</th>
  10.         <th>最坏<br>时间复杂度</th>
  11.         <th>最好<br>时间复杂度</th>
  12.         <th>空间<br>复杂度</th>
  13.         <th>稳定性</th>
  14.     </tr>
  15.     </thead>
  16.     <tbody>
  17.         <tr>
  18.             <td>选择排序</td>
  19.         </tr>
  20.         <tr>
  21.             <td>冒泡排序</td>
  22.         </tr>
  23.         <tr>
  24.             <td>插入排序</td>
  25.         </tr>
  26.         <tr>
  27.             <td>堆排序</td>
  28.         </tr>
  29.         <tr>
  30.             <td>希尔排序</td>
  31.         </tr>
  32.         <tr>
  33.             <td>归并排序</td>
  34.         </tr>
  35.         <tr>
  36.             <td>快速排序</td>
  37.         </tr>
  38.         <tr>
  39.             <td>桶排序</td>
  40.         </tr>
  41.         <tr>
  42.             <td>计数排序</td>
  43.         </tr>
  44.         <tr>
  45.             <td>基数排序</td>
  46.         </tr>
  47.     </tbody>
  48. </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. Insomni'hack teaser 2019 - Pwn - 1118daysober

    参考链接 https://ctftime.org/task/7459 Linux内核访问用户空间文件:get_fs()/set_fs()的使用 漏洞的patch信息 https://maltekrau ...

  2. man(2) V

    vfork(2) #include <sys/types.h> #include <unistd.h> pid_t vfork(void); 功能:创建子进程并阻塞父进 --- ...

  3. element隐藏组件滚动条scrollbar使用

    可使用 组件 <el-scrollbar></el-scrollbar> 设置 组件的样式 为 高度100% <el-scrollbar style="heig ...

  4. Python---进阶---文件操作---获取文件夹下所有文件的数量和大小

    一.####编写一个程序,统计当前目录下每个文件类型的文件数 ####思路: - 打开当前的文件夹 - 获取到当前文件夹下面所有的文件 - 处理我们当前的文件夹下面可能有文件夹的情况(也打印出来) - ...

  5. watch和computed

    watch和computed都是以Vue的依赖追踪机制为基础的,它们都试图处理这样一件事情:当某一个数据(称它为依赖数据)发生变化的时候,所有依赖这个数据的“相关”数据“自动”发生变化,也就是自动调用 ...

  6. ORM详解，ORM Object relation mapping (对象关系映射)

  7. [ZJU 1004] Anagrams by Stack

    ZOJ Problem Set - 1004 Anagrams by Stack Time Limit: 2 Seconds      Memory Limit: 65536 KB How can a ...

  8. div的文字倾斜

    最近要写一个页面,需要一排文字是倾斜的,我就写了一下 <div class="qingx">倾斜导航</div> div.qingx{ -moz-trans ...

  9. spring boot 集成 mybatis 单元测试Dao层 控制台报错：org.apache.ibatis.binding.BindingException: Invalid bound statement (not found):

    最近帮同学做毕业程序,采用后端spring boot + mybatis + H2,将框架搭好进行各层的单元测试时,在dao层就出现了错,如图 于是在网上找各种资料,有的说是xml文件和接口没有一一对 ...

  10. es之关于consistency（数据一致性问题）

    Es集群内部是有一个约定是用来约束我们的写操作的,就是“一致性”: 也就是说:新建.索引.删除这些操作都是写操作,他们都有一个大前提: 当前的分片副本处于活跃状态的数量 >= int( (pri ...