《HTML5开发手册》——2.8 初学者“菜谱”:为多个元素添加相同的超链接

2.8 初学者“菜谱”:为多个元素添加相同的超链接

HTML5中一个非常实用的新特性是将某些元素组合起来,显示单个链接来提供更宽的点击空间。而在以前,我们需要使用JavaScript或一系列组合元素才能完成这种功能。

在HTML 4中,在编写新闻或博客主页等含有众多文章链接的页面时,我们需要使用代码2.13的方法使每个项目都可点击。

代码2.13 在HTML 4中包裹链接

代码2.14所示为在HTML5中直接使用一个a元素做到这一点。

代码2.14 在HTML5中包裹链接

虽然可以直接将article元素放在a元素中,但是目前这将造成一些浏览器的兼容问题。因此,我们不建议这样使用。

时间: 2024-10-02 23:56:22

《HTML5开发手册》——2.8 初学者“菜谱”:为多个元素添加相同的超链接的相关文章

《HTML5开发手册》——2.4 初学者“菜谱”:使用address元素提供通信信息

2.4 初学者"菜谱":使用address元素提供通信信息 规范中将address元素定义为"分节元素",与nav或article类似.不过,我们将它放在本章讲解,主要因为我们认为它作为文本级语义更为合适,原因是它的用法与文字内容相关,而不是页面布局. 多年以来,Web开发人员一直错误地使用了address元素.它并非显示通用邮寄地址(通常在某个"联系我们"页面中)的通用方式.因此,下面这种使用方式是错误的: https://yqfile.ali

《HTML5开发手册》——1.5 初学者“菜谱”:使用nav元素创建导航

1.5 初学者"菜谱":使用nav元素创建导航 顾名思义,nav元素的作用是提供导航.它用于链接到网站内的其他页面,或者是链接到一个页面的其他部分(例如目录). nav最常用的用途是作为网站的主导航.很多情况下,开发者都使用无序列表编写导航,如代码1.4所示. 代码1.4 传统的导航编写方式 在HTML5中创建nav元素时,该代码没有太大变化.生成图1.5所示的代码看起来如代码1.5所示. 代码1.5 HTML5中的导航编写方式 https://yqfile.alicdn.com/f5

《HTML5开发手册》——1.3 初学者“菜谱”:使用header元素建立网站标头

1.3 初学者"菜谱":使用header元素建立网站标头 我们首先从一个典型的Web页面的顶端开始. header元素经常出现在Web页面的最上面,它通常包含了logo.网站名称.网站导航等信息.它可以在一个页面中多次使用,后面将会讲到,它可以用于页面中特定分段区域(section)的导航,而不仅仅是页面到页面的导航.诸如搜索栏或者目录等也可以包含在header元素中.下面是一个简单的例子: HTML5规范提到,header元素可以包含导航,所以图1.2中的元素可以使用一个包含logo

《HTML5开发手册》——1.4 初学者“菜谱”:使用hgroup元素组合标题

1.4 初学者"菜谱":使用hgroup元素组合标题 使用新的HTML5元素hgroup,可以为header添加更多信息. 这个元素用来对多个相关联的h1-h6标题进行分组.如果你的网站有副标题,可以使用代码1.3所示的元素,这将生成图1.4所示的布局.虽然hgroup是一个有效的分组选项,但是它主要是用来告知文档大纲(后面将讨论)哪个标题是最重要的.在代码1.3中,文档大纲只会包括最顶层的标题,在本例中是h1. 代码1.3 除h1之外,不包含其他所有标题 在代码1.3中,h2标题是与

《HTML5开发手册》——1.9 初学者“菜谱”:使用footer元素

1.9 初学者"菜谱":使用footer元素 顾名思义,footer元素通常位于页面的底部.尽管footer通常位于某个区域或者页面的底部,但也并非总是如此.footer元素旨在包含作者.网站所有者.版权数据.网站规章制度等信息.如果它位于article或section中,则包含文章发布的日期.标记.分类和其他元数据. HTML5规范为一个非常常见的Web元素-页面中的版权声明-提供了一个解决方案: 以上的代码示例一般都放置在

《HTML5开发手册》——2.6 初学者“菜谱”:使用s元素显示不准确或不相关的内容

2.6 初学者"菜谱":使用s元素显示不准确或不相关的内容 以前,s元素是特意用来显示带删除线的文字的.在HTML5中,s元素得以重新定义,它现在用来显示不再正确或不相关的内容. 这意味着可以使用它显示某个产品曾经的价格,而这个产品现在的价格已经有所变化,如图2.5所示.虽然在此情景下,使用s元素显示过时信息能够为读者带来很大便利,但并非总是正确的,这得视上下文而定.代码2.7所示为应当在何处使用这个元素. 代码2.7 s元素的使用 在HTML 4中,s元素被定义为删除线文本,所以默认

《HTML5开发手册》——2.5 初学者“菜谱”:使用mark元素高亮文本

2.5 初学者"菜谱":使用mark元素高亮文本 利用mark元素,文档作者可以高亮显示文档中的某些文本以达到醒目的效果. 如果用户在站点中进行搜索,搜索页面中的关键字可以高亮显示.这时,就可以很好地利用到mark元素.不选用strong或者em元素的原因是,我们并非想要强调这些关键字,而仅仅是为用户提供高亮效果.图2.4所示为如何使用mark元素.代码2.6所示为对应的HTML和CSS. 代码2.6 mark元素和额外的CSS

《HTML5开发手册》——2.3 初学者“菜谱”:使用details元素创建可伸缩控件

2.3 初学者"菜谱":使用details元素创建可伸缩控件 在本书撰写时,只有Chrome 13+支持新的details元素.但愿其他浏览器能尽快支持它. 利用details元素能够在无需任何JavaScript和/或CSS的情况下,创建交互式展开/收缩的开关效果.在其中使用summary元素还可以创建内容的概述信息. details有一个可选属性:open.若其为真,内容默认为展开样式:反之则为收缩样式,显示summary内容.Summary是一个可点击的部分,用以控制内容的展开与

《HTML5开发手册》——1.6 中级“菜谱”:使用新article元素

1.6 中级"菜谱":使用新article元素 HTML5开发手册article元素和section元素(下一节讨论)是否是HTML5结构元素中最重要的两个,还有待讨论.不过它们肯定是最让人困惑的. article元素是一个独立的内容块,它既可以独立存在,也可以被重用.RSS订阅中的内容就非常有代表性,因为每项基本都是独立的文章.你完全可以把某项从中抽取出来,而它仍然是具有意义的. HTML5规范给出了一些如何使用article元素的示例:论坛的帖子.杂志或新闻的文章.一篇博文或用户提