HTML示例与模板 - 智慧旅游教学实习系统

智慧旅游教学实习系统

HTML代码示例：嘉兴市乌镇景区

<table width="100%" border="0" align="center" cellpadding="10" cellspacing="0">
          <tr>
            <td style="border-bottom:1px solid #39F; color:#39F; font-family:微软雅黑; font-size:16px; font-weight:bold;">● 景区简介</td>
          </tr>
          <tr>
            <td style="text-indent:33px;">
            <p>乌镇作为中国首批十大历史文化名镇和中国十大魅力名镇、全国环境优美乡镇，素有“中国最后的枕水人家”之誉。2003年，乌镇被联合国授予亚太地区遗产保护杰出成就奖；2006年，被列入联合国世界文化遗产保护预备清单和中国世界文化遗产预备名单重设目录；2010年，乌镇旅游荣膺嘉兴市首个国家AAAAA旅游景区称号。</p>
    
            <p>乌镇位于浙江省桐乡市北端，地处富饶的杭嘉湖平原中心。历史上曾是两省（浙江、江苏）、三府（嘉兴、湖州、苏州）、七县（桐乡、石门、秀水、乌程、归安、吴江、震泽）错壤之地。陆上交通有县级公路姚震线贯穿镇区，经姚震公路可与省道盐湖公路、国道320公路、318公路、沪杭高速公路、申嘉湖高速公路、乍嘉苏高速公路相衔接。乌镇距桐乡市区13公里，距周围嘉兴、湖州、吴江三市分别为27公里、45公里和60公里，距杭州、苏州均为80公里，距上海140公里。镇域面积79平方公里，建城区面积2.5平方公里。</p>
    
            <p>东栅水乡风貌完整，生活气息浓郁，手工作坊和传统商铺各具特色，特色展馆琳琅满目。游客们在欣赏原汁原味的水乡风景的同时也可以尽享旅游购物和美食饕餮之乐。相比于西栅，东栅小而精悍，适合忙里偷闲的游客们抽出一两日的时光来领略水乡古镇风情。</p>
    
            <p>西栅历时四载磨砺，投资十多亿的西栅景区占地面积4.92平方公里，由十二个碧水环绕的岛屿组成，真正呈现了中国江南水乡古镇的风貌。西栅街区存留了大量明清古建和老街长弄，古建筑外观上保留了古色古香的韵味，而在内部则有选择地充实进了现代化的配套设施，在极大的改善了原住民生活居住条件的同时，也给游客提供舒适的居住环境和全方位的休闲娱乐。在这里，你可以深入体验淳朴清新的水乡生活，又可安享现代生活的舒适与便利。可以说，西栅是一个远离都市喧嚣的安谧绿洲，是一个完美融合了观光与度假功能的旅游目的地。</p>
            </td>
          </tr>
          <tr>
            <td style="border-bottom:1px solid #39F; color:#39F; font-family:微软雅黑; font-size:16px; font-weight:bold;">● 语音讲解</td>
          </tr>
          <tr>
            <td align="center">
                    <audio id="tts_autio_id" controls>
                        <source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=5&text=乌镇作为中国首批十大历史文化名镇和中国十大魅力名镇、全国环境优美乡镇，素有“中国最后的枕水人家”之誉。2003年，乌镇被联合国授予亚太地区遗产保护杰出成就奖；2006年，被列入联合国世界文化遗产保护预备清单和中国世界文化遗产预备名单重设目录；2010年，乌镇旅游荣膺嘉兴市首个国家AAAAA旅游景区称号。乌镇位于浙江省桐乡市北端，地处富饶的杭嘉湖平原中心。历史上曾是两省（浙江、江苏）、三府（嘉兴、湖州、苏州）、七县（桐乡、石门、秀水、乌程、归安、吴江、震泽）错壤之地。陆上交通有县级公路姚震线贯穿镇区，经姚震公路可与省道盐湖公路、国道320公路、318公路、沪杭高速公路、申嘉湖高速公路、乍嘉苏高速公路相衔接。乌镇距桐乡市区13公里，距周围嘉兴、湖州、吴江三市分别为27公里、45公里和60公里，距杭州、苏州均为80公里，距上海140公里。镇域面积79平方公里，建城区面积2.5平方公里。" type="audio/mpeg">
                    </audio>
            </td>
          </tr>
          <tr>
            <td style="border-bottom:1px solid #39F; color:#39F; font-family:微软雅黑; font-size:16px; font-weight:bold;">● 景区图片</td>
          </tr>
          <tr>
            <td><img src="http://www.wuzhen.com.cn/uploads/summary/2018060214322845751.jpg" width="100%" style="height:auto;"></td>
          </tr>
          <tr>
            <td style="border-bottom:1px solid #39F; color:#39F; font-weight:bold;">● 实况直播</td>
          </tr>
          <tr>
            <td>
                <div class="prism-player" id="player-con"></div>
                <script>
                var player = new Aliplayer({
                  "id": "player-con",
                  "source": "http://gcalic.v.myalicdn.com/gc/zjwzbblh_1/index.m3u8",
                  "width": "100%",
                  "height": "500px",
                  "autoplay": false,
                  "isLive": true,
                  "rePlay": false,
                  "playsinline": true,
                  "preload": true,
                  "controlBarVisibility": "hover",
                  "useH5Prism": true
                }, function (player) {
                    console.log("The player is created");
                  }
                );
                </script>
            </td>
          </tr>
          <tr>
            <td style="border-bottom:1px solid #39F; color:#39F; font-weight:bold;">● 游览舒适度</td>
          </tr>
    
          <tr>
            <td>
                <div style="background-color:#ccc; height:20px; line-height:20px; margin:auto; margin-top:20px;  width:94%; border-radius:10px; ">
                    <span id="DegreeOfComfort" style="display:block;background-color:#ccc; width:54%;border-radius:10px; height:20px; line-height:20px; text-align:center;color:#fff;font-size:15px;"></span>
                </div>
                <div id="ComfortDetail" style="width:96%; ;font-size:14px; margin:auto; line-height:20px;margin-top:10px; text-align:center; "></div>
                <script type="text/javascript">
                var url = '/lab/zhly/api.asp?scenicspot=0'; 
                $.get(url,function(data){
                 $('#DegreeOfComfort').append(data.DegreeOfComfort) ; 
                 $('#ComfortDetail').append(data.ComfortDetail) ; 
                 $('#DegreeOfComfort').css('background-color',data.DegreeColor) ;
                 $('#DegreeOfComfort').css('width',data.ColorPercent) ;  
                }, 'json');
                </script>
            </td>
          </tr>
          <tr>
            <td style="border-bottom:1px solid #39F; color:#39F; font-weight:bold;">● 旅游交通导航</td>
          </tr>
          <tr>
            <td align="center"><a target="_blank" href="http://m.amap.com/navi/?start=120.763436,30.764274&dest=120.491854,30.74801&destName=嘉兴站-乌镇&key=e72c7bb7c1d2b0c82e425dfba6776811">嘉兴站——乌镇</a></td>
          </tr>
          <tr>
            <td align="center"><a target="_blank" href="http://m.amap.com/navi/?start=120.799555,30.691337&dest=120.491854,30.74801&destName=嘉兴南站-乌镇&key=e72c7bb7c1d2b0c82e425dfba6776811">嘉兴南站——乌镇</a></td>
          </tr>
          <tr>
            <td style="border-bottom:1px solid #39F; color:#39F; font-family:微软雅黑; font-size:16px; font-weight:bold;">● 旅游地图导览</td>
          </tr>
          <tr>
            <td>
                <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=e72c7bb7c1d2b0c82e425dfba6776811"></script> 
                <div id="container" style="width:100%; height:400px;"></div> 
                <script language="JavaScript">
                    var map = new AMap.Map('container', {
                        zoom:14,//级别
                        center: [120.491854,30.74801],//中心点坐标
                        viewMode:'3D'//使用3D视图
                    });
    
                    // 创建一个 Marker 实例：
                    var marker = new AMap.Marker({
                        position: new AMap.LngLat(120.488249,30.750223),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                        title: '乌镇'
                    });
                    
                    // 将创建的点标记添加到已有的地图实例：
                    map.add(marker);
                    
                    // 同时引入工具条插件，比例尺插件和鹰眼插件
                    AMap.plugin([
                        'AMap.ToolBar',
                        'AMap.Scale',
                        'AMap.OverView',
                        'AMap.MapType',
                        'AMap.Geolocation',
                    ], function(){
                        // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
                        map.addControl(new AMap.ToolBar());
                    
                        // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
                        map.addControl(new AMap.Scale());
                    
                        // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
                        map.addControl(new AMap.OverView({isOpen:true}));
                       
                        // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
                        map.addControl(new AMap.MapType());
                       
                        // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
                        map.addControl(new AMap.Geolocation());
                    });
                    
                </script>
            </td>
          </tr>
    	</table>

HTML代码空白模板：没有内容的