<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>语义元素</title>

</head>

<body>

    <!--结构元素-->

    <header>头部</header>

    <section>表示一个段落：用于区域的章节表述</section>

    <footer>区域的页脚部分</footer>

    <nav>菜单 导航</nav>

    <article>表示文章的主体内容</article>

    <!--块级元素 用于区域的划分-->

    <aside></aside>

    <figure>

        <figcaption></figcaption>

    </figure>

    <code>表示一段代码</code>

    <dialog>表示对话

        <dt>说话的人</dt><dd>内容</dd>

    </dialog>

    <!--语义元素-->

    <mtter>一定范围的数值</mtter>

    <time></time>

    <progress>进度条</progress>

    <video>视频</video>

    <audio>音频</audio>

    <!--交互元素-->

    <details>一段具体内容 通过某个方法显示</details>

    <datagrid>用来控制客户端数据显示</datagrid>

    <menu>动态交互菜单</menu>

    <command>命名</command>

    <!--显示文章案例-->

    <article>

        <header>

            <h1>HTML head 头部分的标签</h1>

            <time>2015年12月12日</time>

        </header>

        <p>HTML head 头部分的标签、元素有很多，涉及到浏览器对网页的渲染，SEO等等，而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代，head 头部结构，移动端的meta 元素，显得更为重要。了解每个标签的意义，写出满足自己需求的head 头标签，是本文的目的。本篇以一丝的文章为基础，进行扩展总结介绍常用的head中各个标签、元素的意义以及使用场景。</p>

        <footer>

            <p>http://www.baidu.com</p>

        </footer>

    </article>

    <!--评论-->

    <section>

    <h2>评论</h2>

        <article>

            <header>

                <h3>张帅</h3>

                <p><time pubdata datatime="2013-09-23 10:00 - 11:00">一小时前</time></p>

            </header>

            <p>评论内容</p>

        </article>

        <article>

            <header>

                <h3>张帅</h3>

                <p><time pubdata datatime="2013-09-23 10:00 - 11:00">一小时前</time></p>

            </header>

            <p>评论内容</p>

        </article>

    </section>

</body>

</html>

HTML5语义元素的更多相关文章

  1. HTML5 语义元素、迁移、样式指南和代码约定

    语义元素是拥有语义的元素. 什么是语义元素? 语义元素清楚地向浏览器和开发者描述其意义. 非语义元素的例子:<div> 和 <span> - 无法提供关于其内容的信息. 语义元 ...

  2. HTML5语义元素总结

    HTML5语义元素 语义=意义 语义元素=元素的意义   什么事语义元素? 一个语义元素能够清楚的描述其意义给浏览器和开发者. 无语义 元素实例:div.span.无需考虑内容. 语义 元素实例:fo ...

  3. HTML5: HTML5 语义元素

    ylbtech-HTML5: HTML5 语义元素 1.返回顶部 1. HTML5 语义元素 语义= 意义 语义元素 = 有意义的元素 什么是语义元素? 一个语义元素能够清楚的描述其意义给浏览器和开发 ...

  4. HTML5 语义元素(一)页面结构

    本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.< ...

  5. HTML5 语义元素

    返回目录 http://hovertree.com/h/bjaf/html5zixueji.htm 一个语义元素能够清楚的描述其意义给浏览器和开发者.无语义 元素实例: <div> 和 & ...

  6. HTML5 语义元素(二)文本内容

    上一篇介绍的是关于页面结构方面的语义元素,本篇介绍文本内容方面,包含:<bdi>.<details>.<summary>.<mark>.<outp ...

  7. 新的HTML5语义元素

    先看一个传统的HTML4的文档: <div class="header"> <h1>My Site Name</h1> <h2>My ...

  8. 添加shiv让所有现代浏览器都支持 HTML5 语义元素 html5.js让IE（包括IE6）支持HTML5元素方法

    引用Google的html5.js文件 <!--[if IE]> <script src=”http://html5shiv.googlecode.com/svn/trunk/htm ...

  9. 努力学习 HTML5 （4）—— 浏览器对语义元素的支持情况

    经过上一节学习,我们已经建立一个结构良好的页面,如果在旧版的 IE 浏览器中浏览可能这些语义元素无法显示. 毕竟这些语义元素什么也不做,要支持它们,只要让浏览器把它们当做普通的 <div> ...

随机推荐

  1. [转]VS 2013 连接数据库报错 未能加载文件或程序集 Microsoft.SqlServer.Management.Sdk.Sfc

    原文链接:http://stackoverflow.com/questions/16906686/could-not-load-file-or-assembly-microsoft-sqlserver ...

  2. 算法与数据结构实验题6.4 order （二叉树）

    1.题目: 2.代码: #include<iostream> #include<algorithm> using namespace std; struct Node { in ...

  3. redis学习（二） Redis Hash

    Redis hash 是一个string类型的field和value的映射表,hash特别适合用于存储对象. Redis 中每个 hash 可以存储 232 - 1 键值对(40多亿). redis ...

  4. 自已实现的async 只实现了一部分功能

    不得不说,人和人的技术确实有差距,同样的功能,其他人就是有办写写的更优雅性能更好 不论是C还是js 自已有功能但看着也比人家的丑好多. //最终效果 同async //目前实现了个人最常用的 seri ...

  5. mysql 4种启动方式

    mysql 4种启动方式 都是去调用mysqld文件 1. mysqld 启动 进入mysqld文件所在目录(/../libexec/mysqld) ./mysqld --defaults-file= ...

  6. rm: Argument list too long

    rm -rf  /testdir/* -bash: /bin/rm: Argument list too long 解决: cd /testdir/; ls | xargs rm -rf

  7. css小技巧之去掉蓝色底块的方法

    -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE1 ...

  8. Win8 x64环境下VS2010 C#工程运行报错：没有注册类 (异常来自 HRESULT:0x80040154

    来源:http://blog.sina.com.cn/s/blog_7095482001019c2v.html 问题描述: 在Win8 x64环境下,VS2010的C#工程中引用了COM组件(Acti ...

  9. XmlSerializer 对象的Xml序列化和反序列化，XMLROOT别名设置

    这篇随笔对应的.Net命名空间是System.Xml.Serialization:文中的示例代码需要引用这个命名空间.   为什么要做序列化和反序列化? .Net程序执行时,对象都驻留在内存中:内存中 ...

  10. linux（ubuntu）安装时遇到的问题

    window环境下安装linux虚拟机=时,由于在初始系统语言选择了中文,当linux虚拟机安装成功后, 按[Ctrl + alt +f1~f6]任一一键都行,进入到命令行模式,这时你会发现,哎,我的 ...