【青训营】- 不一样的HTML

491 阅读3分钟

报名了第一届字节前端青训营,第一天重新学了一下 HTML 。

之前总觉得 HTML 就那些标签,HTML 在三件套中是最简单的,但其实听了青训营的课之后,才发现自己对 HTML 了解的并不全面,有很多东西自己了解的并不清楚;

比如说<script>标签,我之前知道里面的 JS 会阻塞 DOM 结构的解析,所以将它放在<body>中的最后面,但是我不知道它其实还有属性 (defer) 可以让 JS 下载和 DOM 解析并行执行;

然后还有语义化标签,虽然知道语义化标签,语义化标签有益于适配千奇百怪的设备和SEO ,但是我几乎没有用过它们~~ ,可能是我还太 low ,还没进到那个境界😂。

为了加深记忆和促进学习,记笔记肯定是必不可少的,既然有这个发文章的活动,那我就把我的笔记发出来了,以此共勉~,大家加油💪。


1、标记语言与编程语言

HTML是超文本标记语言的缩写;超文本指的是文本中包含指向其他文本的链接;其属于标记语言;由博纳斯-李提出,并现由W3C维护;

  1. 标记语言

    将文本以及文本相关的其它信息集合起来,展现出文档结构;

    标记语言举例:HTML、XML、KML、Markdown;

  2. 编程语言

    具备逻辑能力的语言;


2、HTML5

HTML5在2015年推出;改善了以前文档结构过于依赖div的缺点;

  1. HTML5的优势
    • 语义化标签,便于理解和利于SEO优化;
    • 统一标准,解决了流浪器之间的兼容性问题;
    • 提供了更多的API;

3、HTML语法基础

  1. <!DOCTYP html>

    <!DOCTYP>用来声明使用的 HTML 版本,<!DOCTYP html>用来声明使用的是 HTML5。

  2. <meta>标签

    源数据标签,描述数据的数据;

    • 常用属性
      • charset:定义字符编码方式;
      • name:页面信息的简要说明;常用值有keywords、description、viewport(主要用于移动端,定义设备屏幕上用来显示网页的区域);
      • http-equiv:给http头部添加一些信息,如设置网页到期时间、设置cookie
      • 其它自定义meta信息;
  3. <title>

    页面标题

  4. <link>

    • 常用属性
      • shortcut icon:指定页面标题旁的logo
      • stylesheet:链接到样式表
      • alternate stylesheet:可替换的样式表,不是所有浏览器都支持(如果用的是火狐浏览器体验一下
  5. <script>

    用来引入外部脚本文件;

    • 分类

      • <script>:立即下载脚本文件,下载完后立即执行,其会阻塞dom解析;
      • <script defer>:立即下载脚本文件,这个布尔属性被设定用来通知浏览器该脚本将在文档完成解析后,触发 DOMContentLoaded (en-US) 事件前执行。;
      • <script async>:对于普通脚本,如果存在 async 属性,那么普通脚本会被并行请求,并尽快解析和执行。对于模块脚本,如果存在 async 属性,那么脚本及其所有依赖都会在延缓队列中执行,因此它们会被并行请求,并尽快解析和执行。
      image-20210817114838854

  1. 语义化标签

    使用语义化标签有利于理解和SEO优化;让人和机器都更能读懂你;

    区块语义标签:

    • <header>
    • <nav>
    • <article>
    • <section>
    • <aside>
    • <footer>

    分组类语义标签

    • <figure>:包裹被独立引用的内容:图表、插图、代码等
    • <figcaption>:对应<figure>的说明文字;
    • <blockquote>:块级引用元素,cite属性指定来源url;
    • <dl>、<dt>、<dd>:用于描述一组键值对,通常用于元数据、术语定义等场景;

    文本类语义标签

    • <cite>:通常用于作品的标题;
    • <time>:用于包围时间、日期,通过指定datatime属性设置和文本对应的时间日期;
    • <address>:联系信息;
    • <mark>:在引用中使用,表示需要引起注意;
    • <code>:代码片段;
    • <small>:免责声明、注意事项;
  2. 多媒体标签

    • <img>
    • <picture>:通过包含0或多个<source>标签来为不同大小的显示屏提供相应的图像版本;
    • <video>