【免费】E02-WROD.zip资源-CSDN文库

共36个文件

jpg：21个

mp4：5个

png：5个

需积分: 0 124 浏览量更新于2023-05-09 收藏 60.28MB ZIP 举报

"E02-WROD.zip" 指的可能是一个压缩文件，其中包含了与"Word"相关的资源或教程。尽管没有提供具体的标签，我们可以假设这可能是一些关于Microsoft Word使用的文档、模板或者代码示例。由于压缩包内的文件名为"旅游网站官网HTML"，我们可以推测这个压缩包的内容可能与创建或设计一个旅游行业的网站有关，并且着重于HTML（超文本标记语言）部分。在HTML方面，这是一种基础的网页设计语言，用于定义网页的结构和内容。它由一系列元素组成，这些元素通过标签来表示，例如`<html>`、`<head>`、`<body>`等。HTML文件通常包含文本内容、图像链接、样式引用（如CSS）和其他交互元素（如JavaScript）的标记。在设计旅游网站的HTML时，以下是一些重要的知识点： 1. **页面结构**：HTML页面通常分为头部（`<head>`）、主体（`<body>`）和尾部（`<footer>`）。头部包含元信息，如标题（`<title>`）、字符集（`<meta charset>`）和外部资源链接（如CSS和JavaScript文件）。主体包含用户可见的内容，如导航栏、图片、文本描述等。尾部则通常放置版权信息和额外的脚本。 2. **导航栏**：旅游网站通常需要一个清晰的导航结构，以便用户轻松找到目的地、酒店、旅行团等信息。这可以通过`<nav>`标签实现，其中包含`<ul>`（无序列表）和`<li>`（列表项）来创建链接列表。 3. **响应式设计**：考虑到用户可能在不同设备上访问，旅游网站应该采用响应式设计。这涉及到使用媒体查询（`@media`）和弹性布局（`display: flex`或`grid`）来确保在手机、平板和桌面设备上都能正确显示。 4. **图片和多媒体**：旅游网站常常需要展示吸引人的图片和视频。使用`<img>`标签添加图片，记得指定`src`属性（图片源）和`alt`属性（替代文本）。对于视频，可以使用`<video>`标签，并添加`src`、`controls`和`poster`属性。 5. **表单**：用户可能会需要预订服务或注册账户，因此表单设计是关键。`<form>`标签用于创建表单，`<input>`标签则用来获取用户输入，如姓名、电子邮件地址和日期选择。 6. **地理定位和地图**：旅游网站可能集成地理位置服务，如使用`<iframe>`嵌入Google Maps，或者使用API（如Google Maps API）实现更复杂的功能，如自定义标记、路线规划等。 7. **SEO优化**：为了提高搜索引擎排名，需要对HTML进行优化，包括添加关键词的`<meta>`标签，使用合适的标题和段落标签（`<h1>`至`<h6>`），以及确保所有链接都有描述性的`<a>`标签。 8. **无障碍性**：遵循WCAG（Web Content Accessibility Guidelines）标准，确保视觉障碍或其他障碍的用户也能方便地使用网站，例如使用`<label>`为表单元素提供文字描述，使用`<aria-*`属性提供额外的语义信息。 9. **交互元素**：通过JavaScript和AJAX（异步JavaScript和XML）可以增加动态功能，如滑动展示、下拉菜单、弹出框和实时搜索建议，提升用户体验。 "E02-WROD.zip"的内容可能涵盖了创建旅游网站所需的HTML基础知识，包括但不限于页面结构、响应式设计、表单创建、图片和多媒体处理，以及SEO和无障碍性考虑。通过学习和应用这些知识，开发者可以构建一个功能齐全、用户友好的旅游网站。

收起资源包目录

E02-WROD.zip （36个子文件）

旅游网站官网HTML

style.css 14KB

01.png 5.29MB

index.html 18KB

images

p-3.jpg 103KB

p-5.jpg 148KB

p-6.jpg 72KB

2.jpg 3KB

g-2.jpg 115KB

g-5.jpg 103KB

pic4.png 41KB

contact-img.svg 22KB

6.jpg 3KB

pic2.png 65KB

1.jpg 3KB

g-4.jpg 106KB

g-6.jpg 77KB

g-3.jpg 83KB

p-4.jpg 77KB

pic3.png 52KB

book-img.svg 63KB

pic1.png 74KB

5.jpg 3KB

vid-3.mp4 14.95MB

p-1.jpg 91KB

vid-1.mp4 10.87MB

vid-2.mp4 5.99MB

p-2.jpg 126KB

vid-5.mp4 2.68MB

g-8.jpg 117KB

vid-4.mp4 20.38MB

g-1.jpg 116KB

3.jpg 2KB

g-9.jpg 99KB

g-7.jpg 63KB

4.jpg 2KB

script.js 2KB

资源推荐

资源预览

