<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. C#深入浅出 继承（六）

    这个标题写出来好长时间了,都没写内容,今天无论如何都得写完它,昨天写了一段,尼玛,电脑突然死机,重启之后啥都没了. 继承嘛,有人觉得很简单,但是里面还是有内容可以讲的,因为面向对象也就这么点内容,封装 ...

  2. 个性化设置phpMyAdmin，去掉“以树形显示数据库”，禁用“发送错误报告”

    个性化设置phpMyAdmin 在使用phpMyAdmin 3.5.8.2时,发现: 如果数据库有相同的前缀,左边数据库导航会把前缀合并,即所谓的“以树形显示数据库”,真的有点不习惯,如下图所示: 不 ...

  3. jquery_DOM笔记

    回头补充知识: jquery事件复习: bind() 用于绑定多个事件,当某一个节点需要进行多项处理的时候使用 .使用方式 $(select).bind({event:function(),event ...

  4. C段渗透+cain嗅探

    其实吧这篇文件也是一个大概的了解和思路篇...没什么技术含量,但是你可以你可以从思路中来获得;其他的技术都是靠自己去摸索,我说了半天还是别人的,不如自己直接试试,这样效果比我直接告诉你的更加的深刻.. ...

  5. FileZillaFTP使用教程

    FileZillaServer.exe服务启动和关闭程序 FileZilla Server Interface.exe 服务 管理程序 配置ftp服务器的用户名,密码,目录,目录读写权限 启动File ...

  6. WORDPRESS点击标题或图片无法链接到文章页面

    在设置出更改固定连接设置

  7. js 的复制和引用 （传值和传址）

    复制(传值-实参):  基本类型赋值.函数参数 引用(传址-形参):  对象.数组.函数

  8. sys/types.h fcntl.h unistd.h sys/stat.h

    sys/types.h 是Unix/Linux系统的基本系统数据类型的头文件,含有size_t,time_t,pid_t等类型. 在应用程序源文件中包含 <sys/types.h> 以访问 ...

  9. ng-bind 与ng-model区别

    双向绑定,一般来说是这样 <input ng-model="object.xxx"> <span ng-bind="object.xxx"&g ...

  10. 初学Redis（1）——认识Redis

    Redis官网对Redis的定义是:“Redis is an open source, BSD licensed, advanced key-value cache and store”,可以看出,R ...