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 icon font完全指南(CSS3 font 会取代icon图标)
Jan 06 HTML / CSS
纯css3实现图片翻牌特效
Mar 10 HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
Feb 04 HTML / CSS
css3实现平移效果(transfrom:translate)的示例
Nov 13 HTML / CSS
CSS3 实现的火焰动画
Dec 07 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
Sep 02 HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
Feb 19 HTML / CSS
详解HTML5中表单验证的8种方法介绍
Dec 19 HTML / CSS
html5 datalist 选中option选项后的触发事件
Mar 05 HTML / CSS
CSS Transition通过改变Height实现展开收起元素
Aug 07 HTML / CSS
css中:last-child不生效的解决方法
Aug 05 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
收音机的保养
2021/03/01 无线电
PHP新建类问题分析及解决思路
2015/11/19 PHP
php实现图片以base64显示的方法
2016/10/13 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
2013/04/12 Javascript
JS实现根据出生年月计算年龄
2014/01/10 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
详解用vue.js和laravel实现微信授权登陆
2017/06/23 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
微信小程序轮播图swiper代码详解
2020/12/01 Javascript
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
Python pickle模块用法实例
2015/04/14 Python
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
python将时分秒转换成秒的实例
2019/12/07 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
python Shapely使用指南详解
2020/02/18 Python
python通过对字典的排序,对json字段进行排序的实例
2020/02/27 Python
python3.5的包存放的具体路径
2020/08/16 Python
python之随机数函数的实现示例
2020/12/30 Python
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
美国主要的特色咖啡和茶公司:Peet’s Coffee
2020/02/14 全球购物
房屋转让协议书范本
2014/04/11 职场文书
竞选体育委员演讲稿
2014/04/26 职场文书
网站创业计划书
2014/04/30 职场文书
购房公证委托书(2014版)
2014/09/12 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
2015年小学总务工作总结
2015/07/21 职场文书
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang
python3实现无权最短路径的方法
2021/05/12 Python
Windows server 2016服务器基本设置
2022/08/14 Servers