<base>

<base> 元素为文档中的所有链接指定基地址。如果URL中含有协议名或"//"则会忽略 <base> 指定的基地址。

    <!DOCTYPE html>

    <html lang="zh-CN">

        <head>

            <meta charset="UTF-8">

            <base href="http://www.baidu.com/img/">

        </head>

        <body>

            <!-- http://www.baidu.com/img/a.jpg -->

            <img src="a.jpg">  

            <!-- 如果带协议头，则忽略 base 指定的基URL -->

            <!-- http://www.baidu.com/img/b.jpg -->

            <img src="http://www.baidu.com/img/b.jpg">  

            <!-- 省略协议头但保留"//"，仍然会忽略 base 指定的基URL -->

            <!-- 这也是谷歌前端编码规范推荐使用的一种方式 -->

            <!-- http://www.baidu.com/img/c.jpg -->

            <img src="//www.baidu.com/img/c.jpg">

        </body>

    </html>

<link>

<link> 元素为文档指定外部样式表
    <!DOCTYPE html>

    <html lang="zh-CN">

        <head>

            <meta charset="UTF-8">

            <link rel="stylesheet" href="css/style.css">

        </head>

        <body>  

        </body>

    </html>

<article>

代表独立的、完整的一篇”文章“，如一个贴子、一篇文章、一条回复。可以包含 <header> 、 <footer> 、 <section> 等元素。
    <!DOCTYPE html>

    <html lang="zh-CN">

        <head>

            <meta charset="UTF-8">

            <title></title>

        </head>

        <body>

            <!-- 一篇文章 -->

            <article>

                <header>

                    <h1>The Very First Rule of Life</h1>

                    <p><time datetime="2009-10-09">3 days ago</time></p>

                </header>

                <p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p>

                <p>...</p>

                <section>

                    <h1>Comments</h1>

                    <!-- 一条评论 -->

                    <article>

                        <footer>

                            <p>Posted by: <span>George Washington</span></p>

                            <p><time datetime="2009-10-10">15 minutes ago</time></p>

                        </footer>

                        <p>Yeah! Especially when talking about your lobbyist friends!</p>

                    </article>

                    <!-- 一条评论 -->

                    <article>

                        <footer>

                            <p>Posted by: <span>George Hammond</span></p>

                            <p><time datetime="2009-10-10">5 minutes ago</time></p>

                        </footer>

                        <p>Hey, you have the same first name as me.</p>

                    </article>

                </section>

            </article>

        </body>

    </html>

<section>

代表页面或某一部分的一节或一个部分，每个 <section> 一般都有一个主题思想，但未必一定要有 <h> 元素。
    <!DOCTYPE html>

    <html lang="zh-CN">

        <head>

            <meta charset="UTF-8">

            <title></title>

        </head>

        <body>

            <article>

                <header>

                    <h2>Apples</h2>

                    <p>Tasty, delicious fruit!</p>

                </header>

                <p>The apple is the pomaceous fruit of the apple tree.</p>

                <!-- 此处表示文章的一个小主题 -->

                <section>

                    <h3>Red Delicious</h3>

                    <p>These bright red apples are the most common found in many supermarkets.</p>

                </section>

                <section>

                    <h3>Granny Smith</h3>

                    <p>These juicy, green apples make a great filling for apple pies.</p>

                </section>

            </article>

        </body>

    </html>

<nav>

