第8章 h5结构标签(了解)

传统的div+css的页面布局方式

image.png

HTML5布局方式： 是不是精简了很多呢

image.png

结构标签：(块状元素) 有意义的div
article:标签装载显示一个独立的文章内容。例如一篇完整的论坛帖子，一则网站新闻，一篇博客文章等等，一个用户评论等等
header: 标记定义一个页面或一个区域的头部
nav :标记定义导航链接
section :标记定义一个区域
aside: 标记定义页面内容部分的侧边栏
hgroup: 标记定义文件中一个区块的相关信息
figure: 标记定义一组媒体内容以及它们的标题
figcaption: 标签定义 figure 元素的标题。
footer: 标记定义一个页面或一个区域的底部
dialog: 标记定义一个对话框(会话框)类似微信

常用语义标签：
header:页眉
footer:页脚
nav:导航
main:文档主要内容
article:文章
aside:侧边栏。

例子：

    
    
        
            
            
            
        
        
            
head
            
nav
            

                
aside
                
article
                
            
            
foot
        
    

兼容性问题：
chrome firefox没问题
ie9下高度失效，因为解析为行级元素，改为块级即可display: block;
ie9：选择支持了一部分
ie8以下: 详见视屏

            main{
                display: block;
                width:100%;
                height:500px;
                background-color: deepskyblue;
            }

多媒体交互标签