HTML5语义化标签

作者: 八月飞花 | 来源:发表于2020-04-21 12:09 被阅读0次

HTML5标签语义化
H5新增语义化标签
HTML5详解
HTML5十大新特性
web前端网站收藏
HTML的语义化
template标签
web前端面试题
CSS3新增1
h5+css黑马笔记

什么是H5

html5是指，html语言的第五次重大更新的版本

html5兼容性

所有主流浏览器都支持html5（chrome，firefox，safari），IE9以上都支持h5，但是ie8及其一下都不支持H5

html更新内容

添加了交互的方式，多媒体，video，audio，canvas
增加了
  标签的语义性
  标签存储
  网页多媒体：音视频
  二维三维变换
  特效（transition，和adminition）

相对于html4的进步

抛弃了一些不合理的不常用的标记和属性
  新增了一些标记，和表单属性
  网页结构代码更加简洁

html5的结构

<!doctype !html
<html lang="ch">
  <head>
    <meta charset="utf-8"/>
  </head>
  <body>
  </body>
</html>

html5语义特性

html5抛弃标签

html5新增标签

<nav> 表示导航 </nav>
<header>页眉，头部</header>:可以描述任何模块的头部
<footer>页脚，底部</footer>
<main>主体/主要内容</main>
<article>文章</article>
<aside>除了文章之外的内容</aside>
<session></session>

语义化示例

语义化标签布局.png

<body>
    <header>头部</header>
    <main>
        <header>头部</header>
        <article>主体内容</article>
        <aside>内容以外的内容</aside>
        <footer>底部</footer>
    </main>
    <footer>底部</footer>
</body>

        header {
            width: auto;
            height: 30px;
            background-color: aquamarine;
        }
        
        main {
            width: auto;
            background-color: burlywood;
        }
        
        main header {
            height: 40px;
            width: auto;
            background-color: rgb(95, 95, 95);
        }
        
        main article {
            height: 180px;
            width: 70%;
            float: left;
            background-color: red;
        }
        
        main aside {
            color: aliceblue;
            height: 180px;
            width: 30%;
            float: left;
            background-color: black;
        }
        
        main footer {
            background-color: aliceblue;
        }
        
        footer {
            clear: both;
            width: auto;
            height: 30px;
            background-color: blueviolet;
        }