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

2016-02-19 10:06 64 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

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

延伸阅读
标签: Web开发
以前也很少关注html5,感觉选择html已经慢慢成为趋势,想了解下。就找了个游戏学习了,写完这个游戏感觉html5和js结合很紧密,如果js不是特别好。估计需要先补习下js,这个只是个人的建议,不一定准确。还有一个就是,思维和逻辑要特别清楚,不然写游戏可能很痛苦。 贪吃蛇,最主要的功能点: 1,蛇的移动 2,改变蛇的方向 3,放置食物 4,增...
标签: Web开发
今天我们要学习的是使用Geolocation实现定位功能。我们可以通过navigator.geolocation获取Geolocation对象,他提供了下列方法: getCurrentPosition(callback,errorCallback,options):获取当前位置; watchPosition(callback,error,options):开始监控当前位置; clearWatch(id):停止监控当前位置。 note:下面例子使用的浏览器是chrome,...
标签: 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开发
刚接触到一个内联图片的概念,内联图片即使把图片文件编码成base64 看下面代码即是内联问题 可以减少http的请求,缺点是不能跨域缓存! 代码如下: img src="data:image/jpeg;base64,/9j/4QqsRX..." alt="" 然后在线如何把图片转化成base64 如果只依靠单纯的javascript是有权限问题的 js不允许操作本地的file文件或文件夹 为了安全问...
标签: Web开发
一、canvas标签 Html5 引入了一个新的 canvas 标签,这个标签所代表的区域就好象一块画布,你的所有图形绘制最后都要在这块画布上呈现。有了这个标签,浏览器的图形表现力被极大的提升,Flash 和 SilverLight 有没有感到威胁呢? 新闻链接:Google声称Chrome7浏览器将提速60倍 canvas标签的用法非常简单,如下: 复制代码代码如下: ca...

经验教程

405

收藏

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