跟永哥学HTML5(6)H5语义化标记使用示例

介绍了HTML5中新增的语义化标记article section aside hgroup header footer nav time mark figure figcaption,对各个标记给出解释和应用示例。

跟永哥学HTML5(3):HTML5新增语义化元素的使用   对新增语义化元素已经做过讲解,本节将巩固H5语义化标记的使用

article

— 解释
article标签装载显示一个独立的文章内容。例如一篇完整的论坛帖子,一则网站新闻,一篇博客文章等等,一个用户评论等等 artilce可以嵌套,则内层的artilce对外层的article标签有隶属的关系。例如,一个博客文章,可以用article显示,然后一 些评论可以以article的形式嵌入其中。

— 示列

<article>
   <h1>文章标题</h1>
   这是一篇文章
  <article>评论1...</article>
  <article>评论2...</article>
</article>

section

— 解释
section 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

— 示列

<body>
  <section>
         <h1>章节一</h1>
         <p>详细内容...</p>
  </section>
   <section>
     <h1>章节二</h1>
     <p>详细内容...</p>
   </section>
</body>

aside

— 解释
aside 用来装载非正文类的内容。例如广告,成组的链接,侧边栏等等。

— 示列

<aside>
 热门文章
</aside>
<aside>
 广告
</aside>
<article>
 <h1>文章标题</h1>
 这是一篇文章
 <article>评论1...</article>
 <article>评论2...</article>
</article>

hgroup

— 解释
hgroup 标签用于对网页或区段的标题元素(h1-h6)进行组合。例如,在一个区段中你有连续的h系列的标签元素,则可以用hgroup将他们括起来。

— 示列

<hgroup>
 <h1>The reality dysfunction</h1>
 <h2>Space is not the only void</h2>
</hgroup>
<hgroup>
 <h1>Dr. Strangelove</h1>
 <h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2>
</hgroup>

header

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/4893.html

(0)
江山如画的头像江山如画管理团队
上一篇 2020年2月11日 下午12:18
下一篇 2020年2月12日 上午9:04

99%的人还看了以下文章

  • HTML5+CSS3制作网页实例:HTML5入门

    文章最后提供HTML5+CSS3制作网页实例源码下载。 步骤1 -设计 设计师先根据构想使用PHOTOSHOP设计页面,然后开始HTML和CSS编码,从设计背景、颜色和字体,细节部分的工作内容。 步骤2 – HTML 头部html代码 <!DOCTYPE html> <html> <head> <meta…

    2019年3月7日
    18.2K0
  • Div+CSS左侧尺寸固定右侧自适应布局的5种实现方法

    css多栏自适应布局一般使用position属性布局,或者用float属性布局,也可以使用display属性。 position适合首页布局,因为首页内容往往可以完全控制。float适合模板布局,模板中填充的内容无法控制。 相关阅读:左侧固定,右侧自适应布局的两种实现方法 1、浮动实现 原理:左侧定宽浮动,右侧使用margin-left,且不要定宽,容器尺寸…

    2021年11月29日
    11.2K0
  • 第13课:HTML音频/视频

    HTML 音频 在 HTML 中播放音频并不容易!您需要谙熟大量技巧,以确保您的音频文件在所有浏览器中(Internet Explorer, Chrome, Firefox, Safari, Opera)和所有硬件上(PC, Mac , iPad, iPhone)都能够播放。 <embed> 元素 <embed> 标签,这是一个 HT…

    2018年1月18日
    8.9K0
  • 手把手,永哥教你学会css sprite(雪碧图)技术

    css sprite又称雪碧图或css精灵。 雪碧图就是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。 雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上,使用雪碧图只需要引用一张图片,对内存和带宽更加友好。 css sprite优点: 有效减少网站的http请求数量,加…

    2018年2月20日
    14.5K0
  • 纯CSS制作热门文章排行,且前3名背景不同

    要制作文章排行前10、或评论排行榜1、2、3、4…,还要给前三名加上不同的背景,可以用纯css实现(用Ol,li),但通常网页制作中使用ul的比较多,因为不同浏览器对ol li有序列表默认自带的序号列表有着不同显示,容易引起浏览器兼容问题,所以遇到这样的有序排版布局,最简单是将序号切成背景图片! 使用ul li实现文章排行有序排版布局。   htm…

    2018年7月14日
    4.3K0
  • CSS制作上一页 下一页 页码显示样式

    今天教大家制作页面的上一页 下一页 页码显示样式,效果如图所示。 <!doctype html> <html> <head> <meta charset=”utf-8″> <title>CSS制作上一页 下一页 页码显示样式|www.125jz.com</title> <style…

    2018年7月29日
    6.8K0

发表回复

登录后才能评论