<!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. jQuery -> bind / live / delegate 的终结者 - on

    Bind()方法: 给元素绑定事件 形式: .bind(eventType[,eventData],handler(eventObject)) eventType,string类型,一个或多个DOM事 ...

  2. 解决winrar压缩软件弹出广告

    最近winrar每次打开压缩包就会弹出一个广告,那是因为winrar是收费软件,注册了就没有广告了.下面我教大家怎么注册来屏蔽广告. 解决方法 1.新建一个txt文件并命名为"rarreg. ...

  3. Slave failed to initialize relay log info structure from the repository

    现象 查看slave 服务状态 show slave status\G; 错误 Last_Errno: 1872 Last_Error: Slave failed to initialize rela ...

  4. 前端利器：SASS基础与Compass入门

    SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让css看起来更像是一门语言,这种特性也被称为“cs ...

  5. php 获取代码执行时间和消耗的内存

    做一些php性能测试的时候,要获取代码执行时间和消耗的内存,查了一下资料,发现php有自带的函数可以实现这个功能,具体实现代码如下: $t1 = microtime(true);// ... 执行代码 ...

  6. Java文件读取

    package a.ab; import java.io.*; public class FileWrite { public static void main(String[] args) { Fi ...

  7. fgets和fputs函数

    1 函数输入 下面两个函数提供每次输入一行的功能. #include <stdio.h> char *fgets( char *restrict buf, int n, FILE *res ...

  8. 『TCP/IP详解——卷一：协议』读书笔记——06

    2013-08-20 14:41:01 2.8 最大传输单元MTU MTU,最大传输单元:以太网和802.3对数据帧的长度都有一个限制,其最大值分别是1500和1492字节.这个不同网络对应的传输上限 ...

  9. static, readonly, const

    static Use the static modifier to declare a static member, which belongs to the type itself rather t ...

  10. SQLSERVER复制优化之一《改变包大小》

    SQLSERVER复制优化之一<改变包大小> 自从搭了复制之后以为可以安枕无忧了,谁不知问题接踵而来 这次遇到的问题是丢包,不知道情况的读者可以先看一下我之前写的一篇<SQLSERV ...