HTML5网页制作教程:HTML5块级链接

王朝学院·作者佚名  2016-05-23
窄屏简体版  字體: |||超大  

HTML5网页制作教程:HTML5块级链接网页制作Webjx文章简介:Web 标准中处处充满了打脸行为,这条规则现在已经失效了!在那篇文章发布一个月后,HTML5doctor 发表了 “Block-level” links in HTML5,引述一下,就是原先你要这么写.

英文叫做 “Block-level” links,我以为只有我厂那些鸟毛不知道,没想到不知道的还挺多,需要普及一下。

很遗憾,Web 标准中处处充满了打脸行为,这条规则现在已经失效了!在那篇文章发布一个月后,HTML5doctor 发表了 “Block-level” links in HTML5,引述一下,就是原先你要这么写:

<div class="story"><h3><a href="story1.html">Bruce Lawson voted sexiest man on Earth</a></h3><p><a href="story1.html"><img src="bruce.jpg" alt="full story. " />A congress rePResenting all the planet's women unanimously voted Bruce Lawson as sexiest man alive.</a></p><p><a href="story1.html">Read more</a></p></div>

现在 HTML5 中可以这么写

<article><a href="story1.html"><h3>Bruce Lawson voted sexiest man on Earth</h3><p><img src="bruce.jpg" alt="gorgeous lovebundle. ">A congress representing all the planet's women unanimously voted Bruce Lawson as sexiest man alive.</p><p>Read more</p></a></article>

从无障碍角度考虑仅仅增加了图片的 alt 描述文字(为读屏用户提供更详细的信息),而不需人为的制造辣么多个“冗余”的 a!HTML5 的思想中的一条就是务实,用现在的话说就是接地气,嗯哼~

虽然这种写法不向前兼容,但经过 HTML5 doctor 的测试表明,主流浏览器都支持,也就是说:

你和你的小伙伴们现在就可以在项目中使用啦!为了兼容 IE6/7 的手型 bug,需要在 reset.CSS 中加入诸如这样的css代码:

1 a div, a h3, a p, ...{#cursor:hand}

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航