<!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. 树莓派(raspberry pi)学习4: 更改键盘布局（转）

    树莓派(raspberry pi)用了几次后,发现键盘老是按错,一些字符打不出来或打错 这个问题,折腾我半天.还是把心得分享一下吧 上网查,发现是键盘布局不对,树莓派(raspberry pi)是英国 ...

  2. Linux网络编程-SIGPIPE信号导致的程序退出问题

    当客户端close关闭连接时,若server端接着发送数据,根据TCP协议的规定,server端会收到RST响应,当server端再次往客户端发送数据时,系统会发出一个SIGPIPE信号给server ...

  3. poj 2891 Strange Way to Express Integers (非互质的中国剩余定理)

    Strange Way to Express Integers Time Limit: 1000MS   Memory Limit: 131072K Total Submissions: 9472   ...

  4. [MOSEK] Mosek求解中遇到的奇葩内存问题

    在使用mosek优化库的时候,使用http://docs.mosek.com/7.0/capi/MSK_getxx_.html的 MSKrescodee MSK_getxx ( MSKtask_t t ...

  5. T60上安装Gentoo笔记

    T60虽然已经很老了,也过了服役期限.但是从入手之后,相比与家里放着的几个其他的高配置"后辈",依然是手中的挚爱.4:3的屏幕,方方正正的内敛模型,很结实的钢筋铁骨,无论是性格还是 ...

  6. Sql Server 简单查询 异步服务器更新语句

    //结构:select 子句 [into 子句] from 子句  [where 子句] [group by 子句]  [having 子句] [order by 子句] select  dept_c ...

  7. qt显示视频

    针对qt4的(视频格式为rgb32)     v4l_grab_movie(&v4l_dev);   unsigned char *pBuffer= v4l_dev.buffer;   QIm ...

  8. picurl

    from lxml import etreeimport requestsdef getHtml(html): novelcontent = requests.get(html).content re ...

  9. 20145225《Java程序设计》 第8周学习总结

    20145225<Java程序设计> 第八周学习总结 教材学习内容总结 第十五章 通用API 15.1日志 日志API:使用日志的起点是Logger类,要取得Logger类,必须使用Log ...

  10. freeCodeCamp:Return Largest Numbers in Arrays

    右边大数组中包含了4个小数组,分别找到每个小数组中的最大值,然后把它们串联起来,形成一个新数组. 提示:你可以用for循环来迭代数组,并通过arr[i]的方式来访问数组的每个元素. /*思路 for循 ...