【免费】关于宠物简易网页前端HTML+CSS+JS小狗汪汪网期末设计资源-CSDN文库

共42个文件

jpeg：15个

gif：13个

jpg：6个

需积分: 0 136 浏览量 2024-06-20 15:11:42 上传评论收藏 6.21MB ZIP 举报

宠物简易网页前端设计是网页开发中的基础练习，它通常包括HTML、CSS和JavaScript三个主要部分。这个"小狗汪汪网"的期末设计项目，旨在帮助学生掌握这些技术的基础知识，并将其应用于实际的网页构建中。 **HTML（HyperText Markup Language）**是网页内容的结构化语言，用于定义网页的基本框架和内容。在"HTML期末设计"中，学生可能需要创建一系列的HTML文件，如index.html、about.html等，来表示网页的不同页面。HTML标签是其核心，例如`<html>`、`<head>`、`<body>`定义了网页的整体结构，`<h1>`-`<h6>`定义标题，`<p>`用于段落，`<img>`插入图片，`<a>`创建链接等。此外，HTML5引入了许多新的元素，如`<header>`、`<footer>`、`<nav>`等，提高了网页的语义性和可访问性。 **CSS（Cascading Style Sheets）**负责网页的样式和布局。在HTML基础上，CSS通过选择器（如类名 `.class`、ID名 `#id` 或元素名 `element`）来指定样式，包括颜色、字体、大小、布局等。例如，`.dog-image {width: 200px; height: auto;}`可以调整图片大小，`.header {background-color: #f00; color: #fff;}`设置头部的背景色和文字色。CSS还支持盒模型（Box Model）、定位（Positioning）和Flexbox或Grid布局，实现复杂的页面布局。 **JavaScript**是网页的动态脚本语言，使得网页具有交互性。在HTML中，JavaScript代码通常嵌入在`<script>`标签内或者通过外部文件引用。JavaScript能响应用户事件（如点击按钮），改变DOM（Document Object Model）即HTML文档的结构、样式或内容，例如`document.getElementById('myButton').addEventListener('click', function() {...})`为按钮添加点击事件。此外，AJAX（Asynchronous JavaScript and XML）允许异步数据交换，实现无刷新更新，而现代前端库和框架如jQuery、React、Vue.js则简化了JavaScript开发并提供了更高级的功能。在这个"小狗汪汪网"项目中，学生可能会用到以下知识点： 1. **响应式设计**：使网页适应不同设备的屏幕尺寸，常利用媒体查询（Media Queries）实现。 2. **动画效果**：通过CSS3的动画和过渡属性，如`animation`和`transition`，为网页元素添加动态效果。 3. **表单处理**：使用HTML表单元素（如`<form>`、`<input>`）收集用户数据，并用JavaScript进行验证和提交。 4. **API交互**：如果项目涉及数据获取，学生可能需要了解如何使用Ajax请求获取JSON数据，例如通过`fetch`或`XMLHttpRequest`。 5. **事件委托**：当有大量动态生成的元素需要绑定事件时，使用事件委托可以提高性能和代码的简洁性。 "小狗汪汪网"的HTML+CSS+JS期末设计是一个综合性的学习项目，涵盖了网页开发的基本技能和实践应用，对于提升学生的前端开发能力大有裨益。在实践中，学生不仅能够巩固理论知识，还能锻炼解决问题和创新设计的能力。

资源推荐

资源详情

资源评论

收起资源包目录

HTML期末设计.zip （42个子文件）

HTML期末设计

gougouxinwen.html 4KB

jiaruwomeng.html 3KB

css

style.css 4KB

1.js 2KB

gougouzhonglei.html 6KB

gougoushipin.html 2KB

index.html 2KB

images

4.jpeg 43KB

xiaogou (9).gif 19KB

xiaogou (8).gif 19KB

xiaogou (5).gif 10KB

2.jpg 152KB

7.jpeg 43KB

xiaogou (7).gif 45KB

bj4.gif 478KB

gg1.jpg 73KB

001.jpeg 28KB

bg3.gif 3.73MB

boenshan.jpeg 19KB

gg2.jpg 72KB

jingmao.jpeg 67KB

beijing.jpeg 31KB

1.jpeg 83KB

xiaogou (1).gif 8KB

bg.gif 503KB

bg2.gif 339KB

003.jpg 3KB

hashiqi.jpeg 18KB

xiaogou (3).gif 18KB

guibingquan.jpeg 52KB

002.jpeg 29KB

labuladuo.jpeg 10KB

xiaogou (2).gif 25KB

samoye.jpeg 41KB

3.jpeg 99KB

bagequan.jpg 115KB

gg3.jpg 76KB

xiaogou (6).gif 8KB

5.jpeg 20KB

xiaogou (4).gif 22KB

6.jpeg 49KB

