本文已参与「新人创作礼」活动，一起开启掘金创作之路。
——Bug修复员-鲁宽宽
背景
近几年前端框架快速的发展（Vue、React等），它们极大地提升了前端开发效率。在此背景下加上配套的脚手架工具，使从业者直呼痛快~
作为前端的小菜鸟（梦想成为大菜鸟），在这里想和大家讨论一个前端的基础点。
请接招
请解释下HTML源代码中的以下几行的含义。
<!DOCTYPE html>
<html dir="ltr" lang="zh-CN">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,...">
<meta name="apple-mobile-web-app-capable" conttent="yes">
<meta http-equiv="origin-trial" content="....">
body { margin:0; }
若是各位有自己的看法，还辛苦打在评论区，以便大家学习参考。
下面是一些参考答案，请查阅~
揭谜底
- 第一行<!DOCTYPE html>
这行代码大家应该都很熟悉，当你迈入前端这个行业时，直接或者间接的都会学习到这行代码的含义。
参考答案：
html文件第一行代码属于文档类型（doc-type）声明。它会向浏览器传达此文件的编写类型，浏览器接解析时会首先读取此行代码，以确保用适当的方式来呈现页面。
延伸：HTML文档声明随着浏览器体系的发展（1991-至今）也在不断的更新优化，从HTML、HTML2.0、HTML3.2、HTML4.0、到如今的HTML5。
- 第二行<html dir="ltr" lang="en">
这是HTML文档的根元素，告诉浏览器当前文档的语言类型及排列方向。
参考答案：
lang属性可用于标记网页或部分网页的语言，便于SEO、搜索引擎识别等。dir属性表示文档的排列方向（ltr、rtl）。
- 第三行：<meta charset="utf-8">
字符集（char-set）属性告诉浏览器使用哪种字符编码，而 Twitter 使用标准的 UTF-8 编码。
参考答案：
源代码中的元标记用于提供有关此文档的元数据。目前基本为UTF-8编码格式，浏览器引擎解析文档时依赖此标识选择合适的解码方式。
- 第四行：<meta name="viewport" content="width=device-...>
告诉浏览器采用哪种形式的一种呈现，如：视口大小、是否禁止主动缩放等
参考答案：
width=device-width告诉浏览器使用 100% 的设备宽度作为视口，因此没有水平滚动，但您甚至可以为宽度指定特定的像素值。标准的最佳实践是将初始比例设置为1和宽度设置为，device-width以便人们仍然可以根据需要进行缩放。user-scalable=0，顾名思义，它禁用缩放功能
- 第五行：<meta name="apple-mobile-web-app-capable" cont...>
针对safari移动端的属性，是否禁止显示浏览器自带的工具栏（不过经测试发现无效）
参考答案：
启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏。content="yes" 不显示工具栏、no显示
- 第六行：<meta http-equiv="origin-trial" content="..>
参考答案：
Origin 试用版让我们可以在我们的网站上使用新的和实验性的功能，用户代理会跟踪反馈并报告给 Web 标准社区，而无需用户选择加入功能标志。
- 第七行：body { margin:0; }
这个应该都不陌生。
参考答案：
因为不同的浏览器具有不同的默认样式（用户代理样式表），您希望通过重置属性来覆盖它们，以便您的网站在不同设备上看起来相同。
总结
以上只是个人整理的小知识，若有错误可以及时回复，我会及时修正。
很开心~，又生产了一篇文章，其中最大的收获就是收集资料的过程。
