页面的head部分，需引入页面的样式文件、jQuery库和必要的JS文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/index.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src='js/index.js'></script>

页面的body部分，设置好功能介绍的内容和词汇表的内容，代码如下：

<div class="banner">
    <p class="title">轻松搞定程序员编程词汇表</p>
    <p class="content">集结了600个程序员常用的单词和词汇，让你写代码变量命名 So easy! 标准伦敦腔，在线朗读，助你告别尴尬，放声交流！</p>
    <a href="#vocabulary">行动起来GOGOGO！</a>
</div>
<div class="container" id="vocabulary">
    <div class="wordItemBox">
        <p class="word">application </p><img class="pronounce" src="images/pronounce.png" alt="voice">
        <hr>
        <p class="translate">应用程式 应用、应用程序</p>
    </div>
    <div class="wordItemBox">
        <p class="word">application framework </p><img class="pronounce" src="images/pronounce.png" alt="voice">
        <hr>
        <p class="translate">应用程式框架、应用框架 应用程序框架</p>
    </div>
<!-- 省略部分演示代码 -->
    <div class="wordItemBox">
        <p class="word">architecture </p><img class="pronounce" src="images/pronounce.png" alt="voice">
        <hr>
        <p class="translate">架构、系统架构 体系结构</p>
    </div>
    <div class="wordItemBox">
        <p class="word">argument </p><img class="pronounce" src="images/pronounce.png" alt="voice">
        <hr>
        <p class="translate">引数（传给函式的值）。参见 parameter 参数、实质参数、实参、自变量</p>
    </div>
</div>