任何具有导航性质的链接组都可以用 <nav> 元素，不管是主导航、还是侧边栏中的导航、还是面包屑导航、还是页面内的锚点导航
    <!DOCTYPE html>

    <html lang="zh-CN">

        <head>

            <meta charset="UTF-8">

            <title></title>

        </head>

        <body>

            <header>

                <nav>

                    <h1>Navigation</h1>

                    <ul>

                        <li><a href="articles.html">Index of all articles</a></li>

                        <li><a href="today.html">Things sheeple need to wake up for today</a></li>

                        <li><a href="successes.html">Sheeple we have managed to wake</a></li>

                    </ul>

                </nav>

            </header>

            <main>

                <header>

                    <h1>Demos in Exampland</h1>

                    <p>Written by A. N. Other.</p>

                </header>

                <nav>

                    <ul>

                        <li><a href="#public">Public demonstrations</a></li>

                        <li><a href="#destroy">Demolitions</a></li>

                        ...more...

                    </ul>

                </nav>

                <div>

                    <section id="public">

                        <h1>Public demonstrations</h1>

                        <p>...more...</p>

                    </section>

                    <section id="destroy">

                        <h1>Demolitions</h1>

                        <p>...more...</p>

                    </section>

                    ...more...

                </div>

                <footer>  

                </footer>

             </main>

        </body>

    </html>

<aside>

<aside> 元素用于突出的引用、广告、侧边栏。
    <!DOCTYPE html>

    <html lang="zh-CN">

        <head>

            <meta charset="UTF-8">

            <title></title>

        </head>

        <body>

            ...

            <p>He later joined a large company, continuing on the same work.

            <q>I love my job. People ask me what I do for fun ...</q></p>  

            <!-- 突出的引用 -->

            <aside>

             <q> People ask me what I do for fun when I'm not at work. But I'm paid to do my hobby, so I never know what to answer. </q>

            </aside>  

            <p>Of course his work — or should that be hobby? — isn't his only passion. He also enjoys other pleasures.</p>

            ...

        </body>

    </html>

<address>

<address> 代表联系信息，不仅仅是”地址“。
    <!DOCTYPE html>

    <html lang="zh-CN">

        <head>

            <meta charset="UTF-8">

            <title></title>

        </head>

        <body>

            <footer>

                <address>

                    For more details, contact

                    <a href="mailto:js@example.com">John Smith</a>.

                </address>

                <p><small>© copyright 2038 Example Corp.</small></p>

            </footer>

        </body>

    </html>

<pre>

<pre> 元素用于定义预格式化的文本，被包围在 <pre> 元素中的文本通常会保留空格和换行符，常用来表示程序的源代码
    <!DOCTYPE html>

    <html lang="en">

        <head>

            <meta charset="UTF-8">

            <title></title>

        </head>

        <body>

            <pre>

                <h1>hello world</h1>

                echo "hello world";

                print("hello world")

            </pre>

        </body>

    </html>

<blockquote>

<blockquote> 元素用于定义引用块。
    <!DOCTYPE html>

    <html lang="en">

        <head>

            <meta charset="UTF-8">

            <title></title>

        </head>

        <body>

            <!-- 下面是引用内容 -->

            <blockquote>

                <p>Hello World</p>

            </blockquote>

        </body>

    </html>

<figure>

<figcaption>

<figure> 元素表示独立的流内容（图像、图表、照片、代码等等）， <figcaption> 元素给 <figure> 元素添加标题。
    <!DOCTYPE html>

    <html lang="en">

        <head>

            <meta charset="UTF-8">

            <title></title>

        </head>

        <body>

            <figure>

                <figcaption>Ubuntu诞生那一年</figcaption>

                <img src="ubuntu.jpg" width="350" height="234" />

            </figure>

        </body>

    </html>

<code>

<code> 元素用于表示计算机源代码或者其他机器可以阅读的文本内容。
    <!DOCTYPE html>

    <html lang="en">

        <head>

            <meta charset="UTF-8">

            <title></title>

        </head>

        <body>

            <p>又是<code>println("hello world")</code></p>

        </body>

    </html>

<mark>

<mark> 元素突出显示文本。
    <!DOCTYPE html>

    <html lang="en">

        <head>

            <meta charset="UTF-8">

            <title></title>

        </head>

        <body>

            <p>Do not forget to buy <mark>milk</mark> today.</p>

        </body>

    </html>

<del>

