前端小项目学习笔记

已于 2022-06-23 11:39:51 修改
阅读量907 收藏 5
点赞数 1
文章标签： html
于 2022-06-17 22:18:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52652401/article/details/125340961
版权

项目表格

运行结果：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浏览器</title>
	</head>
	<body>
		<table border="1" width="900" height="300" cellpadding="0" cellspacing="0" align="center" valign="center" >
			<p style="text-align: center;" ><font size="5"><b>项目增补单</b></font></p>
			<tr>
				<td align="center" valign="center" width="50">序号</td>
				<td align="center" valign="center" colspan="2">维修项目及更换配件</td>
				<td align="center" valign="center" width="50">单价</td>
				<td align="center" valign="center" width="50">数量</td>
				<td align="center" valign="center" width="50">小计</td>
				<td align="center" valign="center" width="50">工时费</td>
				<td align="center" valign="center" width="50">合计</td>
				<td align="center" valign="center" width="200">故障原因</td>
			</tr>
			<tr>
				<td align="center" valign="center">1</td>
				<td colspan="2"></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td align="center" valign="center">2</td>
				<td colspan="2"></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td align="center" valign="center">3</td>
				<td colspan="2"></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td align="center" valign="center">4</td>
				<td colspan="2"></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td align="center" valign="center">5</td>
				<td colspan="2"></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td align="center" valign="center">6</td>
				<td colspan="2"></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td rowspan="4" align="center" valign="center">7</td>
				<td colspan="2" height="25"></td>
				<td rowspan="4" colspan="2"></td>
				<td rowspan="4"></td>
				<td rowspan="4"></td>
				<td rowspan="4"></td>
				<td rowspan="4"></td>
			</tr>
			<tr>
				<td colspan="2" height="25"></td>
			</tr>
			<tr>
				<td colspan="2" height="25"></td>
			</tr>
			<tr>
				<td colspan="2" height="25"></td>
			</tr>
			<tr>
				<td colspan="3">备件费用小计：</td>
				<td colspan="5">工时费用小计：</td>
				<td>合计：</td>
			</tr>
		</table>
		<table width="900" height="25" align="center" valign="center">
			<tr>
				<td align="center" valign="center" width="100">班组长：</td>
				<td align="center" valign="center" width="350">技术部：</td>
				<td align="center" valign="center" width="150">服务顾问：</td>
				<td align="center" valign="center" width="300">客户确认：</td>
			</tr>
		</table>
	</body>
</html>

食谱

运行结果：
菜谱
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浏览器</title>
	</head>
	<body>
		<h1>好美味小吃</h1>
		<ul>
			<li>
				小吃类
				<ul>
					<li>煮粉干</li>
					<li>拌青菜</li>
					<li>蛋炒饭</li>
					<li>煎蛋</li>
					<li>米饭</li>
				</ul>
			</li>
			<li>
				卤味类
				<ul>
					<li>鸭肠</li>
					<li>面筋</li>
					<li>牛肚</li>
					<li>猪耳朵</li>
					<li>猪头肉</li>
					<li>大肠</li>
					<li>鱿鱼</li>
				</ul>
			</li>
			<li>
				套餐类
				<ul>
					<li>卤面筋饭</li>
					<li>猪肉肉饭</li>
					<li>猪耳朵饭</li>
					<li>卤猪脚饭</li>
					<li>卤猪舌头饭</li>
				</ul>
			</li>
			<li>
				炖罐类
				<ul>
					<li>猪蹄黄豆</li>
					<li>猪肚莲子</li>
					<li>猪心枸杞</li>
					<li>羊肉枸杞</li>
					<li>牛肉枸杞</li>
				</ul>
			</li>
		</ul>
		<span><i>亲，20元以上可以送餐哦！</i></span>
	</body>
</html>

歌词海报

