总结目录结构：

1.简洁的DOCTYPE声明

2.新的布局结构标签 header,article,section,aside,footer

3.新的其它常用标签： nav,hgroup,figure,figcaption,datalist,details,summary…

4.新标签的兼容性

1.简洁的DOCTYPE声明 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

...

...

2.新的布局结构标签

为什么增加以下常用标签，是收集调查目前在线网站ID命名得出的结论，以下命名被用作div标签的ID命名频率最高，所有单独提取出来使用。

页面头部：header

导航 nav

板块：section

主要内容区：article

附属内容区：aside

脚部区域:footer

<!DOCTYPE html>                                      <!-- 声明文档结构类型 -->

<html lang=zh-cn>                                    <!-- 声明文档文字区域-->

 <head>                                              <!-- 文档的头部区域 -->

 <meta charset=utf-8>                                <!-- 文档的头部区域中元数据区的字符集定义 -->

 <title>一个HTML5布局</title>                         <!-- 文档的头部区域的标题-->

 <link rel=stylesheet href=main.css>                 <!-- 样式文件引用 –>

 <script src=script.js></script>                     <!-- 文档的头部区域的JavaScript脚本文件调用 -->

</head>

<body>

    <header>HTML5文档的头部区域</header>

    <nav>HTML5文档的导航区域</nav>

    <section>HTML5文档的主要内容区域

        <aside>

            HTML5文档的主要内容区域的侧边导航或菜单区

        </aside>

        <article>

            HTML5文档的主要内容区域的内容区

            以下是一个section和article的嵌套，循环表现章节与内容之间的父子关系，包含关系。

                <aside>

                </aside>

                <article>

                    <header>HTML5文档的嵌套区域，可以对某个article区域进行头部和脚部的定义。这样做，可以有非常清晰和严谨的文档目录结构关系。

                    <footer>

                </article>

        </article>

    </section>

    <footer>HTML5文档的脚部区域</footer>

</body>

</HTML>

3.其它常用新标签

3.1 导航 nav

<nav>

    <ul>

        <li>菜单1</li>

        <li>菜单2</li>

        <li>菜单3</li>

        <li>菜单4</li>

        <li>菜单5</li>

    </ul>

</nav>

3.2 标签组合：hgroup

<hgroup>

    <h1>妙味课堂</h1>

     <h2>带您进入富有人情味的IT培训</h2>

</hgroup>

3.3 对图片或视频及其说明性文字进行组合：figure，figcaption

<figure>

        <img src=“html.png”/>(注意没有alt)

         <figcaption> html </figcaption>

</figure>

3.4 定义input可能出现的值：datalist

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

    <datalist id="valList">

         <option value="javascript">javascript</option>

       <option value="html">html</option>

      <option value="css">css</option>

</datalist>

3.5描述细节与引用：details、summary

<details>

        <summary>HTML5</summary>

        <p>下一代web开发语言</p>

</details>

3.6 定义一段对话：dialog

<dialog>

  <dt>老师</dt>

  <dd>2+2 等于？</dd>

  <dt>学生</dt>

  <dd>4</dd>

  <dt>老师</dt>

  <dd>答对了！</dd>

</dialog>

3.7定义进度条：process（内部span为了兼容IE8以下)

<progress max="100" value="76">

         <span>76</span>%

</progress>

3.8 定义作者的详细联系信息：<address>

3.9 需要标记的词或句子：<mark>

3.10 时间标签：<time>

4.新标签的兼容性

IE8/IE7/IE6支持通过document.createElement方法产生的标签, 可以利用这一特性让这些浏览器支持HTML5新标签。

浏览器支持新标签后，还需要添加标签默认的样式：display：block；

当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

<!--[if lt IE 9]>

        <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

<![endif]-->

//也可以将文件下载到自己服务器进行引用。

//这段脚本需要放在页面起始的部分，最好是head中，不要放在底部。这样IE在解析页面标签之前就会先运行这段代码。

