<!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. EF联合查询的新用法

    用EF很多年了,做联合查询时,只知道linq和lambda两种语法,今天朋友发了一个链接,打开看后发现是EF内置的新的关于联合查询的方法,赶紧抄录下来,以备后用. 现在先把这几种方法,各写一个例子,便 ...

  2. android笔记:ViewPager实现界面的滑动

    最近在学习ViewPager实现界面的滑动,拜读了郭神的博客文章,并抽取归纳了自己对ViewPager的理解. ViewPager实现界面滑动的步骤如下: 1.在xml布局内加入控件android.s ...

  3. jQuery中的事件和动画——《锋利的jQuery》（第2版）读书笔记2

    第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){   // 编写代码... }); 可以简写成: $(function( ...

  4. BDC批导数据

    1.输入事务代码SHBD进入以下界面: 点击新建记录,创建一个新的BDC录屏记录, 然后根据记录条件进行 BDC录屏代码 perform fill_bdc using ANLKL. call tran ...

  5. 返回绝对值--Math.Abs 方法

    Math.abs()  返回指定数字的绝对值.

  6. Centos7 mysql-community-5.7.11编译安装

    安装环境 [root@localhost ~]# cat /etc/centos-release CentOS Linux release 7.0.1406 (Core) 0x01 准备工作 1.到m ...

  7. where子句的使用

    关系运算符: = > < <= >= != <> 略. 有一个<=> 有啥用? 其实也是判断等于. 不比较NULL值,效果就和= 一样,比较NULL值, ...

  8. scrum 4.0

    1.准备看板. 形式参考图4. 2.任务认领,并把认领人标注在看板上的任务标签上. 先由个人主动领任务,PM根据具体情况进行任务的平衡. 然后每个人都着手实现自己的任务. 3.为了团队合作愉快进展顺利 ...

  9. MySQL关键性能监控(QPS/TPS)

    原文链接:http://www.cnblogs.com/chenty/p/5191777.html 工作中尝尝会遇到各种数据库性能调优,除了查看某条SQL执行时间长短外,还需要对系统的整体处理能力有更 ...

  10. xtrabackup工具

    xtrabackup是基于InnoDB存储引擎灾难恢复的.它复制InnoDB的数据文件,尽管数据文件在内部是非一致性的,但在执行灾难恢复时可以保证这些数据文件是一致的,并且可用. 官方原理 在Inno ...