一、根据页面的结构，由div派生的标签。

<header>

<footer>

<nav> 导航 在H4中导航栏一般用ul-li标签，H5中可以直接用<nav>标签

eg. <nav> <a href="#">导航标题1 </a> <a href="#">导航标题2 </a> </div>

<hgroup> 页面上得一个标题组合（一个标题和一个子标题）

eg, <hgroup>  <h1>博客园</h1>

<h2>博客园是一个开发者分享资源的好地方</h2>

</hgroup>

<section> 用来划分页面上的不同区域

<article> 用来表示页面上一套结构完整且独立的内容部分

<aside> 和主题相关的附属信息

二、媒体元素组合

<figure>和 <figcaption>：<figure>为父元素，用于图片的外层，其子元素<figcaption>用来对内容进行说明。

三、<time>标签，专门用来表示时间

四、<datalist> 标签，定义选项列表。与 input 元素配合使用该元素，来定义 input 可能的值。

datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。

请使用 input 元素的 list 属性来绑定 datalist。

<input id="myCar" list="cars" />

<datalist id="cars">

  <option value="BMW">

  <option value="Ford">

  <option value="Volvo">

</datalist>

五、<details> 标签，用于描述文档或文档某个部分的细节。

与<summary>标签配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。　

<details>

<summary>Copyright 2011.</summary>

<p>All pages and graphics on this web site are the property of W3School.</p>

</details>

六、<address> 标签，定义文档或文章的作者/拥有者的联系信息。

<address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。

七、<mark> 标签，定义带有记号的文本。在需要突出显示文本时使用 该 标签，默认加黄色背景。

八、<keygen> 标签，规定用于表单的密钥对生成器字段。（用于给表单添加公钥）

当提交表单时，私钥存储在本地，公钥发送到服务器。

<form action="/example/html5/demo_form.asp" method="get">

用户名：<input type="text" name="usr_name" />

加密：<keygen name="security" />

        <input type="submit" />

</form>

　

九、<process>标签，定义进度条

<!DOCTYPE html>
<html>
<body>

下载进度：
<progress value="22" max="100">
</progress>

<p><b>注释：</b>Internet Explorer 9 以及更早的版本不支持 <progress> 标签。</p>

</body>
</html>

　　

H5标签的兼容性

ie6/7不兼容h5标签，解决方法。

1.通过使用JS动态创建

<script>

          document.creatElement("header")

</script>

　　注意：IE6是不识别header等标签的，所以认为是自定义标签。而自定义标签是内联元素，所以要显示一些效果，需要在选择器中加入display:block;

2.这样做比较麻烦，需要创建多个标签

因此我们可以引入一个h5的文件即可

<script src="js/html5shw.js">  </script>

　　

H5新增语义化标签的更多相关文章

  1. 浅谈html语义化标签,Html5新增语义化标签

    Html语义化标签,Html5新增语义化标签 自己在学习的期间,整理了下html关于语义化标签的一些知识,列的不是很全. 希望大家有新的见解可以给我留言,我会补充上去,谢谢大家 1.什么是语义化标签? ...

  2. H5的语义化标签(PS: 后续继续补充)

    头部信息 <header></header> 区块标签 <figure> <figcaption>123</figcaption> < ...

  3. html5新增语义化标签

    注意:body.section.nav 需要h1-h6. div.header则不需要. 1):<article> 显示一个独立的文章内容. 例如一篇完整的论坛帖子,一则网站新闻,一篇博客 ...

  4. HTML5 部分新增语义化标签元素

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. H5新增特性之语义化标签

    H5新增特性之语义化标签 语义化标签顾名思义标签有自己的含义,浏览器或者程序员一看就知道是什么.在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式 ...

  6. Html5新增的语义化标签（部分）

    2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,html5的标准规范终于制定完成.这是互联网的一次重大变革,这也许是一个时代的来临! 总结一些h5新增的语义化标签,记录下来方便自己学习 ...

  7. 笔记二:常用的h5语义化标签

    0.前言: 所谓语义化标签就是一种 我们仅通过标签名就能判断出该标签内容的语义的标签,见名知意. 总结这部分内容,主要是为了能从繁琐的div嵌套div中,改成带有h5标签码.这样更有利于读写代码. 人 ...

  8. HTML 语义化标签-新增标签介绍

    HTML 基础知识 版权声明:未经博主授权,内容严禁转载 ! HTML语义化标签概念 如果没有语义化标签,上面这些 div 都是没有实际意义的,只是我们提供给浏览器的指令. 和 语义化 代码对比: 什 ...

  9. H5中的语义化标签

    H5中的语义化标签也就是之前的id = “header”演变而来的 只不过之前是id 现在变成了标签而已 什么是语义化: 根据内容结构化(内容语义化) 选择合适的标签(代码语义化) 便于开发者阅读和写 ...

随机推荐

  1. Docker(二十六)-Docker Compose编排容器

    1. 前言 Docker Compose 是 Docker 容器进行编排的工具,定义和运行多容器的应用,可以一条命令启动多个容器. 使用Compose 基本上分为三步: Dockerfile 定义应用 ...

  2. [转帖]kubeadm 实现细节

    kubeadm 实现细节 http://docs.kubernetes.org.cn/829.html 1 核心设计原则 2 常量和众所周知的值和路径 3 kubeadm init 工作流程内部设计 ...

  3. Http建立连接的方式

    1.协议简介 Http 协议:应用层协议 TCP 协议:传输层协议,主要解决如何在IP层之上可靠的传递数据包,使在网络上的另一端收到发端发出的所有包,并且顺序与发出的顺序一致,TCP具有可靠,面向连接 ...

  4. oracle无法通过IP地址进行连接

    在oracle安装完成之后有时候后无法使用IP地址进行连接或者压根无法进行连接,此时我们可以通过配置oracle的监听来解决这个问题: 在开始菜单中找到oracle文件夹的net manager,如下 ...

  5. 【BZOJ1560】[JSOI2009]火星藏宝图（贪心，动态规划）

    [BZOJ1560][JSOI2009]火星藏宝图(贪心,动态规划) 题面 BZOJ 洛谷 题解 既然所有的位置的权值都大于\(0\),那么就可以直接贪心,按照行为第一关键字,列为第二关键字,来转移. ...

  6. HGOI 20181030晚 题解

    Problem:给出全班人的个数总分和小明的分数(满分100分),求小明最低排名和最高排名 sol:假设小明的排名为k,总分为sum,小明的分数是r, 贪心求解, 最坏情况下,小明前面的比小明高一分( ...

  7. emoji表情存储到数据库的方法

    方案1:修改数据库编码 为什么我们设置表的的字符类型为utf8却不能存放emoji呢?原来utf8可能是2或3或4个字节,而mysql的utf8是3个字节,存放一个emoji是需要4个字节的,自然不够 ...

  8. NO.2: 尽量以const,enum,inline 替换 #define

    1.首先#define 定义不重视作用域(scope),虽然可以#undef控制,但是不美观,还存在多次替换的问题,以及没有任何封装性. 2.const XXX_XX,保证其常量性以及可控的作用域,如 ...

  9. cin,cout,printf,scanf效率对比

    From:http://www.cnblogs.com/killerlegend/p/3918452.html Author:KillerLegend Date:2014.8.17 杭电OJ之3233 ...

  10. poj 3686 Priest John's Busiest Day

    http://poj.org/problem?id=3683 2-sat 问题判定,输出一组可行解 http://www.cnblogs.com/TheRoadToTheGold/p/8436948. ...