资源评论

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>期末作业~旅游网</title> <link rel="stylesheet" href="./style.css"> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> </head> <body>  <header> <div id="menu-bar" class="fas fa-bars"></div> <a href="#" class="logo"><span>J</span>acky</a> <nav class="navbar"> <a href="#home">首页</a> <a href="#book">预定</a> <a href="#packages">套餐</a> <a href="#services">服务</a> <a href="#gallery">相册</a> <a href="#review">评价</a> <a href="#contact">联系我们</a> </nav>  <div class="icons"> <i class="fas fa-search" id="search-btn"></i> <i class="fas fa-user" id="login-btn"></i> </div>  <form action="" class="search-bar-container"> <input type="search" id="search-bar" placeholder="search here..."> <label for="search-bar" class="fas fa-search"></label> </form> </header>  <div class="login-form-container"> <i class="fas fa-times" id="form-close"></i> <form action=""> <h3>login</h3> <input type="email" class="box" placeholder="enter your email"> <input type="password" class="box" placeholder="enter your password"> <input type="submit" value="login now" class="btn"> <input type="checkbox" id="remember"> <label for="remember">remember me</label> <p>forget password? <a href="#">click here</a></p> <p>don't have and account? <a href="#">register now</a></p> </form> </div>  <section class="home" id="home"> <div class="content"> <h3>旅游是一种信仰</h3> <p>和我们一起去远方,寻找诗和梦想</p> <a href="#" class="btn">查看更多</a> </div> <div class="controls"> <span class="vid-btn active" data-src="images/vid-1.mp4"></span> <span class="vid-btn" data-src="./images/vid-2.mp4"></span> <span class="vid-btn" data-src="images/vid-3.mp4"></span> <span class="vid-btn" data-src="images/vid-4.mp4"></span> <span class="vid-btn" data-src="images/vid-5.mp4"></span> </div> <div class="video-container"> <video src="images/vid-1.mp4" id="video-slider" loop autoplay muted></video> </div> </section>  <section class="book" id="book"> <h1 class="heading"> <span>b</span> <span>o</span> <span>o</span> <span>k</span> <span class="space"></span> <span>n</span> <span>o</span> <span>w</span> </h1> <div class="row"> <div class="image"> <img src="images/book-img.svg" alt=""> </div> <form action=""> <div class="inputBox"> <h3>where to</h3> <input type="text" placeholder="去哪里"> </div> <div class="inputBox"> <h3>how many</h3> <input type="number" placeholder="多少人用行"> </div> <div class="inputBox"> <h3>多久到</h3> <input type="date"> </div> <div class="inputBox"> <h3>多久离开</h3> <input type="date"> </div> <input type="submit" class="btn" value="立即预定"> </form> </div> </section>  <section class="packages" id="packages"> <h1 class="heading"> <span>p</span> <span>a</span> <span>c</span> <span>k</span> <span>a</span> <span>g</span> <span>e</span> <span>s</span> </h1> <div class="box-container"> <div class="box"> <img src="images/p-1.jpg" alt=""> <div class="content"> <h3> <i class="fas fa-map-marker-alt"></i> 成都 </h3> <p>和我在成都的街头走一走。</p> <div class="stars"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="far fa-star"></i> </div> <div class="price"> $90.00 <span>$120.00</span> </div> <a href="#" class="btn">立即预订</a> </div> </div> <div class="box"> <img src="images/p-2.jpg" alt=""> <div class="content"> <h3> <i class="fas fa-map-marker-alt"></i> 上海 </h3> <p>这里有你梦想中的迪士尼。</p> <div class="stars"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="far fa-star"></i> </div> <div class="price"> $90.00 <span>$120.00</span> </div> <a href="#" class="btn">立即预订</a> </div> </div> <div class="box"> <img src="images/p-3.jpg" alt=""> <div class="content"> <h3> <i class="fas fa-map-marker-alt"></i> 广州 </h3> <p>两千多年沉淀，打磨出中国独树一帜的海阔天空之城。</p> <div class="stars"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="far fa-star"></i> </div> <div class="price"> $90.00 <span>$120.00</span> </div> <a href="#" class="btn">立即预订</a> </div> </div> <div class="box"> <img src="images/p-4.jpg" alt=""> <div class="content"> <h3> <i class="fas fa-map-marker-alt"></i> 深圳 </h3> <p>有钱人的天堂.创业者向往的城市。</p> <div class="stars"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="far fa-star"></i> </div> <div class="price"> $90.00 <span>$120.00</span> </div> <a href="#" class="btn">立即预订</a> </div> </div> <div class="box"> <img src="images/p-5.jpg" alt=""> <div class="content"> <h3> <i class="fas fa-map-marker-alt"></i> 北京 </h3> <p>北京你爱来不来。</p> <div class="stars"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="far fa-star"></i> </div> <div class="price"> $90.00 <span>$120.00</span> </div> <a hre