位置: IT常识 - 正文

一个简单的网页设计HTML5作业(如何用html编写一个简单的网页)

编辑:rootadmin
一个简单的网页设计HTML5作业 前言:

推荐整理分享一个简单的网页设计HTML5作业(如何用html编写一个简单的网页),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:用html标记语言编写一个简单的网页,怎么做一个简单的网页,如何用html编写一个简单的网页,用html编写一个简单的网页,如何用html编写一个简单的网页,如何用html编写一个简单的网页,如何用html编写一个简单的网页,用html编写一个简单的网页,内容如对您有帮助,希望把文章链接给更多的朋友!

HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进,虽然技术人员在开发过程中可能不会将这些新技术投入应用,但是对于该种技术的新特性,网站开发技术人员是必须要有所了解的。

一直走在路上🏔

🐒设计要求:

(1)网站页面数量不少于4个,文件命名规范,网站结构要求层次清楚,目录结构清晰,代码缩进规整。(4分)

(2)采用HTML结构标记(或div标记)+CSS进行整体布局定位。(5分)

(3)网站首页栏目数量不能少于3个,各栏目要能正确链接到相应栏目子页面,同时各栏目页面也能正确返回到网站首页。(3分)

(4)网站页面标题、图片图标等要符合网站主题。(2分)

一个简单的网页设计HTML5作业(如何用html编写一个简单的网页)

(5)网站页面中要有列表。(2分)

(6)网站页面中要含有表单(form)。(3分)

(7)网站内容应具有原创性,内容充实。(7分)

(8)网站整体色系符合视觉习惯,布局合理美观。(4分)

🐒首页.html:

此次我设计的页面为古诗词页面,含有标题,古诗词,推荐作者,@baidu4块内容

<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <title> 古诗词大全 </title> <link href="./style.css" rel="stylesheet" type="text/css"> </link> </meta> </meta> </head> <body> <div id="con"> <div id="a"> <h3> 古诗词大全 </h3> </div> <div id="b"> <div id="d"> <br/> <h5> 推荐作者 <br/> <hr/> <br/> </h5> <div> <img alt="刘禹锡" height="100px" position="absolute" src="images/刘禹锡.jpg" width="80px"/> <img alt="杨万里" height="100px" position="absolute" src="images/杨万里.jpg" width="80px"/> <img alt="柳宗元" height="100px" position="absolute" src="images/柳宗元.jpg" width="80px"/> </div> <div> <img alt="" height="300" src="images/shiren.jpg" width="250"> </img> </div> </div> <div id="f"> <br/> <h4> 古诗词 </h4> <hr/> <li> <a href="first.html"> 将进酒 </a> <p> [作者]李白 [朝代]唐 <br/> 君不见黄河之水天上来,奔流到海不复回。 <br/> 君不见高堂明镜悲白发,朝如青丝暮成雪。 <br/> ...... <br/> </p> </li> <li> <a href="second.html"> 沁园春·长沙 </a> <p> [作者]毛泽东 <br/> 独立寒秋,湘江北去,橘子洲头。 <br/> 看万山红遍,层林尽染;漫江碧透,百舸争流。 <br/> ...... <br/> </p> </li> <li> <a href="thired.html"> 沁园春·雪 </a> <p> [作者]毛泽东 <br/> 北国风光,千里冰封,万里雪飘。 <br/> 望长城内外,惟余莽莽;大河上下,顿失滔滔。 <br/> ...... <br/> </p> </li> <li> <a href=""> 送元二使安西 </a> <p> [作者]王维 [朝代]唐 <br/> 渭城朝雨浥轻尘,客舍青青柳色新。 <br/> 劝君更尽一杯酒,西出阳关无故人。 <br/> </p> </li> </div> </div> <div id="c"> <p id="copyright"> © Baidu <a href="http://www.baidu.com/duty/"> 使用百度前必读 </a> <a href="http://www.baidu.com"> 百度首页 </a> <a href="/s" style="display:none"> 站内搜索 </a> <a href="http://help.baidu.com/newadd?prod_id=8&category=1"> 问题反馈 </a> </p> </div> </div> </body></html>🐒分页.html:

