大家好，我是讯享网，很高兴认识大家。



🥳序言

众所周知，html是前端刚开始学习时的第一门语言。然而，在我们日常的实际开发中，一直注重的是实践和应用。但是殊不知的是，很多小伙伴都忽略了很多关于 相关的基础入门知识。那么在接下来的文章中，将讲解 是什么，其发展历史又是怎么样的？还有 如何使用，以及如何写出更加语义化的 。

接下来我们来一起学习⑧~🧐

😋一、网页三大元素

大家都知道，对于网页来说，有三大基本元素。那就是大家所熟悉的 ， 和 。对于这三者来说，主要描述如下：

• ：网页的基本结构；
• ：网页的展现效果；
• ：网页的功能行为。

😜二、HTML简介

1. 定义

，全称为 , 即超文本标记语言)，它是用于构建网页基本结构及其内容html需要java基础吗的一门标记语言。接下来我们来看一下超文本和标记语言分别是什么：

超文本： 文本中包含指向其他文本的链接；

标记语言： 将文本以及文本相关的其他信息结合起來，展现出文档结构，如： 、 、 、 等等。

2. 发展历史

看完定义之后，我们再来看下 的一个发展历史。具体如下：

• 在1989年提出了基于互联网的超文本系统。
• 1993年 （互联网工程任务组）发布首个 提案，由此， 语言的第一版就诞生啦。
• 在经历过几个草案之后， 于1995年发布，包括了基于表单的文件上传、表格、国际化等功能。
• 1994年 成立，随后接管了 的标准化工作，并在1997年发布了 。
• 随后发布的 中采用许多特定浏览器的元素类型和属性。
• 在2014年的时候， 作为 的推荐标准发布。

😝三、HTML结构

1. 引例阐述

我们来看一段 代码，具体如下：

讯享网

大家可以看到，在上面这段 代码中，包括 、 、 、 和 等等标签，由上面的这些标签，就构成了 的结构。

接下来我们来看一下 具有哪些特点。

2. 特点

• 文档包含多个 元素，元素具备不同的特性。
• 元素 = 开始标签 + 结束标签 + 元素内容。
• 一些元素只有一个标签，如 、 、 等。
• 元素标签不区分大小写。
• 元素可以嵌套在其他元素中间。
• 元素可以拥有属性，属性包含元素的额外信息。

接下来我们来看下以上这几个标签各自的作用。

3. HTML页面结构

（1）DOCTYPE

，常放在 文档最前面的位置，加上之后就会按照 的 标准来解析渲染页面。

（2）html

，是网页的根元素，包含整个页面的内容。

（3）head

，此标签对用户不可见，其中包括像面向搜索引擎的关键字、页面描述、字符编码声明、CSS样式等内容。

（4）body

，该元素包含能够被用户访问到的内容，包括文本、图像、视频、游戏、音频等等内容。

（5）meta

，常设置的内容有： 。下面给出一些常用的配置信息。

讯享网

（6）title

，表示页面的标题，经常显示在浏览器的标签页上。

（7）style

，是 的样式。

（8）link

，表示跳转链接。下面给出几种常见的 方式。具体如下：

（9）script

表示可执行脚本。通常引用的方式如下：

讯享网

下面我们来了解它的两个属性：

• ：立即下载，延迟执行，表示脚本可以等到 被完全解析和显示之后再执行，只对外部脚本有效。有 属性的脚本会阻止 事件，直到脚本被加载并且解析完成。
• ：立即下载脚本，且不妨碍其他操作，比如在下载其他资源或者加载其他脚本的时候，只对外部脚本有效。

我们用一张图来展示这两者的区别，具体如下图：

大家可以看到， 支持在遇到 文件时，立即下载脚本。而对于 来说，它只能前面的

内容先全部加载完，再进行执行操作。

😛四、常用元素

1. 三种常用元素

（1）内联元素

• 只占据它自己对应标签的边框所包含的空间。
• 只能容纳文本或其他内联元素。
• 只能通过修改水平边距、边框或者行高的方式改变尺寸。
• 常用的内联元素有： 、 、 、 、 、 、 、 、 、 、 。

（2）行内块级元素

• 元素在行内排列，不会独占一行。
• 支持设置宽高以及垂直边距、边框。
• 常用的内联元素： 、 、 。

（3）块级元素

• 占据其父元素的整行，总是从新的一行开始。
• 能容纳其他块元素或者内联元素。
• 可以控制宽高、行高、边距、边框等改变其尺寸。
• 常用的块级元素： 、 、 、 、 、 、 、 、 、 。

2. 图例

下面我们用一张图来来了解这三种常用该元素的区别。具体如下图：

😏五、语义化

1. 定义

所谓语义化，即根据内容的结构，选择合适的标签来构建出便于开发者阅读的可维护性更高的代码结构，同时能够让机器更好地解析。如下所示：

