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之transition实现下划线的示例代码
May 30 HTML / CSS
详解CSS3弹性伸缩盒
Sep 21 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
Jul 05 HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
Dec 13 HTML / CSS
html5使用canvas绘制文字特效
Dec 15 HTML / CSS
全面解析HTML5中的标准属性与自定义属性
Feb 18 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
Jan 31 HTML / CSS
HTML5自定义mp3播放器源码
Jan 06 HTML / CSS
浅析CSS在DevTools 中架构演变
Oct 05 HTML / CSS
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
Apr 19 HTML / CSS
通过feDisplacementMap和feImage实现水波特效
Apr 24 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.ini中文版
2006/10/09 PHP
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
Javascript 对象的解释
2008/11/24 Javascript
js 创建快捷方式的代码(fso)
2010/11/19 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
javascript的BOM
2016/05/03 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
Angular实现响应式表单
2017/08/04 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
2019/09/11 Javascript
webpack3.0升级4.0的方法步骤
2020/04/02 Javascript
Python实现定时任务
2017/02/08 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
python sklearn常用分类算法模型的调用
2019/10/16 Python
新西兰床上用品和家居用品购物网站:Adairs
2018/04/27 全球购物
在什么时候需要使用"常引用"
2015/12/31 面试题
MVC的各个部分都有那些技术来实现?如何实现?
2016/04/21 面试题
洗发露广告词
2014/03/14 职场文书
给校长的建议书100字
2014/05/16 职场文书
自愿离婚协议书范本
2015/01/26 职场文书
入党介绍人考察意见
2015/06/01 职场文书
庆祝教师节主题班会
2015/08/17 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
基于PyQt5制作一个群发邮件工具
2022/04/08 Python
宝塔更新Python及Flask项目的部署
2022/04/11 Python