016-前端学习-Html\CSS\制作带有二维码的门店订单小票

1.HTML相关

1.1 html是什么:

超文本标记语言,超文本,图片,声音
标记:

目录

header 标题,预定义修饰
利用html就可以实现原始的页面
标签:闭合内容

头信息,title,编码utf-8,安全信息token 小图标,加入外部演示表css

HTML是纯文本,任何的文本编辑器都可以实现,
专业工具:
hbuilderx/vs-code

Hbuilder浏览器html页面有两种方式

1)创建html,浏览器浏览—绝对路径访问,磁盘路径
2)独有,启动一个web服务(自己运行),在启动nodejs服务(启动服务器,自动打开网页)
虚拟路径访问,以协议头的方式访问–打开不能访问的路径

如果html文件乱码

1)设置展现字符集: 2)文件本身编码,默认asci,改成utf-8

css是什么

Cascading Style Sheets是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

页面布局方式

  1. 早起习惯用table表格布局
表格 表格内容的行
表格头的行
单元格 特点:不需要写排班,会自适应 缺点:门户网站 2. List item

早期的都是table布局,当所有标签,必须解析完,才在页面展现,会闪现一下

  1. 现如今习惯用div块布局
    把大页面拆成小块,每个小块独立出来,加载方便
    div+css可以实现没有页面闪现的快速展现

二维码

里面有很多信息,把文字隐藏在这些小块中,通过它可以定位到图片的正确比例,把这些块组成形成文字。
https://blog.csdn.net/m0_55284524/article/details/115415627,收集扫描二维码,获取到上面的文字,手机浏览会自动打开这个网页,谷歌API拒实现二维码图片生成,根据开发者给的文字(链接)生成它的图片
谷歌API非常繁琐,封装它的方法和参数,封装后,4个参数:宽、高、链接、图片位置

开发步骤:

  1. 创建普通java工程
  2. 创建一个lib目录
  3. 导入jar
  4. 创建类,main,creatQR.make()4个参数
  5. 把这个qr.png拷贝到order.heml目录中,就可以访问了

<html>
	<head>
		<meta charset="utf-8">
		<title>肯德基小票title>
		
		<style>
			body{
				font-size: 8px; 
				border: 0px solid red;
				width: 290px;
			}
			
			.method{/*class属性共用*/
				padding-left: 90px;
			}
			.method2{
				font-size: 22px;
				font-weight: bold;
			}
		style>
	head>
	<body>
		<div>顾客联div>
		<div class="method2">请您留意取餐账号单div>
		<div class="method">自取顾客联div>
		

		<div>肯德基凤城五路店div>
		<div>021-2222222div>
		
		<div class="method">---结账单---div>
		<div class="method2">账单号:23456789div>
		<div>账单类型:堂食div>
		<div>人数:1人div>
		<div>收银员:张无忌div>
		<div>开单时间:2022-2-22 09:09:09div>
		<div>结账时间:2022-2-22 09:09:10div>
		
		
		<hr style="border: 1px dashed;"/>
		<table border="1">
			<tr>
				<th width="30" align="center">数量td>
				<th width="150" align="center">品类td>
				<th width="50" align="center">金额td>
			tr>
			<tr>
				<td valign="top" align="center">1td>
				<td align="center">墨西哥卷饼套餐 <br />
				1X  ----墨西哥卷饼<br />
				1X  ----现磨咖啡(半糖、热)
				td>	
				<td valign="top" align="center">18.00td>	
			tr>
		table>
		
		<table border="1">
			<tr>
			<td width="30">合计td>	
			<td width="200" align="center">总金额:18.00td>
			tr>
			<tr>
				<td>微支付td>
				<td align="center">18.00td>
			tr>
		table>
		
		<hr style="border: 1px dashed;" />
		打印时间:2022-2-22  09:09:19
		<hr style="border: 1px dashed;" />
		<div style="padding-top: 15px;">
			      
			根据相关税法规定,电子发票的开票日期同网上申请电子发票的日期,如您需要当日的电子发票请务必在消费当日通过扫描下方二维码,根据指引步骤开具您的增值税电子普通发票。此二维码30天有效,扫描时请保持小票平整。div>
		
		<div>
			www.kendeji.com
		div>
		<div>
			加盟电话:012-12345678
		div>
		<br />
		<br />
	body>
html>

展示效果如下图:
016-前端学习-Html\CSS\制作带有二维码的门店订单小票_第1张图片

图片插入路径的两种方式

  1. 绝对路径(直接访问网上图片)
  2. 相对路径

小结

做网站必备两项技能

  1. HTML:超文本标记语言,利用规定标签,浏览器会解析这些标签,最终展现在页面
  2. CSS:样式表,美化页面

你可能感兴趣的:(WEB,前端,html,web,css,markdown,javascript)