2. 常见语义化标签解析

接下来我们来看一下一些常见的语义化标签，具体如下。

（1）语义化 - 区块类别标签

1）header

• 主要用于展现一些介绍性信息。
• 通常包含⼀组介绍性或是辅助导航的元素，如标题、 、搜索框、作者名称等 。
• 不能放在 、 或者另⼀个 元素内部。

比如：

2）nav

• 在当前⽂档或其他⽂档中提供导航链接，如菜单、⽬录、索引等。
• ⽤来放置⼀些热⻔的链接，不常⽤的链接通常放到 ⾥置于底部。

比如：

3）article

• 独⽴的⽂档、页面、应⽤、站点。
• 可独⽴分配的或可复⽤的结构，如论坛帖⼦、新闻⽂章、博客、⽤户提交的评论、交互式组件等。

比如：

4）section

• 按主题将内容分组，通常会有标题。
• 通常出现在⽂档的⼤纲中。
• 不要把 作为普通容器来使用，比如说用于美化片段样式，此时用 更合适。
• 如果元素里边是独立的整块的内容，可以单独发布，则更适合用 。

比如：

5）aside

• 表示一个和其余页面内容几乎无关的部分，或者说单独拆出来不会影响整体的内容。
• 通常放在侧边栏，用于展示广告、 、引用内容等等。

比如：

6）footer

• 表示最近一个章节的页脚。
• 通常包含该章节作者、版权数据或者文档链接等信息。
• 内的元素不属于章节内容，不包含在大纲中。

比如：

（2）语义化 - 分组类别标签

1）figure/figcaption

• 包裹被独⽴引⽤的内容：图表、插图、代码等，通常会有个标题；
• 与其相关联的图表的说明/标题，通常位于 的第⼀个或最后⼀个。

比如：

2）blockquote

• 块级引⽤元素。
• 属性表示该来源的 。

比如：

3）dl/dt/dd

• 用于描述一组键值对。
• 通常用于元数据、术语定义等场景。

（3）语义化 - 文本标签

1）cite

• 元素通常用于引用作品标题。
• 包括论文、文件、书籍、电影等的引用。

2）time

• 机器可读的时间和日期。
• 表示此元素关联的时间日期，若不指定则该元素不会被解析为日期。

3）address

• 表示某个人或组织的联系信息。

4）mark

• 在引用中使用，表示需要引起注意。

5）code

• 表示代码片段。

6）small

• 表示免责声明、注意事项等等信息。

（4）语义化 - 多媒体元素标签

1）img

• 属性是必须的，嵌⼊图⽚的⽂件路径。
• 属性包含⼀条对图像的⽂本描述，⾮强制。屏幕阅读器会将这些描述读给需要使⽤阅读器的使⽤者听，让他们知道图像的含义。图像⽆法加载时(⽹络错误、内容被屏蔽或链接过期时)，浏览器会在⻚⾯上显示 属性中的⽂本。
• 解码⽅式：异步、同步。
• 懒加载。

2）picture

• 元素通过包含零或多个 元素和⼀个 元素来为不同的。
• 显示/设备场景提供相应的图像版本。
• 属性：依据的媒体条件渲染相应的图⽚，类似媒体查询。
• 属性： 类型，根据浏览器⽀持性渲染相应的图⽚。

3）音视频

• 所谓音视频标签，即 和 标签。
• 属性是必须的，嵌⼊视频⽂件路径。
• 表示是否展示浏览器⾃带的控件，同时可以创建⾃定义控件。
• 是否⾃动播放。
• 元素表示视频的可替代资源(不同格式、清晰度，读取失败或⽆法解码时可以依次尝试)。

比如：

🧐六、HTML解析

我们来看一下HTML是如何进行解析的。

1. DOM文档对象模型

所谓 ，即对节点的结构化进行表述，并定义了一种方式可以使程序对该结构进行访问，它将 页面和脚本语言链接起来。

2. HTML的解析过程

对于 树来说，其构建过程如下：

• 首先先构建 树；
• 其次要对样式进行计算，此时构建 树；
• 接着将 和 组合成一个 渲染树；
• 现在，浏览器将对整个页面的布局进行计算；
• 最后，绘制页面。

具体如下图所示：

🙃七、结束语

在上文中，我们了解到了网页的三大元素， 的简介、结构和其解析过程。当然，同样很重要的一点是语义化标签。对于语义化标签来说，它可以很一目了然地让我们知道是什么意思，很大程度上地提升了开发效率。

到这里，关于 的基础知识讲到这里就结束啦！希望对大家有帮助~

🐣彩蛋 One More Thing

👉关注公众号星期一研究室，第一时间关注优质文章，更多精选专栏待你解锁~

👉如果这篇文章对你有用，记得留个脚印jio再走哦~