HTML5学习笔记--HTML5新增的常用标签

HTML5新增的常用标签

1.HTML5新增文档结构标签

1.1标签

  • 页眉标签<header> 页眉标签<header>和</header>用于定义网页文档或节的页眉，通常为网站名称。

  • 导航标签<nav> 导航标签<nav>和</nav>用于定义网页文档的导航菜单，可通过超链接跳转其他页面。其中nav来源于navigation（导航）的简写。

  • 节标签<section> 节标签<section>和</section>用于定义独立的专题区域，里面可包含一篇或多篇文章。

  • 文章标签<article> 文章标签<article>和</article>用于定义独立的文章区域，里面根据文章内容的长短也可以包含一个或多个段落元素<p>。

  • 侧栏标签<aside> 侧栏标签<aside>和</aside>用于定义正文两侧的相关内容，常用作文章的侧栏。

  • 页脚标签<footer> 页脚标签<footer>和</footer>用于定义整个网页文档或节的页脚，通常包含文档的作者、版权、联系方式等信息。

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" >
        <title>HTML5新增文档结构标签的综合应用</title>
        <!-- <link rel="stylesheet" href="css/html5.css"> -->
    </head>
    <style>
        body {
            background-color: #CCCCCC;
            margin: 0px auto;
            max-width: 900px;
            border: solid;
            border-color: #FFFFFF;
            color: black;
        }
        header {
            background-color: lightskyblue;
            display: block;
            color: #FFFFFF;
            text-align: center;
        }
        h1 {
            font-size: 72px;
            margin: 0px;
        }
        h2 {
            font-size: 24px;
            margin: 0px;
            text-align: center;
        }
        h3 {
            font-size: 18px;
            margin: 0px;
            text-align: center;
        }
        nav {
            display: block;
            width: 100%;
            float: left;
            text-align: center;
            background-color: white;
            padding-top: 20px;
            padding-bottom: 20px;
        }
        nav a:link, nav a:visited {
            display: inline;
            border-bottom: 3px solid #fff;
            padding: 10px;
            text-decoration: none;
            font-weight: bold;
            margin: 5px;
        }
        nav a:hover {
            color: white;
            background-color: lightskyblue;
        }
        nav h3 {
            margin: 15px;
        }
        #container {
            background-color: #dcf2ff;
        }
        section {
            display: block;
            width: 60%;
            float: left;
        }
        article {
            background-color: white;
            display: block;
            margin: 10px;
            padding: 10px;
        }
        article header {
            padding: 5px;
        }
        article footer {
            padding: 5px;
        }
        article h1 {
            font-size: 18px;
        }
        aside {
            color: lightskyblue;
            display: block;
            width: 20%;
            float: left;
        }
        aside h3 {
            margin: 15px;
        }
        aside p {
            margin: 15px;
            font-weight: bold;
        }
        footer {
            clear: both;
            display: block;
            background-color: lightskyblue;
            color: #FFFFFF;
            text-align: center;
            padding: 15px;
        }
        footer h2 {
            font-size: 14px;
            color: white;
        }
        /* links */
        a {
            color: lightskyblue;
        }
        a:hover {
            text-decoration: underline;
        }
    </style>
    <body>
        <header>
            <h1>页眉Header</h1>
        </header>
        <div id="container">
            <nav>
                <a href="http://www.example.com">菜单一</a>
                <a href="http://www.example.com">菜单二</a>
                <a href="http://www.example.com">菜单三</a>
                <a href="http://www.example.com">菜单四</a>
                <a href="http://www.example.com">菜单五</a>
                <a href="http://www.example.com">菜单六</a>
                <a href="http://www.example.com">菜单七</a>
                <a href="http://www.example.com">菜单八</a>
            </nav>
            <aside>
                <h3>侧栏Aside</h3>
                <p>侧栏内容</p>
                <p>侧栏内容</p>
                <p>侧栏内容</p>
                <p>侧栏内容</p>
                <p>侧栏内容</p>
                <p>侧栏内容</p>
            </aside>
            <section>
                <article>
                    <header>
                        <h1>文章页眉Article Header</h1>
                    </header>
                    <p>正文内容</p>
                    <p>正文内容</p>
                    <p>正文内容</p>
                    <p>正文内容</p>
                    <p>正文内容</p>
                    <p>正文内容</p>
                    <footer>
                        <h2>文章页脚Article Footer</h2>
                    </footer>
                </article>

                <article>
                    <header>
                        <h1>文章页眉Article Header</h1>
                    </header>
                    <p>正文内容</p>
                    <p>正文内容</p>
                    <p>正文内容</p>
                    <footer>
                        <h2>文章页脚Article Footer</h2>
                    </footer>
                </article>
            </section>
            <aside>
                <h3>侧栏Aside</h3>
                <p>侧栏内容</p>
                <p>侧栏内容</p>
                <p>侧栏内容</p>
                <p>侧栏内容</p>
                <p>侧栏内容</p>
                <p>侧栏内容</p>
            </aside>
            <footer>
                <h2>页脚Footer</h2>
            </footer>
        </div>
    </body>
</html>

1.2优点

  • 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构；

  • 比<div>标签有更加丰富的含义，方便开发与维护；

  • 方便搜索引擎能识别页面结构，有利于SEO；

  • 方便其他设备解析（如移动设备、盲人阅读器等）；

  • 有利于合作，遵守W3C标准；

2.常用的功能性API

  • 拖放：实现元素的拖放；

  • 画布：实现2D和3D绘图效果；

  • 音频和视频：实现自带控件播放音频和视频；

  • 表单：新增一系列输入类型，例如电话号码、数字范围、email地址等；

  • 地理定位：使用浏览器进行地理位置经纬度的定位；

  • Web存储：实现本地持久化存储大量数据；

这6个API此处不赘述,皆会另开一篇详谈.

posted @ 2020-01-03 13:35  小天狼星tyx  阅读(329)  评论(0)  编辑  收藏  举报