第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
article
foot

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

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

多媒体交互标签

你可能感兴趣的:(第8章 h5结构标签(了解))