仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1585|回复: 10
打印 上一主题 下一主题

[HTML5] 来讲讲:链接A的语义、写法和最好理论

[复制链接]
小妖女 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 22:27:31 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
每一款手机有不同的分辨率,不同屏幕大小,如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢?学习html5viewport的使用能帮你做到这一点……在JavaEye瞥见这个话题,会商挺成心思,不由得也搀和一把。
语义思索

起首,链接a和按钮button是有语义的,不克不及由于利用上的便利而交换。a是anchor的缩写,是一个锚点,用来导航或定位。典范用法为:
  1. <ahref="http://www.w3c.org/">W3CWebSite</a><aname="anchor-one">Thisisthelocationofanchorone.</a><ahref="#anchor-one">Linktoanchorone</a>
复制代码
还能够同时指定name和href属性,这是基本常识,如有疑问请参考HTML4.01标准。
再说按钮(包含button和<inputtype=”button/submit”/>)。从语义上讲,按钮是表单的一部分,触发的举措和表单是有联系关系的。假如基本就没有表单操纵,就不该该利用按钮。举些例子:

上图是一些链接,固然长得像button,但语义上是a.

上图中的显现和排序按钮,是操纵表单。从语义上讲,用button或input更符合。(注重:淘宝搜刮了局页今朝接纳的是a,这是出于渐进加强的思索,上面会说起)
总之链接和按钮有各自的语义和利用场景,不克不及随便交换利用。
写法剖析

天下永久没那末复杂,在现今JavaScript方兴未艾的Web天下里,链接a常常用来触发js事务:
  1. <ahref=""onclick="something()">test1</a><ahref="#"onclick="something();returnfalse">>test2</a><ahref="javascript:void(0)"onclick="something()">>test3</a><ahref="javascript:voidsomething()">test4</a>
复制代码
起首,第一种写法在ie下是有成绩的,缘故原由是ie下会主动补全href.
第二种写法间接在onclick事务中制止失落默许事务,因而href="#"中的#实践上能够为恣意值。用#,是思索没有js时,点击后停止在本页(注重:当a在一屏以下时,这类写法会招致页面回滚到顶部)。
第三种写法,href值是一个javascript伪协定,void是javascript的一个一元操纵符(好比!,typeof)。void操纵符的感化是,只实行前面的表达式,不前往任何值。看起来仿佛是void(0)制止了默许事务,实践上,上面这些写法都没成绩:
  1. <ahref="javascript:void(1)"onclick="something()">>test3</a><ahref="javascript:;"onclick="something()">>test3</a><ahref="javascript:"onclick="something()">>test3</a><ahref="javascript:returntrue"onclick="something()">>test3</a>
复制代码
由于a的默许操纵就是javascript伪协定的内容,内里加不加void都不会触发别的事务。(注重:Opera下,当伪协定里有前往值时,会改动href,因而我们一样平常写void(0)或空语句)
了解了第三种写法,第四种写法也就分明了:href="javascript:voidsomething()".这类写法有一个“优点”是,鼠标悬浮时,用户能够经由过程形态栏看到将要实行的函数。对开辟者来讲,这也许是个优点,但对一般用户来讲,这真的会增添信任感吗?抑或是害怕感?没无数据,没法下结论。
除下面的写法,另有一种保举的写法是,经由过程class或id给a增添一个hook,然后在js里经由过程hook来增加事务。
深思

我不想往会商下面的各类写法中哪个是最好的。让我们思索根源成绩:为何我们会用a来触发js事务?我能想到的来由有:

  • 如许主动就具有鼠标的悬浮款式了
  • 人人都这么写
  • 还真想不出啥来由,这不是很天然的事嘛
  • 由于IE6只撑持CSS款式的a:hover,并且href还不克不及为空
能够看出,除悬浮款式,找不到啥本色性的来由了。我们临时抛开款式成绩,来看一个例子:

下面是GoogleReader的操纵栏,感乐趣的无妨firebug一下,接纳的标志是:

12下一页


使得W3C与非正式的WHATWG(网络超文本应用程序技术工作小组)关系开始紧张起来。这些年来,一直是WHATWG肩负起HTML的重责大任。
小妖女 该用户已被删除
沙发
 楼主| 发表于 2015-1-15 23:50:24 | 只看该作者

来讲讲:链接A的语义、写法和最好理论

HTML5语音识别(现在一般用在搜索上),目前相关介绍还是挺多的。为何呢?因为很简单!
鼠标的悬浮款式,也基本不是成绩:

                               
登录/注册后可看大图

css里,加上cursor:pointer就行。</p>从下面的例子中,我们能够失掉一个结论:假如仅仅是触发js举措,没有任何导航或定位的语义,接纳span或别的符合的标签便可,没需要毛病的利用a(用a反而惹贫苦:一是要往除默许事务,二是形态栏的信息会让一般用户利诱乃至害怕)。
固然,假如自己就是一个链接,仅仅想在导航前增添一些js逻辑,大概是表单排序等使用,从渐进加强角度思索,最好的理论是将href值写全,以使得在不撑持js的扫瞄器下,也能包管可用性。
最好理论

不是总结,不是一锤子定音,“最好理论”只是一系列准绳,是写代码前要先想想:

  • 用链接a,仍是用按钮button,依据详细利用场景来定,button是和表单相干的元素
  • 不要滥用a,当你都想不分明href值是甚么时(不要呈现javascript伪协定,不要伶仃孤单的#),请选用别的标签,经由过程hook在js中增加事务
  • 假如的确是一个链接,同时又有onclick事务,请想一想渐进加强,包管href值的完全性
代码有性命,标签王国事一个植物园,熟习它们,统统很心爱。
</p>
上一页12


通过我们的HTML编辑器,您能够编辑HTML,然后点击按钮来查看结果。
板凳
发表于 2015-1-17 23:58:59 | 只看该作者
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
小魔女 该用户已被删除
地板
发表于 2015-1-27 05:05:21 | 只看该作者
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
活着的死人 该用户已被删除
5#
发表于 2015-2-5 09:27:16 | 只看该作者
由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。
因胸联盟 该用户已被删除
6#
发表于 2015-2-11 08:42:39 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
再见西城 该用户已被删除
7#
发表于 2015-3-2 08:08:10 | 只看该作者
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
只想知道 该用户已被删除
8#
发表于 2015-3-11 05:27:39 | 只看该作者
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。
乐观 该用户已被删除
9#
发表于 2015-3-17 23:10:28 | 只看该作者
还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
莫相离 该用户已被删除
10#
发表于 2015-3-25 11:42:40 | 只看该作者
还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-5-5 08:12

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表