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 border-radius属性详解
Jul 05 HTML / CSS
CSS3盒子模型详解
Apr 24 HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 HTML / CSS
CSS3中HSL和HSLA的简单使用示例
Jul 14 HTML / CSS
基于css3的属性transition制作菜单导航效果
Sep 01 HTML / CSS
html5 更新图片颜色示例代码
Jul 29 HTML / CSS
整理HTML5移动端开发的常用触摸事件
Apr 15 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 HTML / CSS
吃透移动端 Html5 响应式布局
Dec 16 HTML / CSS
HTML5公共页面提取作为公用代码的方法
Jun 30 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 HTML / CSS
CSS控制继承中的height能变为可继承吗
Jun 10 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 smarty函数扩展
2010/03/15 PHP
php获取随机数组列表的方法
2014/11/13 PHP
PHP Cookie学习笔记
2016/08/23 PHP
php  PATH_SEPARATOR判断当前服务器系统类型实例
2016/10/28 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
php递归函数怎么用才有效
2018/02/24 PHP
JavaScript delete操作符应用实例
2009/01/13 Javascript
Javascript的构造函数和constructor属性
2010/01/09 Javascript
YUI的Tab切换实现代码
2010/04/11 Javascript
JavaScript开发规范要求(规范化代码)
2010/08/16 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
2015/03/18 Javascript
bootstrap PrintThis打印插件使用详解
2017/02/20 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
python实现共轭梯度法
2019/07/03 Python
你可能不知道的Python 技巧小结
2020/01/29 Python
Python使用configparser库读取配置文件
2020/02/22 Python
Python+OpenCV图像处理——实现直线检测
2020/10/23 Python
Timberland俄罗斯官方网上商店:全球领先的户外品牌
2020/03/15 全球购物
教师实习自我鉴定
2013/12/11 职场文书
物业招聘计划书
2014/01/10 职场文书
水电工岗位职责
2014/02/12 职场文书
常务副总经理任命书
2014/06/05 职场文书
影子教师研修方案
2014/06/14 职场文书
2014超市收银员工作总结
2014/11/13 职场文书
费用申请报告范文
2015/05/15 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
结婚典礼致辞
2015/07/28 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书