HTML 基础知识，高端web前端开发，程序员进阶知识点

header：这个标签标示一个标签的头部。

hgroup：这个标签标示一组标题。

footer：这个标签标示一个节的脚注，可以包含作者信息、版权信息等。

nav：这个标签标示用于导航栏连接部分。

section：这个标签表示一个通用的文档或者应用程序节。

article：这个标签标示文档内容的一个独立快，比如博客条目或者报纸文章。

aside：这个标签标示与页面其他部分略微相关的内容块。

hgroup 元素标签代表页面或者内容块的标题分组

1. 当元素有多个层级标签的时候，该元素可以将 h1 到 h6 元素放在其内。

2. 譬如文章的主标题和副标题组合。

3. 如果只需要一个 h1 到 h6 标签就不用 hgroup 。

（h1 和 h6 用来表示一个层级关系，单纯调节字体大小不建议使用h标签，用font-size属性。）

主要标题

次要标题（副标题）

hgroup 标签有中划线，表示过时的意思。新的表示方式用 h 标签，大的标签包含小的标签，如下。

任天堂游戏

魂斗罗

魂斗罗

header 元素 代表页面或内容头部标题（页眉）

1. 通常包含 h1 到 h6 元素或者 hgroup。

2. 页面中 header 元素的个数没有限制，可以拥有多个。

3. 可以为每个内容增加一个 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  元素代表页面或内容块的底部信息（页脚）

1. 通常含有该节点的一些基本信息（譬如：作者、相关文档、版权资料等）

2. 如果 footer 元素包含整个节，那么他们就代表附录，索引等类似信息。

3. footer 元素没有个数限制，除了包裹不一样，其他和 header 类似。

© 2018

• HTML5
• CSS3
• JavaScript

• &copy ： 版权符号

  nav 元素代表页面的导航连接区域，用于定义页面上的 主要导航部分 ，一般只用在整个页面主要导航部分上，不合适就不要用 nav 元素！
• HTML5
• CSS3
• JavaScript

• article 元素代表一个在文档、网页或者网站中自成一体的内容

  1. 其目的是为了让开发者独立开发或重用。

  2. 譬如论坛的帖子、博客文章、一片用户的评论、一个混动的 widget 小工具。

  3. article 会有一个标题（通常会在 header 中），会有一个 footer 页脚。

  4. 如果在 article 内部在嵌套 article，那就代表内嵌的 article 是与他外部的内容有关联的，如博客文章下的评论。

  文章标题

  文章内容

  版权

  article 嵌套 相对来说比较恶心人，但是经常用到，所以说恶心人也忍着！！例如：看下边，先别蒙，挺住！！

  一篇文章

  2018-04-23

  文章内容

  评论

  评论人

  一小时前

  评论内容

  评论人

  一小时前

  评论内容

  aside 元素放置主要内容的附属信息部分

  aside 中的内容可以是与当前文章有关的相关资料、标签、名词解释等，或者作为页面或者站点的全局的附属信息部分，如广告，其他日志连接或者其他分类导航等。用的不是特别的多，还是看心情。

  文章内容

  作者简介

  内容介绍

  section 元素表示文章的节或者页面的一个区块

  段是指一篇文章里按照主题的分节，区块是指一个页面里的分组。

  section 通常带有标题。

  虽然 HTML5 中的 section 会自动给标题 h1 - h6 降级，但是最好手动给他们降级。

  article、nav、aside 可以理解为特殊的 section。

  所以如果可以用 article、nav、aside 就不要用 section，没有实际意义的用 div。

  小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
  因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  
  
  
  

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

  如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
  

  ❤️ 谢谢支持

  喜欢的话别忘了 关注、点赞哦~。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

  820262310)]
  [外链图片转存中…(img-a2HOLW3D-1710820262311)]
  [外链图片转存中…(img-3TW9ZmlH-1710820262311)]

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

  如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
  [外链图片转存中…(img-Hyecv44P-1710820262312)]

  ❤️ 谢谢支持

  喜欢的话别忘了 关注、点赞哦~。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  [外链图片转存中…(img-gWmc1rrc-1710820262312)]