gougoutupian.html 2KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>狗狗种类</title> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <audio src="images/松田彬人 (まつだあきと) - がまんして下さい (V0).mp3" autoplay="autoplay" controls="controls" loop="loop" preload="auto"></audio> <div class="zhuti"> <header> <div id="logo"> <a href="#"><h1>小狗汪汪网</h1></a></div> <div id="search"> <form> <input type="search" placeholder="小狗搜索"><input type="submit" value="搜索"> </form> </div> </header> <p>您现在的位置：<a href="index.html">首页</a> >>狗狗种类</p> <div> <table> <tr> <td><h3><img src="images/xiaogou (1).gif" width="50" height="50" /></h3></td> <td><h3><img src="images/xiaogou (2).gif" width="50" height="50" /></h3></td> <td><h3><img src="images/xiaogou (3).gif" width="50" height="50" /></h3></td> <td><h3><img src="images/xiaogou (4).gif" width="50" height="50" /></h3></td> <td><h3><img src="images/xiaogou (6).gif" width="50" height="50" /></h3></td> <td><h3><img src="images/xiaogou (7).gif" width="50" height="50" /></h3></td> <td><h3><img src="images/xiaogou (8).gif" width="50" height="50" /></h3></td> <td><h3><img src="images/xiaogou (9).gif" width="50" height="50" /></h3></td> </tr> </table> <h1>狗狗种类</h1> </div> <table> <tr> <td><img src="images/boenshan.jpeg" width="200" height="200"/></td> <td> <p><strong>伯恩山</strong></p> <p>伯恩山犬起源于2000年之前，其名字来自于瑞士的伯恩州。外貌强壮结实，头短而粗大，眼黑色有神，耳呈“V”字形下垂，尾有长毛不向上卷，被毛厚，亮黑色，在腿上方及眼上方有浅棕色斑点，胸部有白斑，边缘浅灰色，爪、尾尖、面部为白色。<strong><a href="https://baike.baidu.com/link?url=zLpmn5hJma-EjjkK1reE1IVsMW92X9z4LDz400nz1t1-im909YKF9-k6PBR2Ic7jSA15ECEoLjVphbF8fXW2Jbatw2QjyWG6YSbiV2PxHEqzqlSlmBc7YQoAqqd88Esn">【详细】</a></strong></p> </td> <td><img src="images/bagequan.jpg" width="200" height="200" /></td> <td> <p><strong>巴哥犬</strong></p> <p>巴哥犬（pug）是体贴、可爱的小型犬种，此犬具备优良的爱干净的个性，这些特点是其广受喜爱的原因。头部大、粗重，不上拱，呈苹果型。前额不后缩，非常亮，兴奋时充满热情。皱纹大而深。眼睛大颜色非常深．突出醒目。眼神安详且充满渴望。<strong><a href="https://baike.baidu.com/item/%E5%B7%B4%E5%93%A5%E7%8A%AC?fromModule=lemma_search-box">【详细】</a></strong></p> </td> <td><img src="images/hashiqi.jpeg" width="200" height="200"/></td> <td> <p><strong>哈士奇</strong></p> <p>西伯利亚雪橇犬也叫哈士奇、二哈。该犬脚步轻快，动作优美，身体紧凑，有着很厚的被毛，耳朵直立，尾如毛刷，显示出北方地区的遗传特征。该犬是和狼的血统非常近的犬种，所以外形非常的像狼，有着比大多数犬种都要厚的毛发。<strong><a href="https://baike.baidu.com/item/%E8%A5%BF%E4%BC%AF%E5%88%A9%E4%BA%9A%E9%9B%AA%E6%A9%87%E7%8A%AC?fromtitle=%E5%93%88%E5%A3%AB%E5%A5%87&fromid=123197&fromModule=lemma_search-box">【详细】</a></strong></p> </td> </tr> <tr> <td><img src="images/jingmao.jpeg" width="200" height="200"/></td> <td> <p><strong>金毛犬</strong></p> <p>金毛寻回犬,最初的名字是苏俄追踪犬，后来加入佛乐寻猎物犬种，寻血猎犬种，水猎鹬犬种的基因。配种的结果产生了此天生具备猎物取回能力，善于追踪及具有敏锐嗅觉的犬种。1908年首次展出以后，深受人们的青睐，它是最常见的家犬之一。<strong><a href="https://baike.baidu.com/item/%E9%87%91%E6%AF%9B%E5%AF%BB%E5%9B%9E%E7%8A%AC/1955498?fromModule=lemma_search-box&fromtitle=%E9%87%91%E6%AF%9B%E7%8A%AC&fromid=66918">【详细】</a></strong></p> </td> <td><img src="images/samoye.jpeg" width="200" height="200"/></td> <td> <p><strong>萨摩耶</strong></p> <p>萨摩耶犬是狐狸犬家族的一员，原是西伯利亚的原住民萨摩耶族培育出的犬种。特征是萨摩耶的笑容，看起来永远在笑的样子喜欢亲近人。除了温和的个性也以忍耐力跟健壮著称，原是用来拉雪橇跟看守驯鹿，也曾被西方探险家用来从事极地探险的任务。<strong><a href="https://baike.baidu.com/link?url=SpBRyTDNmaKpOgatZaVSOd4l8eNKOxLPL5j5xXXGDqZbi04I0bKXg7EyZtGo9lWCssgkkPqnf5wZHFwlTAaF8iseimqz-MesIGASUlIjVGQPqXb96tv_iGIOribbcxNV">【详细】</a></strong></p> </td> <td><img src="images/labuladuo.jpeg" width="200" height="200"/></td> <td> <p><strong>拉布拉多犬</strong></p> <p>拉布拉多猎犬智商非常高，它聪明听话，易于训练，服从指挥，对老人和小孩都非常温柔。经过训练以后，可以作为人类的重要帮手，如作为盲人的导盲犬，作为残障者的协助犬，也可以作为警卫犬协助侦查毒品、爆炸物等。此外，拉布拉多猎犬还是一种对主人不离不弃的优秀伴侣犬。<strong><a href="https://baike.baidu.com/link?url=O2uFy5dXueWFHI_MRe7YL4xb4_WysWLasuWn3y4GTuF6MnJV1EH_HkRD8E-Iw2cRHCDC7Yox5oKZTyUU_HDDy2IK2_nhZSNGCoLoCknyBVHtyx9tirpcQLH094GGMQ9BeeO0geGkUz8YMOGV4YwG5PnRqQMpme_JV95Sa3b53em">【详细】</a></strong></p> </td> </tr> </table> <footer><h5><p>小狗汪汪网欢迎您的到来！！！</p><p> liqingbaiyunlong</p></h5></footer> </body> </html>

评论收藏

内容反馈