# 3.1 多种语言显示欢迎

我们的第一个任务是为杂货店网站创建主页。

主页的第一版将会非常简单：一个标题和欢迎信息。这就是我们的`/WEB-INF/templates/home.html`文件：

```markup
<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">

  <head>
    <title>Good Thymes Virtual Grocery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" media="all" 
          href="../../css/gtvg.css" th:href="@{/css/gtvg.css}" />
  </head>

  <body>

    <p th:text="#{home.welcome}">Welcome to our grocery store!</p>

  </body>

</html>
```

你注意到的第一件事是：这个文件是HTML5，可以被任何浏览器正确地表示，因为它没有包含任何非HTML标签（浏览器会忽略所有不认识的属性，比如`th:text`）。

但是，你也可能注意到这个模板实际上并不是一个有效的HTML5文档，因为HTML5规范不允许使用这些非标准属性（`th:*`）。实际上，我们甚至往`<html>`标签里加了`xmlns:th`属性，这样完全不是HTML5风格的东西：

```markup
<html xmlns:th="http://www.thymeleaf.org">
```

这对模板的处理完全没有影响，但是它能像魔法一样，防止IDE抱怨这些`th:*`属性缺少命名空间的定义。

要是我们想要这个模板变成**有效的HTML5**，该怎么办呢？简单：使用Thymeleaf的数据属性语法，为属性名使用`data-`前缀，同时用连字符（`-`）代替冒号（`:`）：

```markup
<!DOCTYPE html>

<html>

  <head>
    <title>Good Thymes Virtual Grocery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" media="all" 
          href="../../css/gtvg.css" data-th-href="@{/css/gtvg.css}" />
  </head>

  <body>

    <p data-th-text="#{home.welcome}">Welcome to our grocery store!</p>

  </body>

</html>
```

HTML5规范允许自定义的`data-`前缀属性，所以用上面的代码，我们的模板就能成为有效的HTML5文档。

```
两种记法完全等价，可以互换。但是，为了简单起见，本教程将使用命名空间记法（`th:*`）。
而且，`th:*`记法更加普遍，在每一种Thymeleaf模板模式（XML，TEXT······）中都被允许,而`data-`记法只在HTML模式中被允许使用。
```
