html5学习笔记(4)

XHTML可扩展的超文本标记语言

文档声明:

    DTD:


html5与html4的区别


html5新增的元素:

  • 结构元素:section ,article, aside, header,hgroup,footer, nav, figure

  • 其他元素: video,audio, canvas, 

  • input,元素类型:Email, 


全局属性:

  • contentEditable

  • disignMode

  • hidden

  • spellcheck

  • tabindex


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <h2>contentEditable</h2>
    <ul contenteditable="true">
        <li>表1</li>
        <li>表2</li>
        <li>表3</li>
    </ul>
    <ul hidden="true">
        <li>表1</li>
        <li>表2</li>
        <li>表3</li>
    </ul>
    <input type="text" spellcheck="">
    <a href="#" tabindex="1">hello1</a>
    <a href="#" tabindex="2">hello2</a>
    <a href="#" tabindex="3">hello3</a>
</body>
</html>


新增的主体结构元素:

1 , article 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>article</title>
</head>
<body>
    <article>
        <header>
            <h1>thystar</h1>
            <p>welcome to jike</p>
        </header>
        <article>
            <header>
                作者
            </header>
            <p>评论</p>
            <footer>
                time
            </footer>
        </article>
        <footer>
            <p>底部</p>
        </footer>
    </article>
    <article>
        <h1>嵌套页面</h1>
        <object>
            <embed src="#" width="600" height="400"></embed>
        </object>
    </article>
</body>
</html>


2. section

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>article</title>
</head>
<body>
    <section>
        <h1>apple</h1>
        <p>this is an apple</p>
    </section>
    <article>
        <h1>apple</h1>
        <p>this is an apple</p>
        <section>
            <h2>red</h2>
            <p>this is a red apple</p>
        </section>
        <section>
            <h2>green</h2>
            <p>this is a green apple</p>
        </section>
    </article>
    <section>
        <h1>fruit</h1>
        <article>
            <h1>apple</h1>
            <p>this is an apple</p>
        </article>
        <article>
            <h1>apple</h1>
            <p>this is an apple</p>
        </article>
        <article>
            <h1>apple</h1>
            <p>this is an apple</p>
        </article>

    </section>
</body>
</html>


3. nav 导航

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>article</title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">主页</a></li>
            <li><a href="#">文档</li>
        </ul>
    </nav>
    <article>
        <header>
            <h1>ssssssssssssss</h1>
            <nav>
                <ul>
                    <li><a href="#">主页</a></li>
                    <li><a href="#">文档</li>
                </ul>
            </nav>
        </header>

        <section>
            <h1>ssssssssssssss</h1>
            <nav>
                <ul>
                    <li><a href="#">主页</a></li>
                    <li><a href="#">文档</li>
                </ul>
            </nav>
        </section>
        <footer>
            <nav>
                <ul>
                    <li><a href="#">删除</a></li>
                    <li><a href="#">修改</li>
                </ul>
            </nav>
        </footer>
    </article>
    <footer>
        <p><small>版权声明</small></p>
    </footer>
</body>
</html>


aside元素

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <header>
        <h1>jike</h1>
    </header>
<article>
    <h1>yufa</h1>
    <p>zhengwen</p>
    <aside>
        <h1>jishi</h1>
        <p>yufa:yigeduiyuyanlaishuohenzhongyaodeneirongti</p>
    </aside>
</article>
<aside>
    <nav>
        <h2>pinglu</h2>
        <ul>
            <li><a href="#">20150101</a></li>
            <li><a href="#">20150102</a></li>
            
        </ul>
    </nav>
</aside>
</body>
</html>


time元素与微格式

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <time datetime="20101010">2010-10-10</time>
    <time datetime="20101010T20:00">2010-10-10</time>
    <time datetime="20101010T20:00+09:00">2010-10-10</time>
</body>
</html>


pubdate

<body>
    <article>
        <h1>
            pingguo
        </h1>
        <p><time datetime="2015-10-15" pubdate>2015-10-15</time></p>
        <p><time datetime="2015-10-15" >2015-10-18</time></p>
    </article>
</body>


html5新增的非主体结构元素

header元素:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <header>
        <h1>页面标题</h1>
        <a href="#">jike</a>
        <nav>
            <ul>
                <li><a href="#">学习</a></li>
                <li><a href="#">技术</a></li>
                <li><a href="#">问答</a></li>
            </ul>
        </nav>
    </header>
    <article>
        <header><h1>hello</h1></header>
    </article>

</body>
</html>


footer

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <footer>
        <ul>
            <li><a href="#">20150101</a></li>
            <li><a href="#">20150102</a></li>
        </ul>
    </footer>
    <article>
        <h1>yufa</h1>
        <p>zhengwen</p>
        <footer>
            <h1>jishi</h1>
            <p>yufa:yigeduiyuyanlaishuohenzhongyaodeneirongti</p>
        </footer>
    </article>
    <section>
        <h1>ssssssssssssss</h1>
        <footer>
            <ul>
                <li><a href="#">主页</a></li>
                <li><a href="#">文档</li>
            </ul>
        </footer>
    </section>
</body>
</html>


hgroup

<hgroup>
    <h1>ssssssssssssss</h1>
    <h2>ssssssssssssss</h2>
</hgroup>


address

<body>
    <address>
        <a href="#">iven</a>
        <a href="#">Iven</a>
    </address>
    <footer>
        <div>
            <address>
                <a href="#">iven</a>
            </address>
        </div>
    </footer>
</body>








极客学院:http://www.jikexueyuan.com/course/147.html


你可能感兴趣的:(video,email,footer,article,figure)