Web前端(4)_超链接和锚

1、本页面打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行级标签</title>
</head>
<body>
    <a href="http://www.baidu.com" >百度一下</a>
</body>
</html>

2、新标签页打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行级标签</title>
</head>
<body>
    <a href="http://www.baidu.com" target="_blank">百度一下</a>
</body>
</html>

3、链接本地图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行级标签</title>
</head>
<body>
    <a href="../image/QQ360.png" target="_blank">打开图片</a>
</body>
</html>

4 、锚点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行级标签</title>
</head>
<br>
<a id = "top" href="#bottom" >去底部</a> <br />
    你好<br />
 你好<br />
 你好<br />
 你好<br /> 你好<br />
 你好<br /> 你好<br /> 你好<br /> 你好<br />
 你好<br />
 你好<br />
 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br />
 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br />
 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br />
 <a id = "bottom" href="#top" >去顶部</a> <br />
</body>
</html>

5、范围标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行级标签</title>
</head>
<br>
<a id = "top" href="#bottom" >去底部</a> <br />
<a href="#range">点一下去范围标签</a>
    你好<br />
 你好<br />
 你好<br />
 你好<br /> 你好<br />
 你好<br /> 你好<br /> 你好<br /> 你好<br />
 你好<br />
 你好<br />
 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br />
 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br />
 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br />
 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br />
    <span id="range">我是范围标签</span>>
 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br />

 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br />
 <a id = "bottom" href="#top" >去顶部</a> <br />
</body>

6、链接路径

原文地址：https://www.cnblogs.com/sunnybowen/p/10505297.html

时间： 2024-11-05 16:02:30

Web前端(4)_超链接和锚的相关文章

Web前端(6)_表格

1.表格的基本结构 2.跨行的表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>行级标签</title> </head> <body> <table border="1"> <tr> <td colspan="3&qu

Web前端(12)_注释

看看这家公司的程序员给些的注释,哈哈原文地址:https://www.cnblogs.com/sunnybowen/p/10567374.html

去年下半年我开始了我的web前端之旅,由于是工作三年后转行,为了尽快入门,我选择了参加培训班.这里我想特别说明一下,网上有很多鄙视培训的同学,但就我个人的培训经历而言,除了最后一阶段会有类似于面试忽悠,简历包装这样的辅导外,就从课程本身来说安排的还是比较合理的,授课老师知识水平和教学水平也都不错,学习氛围也比较好.除了性价比我觉得不是很高外,还有就是培训结束后自己能否保持学习.对于还在上学的同学,我是比较推荐自学.如果你对前端开发有兴趣,不妨自己学起来,现在网上的资源还是挺丰富的,如果学习中有什

web前端_表格table布局，同一列两个<td>之间有间隙解决办法。

同学接了个很简单的网站.结果在布局的时候发现网页头部和网页主体之间差不多有1px的间隙.怎么也去除不了,帮忙看了看,隋记录下来,是这样的,网页头部和主体分别在两个<td>中(使用table布局),贴上简单demo: 效果如下,间隙消失了,最重要的是红色矩形圈起来的那句. 如果去掉红色矩形圈起来的部分,效果如下: web前端_表格table布局,同一列两个<td>之间有间隙解决办法.

web前端_正式开发之路_第一周_总结

2016.11.07正式入职xx企业(暂时保密),岗位:web前端开发工程师. 作为从一个设计.美工转战到web前端开发岗位,当然,现在还处于试用期阶段,三个月的时间,不短吧,不知道是不是能顺利的通过这段时期,希望吧. 作为一个转行的人,可以说我的转行是历经曲折,经历了八九个月的时间,其中五味杂陈,只有自己知道自己经历了多么痛苦的时光,不过,还好吧,自己的选择,自己的兴趣,苦点累点倒不是很重要,重要的是现在自己进入了开发角色,无所谓薪水.工作时间等,只要是开发的工作就好,不要单纯的做个codin

前端开发学习路线_零基础如何学web前端_从小白到大神进阶

下面给大家讲解一下前端需要掌握哪些技术和学习路线Web前端基础知识:一．前端相关概念建立主要内容:浏览器的概念介绍: 浏览器的作用.工作方式浏览器的概念介绍: 浏览器的作用.工作方式HTTP协议: 协议产生的原因.作用.及内容页面加载流程:当用户打开浏览器,输入地址栏并按下回车之后发生的事情二．HTML-CSS-JS基础-jQuery学习内容:HTML及HTML5:理解浏览器如何解析HTML.基本的语法规则.不同标签的使用方式.嵌套方式CSS:理解层叠式样式表的语法规则.各种盒模型及常用布局CS

Web前端面试题目及答案汇总

前端新人在面试前都比较焦虑,担心回答不上面试官的问题,也担心自己紧张,其实这都是心理没底的表现,今天和大家分享web前端开发常见面试题及答案,希望可以帮助即将面试的前端同学顺利通过面试. HTML/CSS部分 1.什么是盒子模型? 在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分.这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域或

初级web前端程序员面试题整理

以下是收集的一些web前端工程师面试中经常会遇到的经典面试题以及自己面试过程中无法解决的问题,通过对知识的整理以及经验的总结,重新巩固自身的前端基础知识,如有错误或更好的答案,欢迎指正. HTML/CSS部分 1.什么是盒子模型? 在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距 (margin)四个部分.这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区

2017年最权威的1000集大型web前端视频教程（爱创课堂出品）文后附录视频下载链接

2017年最新爱创课堂前端开发课程介绍爱创课堂Web前端开发工程师培训-价值1万8课程资料持续更新中,第一时间领取请加QQ2079576908 Web前端开发工程师,主要职责是利用HTML.XHTML.CSS.JAVAScript.FLASH等各种Web前端技术进行客户端产品的开发.完成客户端程序(也就是浏览器端)的开发,开发JavaScript以及Flash模块,同时结合后台开发技术模拟整体效果,进行丰富互联网的Web前端开发,致力于通过技术改善用户体验. 第一阶段:页面制作基础从这一基础