新语义化标签多数也是用来划分区域的,只是比起div来说更加有侧重点。偏向的区域更加明确,可以更加丰富我们的代码内容。
首先说一下我最近所学的标签汇总,之后我会结合起来运用一下。
一、
(1)section:部分,偏向于划分区域
(2)article:文章内容,所以偏向于内容展示
(3)aside:在一边的,偏向于侧边内容
(4)header:头部,多用来内容或者区域及网页的标题划分
(5)footer:和header对应起来,多用于内容区域网页的底部划分
(6)nav:不陌生吧,这个就可以专门用来负责导航区域或者导航连接
(7)figure:一段独立内容,常常和figcaption一起用,怎么用呢,看第8点
(8)figcaption:为figure添加标题,一般放在figure的第一位或者最后一位
(9)main:主要的,所以可以用来表达你的主题内容版块
(10)mark:属于内联元素,高亮部分,用来突出表现你的重点内容
(默认背景黄色,可修改)
(11)time:放时间的,比如新闻标题后面的时间
(12)dialog:会话框,比如聊天功能会用到的对话框
(13)hgroup:对section或者网页的标题进行组合,比如主标题副标题
二、
以上这些标签都是双标签,接下来我们看个代码运用吧
(1)html部分:
(2)css部分:
(3)结果显示:
(4)其他代码用法
(5)html部分:
(6)css部分:
(7)结果图:
三、总结
我认为新标签的出现会丰富我们的代码编写形式,也许这些功能用div都可以实现,但是其语义化标签会让浏览器和开发人员更好的了解代码,今天的介绍就到这里了,希望交流互助,谢谢观看。