<del> 元素定义文档中已被删除的文本。
<ins> 与 <del> 常配合使用：
    <!DOCTYPE html>

    <html lang="en">

        <head>

            <meta charset="UTF-8">

            <title></title>

        </head>

        <body>

            <p>I love <del>java</del><ins>javascript</ins></p>

        </body>

    </html>

<canvas>

<canvas> 元素定义图形。
    <!DOCTYPE html>

    <html>

        <head>

            <meta charset="UTF-8">

            <title></title>

            <style>

                table {width: 100%;}

            </style>

        </head>

        <body>

            <canvas id="myCanvas" width="500" height="300"></canvas>

        </body>

    </html>

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

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

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

  2. HTML5: HTML5 语义元素

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

  3. 如何让老式浏览器支持html5新增的语义元素

    html5新增加了一些语义元素,如header, footer, nav, aritcle, aside,等等. 然而,有些老款浏览器无法识别这些元素,会把它们当成 inline 元素对待,这会导致一 ...

  4. html5权威指南：组织内容、文档分节

    HTML5新增及删除标签:http://www.cnblogs.com/starof/archive/2015/06/23/4581850.html 第九章:组织内容                 ...

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

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

  6. HTML5 语义元素

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

  7. HTML5语义元素总结

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

  8. HTML5学习笔记（四）语义元素

    语义元素能够清楚的描述其意义给浏览器和开发者. 无语义 元素实例: <div> 和 <span> - 无需考虑内容. 语义元素实例: <form>, <tab ...

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

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

随机推荐

  1. wind的R接口、况客RSDK学习，双冒号以及quantmod主题

    本文主要参考:来自segmentfault上的FinanceR的专栏 https://segmentfault.com/a/1190000004580610 并自己对生疏不解之处做了补充和注释. 当然 ...

  2. xen下离线读取虚拟机磁盘镜像的补丁

    之前在xen-3.4.2和xen-4.1.2下做过几个基于qemu模拟器的补丁,就是想着不用通过xm create(xen3下面)或xl create(xen4下面)启动虚拟机,而能直接去解析磁盘镜像 ...

  3. H5播放器

    <!DOCTYPE html>  <html>  <body>  <div style="text-align:center">  ...

  4. Linux C fcntl()函数详解

    fcntl系统调用 功能描述:根据文件描述词来操作文件的特性. 用法: int fcntl(int fd, int cmd);  int fcntl(int fd, int cmd, long arg ...

  5. python嵌套函数、闭包与decorator

    1 一段代码的执行结果不光取决与代码中的符号,更多地是取决于代码中符号的意义,而运行时的意义是由名字空间决定的.名字空间是在运行时由python虚拟机动态维护的,但是有时候我们希望能将名字空间静态化. ...

  6. 漫画告诉你什么是DDoS攻击？

    本文作者:魏杰 文章转载自:绿盟科技博客,原文标题:看ADS如何治愈DDoS伤痛 根据<2015 H1绿盟科技DDoS威胁报告>指出,如今大流量网络攻击正逐渐呈现增长趋势,前不久锤子科技的 ...

  7. C++中的 :: 用法

    ::是运算符中等级最高的,它分为三种:1)global scope(全局作用域符),用法(::name)2)class scope(类作用域符),用法(class::name)3)namespace ...

  8. go：windows下用sublime Text搭建go语言开发环境

      一.安装   1.安装go    go安装包地址:http://pan.baidu.com/s/1hq1mrDM(进入下图中箭头所示目录中下载对应版本) * 注意go的安装路径不能包含中文    ...

  9. Linux find 用法示例

    Linux中find常见用法示例 ·find   path   -option   [   -print ]   [ -exec   -ok   command ]   {} \; find命令的参数 ...

  10. jqueyr eq get用法

    相信大部份人都会把这2个的用法搞错.仔细查看下API文档就可以知道.eq返回的是一个jquery对象,get返回的是一个html 对象数组.举个例子: <p style="color: ...