HTML，JavaScript等技术的应用。
01、任务实现步骤
任务描述：本任务利用HTML和JavaScript等搭建智能语音识别与翻译平台的前端页面，包括index.htm、base.htm前端网页模板的编写以及错误页面404.htm的编写。
第一步：编写base.htm。base.htm用来调用项目外部static文件中的css、js、scss、html等配置文件，核心代码如下所示。
<!-- 左边滑动栏 -->
<aside class="main-sidebar elevation-4 sidebar-light-cyan">
<!-- website logo -->
< a href="/" class="brand-link navbar-cyan">
<img src="{% static 'dist/img/website logo.png' %}" alt="NLPStudio Logo" class="brand-image img-circle elevation-3"
style="opacity: .8">
<span class="brand-textfont-weight-light" style="
font-size:20px;color:lightgreen" >identification tool </span>
</ a>
<div class="sidebar">
<!-- 用户信息 -->
< a href="#">
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
<div class="pull-left image">
<img src="{% static 'img/user_logo.png' %}" class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p style="font-size:20px;color:lightgreen" >Python</p>
<i class="fafa-circletext-success"style="fontsize:20px;color:lightgreen" > 埋头苦干中 </i>
</div>
</div>
</ a>
<!-- 侧边栏菜单-->
{
% include "home/slide.htm" %}
</div>
</aside>
<!-- Page header-->
<div class="content-wrapper">
{
% block content-header %}
<section class="content-header">
<div class="container-fluid">
<div class="row">
<div class="col-6">
{
% block module-title %}{
% endblock %}
</div>
<!-- 导航 -->
<div class="col-6">
<ol class="breadcrumb float-sm-right">
{
% block breadcrumb %}{
% endblock %}
</ol>
</div>
</div>
</div>
</section>
第二步：搭建index.htm来展示网站网页所有的显示界面，核心代码如下所示。
<!-- 功能按钮设置 -->
<div class="card">
<div class="card-header d-flex p-0">
<h3 class="card-title p-3"> 功能 </h3>
<ul class="nav nav-pills ml-auto p-2">
<!-- 功能选项卡设置 -->
<li class="nav-item"><a class="nav-link active" href="#tab_1" data-toggle="tab">Voice File --> </ a></li>
<li class="nav-item"><a class="nav-link" href="#tab_2" data-toggle="tab">identification Text --> </ a></li>
<li class="nav-item"><a class="nav-link" href="#tab_3" data-toggle="tab">Translation and reading --> </ a></li>
</ul>
</div><!--功能文本框设置 -->
<div class="card-body">
<div class="tab-content">
<div class="tab-pane active" id="tab_1">
<div class="col-12">
<div class="input-group rounded-0">
<!-- 显示上传的文件路径 -->
<input type="text" name="audiopath" class="form-control" value=""
placeholder="文件不能大于1M,格式需为wav" id="audiopath" />
<div class="input-group-append">
<label class="btn btn-default btn-flat" for="uploadfield_btn">
<i class="fa fa-upload"></i>
<!-- 上传控制输入框 -->
<input hidden type="file" name="file" id="uploadfield_btn">
</label>
</div>
</div>
</div>
{
% csrf_token %}
</div>
<div class="tab-pane" id="tab_2">
<div class="row" style="padding-bottom: 10px;">
<div class="col-12 form-group">
<!-- 解析后文本框 -->
<textarea name class="form-control form-control-rev" name="trans_text" ></textarea>
</div>
第三步：编写错误视图404.htm，来展示当网站访问到死链接或不存在的网址时，Web服务器便会把这个页面展示出来，核心代码如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{
你访问的页面不存在！！！请重新访问}
</body>
</html>
