html5学习笔记(4)

发布时间：2020-07-22 08:07:03 阅读：301 作者：thystar 栏目：移动开发

前端开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

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>
    <h3>contentEditable</h3>
    <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>
            <h2>thystar</h2>
            <p>welcome to jike</p>
        </header>
        <article>
            <header>
                作者
            </header>
            <p>评论</p>
            <footer>
                time
            </footer>
        </article>
        <footer>
            <p>底部</p>
        </footer>
    </article>
    <article>
        <h2>嵌套页面</h2>
        <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>
        <h2>apple</h2>
        <p>this is an apple</p>
    </section>
    <article>
        <h2>apple</h2>
        <p>this is an apple</p>
        <section>
            <h3>red</h3>
            <p>this is a red apple</p>
        </section>
        <section>
            <h3>green</h3>
            <p>this is a green apple</p>
        </section>
    </article>
    <section>
        <h2>fruit</h2>
        <article>
            <h2>apple</h2>
            <p>this is an apple</p>
        </article>
        <article>
            <h2>apple</h2>
            <p>this is an apple</p>
        </article>
        <article>
            <h2>apple</h2>
            <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>
            <h2>ssssssssssssss</h2>
            <nav>
                <ul>
                    <li><a href="#">主页</a></li>
                    <li><a href="#">文档</li>
                </ul>
            </nav>
        </header>

        <section>
            <h2>ssssssssssssss</h2>
            <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>
        <h2>jike</h2>
    </header>
<article>
    <h2>yufa</h2>
    <p>zhengwen</p>
    <aside>
        <h2>jishi</h2>
        <p>yufa:yigeduiyuyanlaishuohenzhongyaodeneirongti</p>
    </aside>
</article>
<aside>
    <nav>
        <h3>pinglu</h3>
        <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>
        <h2>
            pingguo
        </h2>
        <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>
        <h2>页面标题</h2>
        <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><h2>hello</h2></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>
        <h2>yufa</h2>
        <p>zhengwen</p>
        <footer>
            <h2>jishi</h2>
            <p>yufa:yigeduiyuyanlaishuohenzhongyaodeneirongti</p>
        </footer>
    </article>
    <section>
        <h2>ssssssssssssss</h2>
        <footer>
            <ul>
                <li><a href="#">主页</a></li>
                <li><a href="#">文档</li>
            </ul>
        </footer>
    </section>
</body>
</html>

hgroup

<hgroup>
    <h2>ssssssssssssss</h2>
    <h3>ssssssssssssss</h3>
</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

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

向AI问一下细节

html5学习笔记(4)

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签