<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <title> Enovo将进酒 </title> </meta> </meta> <style typr="text/css"> hr{ background-color: #303841; border: none; height: 1px; width: 100%; } p{ font-family: 楷书; } </style> </head> <body> <div align="center" id="container"> <div class="select"> <a href="index.html"> 首页 | </a> <a href="first.html"> 将进酒 | </a> <a href="second.html"> 沁园春·长沙 | </a> <a href="thired.html"> 沁园春·雪 </a> <hr/> <a href="oddments.html"> 附页 </a> </div> <hr/> <img alt="" height="150px" src="images/qiang.jpg" width="200px"> <div id="contain"> <h1> 将进酒 </h1> <p> 君不见黄河之水天上来,奔流到海不复回。 </p> <p> 君不见高堂明镜悲白发,朝如青丝暮成雪。 </p> <p> 人生得意须尽欢,莫使金樽空对月。 </p> <p> 天生我材必有用,千金散尽还复来。 </p> <p> 烹羊宰牛且为乐,会须一饮三百杯。 </p> <p> 岑夫子,丹丘生,将进酒,杯莫停。 </p> <p> 与君歌一曲,请君为我倾耳听。 </p> <p> 钟鼓馔玉不足贵,但愿长醉不愿醒。 </p> <p> 陈王昔时宴平乐,斗酒十千恣欢谑。 </p> <p> 主人何为言少钱,径须沽取对君酌。 </p> <p> 五花马、千金裘,呼儿将出换美酒,与尔同销万古愁。 </p> </div> </img> </div> <hr/> <div class="exp"> <p> 1.岑夫子:人名 </p> <p> 2.丹丘生:人名 </p> </div> </body></html>

 

<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <title> Enovo沁园春·长沙 </title> </meta> </meta> <style typr="text/css"> hr{ background-color: #303841; border: none; height: 1px; width: 100%; } p{ font-family: 楷书; } </style> </head> <body> <div align="center" id="container"> <div id="navi"> <a href="index.html"> 首页 | </a> <a href="first.html"> 将进酒 | </a> <a href="second.html"> 沁园春·长沙 | </a> <a href="thired.html"> 沁园春·雪 </a> <hr/> <a href="oddments.html"> 附页 </a> </div> <hr/> <img alt="" height="150px" src="images/chang.jpg" width="200px"> <div id="contain"> <h1> 沁园春·长沙 </h1> <p> 独立寒秋,湘江北去,橘子洲头。 </p> <p> 看万山红遍,层林尽染;漫江碧透,百舸争流。 </p> <p> 鹰击长空,鱼翔浅底,万类霜天竞自由。 </p> <p> 怅寥廓,问苍茫大地,谁主沉浮? </p> <p> 携来百侣曾游,忆往昔峥嵘岁月稠。 </p> <p> 恰同学少年,风华正茂;书生意气,挥斥方遒。 </p> <p> 指点江山,激扬文字,粪土当年万户侯。 </p> <p> 曾记否,到中流击水,浪遏飞舟? </p> </div> </img> </div> <hr/> <div class="exp"> <p> 1.浪遏飞舟: </p> <p> 2.万户侯:古代官职 </p> </div> </body></html>

 

<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <title> Enovo沁园春·雪 </title> </meta> </meta> <style typr="text/css"> hr{ background-color: #303841; border: none; height: 1px; width: 100%; } p{ font-family: 楷书; } </style> </head> <body> <div align="center" id="container"> <div id="navi"> <a href="index.html"> 首页 | </a> <a href="first.html"> 将进酒 | </a> <a href="second.html"> 沁园春·长沙 | </a> <a href="thired.html"> 沁园春·雪 </a> <hr/> <a href="oddments.html"> 附页 </a> </div> <hr/> <img alt="" height="150px" src="images/xue.jpg" width="200px"> <div id="contain"> <h1> 沁园春·雪 </h1> <p> 北国风光,千里冰封,万里雪飘。 </p> <p> 望长城内外,惟余莽莽;大河上下,顿失滔滔。 </p> <p> 山舞银蛇,原驰蜡象,欲与天公试比高。 </p> <p> 须晴日,看红装素裹,分外妖娆。 </p> <p> 江山如此多娇,引无数英雄竞折腰。 </p> <p> 惜秦皇汉武,略输文采;唐宗宋祖,稍逊风骚。 </p> <p> <p> 俱往矣,数风流人物,还看今朝。 </p> </p> </div> </img> </div> <hr/> <div class="exp"> <p> 1.今朝: </p> <p> 2.唐宗宋祖:皇帝 </p> </div> </body></html>

 

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1" name="viewport"> <title> 附页 </title> </meta> </meta> <style type="text/css"> body{ background: url(images/de.jpg); width: 100%; } hr{ background-color: #c7cbd1; border: none; height: 1px; width: 100%; } </style> </head> <body> <form> <div align="center" id="container"> <div id="navi"> <a href="index.html"> 首页 | </a> <a href="first.html"> 将进酒 | </a> <a href="second.html"> 沁园春·长沙 | </a> <a href="thired.html"> 沁园春·雪 </a> <hr/> <a href="oddments.html"> 附页 </a> </div> <hr/> </div> <hr/> <p> 诗词,是指以古体诗、近体诗和格律词为代表的中国古代传统诗歌。亦是汉字文化圈的特色之一。 </p> <h4> 古诗词考试频率: </h4> <ol> <li> 唐: </li> <ol> <li> 锦瑟【李商隐】 </li> <li> 登高【杜甫】 </li> <li> 雁门太守行【李贺】 </li> </ol> <li> 宋: </li> <ol> <li> 念奴娇·赤壁怀古【苏轼】 </li> <li> 永遇乐·京口北固亭怀古【辛弃疾】 </li> </ol> <hr/> <table align="center" border="5" height="30%" width="50%"> <tr> <!-- 居中加粗 --> <th> 古诗词 </th> <th> 近五年考试频率 </th> </tr> <tr> <td> 念奴娇·赤壁怀古【苏轼】 </td> <td> 4.3星 </td> </tr> <tr> <td> 登高【杜甫】 </td> <td> 3.2星 </td> </tr> </table> <hr/> <p> <h2> 2023高考押题: </h2> </p> <p> <h3> 昵称: </h3> <input name="name" placeholder="请输入您的昵称" size="20" type="text"/> </p> <p> <h3> 古诗词选择: </h3> <select name="古诗词"> <option selected="selected" value="A1"> 锦瑟【李商隐】 </option> <option value="A2"> 念奴娇·赤壁怀古【苏轼】 </option> <option value="A3"> 登高【杜甫】 </option> </select> <!-- 单选框 --> <div> <h3> 考试几率: </h3> <label> <input name="interset" type="radio" value="J1"> 30% </input> </label> <label> <input name="interset" type="radio" value="J2"> 50% </input> </label> <label> <input name="interset" type="radio" value="J3"> 70% </input> </label> <label> <input name="interset" type="radio" value="J4"> 90% </input> </label> </div> </p> <p> 考试心得: </p> <textarea cols="30" id="" name="" rows="10"> </textarea> <p> <input name="确认信息无误" type="radio"> 我已阅读信息并确认无误 </input> </p> <p> <input name="submit" type="submit" value="提交"> <input name="reset" type="reset" value="重置"> </input> </input> </p> </ol> </form> </body></html>🐒style.css.exp { text-align: left;}* { margin: 0; padding: 0;}body { font-family: 微软雅黑; font-size: 15px;}#con { margin: 0 auto; width: 1000px; height: 1500px;}#a { height: 100px; margin-bottom: 10px; background: #f2f2f2; text-align: center; font-size: 25px; line-height: 100px;}#b { margin-bottom: 10px; height: 500px;}#d { float: right; width: 390px; height: 500px; background: white; border: 2px solid #eeeeee;}#f { float: left; width: 600px; height: 500px; background: white; border: 2px solid #eeeeee;}#c { height: 150px; background: #f2f2f2;}p { font-size: 10px;}hr { color: #f2f2f2; background: #f2f2f2; height: 1px;}#copyright { text-align: center;}结语:

上述内容就是此次html作业的全部内容了,感谢大家的支持,由于初次学习html相信在很多方面存在着不足乃至错误,希望可以得到大家的指正。🙇‍(ง •_•)ง

本文链接地址:https://www.jiuchutong.com/zhishi/299617.html 转载请保留说明!

上一篇:二维码基本原理(二维码的实现原理和实现过程)

下一篇:::before和::after是什么?(before跟after区别)

  • 汇算清缴退税会计科目
  • 公司基本户里的钱有利息吗
  • 工资社保缴纳计算器
  • 计提跟支付有啥区别
  • 个人生产经营所得税
  • 哪些进项税额可以转出
  • 销售收入做账属于什么凭证
  • 已投入使用的机器设备才能计提折旧对吗
  • 营业外收入期末结转
  • 固定资产残值怎么计算出来的
  • 汇算清缴之后报销去年的票如何分录?
  • 房产公司收到的增值税
  • 交以前年度所得税怎么算
  • 认缴制下实缴资本流程
  • 个人所得税没有税也要申报吗
  • 汇算清缴期结束后税务机关发现企业应当取得而未取得
  • 集体土地上的不动产证已经能查询为何房产证拿不到
  • 工地人为受伤一般怎么解决
  • 小微企业计算公式
  • 印制宣传册
  • 按适用税率计税销售额是什么意思
  • 销售返利如何做分录
  • 企业合并以外
  • 营业执照办下来多久能在网上查到
  • 出售设备折旧
  • 进项发票认证抵扣时间有限制吗
  • 购货申请书
  • 个人所得税款项性质
  • 一次性购房发票什么时候给开
  • 股权转让要交哪些费用
  • 发工资一定要交税吗
  • 以产品抵债会计分录
  • 微信企业公众号开发平台
  • 充值会员卡销售话语
  • 报废汽车残值收入的商品编码编码
  • pop3服务是什么
  • html 调用扫码
  • vue3 + Tailwind Css + Vite 搭建快速开发前端样式环境
  • 长期债券投资减少是计入贷方吗?
  • 收汇金额和出口金额差额大怎么办
  • 拉德克里夫图书馆
  • php使用( )关键字来创建对象
  • 企业以前年度亏损不可以用什么弥补
  • 贴现金额的会计分录
  • mustn't be allowed
  • 定期定额征收和查账征收的区别
  • 销售中介费一般收多少
  • 个体工商户不经营需要税务登记吗
  • 对外服务应收取的款项
  • 工资汇算清缴前发
  • 代发工资怎么算税
  • 以物易物是什么时代
  • 国家法定滞纳金规定
  • 出纳可以做库管吗
  • 服务行业服务费怎么入账
  • 应收其他应收区别
  • 收付实现制下收入包括增值税吗
  • mac mysql密码
  • win8.1电脑设置在哪里
  • xp系统乱了,怎么恢复
  • 苹果mac电脑删除打印机后还显示网络错误
  • linux安装sshd服务
  • linux链接分为什么和什么
  • sisusbrg.exe - sisusbrg是什么进程 有什么用
  • mac book air安装
  • win10怎么关掉
  • win10没空间
  • unity开发用什么电脑比较好
  • shell delete
  • javascript编程语言
  • androids翻译
  • javascript主要学什么
  • wordpress开发文档
  • unity3d文件怎么查看和修改
  • python怎么用命令行
  • Javascript this 关键字 详解
  • js中的面向对象
  • ajax获取数据两种类型
  • 税务局约谈记录
  • 北京税务举报投诉
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设