一个 合法的 HTML 文档

直到这里,我们看到的都是一些代码片段,HTML 文档 需要包含一套具体的结构才会合法

为什么我们要关注HTML文档的合法性?

  • 正确:一个合法的HTML文档会被浏览器正确显示
  • 易调试:不合法的HTML代码容易产生Bug并且不好调试
  • 可维护:一个合法的HTML文档更容易被更新,多人协作也不会有问题

Doctype

第一个需要提供的信息是HTML的文档类型,我们需要:Doctype

你可以把Doctype看成Iphone手机的版本,10年大家买的都是Iphone4, 17年大家都买Iphone8了。

曾经HTML有很多的版本(XHTML和HTML 4.01 一直是标准),现在*HTML 5是最新规范。

告诉浏览器HTML文档的版本是HTML 5,你仅需要在文档的开头第一行写:

<!DOCTYPE html>

就酱紫。

你一定奇怪为什么HTML 5的 Doctype 里面没有 “5”,W3C觉得以前的版本太混乱了,就趁这个机会把它变得简单了,所以移除了 Doctype 里的所有版本号。 {: .info}

元素

除了 Doctype ,所有的HTML必须在<html>元素内:

<!DOCTYPE html>

<html> 是所有HTML元素的祖先元素。

我们需要给HTML文档添加一些附加信息,<head>元素就是为了给整个网页添加属性。

比如,页面的标题就是在<header>内:

My fabulous blog

其他HTML元素可以并只能写在<head>内。

  • <link>
  • <meta>
  • <style>

<head>只包含元数据,而不是在任何地方显示(除了<title>),<body>元素是我们写页面内容的地方。 在浏览器中,包含在<body>会被显示

一个完整合法的HTML文档

结合上面所有的信息,我们写一个简单的合法的HTML文档。

<!DOCTYPE html>

挨踢路透社

Future FE!

如果你在浏览器中查看你将会看到:

  • “挨踢路透社” 被展示在了浏览器的tab标签上
  • “Future Fe!” 只有这一串文字被展示在了页面上,因为<body>标签中只写了这些内容。

W3C 提供了一个 Markup Validation Service来检查HTML文档合法性