1.header 标签定义文档的页眉（介绍信息）。

<body>

<article>

<header>

<h1>What Does WWF Do?</h1>

<p>WWF's mission:</p>

</header>

<p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p>

</article>

</body>

</html>

2.nav 标签定义导航链接的部分。如果文档中有“前后”按钮，则应该把它放到 <nav> 元素中。

<body>

<nav>

<a href="/html/">HTML</a> |

<a href="/css/">CSS</a> |

<a href="/js/">JavaScript</a> |

<a href="/jquery/">jQuery</a>

</nav>

</body>

3.footer 标签定义 section 或 document 的页脚。在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。假如您使用 footer 来插入联系信息，应该在 footer 元素内使用 <address> 元素。

<body>

<footer>

  <p>Posted by: Hege Refsnes</p>

  <p>Contact information: <a href="mailto:someone@example.com">

  someone@example.com</a>.</p>

</footer>

</body>

4.artide 标签定义独立的内容。可能的 article 实例：论坛帖子、报纸文章、博客条目、用户评论等。<article> 标签的内容独立于文档的其余部分。（具有语义化）

<body>

<article>

  <h1>What Does WWF Do?</h1>

  <p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p>

</article>

</body>

5.section  标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。（相当于div的作用，具有语义化）

<body>

<section>

<h1>WWF</h1>

<p>

The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, 
research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.

</p>

</section>

<section>

<h1>WWF's Panda symbol</h1>

<p>

The Panda has become the symbol of WWF. The well-known panda logo of WWF originated 
from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.

</p>

</section>

6.aside 标签定义其所处内容之外的内容。aside 的内容应该与附近的内容相关。<aside> 的内容可用作文章的侧栏。

<body>

<p>My family and I visited The Epcot center this summer.</p>

<aside>

<h4>Epcot Center</h4>

<p>The Epcot Center is a theme park in Disney World, Florida.</p>

</aside>

</body>

7.datalist 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。请使用 input 元素的 list 属性来绑定 datalist。所有主流浏览器都支持 <datalist> 标签，除了 Internet Explorer 和 Safari。

<body>

<input type="text" list="cars" />

<datalist id="cars">

    <option value="BMW">

    <option value="Ford">

    <option value="Volvo">

</datalist>

</body>

8.<fieldset> 标签用于从逻辑上将表单中的元素组合起来。<fieldset> 标签会在相关表单元素周围绘制边框。<legend> 标签为 fieldset 元素定义标题。

<body>

<form>

  <fieldset>

    <legend>Personalia:</legend>

    Name: <input type="text" /><br />

    Email: <input type="text" /><br />

    Date of birth: <input type="text" />

  </fieldset>

</form>

</body>

HTML5新增常用标签的更多相关文章

  1. HTML5新增video标签及对应属性、API详解

    知识说明: 比不上很牛的前端开发人员,但自始至终明白“万丈高楼平地起”,基础最重要,初学HTML5,稳固基础第一步,把最基本的整理下来,留下自己学习的痕迹.HTML5新增的video标签,将其属性以及 ...

  2. HTML5新增Canvas标签及对应属性、API详解（基础一）

    知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...

  3. html5 新增语义标签

    一份模板: <body> <header> <hgroup> <h1>Page title</h1> <h2>Page subt ...

  4. HTML5新增的标签与属性

    一.关于DTD HTML5 不基于 SGML,所以不需要引用 DTD(HTML 4.01 基于 SGML) 二.HTML5结构标签 <header> 标记定义一个页面或一个区域的头部 &l ...

  5. HTML5新增结构标签

    引言 在本节中,笔者将向大家讲述三部分内容,分别介绍HTML5时代的召唤,跟HTML4的区别,以及HTML5中带来的新的结构标签. HTML5时代的召唤 HTML4与HTML5的区别 HTML5新结构 ...

  6. HTML5新增的标签及使用

    HTML5和HTML其实是很相似的,但是有些内容有发生了改变,今天我学习了一下HTML5发现还是挺好学的,只要有html+css基础就可以,今天知识看了下新的标签. 一.定义文档类型 在文件的开头总是 ...

  7. HTML5新增的标签和属性归纳

    收集总结的HTML5的新特性,基本除了IE9以下都可以使用. HTML5语法 大部分延续了html的语法 不同之处:开头的 <!DOCTYPE html> <html lang=&q ...

  8. HTML5新增常用属性

    一. 代码名称语义化的好处 1.能让搜索引擎更好的收录 2.对于特殊设备如盲人设备好解析 二.article和section的区别 article(文章):独立且能被外部引用 section(章节.段 ...

  9. 总结HTML5新增的标签及功能

    https://my.oschina.net/chengkuan/blog/422306 标记意义及用法分析/示例 属性/属性值/描述 <article> 定义独立的内容,如论坛帖子.报纸 ...

随机推荐

  1. iOS核心动画（专用图层篇）

    之前的文章我们了解了Core Animation中图层的一些基础知识.没有看过的传送门在此: iOS核心动画基础篇 那么在了解了这些基础知识之后,接下来进入专用图层的了解 苹果为了方便和性能,封装了几 ...

  2. （二）pdf的构成综述

    引自:https://blog.csdn.net/steve_cui/article/details/81948486 一个pdf文件主要是由4部分构成:文件头.文件体.交叉引用表.文件尾 文件头:用 ...

  3. python 获取mysql数据库列表以及用户权限

    一.需求分析 需要统计出当前数据库的所有数据库名,以及每个用户的授权信息. 获取所有数据库 在mysql里面,使用命令: show databases 就可以获取所有数据库了 获取所有用户 执行命令: ...

  4. git 学习笔记 ---撤销修改

    自然,你是不会犯错的.不过现在是凌晨两点,你正在赶一份工作报告,你在readme.txt中添加了一行: $ cat readme.txt Git is a distributed version co ...

  5. 使用CertUtil.exe下载远程文件

    使用CertUtil.exe下载远程文件 证书 https://www.cnblogs.com/17bdw/p/8728656.html 1.前言 经过国外文章信息,CertUtil.exe下载恶意软 ...

  6. Dubbo -- 四种loadBalance负载均衡算法

    Dubbo中的一个关键接口LoadBalance,dubbo是按照其中的规则来调用多台provider的服务的. 先看一下接口的实现类图: 从上图中我们可以看到dubbo提供了四种算法来实现负载均衡. ...

  7. OC与swift相互调用

    一.OC调用swift文件 二.swift调用OC文件 三.注意和总结 添加: 四.自定义桥接文件 一.OC调用swift文件 在OC项目中创建一个swift文件的时候,Xcode 会提示 需要创建一 ...

  8. 服务端php之文件上传

    知识点 echo $_SERVER['PHP_SELF']; 自动获取当前文件的路劲(即提交地址为当前页面) 当一个表单有文件域(即文件上传)的时候,method(提交方式)要设置post,这样更加安 ...

  9. SQL*Plus 与数据库的交互（SQL*Plus时什么）

    Oracle 的 SQL*Plus 是与数据库进行交互的客户端工具,在 SQL*Plus中,可以运行 SQL*Plus 命令与 SQL*Plus 语句.   SQL*Plus 时一个基于 C/S 两层 ...

  10. ABAP开发环境终于支持以驼峰命名法自动格式化ABAP变量名了

    Jerry进入SAP成都研究院前,一直是用C/C++开发,所以刚接触ABAP,对于她在某些语法环境下大小写敏感,某些环境下不敏感的特性很不适应.那时候Jerry深深地怀念之前在C/C++编程时遵循的驼 ...