运行结果：
歌词
代码展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
				color: white;
				font: 18px/18px 'Microsoft YaHei';
				text-align: center;
				background-image: url(../img/bg6.gif);
				background-position: center top;
				background-repeat: repeat-y; 
			}
			.box {
				color: darkgoldenrod;
			}
		</style>
	</head>
	<body>
		<h2>吸引力</h2>
		<img src="../img/cover.jpg" alt="" width="200px" height="200px">
		<p>吸引力(Lure) 李霖辉</p>
		<p>作词：曾婕Joey.Z</p>
		<p>作曲：曾婕Joey.Z</p>
		<p>编曲：满杰</p>
		<p>可以换个时间遇见不一样的我</p>
		<p>某个角度会让人坠入着魔</p>
		<p>帅气有一点不同</p>
		<p>但内心却没人能懂</p>
		<p>吸引作用 加速心动</p>
		<p>突然一个女孩降临能够撼动我</p>
		<p>温柔可爱像盛开的花朵</p>
		<p>时间像停止了转动</p>
		<p>写一首Love song</p>
		<p>送给你让我心动Oh my girl</p>
		<p class="box">体会到好久没有的冲动</p>
		<p class="box">到整个大脑瞬间失重</p>
		<p class="box">启动一个上发条的闹钟叫醒我</p>
		<p class="box">这种感觉从没有过</p>
		<p class="box">偶尔暴力也接受</p>
		<p>话绕了口 说不清就不走</p>
		<p>找到了更努力的理由</p>
		<p>会让两个人更优秀</p>
		<p>就像中了五百万的乐透忍不住点头</p>
		<p>这最开心的拥有</p>
		<p>你的全部我都接受</p>
		<p>吸引力的作用 Oh my girl</p>
		<p class="box">突然一个女孩降临能够撼动我</p>
		<p class="box">温柔可爱像盛开的花朵</p>
		<p class="box">时间像停止了转动</p>
		<p class="box">写一首Love song</p>
		<p class="box">送给你让我心动Oh my girl</p>
		<p>体会到好久没有的冲动</p>
		<p>到整个大脑瞬间失重</p>
		<p>启动一个上发条的闹钟叫醒我</p>
		<p>这种感觉从没有过</p>
		<p>偶尔暴力也接受</p>
		<p>话绕了口 说不清就不走</p>
		<p>现在荷尔蒙在发挥作用</p>
		<p>爱是你想要的我都纵容</p>
		<p>Da la da la da la</p>
		<p>Oh my girl</p>
		<p>Unbelievable</p>
		<p>体会到好久没有的冲动</p>
		<p>到整个大脑瞬间失重</p>
		<p>启动一个上发条的闹钟叫醒我</p>
		<p>这种感觉从没有过</p>
		<p>偶尔暴力也接受</p>
		<p class="box">话绕了口 说不清就不走</p>
		<p class="box">找到了更努力的理由</p>
		<p class="box">会让两个人更优秀</p>
		<p class="box">就像中了五百万的乐透忍不住点头</p>
		<p class="box">这最开心的拥有</p>
		<p class="box">你的全部我都接受</p>
		<p class="box">吸引力的作用 Oh my girl</p>
	</body>
</html>

表单

运行结果：
表单
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
				font-size: 20px;
			}
			.user{
				color: #888888;
			}
		</style>
	</head>
	<body>
		<table border="1" cellpadding="10" cellspacing="0" align="center">
			<tr>
				<td rowspan="4" width="100px" height="200px" align="center"><span>总体信息</span></td>
				<td colspan="2" width="400px" height="50px" align="center"><span>用户注册</span></td>
			</tr>
			<tr>
				<td width="100px" height="50px" align="right">用户名：</td>
				<td width="300px" height="50px">
					<input class="user" type="text" value="请输入用户名" style="width: 200px;height: 20px;">
				</td>
			</tr>
			<tr>
				<td width="100px" height="50px" align="right">密码：</td>
				<td width="300px" height="50px">
					<input type="password" style="width: 200px;height: 20px;">
				</td>
			</tr>
			<tr>
				<td colspan="2" width="400px" height="50px" align="center">
					<input type="submit" style="width: 50px; height: 30px">
					&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="reset" style="width: 50px; height: 30px">
				</td>
			</tr>
		</table>
	</body>
