HTML5 中的块级链接
英文叫做 “Block-level” links,我以为只有我厂那些鸟毛不知道,没想到不知道的还挺多,
需要普及一下。
最近看了 kejun 的 PPT
前端开发理论热点面对面:从怎么看,到怎么做?,p21 引用了
10 HTML Tag Crimes You Really Shouldn’t Commit
中的一条:
很遗憾,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 中加入诸如这样的代码:
a div, a h3, a p, ...{#cursor:pointer;}
HTML5 中的块级链接的更多相关文章
- HTML5中对于块级元素和行内元素的总结
转自:https://www.cnblogs.com/iverson666/p/9169274.html块级元素:块级大多为结构性标记 <address>...</adderss&g ...
- html 中的块级元素 内联元素
上一个礼拜,做crm项目,使用的大部分都是js,nodejs,ajax 的内容,但是今天我想写写关于html中的块级元素和内联元素 的东西. 首先,html 中的块级元素 内联元素 我们可以看到,这两 ...
- js中的块级作用域
概述 函数是js中最常见的作用域单元, 声明在一个函数内部的变量或函数会在所处的作用域中隐藏起来, 这是有意为之的非常好的设计原则. 但是随着js的发展, 我们有了某个代码块(通常指{..}内部)隐藏 ...
- javascript中模仿块级作用域
学过 javascript 的都知道 javascript 里面没有块级作用域的概念,这就意味着在块语句中定义的变量,实际上是在包含函数中而非语句中创建的,看下面的例子: function outPu ...
- HTML5中的行级标签和块级标签
行级标签 1.行级标签又称为内联标签,行级标签不会单独占据一行,设置宽高无效. 2.行内内部可以容纳其他行内元素,但不可以容纳块元素.有span.strong.em.b.i.input.a.img.u ...
- HTML5网页制作教程:HTML5块级链接
网页制作Webjx文章简介:Web 标准中处处充满了打脸行为,这条规则现在已经失效了!在那篇文章发布一个月后,HTML5doctor 发表了 “Block-level” links in HTML5, ...
- 学习笔记——关于HTML(含HTML5)的块级元素和行级(内联)元素总结
1.首先我们要知道什么是块级元素和行级(内联)元素? 块级(block)元素的特点: ①总是在新行上开始: ②高度,行高以及外边距和内边距都可控制: ③宽度缺省是它的容器的100%,除非设定一个宽度: ...
- 关于HTML(含HTML5)的块级元素和行级(内联)元素总结
1.首先我们要知道什么是块级元素和行级(内联)元素? 块级(block)元素的特点: ①总是在新行上开始: ②高度,行高以及外边距和内边距都可控制: ③宽度缺省是它的容器的100%,除非设定一个宽度: ...
- html中的块级元素和行内元素
块级元素:块级大多为结构性标记 <address>...</adderss> <center>...</center> 地址文字 <h1> ...
随机推荐
- 从零单排Linux – 3 – 目录结构
从零单排Linux – 3 – 目录结构 1.FHS标准(filesystem hierarchy standard) why? –> 为了规范,还有为了linux的发展 重点 –> 规范 ...
- jQurey对表单表格的操作及更多应用(方法型)
- javascript 实现图片预览(未上传到服务器端)
1,图片预览 越来越多的浏览器为了安全,都不能获得文件的,全路径,实现图片预览实现起来有点麻烦.有人选择复制图片到服务器的某个路径下,然后从服务器端找到路径,实现预览.但这不是最佳实现方案,如果用户一 ...
- JSON解析保存在类中
//my.h#ifndef __1_Header_h#define __1_Header_h#define DEBUG 1#define aa 1 #ifdef aa#ifdef DEBUG#defi ...
- 点线图中的A*算法
A*简介 A*(A-Star)算法是一种启发式算法,是静态路网中求解最短路最有效的方法.公式表示为:f(n)=g(n)+h(n), 其中f(n) 是节点n从初始点到目标点的估价函数, g(n) 是在状 ...
- iOS 非ARC基本内存管理系列 5-autorelease方法使用总结
autorelase:可以将对象交给自动释放池中,释放池销毁的时候对里面的对象做一次release操作代码如下 @autoreleasepool { Person *person = [[[Perso ...
- input中id和name属性的区别。
input中id和name属性的区别. 做网站很久了,但到现在还没有搞明白input中name和id的区别,最近学习jquery,又遇到这个问题,就在网上搜集资料.看到这篇,就整理出来,以备后用. 可 ...
- Jquery 禁用 a 标签 onclick 事件30秒后可用
<a href="javascript:;" id="sendToTel" >发送短信</a> <script type=&quo ...
- Qt模拟C#的File类对文件进行操作
其实只是QT菜鸟为了练习而搞出来的 文件头: #include <QFile> #include <QString> #include <iostream> #in ...
- PHPStorm 2016.2 - 2016.3许可证服务器
最快,最安全的选择,以激活您的PHPStorm 2016.2 - 2016.3,这是足够的激活服务器,软件将自动激活.该过程将不断更新,如果不工作评价写入,如果有,以激活没有列出的服务器也可以说. 通 ...