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 object-fit属性
Jul 27 HTML / CSS
纯css3(无图片/js)制作的几个社交媒体网站的图标
Mar 21 HTML / CSS
css3与html5实现响应式导航菜单(导航栏)效果分享
Feb 12 HTML / CSS
使用css3实现的tab选项卡代码分享
Dec 09 HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 HTML / CSS
详解HTML5 LocalStorage 本地存储
Dec 23 HTML / CSS
Html5 postMessage实现跨域消息传递
Mar 11 HTML / CSS
HTML5 中新的全局属性(整理)
Jul 31 HTML / CSS
html5小技巧之通过document.head获取head元素
Jun 04 HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
Aug 18 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
Jan 12 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调用mysql数据 dbclass类
2011/05/07 PHP
PHP中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
php ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
php车辆违章查询数据示例
2016/10/14 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
PHP实现的解汉诺塔问题算法示例
2018/08/06 PHP
JS宝典学习笔记(下)
2007/01/10 Javascript
二级域名或跨域共享Cookies的实现方法
2008/08/07 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
JavaScript代码复用模式详解
2014/11/07 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
Nuxt.js实战详解
2018/01/18 Javascript
使用puppeteer破解极验的滑动验证码
2018/02/24 Javascript
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
如何构建 vue-ssr 项目的方法步骤
2020/08/04 Javascript
教你如何在Django 1.6中正确使用 Signal
2014/06/22 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
python lambda表达式在sort函数中的使用详解
2019/08/28 Python
python能否java成为主流语言吗
2020/06/22 Python
HTML5实现WebSocket协议原理浅析
2014/07/07 HTML / CSS
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
历史系自荐信范文
2013/12/24 职场文书
财务方面个人工作的自我评价
2013/12/28 职场文书
政法学院毕业生求职信
2014/02/28 职场文书
诚信考试承诺书
2014/03/27 职场文书
开业庆典活动策划方案
2014/09/21 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP
python超详细实现完整学生成绩管理系统
2022/03/17 Python