HTML5实现锚点时请使用id取代name

2016-02-19 10:06 61 1 收藏

今天图老师小编要跟大家分享HTML5实现锚点时请使用id取代name,精心挑选的过程简单易学,喜欢的朋友一起来学习吧!

【 tulaoshi.com - Web开发 】

HTML5已经去掉name属性,实现锚点时请使用id,实例效果:http://keleyi.com/keleyi/phtml/html5/9.htm

支持Chrome,火狐,IE8以上等浏览器。

以下是完整代码:

代码如下:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
titleHTML5锚点实例--柯乐义/titlebase target="_blank" /
style
body{margin:0px;}
/style
/head
body
div id="keleyihead"a href="http://keleyi.com"柯乐义/a a href="http://keleyi.com/a/bjac/hwqa4oex.htm"HTML5锚点/a keleyi.com
script type="text/javascript" src="http://keleyi.com/kineryi/js/gggg728x90a.js"/script/div
div style="height:30px;width:100%;text-align:center"a href="#keleyifoot" target="_self"转到底部/a/div
div style="background-color:#959822; width:100%;height:150px;"请滚动鼠标使页面向下/div
div style="background-color:Green; width:100%;height:150px;"www.keleyi.com/div
div style="background-color:Red; width:100%;height:150px;"欢迎/div
div style="background-color:Yellow; width:100%;height:150px;"hi/div
div style="background-color:Silver; width:100%;height:150px;"
a href="http://keleyi.com/dev/94fb5964c80ee829.htm" target="_blank"绿色箭头图片返回顶部效果/a
a href="http://keleyi.com/a/bjac/7cc2358ac924ebc5.htm" target="_blank"蓝色方块返回顶部/a
a href="http://keleyi.com/a/bjac/6f008786225269ac.htm" target="_blank"纯文本返回顶部/a
a href="http://keleyi.com/a/bjac/8aa32432160f9aa4.htm" target="_blank"漂亮的返回顶部、底部和留言/a/div
div style="background-color:Aqua; width:100%;height:150px;"keleyi.com/div
div style="background-color:Fuchsia; width:100%;height:150px;"keleyi/div
div style="background-color:Green; width:100%;height:150px;"keleyi.com/div
div style="background-color:Blue; width:100%;height:150px;"柯乐义/div
div style="background-color:Olive; width:100%;height:150px;"柯乐义 监视下滚像素/div
div style="background-color:Green; width:100%;height:150px;"keleyi.com/div
div style="background-color:Purple; width:100%;height:150px;"jquery/div
div style="background-color:Green; width:100%;height:150px;"a href="http://keleyi.com/a/bjac/f4a6f78d74a251c5.htm" target="_blank"原文/a/div
div style="background-color:Lime; width:100%;height:150px;"keleyi.com/div
div style="background-color:Orange; width:100%;height:150px;"完整代码/div
div style="height:200px;width:100%;"HTML5已经去掉name属性,实现锚点时请使用id/div
div id="keleyifoot" style="width:100%;height:276px;background: url(http://keleyi.com/images/footerimg.jpg); background-position:center top; background-repeat:no-repeat;text-align:center;"a href="#keleyihead" target="_self"回到顶部/a/div
/body
/html

直接转到页底示例:
http://keleyi.com/keleyi/phtml/html5/9.htm#keleyifoot

来源:https://www.tulaoshi.com/n/20160219/1593382.html

延伸阅读
标签: Web开发
以前也很少关注html5,感觉选择html已经慢慢成为趋势,想了解下。就找了个游戏学习了,写完这个游戏感觉html5和js结合很紧密,如果js不是特别好。估计需要先补习下js,这个只是个人的建议,不一定准确。还有一个就是,思维和逻辑要特别清楚,不然写游戏可能很痛苦。 贪吃蛇,最主要的功能点: 1,蛇的移动 2,改变蛇的方向 3,放置食物 4,增...
标签: Web开发
W3C 在 2008年 1 月 22 日发布了最新的 HTML 5 工作草案。HTML 5 工作组包括 AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera 以及数百个其他的开发商。HTML 5 中的一些新特性:嵌入音频、视频、图片的函数、客户端数据存储,以及交互式文档。其他特性包括新的页面元素,比如 header, section, footer, 以及 figure。 通过制...
标签: Web开发
刚接触到一个内联图片的概念,内联图片即使把图片文件编码成base64 看下面代码即是内联问题 可以减少http的请求,缺点是不能跨域缓存! 代码如下: img src="data:image/jpeg;base64,/9j/4QqsRX..." alt="" 然后在线如何把图片转化成base64 如果只依靠单纯的javascript是有权限问题的 js不允许操作本地的file文件或文件夹 为了安全问...
标签: Web开发
1.Email输入框,自动验证Email有效性。 代码如下: !DOCTYPE HTML html body form action="#" method="get" E-mail: input type="email" name="user_email"/ input type="submit"/ /form /body /html 2.number数字输入,验证正确,可以设置开始结束位。 代码如下: !DOCTYPE HTML html body form action="#" method="g...
标签: Web开发
简介 离线访问对基于网络的应用而言越来越重要。虽然所有浏览器都有缓存机制,但它们并不可靠,也不一定总能起到预期的作用。HTML5 使用 ApplicationCache 接口解决了由离线带来的部分难题。 使用缓存接口可为您的应用带来以下三个优势 : 离线浏览 – 用户可在离线时浏览您的完整网站 速度 – 缓存资源为本地资源,因此加载速...

经验教程

846

收藏

41
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部