小妖女 发表于 2015-1-15 22:27:31

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

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

起首,链接a和按钮button是有语义的,不克不及由于利用上的便利而交换。a是anchor的缩写,是一个锚点,用来导航或定位。典范用法为:
<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事务:
<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)制止了默许事务,实践上,上面这些写法都没成绩:
<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语音识别(现在一般用在搜索上),目前相关介绍还是挺多的。为何呢?因为很简单!
鼠标的悬浮款式,也基本不是成绩:
http://www.poluoluo.com/files/allimg/090207/1409474.png
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有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.

活着的死人 发表于 2015-2-5 09:27:16

由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。

因胸联盟 发表于 2015-2-11 08:42:39

所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.

再见西城 发表于 2015-3-2 08:08:10

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。

只想知道 发表于 2015-3-11 05:27:39

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

乐观 发表于 2015-3-17 23:10:28

还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

莫相离 发表于 2015-3-25 11:42:40

还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。
页: [1]
查看完整版本: 来讲讲:链接A的语义、写法和最好理论