深入了解HTML文件前3行代码持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

HTML是用于开发网页，编写网页“骨架”的语言。全称是HyperText Mark-up Language，即超文本标记语言。作为前端开发者，我们可能最开始学习的就是html了，现在为了项目开发的便捷性，越来越多的使用各种各样的框架，以至于我们很长时间不用直接去接触html文档了，那你现在还能记得一个html文档的结构是什么吗？

<!DOCTYPE html>
<html>
    <head>            
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
         网页显示内容
    </body>
</html>

这是一个简单的html文档结构，下文将说明它每一行分别有什么作用。

第一行

<!DOCTYPE html>

这行代码是干什么用的？

这是DOCTYPE标签，指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。用来声明使用的html版本。

<!DOCTYPE html> 是为了浏览器知道这是一个HTML5页面，并且依此渲染。

为什么会有有这行代码？

早期 html 标准不同，浏览器需要根据不同的标准渲染页面，由于每个标准都会生成不同的布局，所以使用这个标签让浏览器更容易识别。早期的 DOCTYPE标签 很长，例如：

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML 5

<!DOCTYPE html>

第二行

<html lang="en">

这一标签是HTML文档的根标签，所有其他标签都在这个根标签之内。lang属性，告诉浏览器这个标签内的所有内容都是英语的。我们在开发中文网站的时候，有时往往会忘记将lang属性的值更改为zh-CN，浏览器就会将其认为是一个英文网站，浏览器如果内置了翻译的话，在每次打开页面的时候就可能弹出翻译改网站这个按钮。

此外它还有一个属性，direction 是用来告知浏览器UA展示内容的方向。

第三行

<meta charset="UTF-8">

源码中的meta标签说明了文档的meta数据。字符集(char-set)属性告诉浏览器使用哪种字符编码，UTF-8有很多特性，方便你可以在源码中使用各种符号和表情。

参考文章：