<!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. LeetCode OJ 331. Verify Preorder Serialization of a Binary Tree

    One way to serialize a binary tree is to use pre-order traversal. When we encounter a non-null node, ...

  2. poj 2584 T-Shirt Gumbo (二分匹配)

    T-Shirt Gumbo Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2571   Accepted: 1202 Des ...

  3. 第三章 springboot + jedisCluster

    如果使用的是redis2.x,在项目中使用客户端分片(Shard)机制.(具体使用方式:第九章 企业项目开发--分布式缓存Redis(1)  第十章 企业项目开发--分布式缓存Redis(2)) 如果 ...

  4. win7添加鼠标右键关联

    背景: hfs升级把右键给升没了 搜索了下 都是如何删除的  但没有怎么添加 添加: 保存如下内容为.reg 然后双击导入即可 Windows Registry Editor Version 5.00 ...

  5. IOS开发 程序关闭状态接通知

  6. PostScript的简单例子-用粗线画一个圆

    一 近期需要用到PostScript,查询资料学习PS的语法 简单的画一个圆的例子 %!PS-Adobe-3.0 /inch{72 mul} def 4.25 inch 5.5 inch 1.5 in ...

  7. EasyUI 添加tab页(iframe方式)(转)

    function addTab(title, href,icon){ var tt = $('#tabs'); if (tt.tabs('exists', title)){//如果tab已经存在,则选 ...

  8. Eclipse中出现-访问限制由于对必需的库XX具有一定限制，因此无法访问类型

    在项目上点击右键,找到构建路径.然后选择配置配置路径.按如下步骤来配置: 1 点击库选项 2把系统库扩展开来 3点击访问规则 4点击右边的添加按钮 5添加访问规则 6 分辨率设为可访问 7规则模式设为 ...

  9. css3之边框新属性

    border属性 属性 描述 border-image 图片边框 border-radius 圆角 box-shadow 矩形阴影

  10. node应用场景

    2.1 Web开发:Express + EJS + Mongoose/MySQL express 是轻量灵活的Nodejs Web应用框架,它可以快速地搭建网站.Express框架建立在Nodejs内 ...