HTML5-新增语义化结构标签的更多相关文章

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

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

  2. html5新增语义化标签

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

  3. html5 新增语义标签

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

  4. html5手册语义化标签

    html5手册语义化标签: article section aside hgroup header footer nav time mark figure figcaption contextmenu ...

  5. 重学HTML5的语义化

    干了这么多年的前端,之前面试的时候经常会遇到面试官提问:你是如何理解HTML的语义化的? 说实话,之前遇到这个问题的时候,都是从网上找参考答案,然后记下来,用自己的语言重新组织一下,就变成自己的理解了 ...

  6. Html块标签、含样式的标签、语义化的标签：

    Html块标签: (1)<div>标签 块元素,表示一块内容,没有具体的语义 (2)<span>标签 行内元素,表示一行中的一小段内容,没有具体的语义 <p>标签 ...

  7. html5中新增的语义化的标签

    html5是html最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定.目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准,以期能在互联网应用迅速发展的时候,使网络 ...

  8. HTML5的新语义化的标签

    在HTML5之前采用HTML+CSS文档结构写法 [ID选择器说明 id选择器——用于标识页面上特定元素(比如站点导航.页眉.页脚)而且必须唯一; 也可以用来标识持久结构性元素(如主导航.内容区域)] ...

  9. HTML5之语义化标签

    HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...

随机推荐

  1. 前端自动化工具gulp入门基础

    gulp是前端开发过程中经常要用到的工具,非常值得花时间去掌握.利用gulp,我们可以使产品流程脚本化,节约大量的时间,有条不紊地进行业务开发.本文简单讲一下入门gulp需要掌握的东西. 安装gulp ...

  2. laravel-admin(自定义表单视图)

    前言: 在上一遍文章(https://www.cnblogs.com/shiwenhu/p/10271013.html)中写到可以使用自定义form组建来创建表单,几乎能满足我们大部分要求,而且不用我 ...

  3. CSS3 - vue中纯css实现柱状图表效果

    背景 以前我们制作柱状图都用echarts或者其他同类型的图表插件 这次是个移动端的需求,而且这个图表需要动画 使用echarts就会显得过重,而且动画达不到我想要的效果(主要是我自己愚蠢想不到好的动 ...

  4. Programming In Lua 第一章

    1,Lua可以嵌入其他应用程序(如CGILua或IUPLua). 2,lua代码的语句,分号是可以省略的.同一行可以有多条lua语句,最好用分号隔开(当然也可以不隔开) 3,外壳与lua解释器的区别. ...

  5. K8s集群部署（一）------ETCD集群部署

    环境说明 三台主机: k8s-master  10.0.3.225 k8s-node1    10.0.3.226 k8s-node2    10.0.3.227 配置主机名解析 [root@k8s- ...

  6. .NET Core IdentityServer4实战 第六章-Consent授权页

    在identityServer4中登陆页面只要是成功了,就会注册一个Cookie在服务器资源上,像现在大部分的网站第三方授权,都是经过一个页面,然后选需要的功能,IdentityServer4也给我们 ...

  7. 最牛MongoDB灾难恢复（WiredTiger.wt文件损坏，Mongo无法启动）

    WiredTiger.wt文件是mongoDB的元数据文件,存储了其他数据库表的元数据信息.笔者最近遇到了WiredTiger.wt文件损坏的情况,MongoDB无法启动,数据库中的重要数据危在旦夕. ...

  8. leadcode的Hot100系列--78. 子集--回溯

    上一篇说了使用位运算来进行子集输出,这里使用回溯的方法来进行排序. 回溯的思想,我的理解就是: 把解的所有情况转换为树或者图,然后用深度优先的原则来对所有的情况进行遍历解析. 当然,因为问题中会包涵这 ...

  9. Java中的关键字synchronized

    1. 介绍 在Java并发系列的文章中,这个是第二篇文章.在前面的一篇文章中,我们学习了Java中的Executor池和Excutors的各种类别. 在这篇文章中,我们会学习synchronized关 ...

  10. websocket实现群聊和单聊(转)

    昨日内容回顾 1.Flask路由 1.endpoint="user" # 反向url地址 2.url_address = url_for("user") 3.m ...