HTML 基础知识,高端web前端开发,前端开发了解这些自然无惧面试

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

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

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

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

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

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

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

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

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

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

  2. 如果只需要一个 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 嵌套 相对来说比较恶心人,但是经常用到,所以说恶心人也忍着!!例如:看下边,先别蒙,挺住!!

        一篇文章

        文章内容

        评论

        评论人

        评论内容

        评论人

        评论内容

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

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

        文章内容

        作者简介

        内容介绍

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

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

        section 通常带有标题。

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

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

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

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

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

        img
        img
        img
        img

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

        如果你觉得这些内容对你有帮助,可以添加下面V无偿领取!(备注:前端)
        img

        总结

        • 框架原理真的深入某一部分具体的代码和实现方式时,要多注意到细节,不要只能写出一个框架。

        • 算法方面很薄弱的,最好多刷一刷,不然影响你的工资和成功率😯

        • 在投递简历之前,最好通过各种渠道找到公司内部的人,先提前了解业务,也可以帮助后期优秀 offer 的决策。

        • 要勇于说不,对于某些 offer 待遇不满意、业务不喜欢,应该相信自己,不要因为当下没有更好的 offer 而投降,一份工作短则一年长则 N 年,为了幸福生活要慎重选择!!!

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

        ]

        总结

        • 框架原理真的深入某一部分具体的代码和实现方式时,要多注意到细节,不要只能写出一个框架。

        • 算法方面很薄弱的,最好多刷一刷,不然影响你的工资和成功率😯

        • 在投递简历之前,最好通过各种渠道找到公司内部的人,先提前了解业务,也可以帮助后期优秀 offer 的决策。

        • 要勇于说不,对于某些 offer 待遇不满意、业务不喜欢,应该相信自己,不要因为当下没有更好的 offer 而投降,一份工作短则一年长则 N 年,为了幸福生活要慎重选择!!!

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

        喜欢这篇文章文章的小伙伴们点赞+转发支持,你们的支持是我最大的动力!

      • 19
        点赞
      • 25
        收藏
        觉得还不错? 一键收藏
      • 0
        评论

      “相关推荐”对你有帮助么?

      • 非常没帮助
      • 没帮助
      • 一般
      • 有帮助
      • 非常有帮助
      提交
      评论
      添加红包

      请填写红包祝福语或标题

      红包个数最小为10个

      红包金额最低5元

      当前余额3.43前往充值 >
      需支付:10.00
      成就一亿技术人!
      领取后你会自动成为博主和红包主的粉丝 规则
      hope_wisdom
      发出的红包
      实付
      使用余额支付
      点击重新获取
      扫码支付
      钱包余额 0

      抵扣说明:

      1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
      2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

      余额充值