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. linux terminal 快捷键

    删除 快捷键 描述 Ctrl+h 删除光标位置的前一个字符(同 backspace 键功能) Ctrl+* 删除光标位置的前一个字符(同 ctrl+h 组合键功能) Ctrl+d 删除光标位置的一个字 ...

  2. 【转】基于FPGA的Sobel边缘检测的实现

    前面我们实现了使用PC端上位机串口发送图像数据到VGA显示,通过MATLAB处理的图像数据直接是灰度图像,后面我们在此基础上修改,从而实现,基于FPGA的动态图片的Sobel边缘检测.中值滤波.Can ...

  3. [高清·非影印]Spring实战+SpringBoot实战+Spring微服务实战+SpringCloud微服务实战(全4本)

    ------ 郑重声明 --------- 资源来自网络,纯粹共享交流, 如果喜欢,请您务必支持正版!! --------------------------------------------- 下 ...

  4. vmware的三种网络模式讲解

    vmware有三种网络设置模式,分别是Bridged(桥接),NAT(网络地址转换),Host-only(私有网络共享主机) 1.Bridged(桥接) 桥接模式默认使用的是:VMnet0 什么是桥接 ...

  5. .net core web API使用Identity Server4 身份验证

    一.新建一个.net core web项目作为Identity server 4验证服务. 选择更改身份验证,然后再弹出的对话框里面选择个人用户账户. nuget 安装Identity server相 ...

  6. NEST analyze与mapping

    /// <summary> /// POST /_analyze?pretty=true /// POST /employee/_analyze /// </summary> ...

  7. 使用springboot实现一个简单的restful crud——02、dao层单元测试，测试从数据库取数据

    接着上一篇,上一篇我们创建了项目.创建了实体类,以及创建了数据库数据.这一篇就写一下Dao层,以及对Dao层进行单元测试,看下能否成功操作数据库数据. Dao EmpDao package com.j ...

  8. screen命令下，自启动设置

    建立autostart.sh文件 #!/bin/bash screen_name=$"coffeetest:9100" screen -dmS $screen_name cmd=$ ...

  9. JML规格编程系列——OO Unit3分析和总结

    本文是BUAA OO课程Unit3在课程讲授.三次作业完成.自测和互测时发现的问题,以及倾听别人的思路分享所引起个人的一些思考的总结性博客.主要包含JML相关梳理.SMT Solver验证.JML单元 ...

  10. 记支付宝接口对接，涉及到提取证书SN号的解决方案

    支付宝针对.NET SDK并未封装有提取证书SN序列号的方法,仅针对Java平台才有对应的方法(赤裸裸的歧视啊~~) 要想在提取这个SN序列号有两种方案: 1. 直接用Java SDK包来提取SN 2 ...