心雨在线科技

以规范的流程和专注的态度,为您提供全方位的设计服务

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

发布时间:2019-04-13   浏览次数:232

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

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

src=http://www.webjx.com/files/allimg/130717/1214090.png

很遗憾,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 中加入诸如这样的代码:

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

批注:(深圳市心雨在线科技开发有限公司 www.xyzxkj.com 是一家专业从事互联网品牌网站建设,APP客户端,微信定制开发,O2O商城开发,响应式网站,,营销型PC网站,系统软件定制开发,美工形象设计,在线印刷事务等,上千家企业客户的成功选择,专业品质,服务至上,联系电话:郑先生 13148852471  在线QQ:113454847)
 
返回列表
上一篇:HTML5教程:如何实现HTML5离线应用开发
下一篇:HTML教程XHTML教程:HTML标记嵌套使用技巧

在线
客服

在线客服
尊敬的客户,我们24小时竭诚为您服务 公司总机:0755-89808693(32条线)

客服
热线

0755-89808693
7*24小时客服服务热线

关注
微信

关注官方微信

返回
顶部