分享
hgroup 标签有中划线,表示过时的意思。新的表示方式用 h 标签,大的标签包含小的标签,如下。
任天堂游戏
魂斗罗
魂斗罗
header 元素 代表页面或内容头部标题(页眉)
-
通常包含 h1 到 h6 元素或者 hgroup。
-
页面中 header 元素的个数没有限制,可以拥有多个。
-
可以为每个内容增加一个 header 元素。
主要标题
次要标题(副标题)
案例:header 可以放置在任何地方表示头部信息。
主要标题
次要标题(副标题)
页面正文区域
王者荣耀
游戏
asdjhasj asd asdas d asd asd as das d asd s vdf bg fv df v
王者荣耀
游戏
asdjhasj asd asdas d asd asd as das d asd s vdf bg fv df v
footer 元素代表页面或内容块的底部信息(页脚)
-
通常含有该节点的一些基本信息(譬如:作者、相关文档、版权资料等)
-
如果 footer 元素包含整个节,那么他们就代表附录,索引等类似信息。
-
footer 元素没有个数限制,除了包裹不一样,其他和 header 类似。
© 2018
- HTML5
- CSS3
- JavaScript
© : 版权符号
nav 元素代表页面的导航连接区域,用于定义页面上的 主要导航部分 ,一般只用在整个页面主要导航部分上,不合适就不要用 nav 元素!
- HTML5
- CSS3
- JavaScript
article 元素代表一个在文档、网页或者网站中自成一体的内容
-
其目的是为了让开发者独立开发或重用。
-
譬如论坛的帖子、博客文章、一片用户的评论、一个混动的 widget 小工具。
-
article 会有一个标题(通常会在 header 中),会有一个 footer 页脚。
-
如果在 article 内部在嵌套 article,那就代表内嵌的 article 是与他外部的内容有关联的,如博客文章下的评论。
文章标题
文章内容
版权
article 嵌套 相对来说比较恶心人,但是经常用到,所以说恶心人也忍着!!例如:看下边,先别蒙,挺住!!
一篇文章
文章内容
评论
评论人
评论内容
评论人
评论内容
aside 元素放置主要内容的附属信息部分
aside 中的内容可以是与当前文章有关的相关资料、标签、名词解释等,或者作为页面或者站点的全局的附属信息部分,如广告,其他日志连接或者其他分类导航等。用的不是特别的多,还是看心情。
文章内容
作者简介
内容介绍
section 元素表示文章的节或者页面的一个区块
段是指一篇文章里按照主题的分节,区块是指一个页面里的分组。
section 通常带有标题。
虽然 HTML5 中的 section 会自动给标题 h1 - h6 降级,但是最好手动给他们降级。
article、nav、aside 可以理解为特殊的 section。
所以如果可以用 article、nav、aside 就不要用 section,没有实际意义的用 div。
王者荣耀
诸葛亮
是的厂家生产加快房地产建设的成绩就是吃的是草的收发标识符地方深V大V
李白
是的厂家生产加快房地产建设的成绩就是吃的是草的收发标识符地方深V大V
狄仁杰
是的厂家生产加快房地产建设的成绩就是吃的是草的收发标识符地方深V大V
虞姬
是的厂家生产加快房地产建设的成绩就是吃的是草的收发标识符地方深V大V
在一个大的节点下,可以有多个文章(反向嵌套)。
原文
充分是的收发把是地方深V地方vAV深V 深V深V深V深V突然VR是大V突然表示同意
译文
译文1标题
savccsvvsvjfsdkljviodrdnortsdvfniodyrntskbohtnkddyrnsbfvbghjmnybgfvgbhjnkmi,mujngvf
译文2标题
savccsvvsvjfsdkljviodrdnortsdvfniodyrntskbohtnkddyrnsbfvbghjmnybgfvgbhjnkmi,mujngvf
稍微刺激一点的 小练习 (挺住!别慌!):
看下边的图片:
主题结构:
关键HTML代码:
Simpel HTML5 Blog
Blogs post for 2018
sdcsdcscfs
sdcdfbvjsnjkgdn jknkjfnv lnfgfdnkb hdbth
sdcdfbvjsnjkgdn jknkjfnv lnfgfdnkb hdbth
sdcsdcscfs
sdcdfbvjsnjkgdn jknkjfnv lnfgfdnkb hdbth
sdcdfbvjsnjkgdn jknkjfnv lnfgfdnkb hdbth
sdcsdcscfs
sdcdfbvjsnjkgdn jknkjfnv lnfgfdnkb hdbth
sdcdfbvjsnjkgdn jknkjfnv lnfgfdnkb hdbth
tag cloud
© 2018语义化标签的注意事项
分享
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】