HTML5在a标签内放置块级元素示例代码


Posted in HTML / CSS onAugust 23, 2013

对比起XHTML来说,HTML5通过更简单的元素引起了一系列的思考,坦诚地讲,这真的是急需的简化。这些简化之一就是能够通过<a>标签包装像div,h标签(h1...h6),和段落标记P 这些块级元素。你没看错:用一个A标签包裹块级元素(译者注: 在HTML5以前,a标签属于行内元素,而div,h1,p 等为块级元素,如果强行包裹,可能会被强行截断为多个a标签。当然,都是浏览器的事啦。).

示例代码:

复制代码
代码如下:

<body>
<a href="/about-page.php">
<div class="article">
<h1>关于 David Walsh</h1>
<p>
原文作者是27岁的 Web Developer, 并且是jQuery & MooTools方面的专家级顾问,地址为 Madison, Wisconsin. 同时也是Wynq Web 实验室的创始人兼主程 . 格言:“我并不设计网站,只是让他们跑起来.”
</p>
</div>
</a>
</body>

就是这样,一个A标签包裹着div,p,h1这样的元素,需要注意的是,你不能在一个A标签内包含另一个A标签,否则发生什么事,可能是各个浏览器不一致的。

你如何看待?
对于用A标签包含着块级元素我很矛盾,快速查看时感觉就像一堆垃圾代码。另一方面,为了回避这种方式,我们一直使用JavaScript来处理。可点击元素的目的就是为了完成任务和功能,而使用原生HTML来完成这种功能比起JS来说更自然,有时候肯定会很方便。我想问的是:对于这个实践你如何看待?你能立即使用吗?请分享您的观点!
(译者注:在译者的项目里,一个组员就使用了这个功能。在MyEclipse里面看着很难过,因为是一堆的黄色警告。但是客观来说,有时候有些代码确实很有效,比如什么<red>之类的)

HTML / CSS 相关文章推荐
使用CSS3代码绘制可爱的Hello Kitty猫
Aug 03 HTML / CSS
纯CSS3实现鼠标悬停提示气泡效果
Feb 28 HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
Jul 16 HTML / CSS
HTML5实现锚点时请使用id取代name
Sep 06 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
Dec 31 HTML / CSS
html5定位并在百度地图上显示的示例
Apr 27 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
May 07 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
Jan 14 HTML / CSS
HTML5 背景的显示区域实现
Jul 09 HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 HTML / CSS
CSS3鼠标悬浮过渡缩放效果
Apr 17 HTML / CSS
HTML5 script元素async、defer异步加载使用介绍
Aug 23 #HTML / CSS
html5基础教程常用技巧整理
Aug 20 #HTML / CSS
HTML5中div、article、section的区别及使用介绍
Aug 14 #HTML / CSS
用html5的canvas画布绘制贝塞尔曲线完整代码
Aug 14 #HTML / CSS
HTML5 embed 标签使用方法介绍
Aug 13 #HTML / CSS
HTML5 input元素类型:email及url介绍
Aug 13 #HTML / CSS
HTML5 预加载让页面得以快速呈现
Aug 13 #HTML / CSS
You might like
PHP数组遍历知识汇总(包含遍历方法、数组指针操作函数、数组遍历测速)
2014/07/05 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
分享一个我自己写的ToolTip提示插件(附源码)
2013/01/20 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
Augularjs-起步详解
2016/07/08 Javascript
jQuery动态增减行的实例代码解析(推荐)
2016/12/05 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
Ionic+AngularJS实现登录和注册带验证功能
2017/02/09 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
浅谈Vue的响应式原理
2019/05/30 Javascript
nodejs二进制与Buffer的介绍与使用
2019/07/11 NodeJs
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
Django实现CAS+OAuth2的方法示例
2019/10/30 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
Tensorflow累加的实现案例
2020/02/05 Python
CSS3 Notes: -webkit-box-reflect实现倒影的实例
2016/12/08 HTML / CSS
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
公务员职业生涯规划书范文  
2014/01/19 职场文书
万年牢教学反思
2014/02/15 职场文书
绿色城市实施方案
2014/03/19 职场文书
教师批评与自我批评发言稿
2014/10/15 职场文书
公司年会晚会开幕词
2019/04/02 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书
导游词之山东孔庙
2019/11/04 职场文书
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python