<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. 精选9个值得学习的 HTML5 效果【附源码】

    这里精选了一组很酷的 HTML5 效果.HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强.效 ...

  2. PAT MOOC dataStructure 4-1

    数据结构练习 4-1 AVL 树 1. 题目: Input Specification: Each input file contains one test case. For each case, ...

  3. java生产者/消费者模式实现——一生产者一消费者（操作值）

    胶多不粘话多不甜,直接上代码: 生产者类: /** * Created by 51304 on 2016/2/28. */ public class P { private String lock; ...

  4. Android多线程通信机制

    掌握Android的多线程通信机制,我们首先应该掌握Android中进程与线程是什么. 1. 进程 在Android中,一个应用程序就是一个独立的进程(应用运行在一个独立的环境中,可以避免其他应用程序 ...

  5. linux常用命令-帮助命令man,whatis,apropos,info,help

    man 命令 man 配置文件,注意这里只需要写文件名称就可以了,不能写文件的绝对路径 man既可以查看命令的帮助信息也可以查看配置文件的帮助信息,如果内容太多,可以输入"/内容" ...

  6. python set

    set是一个工厂函数(filter也是工厂函数),是一个可变的集合 frozenset 不可变的集合,与set共性,他也在内部自动去重, >>> num5=frozenset([1, ...

  7. Java中的Serializable接口transient关键字，及字节、字符、对象IO

    1.什么是序列化和反序列化Serialization是一种将对象转为为字节流的过程:deserialization是将字节流恢复为对象的过程. 2.什么情况下需要序列化a)当你想把的内存中的对象保存到 ...

  8. 常用语句if,for,while

    一.变量赋值 a = 3 b = a a = 5 print a,b 5,3   变量命名规则:   1.显式 2.nums_of_alex_gf = 19 3.NumsOfAlexGf = 2 4. ...

  9. XCode4.5.6,iOS6.1下测试 判断当前设备，及其联网状态等; 关于设备插上后XCode检测不出的情况的说明

    目录[-] 一.判断设备 二.判断网络连接状态 三.设备不显示的解决办法 一.判断设备 01 //设备名称 02 return [UIDevice currentDevice].name; 03   ...

  10. 【转】Caffe初试（五）视觉层及参数

    本文只讲解视觉层(Vision Layers)的参数,视觉层包括Convolution, Pooling, Local Response Normalization (LRN), im2col等层. ...