<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. 用类方法------>快速创建一个autorelease的对象，在封装的类方法内部

    在封装的类方法内部,也就是+ (id)personWithName:(NSString *)name andAge:(int)age内部: 创建了一个person对象,并且创建了一个person*类型 ...

  2. 配置php.ini实现PHP文件上传功能

    本文介绍了如何配置php.ini实现PHP文件上传功能.其中涉及到php.ini配置文件中的upload_tmp_dir.upload_max_filesize.post_max_size等选项,这些 ...

  3. Windows下，MySQL root用户忘记密码解决方案

    同时打开2个命令行窗口,并按如下操作: <1>.在第一个“命令行窗口”输入: cd  D:\Program Files\MySQL\MySQL Server 5.5\bin net sto ...

  4. js的继承

    js要实现继承有很多方法,个人总结大致分为三种: function people(){ this.specials = "人类"; } function p1(name){ thi ...

  5. webview滑动事件 与内部html左右滑动事件冲突问题的解决办法

    最近在做个混合app , 用html做页面,然后通过webview嵌套在activity中,效果是这样: 开始还是比较顺利,增加了菜单退出按钮,返回键页面回退功能,页面加载显示加载图标(在app端实现 ...

  6. iOS开发——高级篇——图片轮播及其无限循环效果

    平时APP中的广告位.或者滚动的新闻图片等用到的就是图片轮播这种效果,实现方式主要有两种,一种是ScrollView+ImageView,另一种则是通过CollectionView,今天总结的是Scr ...

  7. 网站建设中帝国cms如何循环调用栏目下级分类

    类似的形式,调用下级分类 ?php $bclassid=[!--self.classid--]; //选择当前栏目的id,如果调用指定栏目下的多级分类,则填写栏目id //取得本栏目下的子栏目 ? [ ...

  8. poj 3468(线段树)

    http://poj.org/problem?id=3468 题意:给n个数字,从A1 …………An m次命令,Q是查询,查询a到b的区间和,c是更新,从a到b每个值都增加x.思路:这是一个很明显的线 ...

  9. jquery向苹果或者android发送请求

    var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return { ...

  10. [PHP][位转换积累]之pack和unpack

    一.前面的话 PHP的pack和unpack提供了为一系列数据打包(pack)和解包(unpack)成2进制流的功能,这个功能在面向字节的字符串处理和套接字的编程环境中尤为适用. 在了解这两个函数之前 ...