<header>
<nav>
<ul>
<li><a href="">栏目1</a></li>
<li><a href="">栏目2</a></li>
<li><a href="">栏目3</a></li>
</ul>
</nav>
</header> <main>
<article>
<header>
<hgroup>
<h1>这是h1标题</h1>
<h2>这是文章的副标题</h2>
</hgroup>
<p>这是头部的文字,文章发布于<time>2016-02-24</time></p>
</header>
<div class="content">
<p>这里是文章的正文。</p>
<figure>
<img src="xxx.jpg" alt="xxx">
<figcaption>这里是图片的图片标题</figcaption>
</figure>
</div>
</article>
</main> <aside>
<h2>相关文章推荐</h2>
<ul>
<li>文章1</li>
<li>文章2</li>
</ul>
</aside>
<footer>
<p>这是页脚的文字</p>
</footer>

html5最重要的特性之一,是引入了一些具有语义的标签,使得页面的代码更可读和结构化。
基本上来说,IE8以下的版本对html5的新标签支持非常差,需要一些方法来使这些浏览器支持这些新标签。

<time>标签:
用于标记时间和日期。

<nav>标签:
用来标注导航链接。一个页面可以包含多个nav区块。

<main>标签:
标记文档的主要内容。

<article>标签:
表示一个完整的、自成一体的内容块,如博客文章、新闻报道或者用户评论等。<article>标签应该包含所有相关的内容,包括标题、作者署名以及正文等。

<header>标签:
用来描述或导航包含它的父级区块,通常需要包含h标签。在一个网页中可以有多个header标签。如同时有网页的header和正文的header。

<hgroup>标签:
如果除了主标题,还有一个副标题,则应该把h1和h2放到hgroup中,此时h2不表示下面文字的子标题,而是整篇文章的副标题。

<figure>标签:
用来标记插图区域。插图是文章中的附图,在文章中会提到它。

<figcaption>标签:
用来标记题图。

<aside>标签:
用来标记与周围内容关系不太密切的内容,如广告、侧边栏等。

<section>标签:
是一个带标题的独立性内容块。

<footer>标签:
用来标记网页的页脚,放置一些网站版权信息等不太重要的信息。

html5中的一些新语义标签的更多相关文章

  1. Html5 中的新语义标签

    1.1 语义标签对于我们并不陌生,如<p>表示一个段落.<ul>表示一个无序列表<h1> ~ <h6>表示一系列标题等,在此基础上HTML5增加了大量更 ...

  2. [翻译]HTML中不知名的语义标签

    原文:http://docs.webplatform.org/wiki/tutorials/Lesser_-_known_semantic_elements HTML5中比较常用的语义元素有heade ...

  3. HTML5 中的一些新特性

    HTML5是HTML最新的修订版本,包含了新的标签元素,属性和行为,同时包含了一系列可以被用来让 Web 站点和应用更加多样化,功能更强大的技术.HTML5实现了不依赖flash插件播放视频,而且引入 ...

  4. 【HTML5】---【HTML5提供的一些新的标签用法以及和HTML 4的区别】

    HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务(p ...

  5. 让低版本IE支持Html5的新语义标签

    HTML5能为我们做的事儿很多,最为可口的就是语义化标签的应用,如果你已经在Chrome或者其他支持HTML5的浏览器上用过它的牛x,那这篇文章对你一定有用,因为现在你也可以在IE上用到HTML5. ...

  6. HTML5中的文本级语义

    <p>这篇文章的发布时间是<time datetime="2016-02-26T16:30+08:00" pubdate>今天</time>&l ...

  7. html5中contenteditable属性如果过滤标签,过滤富文本样式

    ​​在div中使用contenteditable=”true”可以达到模拟输入框的效果,但是当我们复制其他网页内容进去的时候,会发现连带的样式也一起复制进去了.很明显我们不需要复制富文本样式,那么如何 ...

  8. HTML5中的DOM新特性

    元素下的classList属性 classList属性下面有四个方法: add(value): 添加,已存在的属性不添加 remove(value):删除属性 contain(value):检测属性是 ...

  9. html5中常被忘记的标签,属性

    placeholder placeholder是input中的属性,就是默认输入的text,当用户输入时,text会被清空. 用法 <input type ="text" p ...

随机推荐

  1. ZooKeeper报错

    运行python 出现exception=java.io.IOException: Can't get master address from ZooKeeper; znode data == nul ...

  2. C#开发COM组件

    1.每个COM组件所有对外公布的方法都必须通过接口形式实现: 2.由于.Net下编译的COM组件并等同于C编译的COM组件,所以存在必须在运行目标机器注册的情况,对此.Net下编译的COM组件必须为程 ...

  3. KEIL MDK 5.12帮你快速建工程模板的技巧

    KEIL 5帮你快速建工程模板的技巧 本人使用keil mdk 5.12有一段时间了,发现keil mdk 5.12里面驱动库比较方便.这个新功能可以节省我们的时间,也可以让初学者能尽快上手和掌握这个 ...

  4. ios获取摄像头与相册图片

    iOS的一些设备上都安装了摄像头.现在绝大多数都有了. 在编程中,我们是用相应的东西来进行照相,录像等功能.   一.UIImagePickerController类 UIImagePickerCon ...

  5. Oracle VM VirtualBox 虚拟机与主机共享文件

    安装增强功能(参考文档) VirtualBox自带了一个增强工具Sun VirtualBox Guest Additions,这是实现虚拟机与真实主机共享的关键.启动虚拟机后,点击控制菜单“设备”→“ ...

  6. [转] Java内部类详解

    作者:海子 出处:http://www.cnblogs.com/dolphin0520/ 本博客中未标明转载的文章归作者海子和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置 ...

  7. Android ActionBar以及menu的代码设置样式

    menu部分xml代码 <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android= ...

  8. 项目问题总结:Block内存泄露 以及NSTimer使用问题

    BLock的内存泄露 在我们代码中关于block的使用可以说随处可见,第一次接触block的时候是关于UIView的块动画,那时觉得block的使用好神奇,再后来分析总结为block其实就是一个c语言 ...

  9. 学习笔记day6:position index结合

    z-index属性适用于定位元素(position 属性值为 relative 或 absolute 或 fixed的对象),用来确定定位元素在垂直于显示屏方向(称为Z轴)上的层叠顺序(stack o ...

  10. Monkey学习(1)环境搭建

    环境搭建: Monkey程序由Android系统自带,需要配置J2SE平台的JDK,还需要配置Android平台的SDK. 1)下载和配置JDK 下载与安装JDK过程省略... 配置JDK环境变量,我 ...