HTML5是一种用于构建网页的标准，它引入了许多新的功能和语义化标签，使得网页更具有交互性和可访问性。在旅游行业中，HTML5的应用也越来越广泛。本文将介绍一个简单的旅游网站的HTML5代码示例，并利用mermaid语法中的pie和stateDiagram标识出网站的饼状图和状态图。

首先，我们需要创建一个HTML文档的基本结构。在<head>标签中，我们可以添加网站的标题、引入CSS样式表和JavaScript脚本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旅游网站</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
</head>
<body>
    <!-- 网页内容将在这里添加 -->
</body>
</html>

接下来，我们可以在<body>标签中添加网页的内容。我们可以使用语义化标签，如<header>、<nav>、<main>和<footer>，来划分网页的结构。

<body>
    <header>
        旅游网站
    </header>
    <nav>
        <ul>
            <li><a rel="nofollow" href="#">首页</a></li>
            <li><a rel="nofollow" href="#">旅游目的地</a></li>
            <li><a rel="nofollow" href="#">旅行攻略</a></li>
            <li><a rel="nofollow" href="#">预订机票</a></li>
        </ul>
    </nav>
    <main>
        <section>
            <h2>热门旅游目的地</h2>
            <ul>
                <li>巴黎</li>
                <li>纽约</li>
                <li>东京</li>
            </ul>
        </section>
        <section>
            <h2>最新旅行攻略</h2>
            <ul>
                <li>巴黎浪漫之旅</li>
                <li>纽约自由行</li>
                <li>东京樱花季</li>
            </ul>
        </section>
    </main>
    <footer>
        <p>&copy; 2021 旅游网站. All rights reserved.</p>
    </footer>
</body>

在上面的代码中，我们使用了<header>标签来放置网站的标题，<nav>标签来展示导航栏，<main>标签来包含网页的主要内容，<section>标签用于细分内容区块。

接下来，我们可以使用CSS样式表来美化网页的外观。在styles.css文件中，我们可以定义标题的样式、导航栏的样式、内容区块的样式以及页脚的样式。

header {
    background-color: #f2f2f2;
    padding: 20px;
}

nav {
    background-color: #333;
    color: #fff;
    padding: 10px;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 10px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

main {
    padding: 20px;
}

section {
    margin-bottom: 20px;
}

footer {
    background-color: #f2f2f2;
    padding: 20px;
    text-align: center;
}

现在，我们已经完成了一个简单的旅游网站的HTML5代码示例。下面，我们将使用mermaid语法中的pie标识出网站的饼状图，并使用stateDiagram标识出网站的状态图。

pie
    "巴黎" : 30
    "纽约" : 40
    "东京" : 30

上述代码使用了mermaid语法中的pie标签来绘制一个饼状图，图例分别表示了巴黎、纽约和东京的比例。

接下来，我们使用mermaid语法中的stateDiagram标签绘制一个状态图，表示用户在旅游网站上的行为状态。

stateDiagram