</html>
胆怯与勇敢
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
前端开发学习笔记，练手Vue小项目
09-05
练手Vue小项目
Web前端学习笔记（1）
maxiaoxiaohaohao的博客
10-19 3514
Web前端学习笔记（1）
Vue.js前端开发实战学习笔记
cai_4的博客
01-19 1481
Vue.js前端开发实战学习笔记
小程序入门笔记（一） 黑马程序员前端微信小程序开发教程
shaozheng0503的博客
10-05 6207
运行环境：小程序可以在手机的操作系统上直接运行，如微信、支付宝等；而普通网页需要在浏览器中打开才能运行。开发技术：小程序采用前端技术进行开发，如HTML、CSS、JavaScript等；而普通网页也是使用类似的前端技术开发。用户体验：小程序可以提供更加原生化的用户体验，可以调用手机硬件设备的功能，如摄像头、地理位置等；而普通网页对于这些功能的调用相对受限。安全性：小程序运行在封闭的环境中，安全性较高，并且需要通过平台审核后才能上线；而普通网页的安全性相对较低，容易受到网络攻击。
前端学习笔记—HTML5
roydon
07-06 2005
HTML5
C4前端云原生学习笔记——vue
键盘里的咬肌的博客
08-04 1741
vue学习笔记
Vue前端框架学习笔记
04-21
我的前端框架学习笔记，vue的安装与使用，Vue.js（读音/vju：/，发音类似于view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。 Vue 的核心库只关注视图层，并且...
html+css前端学习笔记.zip
03-13
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
ES6学习笔记 包含基础语法和简单项目
03-23
ES6 基础语法
web前端开发笔记整理（一）
01-08
...1. 告诉搜索引擎爬虫我们的网站关于什么内容 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 ... ...属性名不加双引号，属性值加双引号 标签的属性定义了与文档相关联...
JavaWeb-01：HTML,CSS,JavaScript,DOM的理解
博客
05-17 142
HTML,CSS,JavaScript,DOM的理解
前端基础入门三大核心之HTML篇 —— 深入解析从URL请求到页面加载的艺术
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-21 330
前端技术的博大精深，远不止于此。从HTML的简单解析到复杂的SPA应用，每一步都蕴含着开发者对极致体验的追求。本文旨在为你铺就一条坚实的基础之路，鼓励你不断深入学习，探索新技术，实践新理念。前端的世界日新月异，保持好奇心，勇于实践，你将在这条道路上走得更远。最后，我们期待你在评论区分享你的学习心得、实战经验或是对未来前端发展的独到见解，让我们一起推动Web技术的车轮滚滚向前。欢迎来到我的博客，很高兴能够在这里和您见面！
HTML常见标签-换行标签-水平线标签
weixin_44201223的博客
05-14 186
换行标签 水平线标签
前端基础入门三大核心之HTML篇：构建网页世界的基石与HTML5的魔力
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-18 745
HTML是一种标记语言，它使用一系列标签来描述网页内容的结构和表现形式。这些标签告诉浏览器如何处理和显示文本、图片、视频等网页元素。从最基础的段落、标题到复杂的表格、表单，HTML都能轻松应对。
前端基础入门三大核心之HTML篇 —— IndexedDB详解
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-21 360
IndexedDB是一种运行在浏览器中的非关系型数据库，它允许web应用在用户的设备上存储大量结构化数据，包括文件和 blob 数据类型。与传统的Cookie和localStorage相比，IndexedDB支持复杂的查询、索引以及事务处理，特别适合处理大量或者复杂的数据集。在事件中定义对象仓库和索引。// 创建索引IndexedDB为前端开发者提供了强大的本地数据存储能力，是构建高性能Web应用不可或缺的工具。
golang html/template模板中使用自定义函数/方法的2种方法总结
05-15 304
函数//t, _ := time.Parse(DF, time.Now().GoString()) // 演示 将字符串解析为时间对象return tstr // 返回格式后的时间字符串// 将自定义的函数放入到模板的FuncMap中tpl := template.New("abc.html").Funcs(fmap) // 将自定义函数绑定到模板函数map里面if err!
第八篇 Asciidoc 输出 All In One HTML 解决图片无法显示问题
RockTec的专栏
05-15 302
小明使用 Asciidoc 来记笔记，他将笔记输出为 HTML 文件。小丽向小明借笔记。小明将 Asciidoc 笔记输出为 HTML文件，并拷贝给了小丽。但是，小丽发现，图片都显示不出来了。小丽：小明，你给我的笔记，图片都显示不出来啊。小明：是我给你的那个 HTML 文件吗？小丽：是的。小明：哦，我忘记拷贝 HTML 文件依赖的图片了。等我重新整理一下，再发给你。说完，小明犯了难，因为这些 HTML 文件涉及多个本地的图片，要把它们都挑选出来，还真是麻烦。
前端基础入门三大核心之HTML篇：解密标签、标题与段落的艺术
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-18 999
标题标签从到，分别代表六个不同的层级，最为重要，则较为次要。合理使用标题不仅有助于内容结构化，也有助于SEO。
Gin框架HTML文件的加载与渲染
qq_63644576的博客
05-18 237
作为其内置的模板引擎，允许开发者编写HTML模板文件来生成动态内容。这些模板文件通常包含静态HTML内容以及动态数据占位符，Gin框架在运行时会替换这些占位符并生成最终的HTML页面。Gin模板支持模板继承，允许一个模板包含另一个模板的内容。父模板通常包含共同的布局元素，而子模板则包含特定页面的内容。这个方法接受一个字符串参数，指定模板文件所在的目录。在Gin项目中，模板文件通常放置在项目的某个特定目录中，例如。数据模型是一个键值对的集合，可以在模板中用来替换动态内容。语句，可以在父模板中包含子模板。
前端学习笔记 javascript
08-31
对于前端学习笔记，我可以给你一些常见的主题和要点，帮助你开始学习前端开发。 1. HTML基础： - 了解HTML的基本结构和标签 - 学习如何创建和组织网页内容 - 掌握常用的HTML标签，如标题、段落、链接、图像等 2. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

胆怯与勇敢

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值