大佬教程收集整理的这篇文章主要介绍了html5语义化标签(二),大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
HTML 5的革新之一:语义化标签二文本元素标签、分组元素标签。
HTML 5的革新——语义化标签(一)中介绍了一些HTML5新加的一些节元素,一张@L_696_4@中结构元素构成网页大体,但是也需要其他内容来填充,譬如图片、文本、代码、表单、交互等等。所以接下来我们就来详细了解HTML5的新增加的和重新定义的文本元素标签、分组元素标签等其他元素标签。
文字对SEO影响很大,而HTML5对一些文本字体元素的语义又重新定义了一遍,也增加了一些新的。那我们就来重新认识他们。
@H_675_14@以上很多只是W3C定义,有些还不支持,但是为了彻底贯彻W3C的语义化,还是慢慢熟悉用起来吧。
文本字体元素标签使用注意:
time元素也是文本标签,因为是全新的标签,所以我们单独来介绍。time元素用来标记一篇文章的发布时间。
<span class="pln" style="color: rgb(72,72,76); "> </span><span class="tag" style="color: rgb(30,52,123); "><time</span><span class="pln" style="color: rgb(72,76); "> </span><span class="atn" style="color: rgb(30,123); ">datetiR_313_11845@e</span><span class="pun" style="color: rgb(147,161,161); ">=</span><span class="atv">"2012-02-15"</span><span class="pln" style="color: rgb(72,123); ">pubdate</span><span class="tag" style="color: rgb(30,123); ">></span><span class="pln" style="color: rgb(72,76); ">2012年02月15日</span><span class="tag" style="color: rgb(30,123); "></time></span>
datetiR_313_11845@e="2012-2-15T22:49:40+08:00"
pubdata
。但是为了美观,我们也可以写成pubdata=""
我们还要注意的是,如果该time
位于一个article中,那么它表示这篇文章的发布时间;如果不在article之中表示整个文档的发布时间。
<span class="tag" style="color: rgb(30,123); "><article></span><span class="pln" style="color: rgb(72,76); "> </span><span class="tag" style="color: rgb(30,123); "><header></span><span class="pln" style="color: rgb(72,76); "> </span><span class="tag" style="color: rgb(30,123); "><h1></span><span class="pln" style="color: rgb(72,76); ">html5jscss网</span><span class="tag" style="color: rgb(30,161); ">=</span><span class="atv">"2012-02-14"</span><span class="tag" style="color: rgb(30,76); ">2月14日</span><span class="tag" style="color: rgb(30,123); "></time></span><span class="pln" style="color: rgb(72,76); ">成立</span><span class="tag" style="color: rgb(30,123); "></h1></span><span class="pln" style="color: rgb(72,123); "><p></span><span class="pln" style="color: rgb(72,76); ">发布 </span><span class="tag" style="color: rgb(30,76); "> 分类:前端交流</span><span class="tag" style="color: rgb(30,123); "></p></span><span class="pln" style="color: rgb(72,123); "></header></span><span class="pln" style="color: rgb(72,76); ">你好世界!</span><span class="tag" style="color: rgb(30,76); "> </span><span class="tag" style="color: rgb(30,123); "></article></span>time示例代码
我们熟悉的div、 p 、dl 、dt、dd、ol、ul、li、hr都是分组元素标签,我们接下来看一些不常用的和新加的分组元素标签
figure元素用来包含一块独立内容,该内容如果被移除掉不会对周围的内容有影响。具体来说它可以用来表示图片,统计图,图表,音频,视频,代码片段等。如果需要你也可以给该内容添加一个标题,这个标题使用figcaption来表示。figcaption只能作为figure元素的子元素,可以放在figure元素内的任何位置。形如:
figure></span><span class="pln" style="color: rgb(72,123); "><img</span><span class="pln" style="color: rgb(72,123); ">src</span><span class="pun" style="color: rgb(147,161); ">=</span><span class="atv">""</span><span class="pln" style="color: rgb(72,123); ">alt</span><span class="pun" style="color: rgb(147,123); ">/></span><span class="pln" style="color: rgb(72,123); "><figcaption></span><span class="pln" style="color: rgb(72,76); ">html5jscss前端网是刚建立的小站</span><span class="tag" style="color: rgb(30,123); "></figcaption></span><span class="pln" style="color: rgb(72,123); "></figure></span>不是所有图片都用figure来包裹,img 标签也有语义的。如果纯粹只是为了呈现的图,也不在文档其他地方引用,那就绝对不要用figure。如果和上下文有关,也可以把它移动到附录,那就别用figure,aside可能适合。
figure元素和aside元素看起来表达的内容差不多,但是aside所能包含的内容比figure要广。当你不知道如何选择的时候可以这样来做:这段内容对周围的内容来说是一个要点,或者很重要,不可少,那么可以使用figure,否则使用aside。
注意:
一个figure元素内最多只允许放置一个figcaption元素,也可以不放,但是其他元素可无限放置。注意不是所有图片都得用figure元素。
在@L_696_4@中除了显示文档活字符外,还需要放入一些其他元素,就是我们所说的嵌入元素。
嵌入元素包括img(图片),@L_696_4@(iframe),多媒体对象将不再全部绑定在 object 或 embed 标签 中,而是由有 video(视频)audio(音频),用于绘画的 canvas 元素
这里我们不详细介绍它们的属性了,以后专门介绍。
HTML5中增加了一些表单元素和一些交互元素等新的标签,但是着重点不同,所以我们放在另一片文章来继续了解。HTML5语义标签到此结束。
以上是大佬教程为你收集整理的html5语义化标签(二)全部内容,希望文章能够帮你解决html5语义化标签(二)所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。