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

发布时间：2019-04-13浏览次数：954 <p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介：</font><font color="#000000">Web 标准中处处充满了打脸行为，这条规则现在已经失效了！在那篇文章发布一个月后，HTML5doctor 发表了 “Block-level” links in HTML5，引述一下，就是原先你要这么写.</font> </td> </tr></tbody></table> <p>英文叫做 “Block-level” links，我以为只有我厂那些鸟毛不知道，没想到不知道的还挺多，需要普及一下。</p> <p align="center"><img class="aligncenter" alt="" src="http://www.webjx.com/files/allimg/130717/1214090.png"></p> <p>很遗憾，Web 标准中处处充满了打脸行为，这条规则现在已经失效了！在那篇文章发布一个月后，HTML5doctor 发表了 “Block-level” links in HTML5，引述一下，就是原先你要这么写：</p> <p>&lt;div class="story"&gt; <br>&lt;h3&gt;&lt;a href="story1.html"&gt;Bruce Lawson voted sexiest man on Earth&lt;/a&gt;&lt;/h3&gt; <br>&lt;p&gt;&lt;a href="story1.html"&gt;&lt;img src="bruce.jpg" alt="full story. " /&gt;A congress representing all the planet's women unanimously voted Bruce Lawson as sexiest man alive.&lt;/a&gt;&lt;/p&gt; <br>&lt;p&gt;&lt;a href="story1.html"&gt;Read more&lt;/a&gt;&lt;/p&gt; <br>&lt;/div&gt; </p> <p>现在 HTML5 中可以这么写</p> <p>&lt;article&gt; <br>&lt;a href="story1.html"&gt; <br>&lt;h3&gt;Bruce Lawson voted sexiest man on Earth&lt;/h3&gt; <br>&lt;p&gt;&lt;img src="bruce.jpg" alt="gorgeous lovebundle. "&gt;A congress representing all the planet's women unanimously voted Bruce Lawson as sexiest man alive.&lt;/p&gt; <br>&lt;p&gt;Read more&lt;/p&gt; <br>&lt;/a&gt; <br>&lt;/article&gt; </p> <p>从无障碍角度考虑仅仅增加了图片的 alt 描述文字（为读屏用户提供更详细的信息），而不需人为的制造辣么多个“冗余”的 a！HTML5 的思想中的一条就是务实，用现在的话说就是接地气，嗯哼~</p> <p>虽然这种写法不向前兼容，但经过 HTML5 doctor 的测试表明，主流浏览器都支持，也就是说：</p> <p>你和你的小伙伴们现在就可以在项目中使用啦！<br>为了兼容 IE6/7 的手型 bug，需要在 reset.css 中加入诸如这样的代码：</p> <p>1 a div, a h3, a p, ...{#cursor:hand} </p>