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实现的8种Loading动画效果
Jul 05 HTML / CSS
一款基于css3的动画按钮代码教程
Nov 23 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 HTML / CSS
CSS3点击按钮实现背景渐变动画效果
Oct 19 HTML / CSS
websocket+sockjs+stompjs详解及实例代码
Nov 30 HTML / CSS
微信端html5页面调用分享接口示例
Mar 14 HTML / CSS
HTML5实现签到 功能
Oct 09 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
Oct 17 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 HTML / CSS
使用Html5多媒体实现微信语音功能
Jul 26 HTML / CSS
Html5实现首页动态视频背景的示例代码
Sep 25 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
Aug 20 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遍历文件夹与子目录的函数代码
2011/09/26 PHP
浅谈PHP中单引号和双引号到底有啥区别呢?
2015/03/04 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
Javascript String对象扩展HTML编码和解码的方法
2009/06/02 Javascript
javascript 设置文本框中焦点的位置
2009/11/20 Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
风吟的小型JavaScirpt库 (FY.JS).
2010/03/09 Javascript
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
js清理Word格式示例代码
2014/02/13 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
微信小程序中显示html格式内容的方法
2017/04/25 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
讲解vue-router之什么是动态路由
2018/05/28 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
2018/08/01 Javascript
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
[04:26]2014DOTA2国际邀请赛-Newbee顺利进入胜者组决赛 独家专访战神7
2014/07/19 DOTA
Python中的自定义函数学习笔记
2014/09/23 Python
Python标准库sched模块使用指南
2017/07/06 Python
python 输入一个数n,求n个数求乘或求和的实例
2018/11/13 Python
为什么Python中没有&quot;a++&quot;这种写法
2018/11/27 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
大学生学习2014全国两会心得体会
2014/03/13 职场文书
未婚证明范本
2015/06/15 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书
利用Python多线程实现图片下载器
2022/03/25 Python
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android
Go web入门Go pongo2模板引擎
2022/05/20 Golang