<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. Linux C 静态库(.a) 与 动态库(.so) 的详解

    库从本质上来说是一种可执行代码的二进制格式,可以被载入内存中执行.库分静态库和动态库两种. 一.静态库和动态库的区别 1.静态函数库 这类库的名字一般是libxxx.a:利用静态函数库编译成的文件比较 ...

  2. class Solution(object): def fizzBuzz(self, n): a = [] i = 1 while(i <= n): if(i%15 == 0): a.append("FizzBuzz") elifleetcode day_01

    412. Fizz Buzz Write a program that outputs the string representation of numbers from 1 to n. But fo ...

  3. linux内核调度算法（2）--CPU时间片如何分配 转！

    http://blog.csdn.net/russell_tao/article/details/7103012 内核在微观上,把CPU的运行时间分成许多分,然后安排给各个进程轮流运行,造成宏观上所有 ...

  4. python操作mysql总结

    Windows系统,python环境搭建. 下载并安装python2.7.11 https://www.python.org/downloads/ 下载并安装python的mysql包: http:/ ...

  5. 号外！GNOME 3.22 正式发布喽！！！

    导读 经过半年的努力开发,别名为“卡尔斯鲁厄”的 GNOME 3.22 正式发布了!“GNOME Software 可以安装和更新 Flatpak 软件包,GNOME Builder 则可以创建它们, ...

  6. (转)Intent flag 与启动模式的对应关系

    原文地址:http://www.cnblogs.com/ttylinux/p/4069513.html Activity有四种启动模式: 1.standard(标准)    2.singleTop   ...

  7. POJ 2337 Catenyms（有向图的欧拉通路）

    题意:给n个字符串(3<=n<=1000),当字符串str[i]的尾字符与str[j]的首字符一样时,可用dot连接.判断用所有字符串一次且仅一次,连接成一串.若可以,输出答案的最小字典序 ...

  8. linux6的yum源

    [base]name=CentOS-$releasever-Basebaseurl=http://centos.ustc.edu.cn/centos/6/os/x86_64/gpgcheck=1gpg ...

  9. .Net中使用无闪刷新控件时提示框不显示

    今天做提示框的时候一直不显示,让我郁闷好久,晚上吃饭的时候问了同事一下,他给了一个思路, 他说可能是因为由于页面中的无闪刷新导致的结果:百度了一下真找到了解决方法 在页面中存在无闪刷新控件的时候提示框 ...

  10. swap的应用两个数的交换

    #include <stdio.h>//这儿表示的函数的输入输出头文件void swap(int x,int y);void swap_p(int *x,int *y);//表示调用一个方 ...