在HTML/CSS 中,我们经常用HTML来布局和填充内容,用CSS来添加效果,修饰内容和布局,使整个页面变得更好看。
即在<head></head>标签内添加CSS样式表的链接:
代码展示如下:
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Make a Table Frame</title> <link rel="stylesheet" type="text/css" href="CSS/tableframe.css" > </head>
定义:
对带有指定属性的 HTML 元素设置样式。
注意:
只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。
功能:
“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。
CSS中的选择器有三个:
标签选择器、class类选择器、id选择器
1.标签选择器样式表:a{}、 div{}、table{} ...
{对全局所有的选中类型标签的样式修改}
2.class类选择器 样式表: .class{}
{在HTML中每个标签都可以同时绑定多个类名,每个标签都可以设置class;同一个界面中class是不可重复}
3. id选择器样式表: #d1 {}
{每个标签都可有id,每个页面不可重复id,}
【一个HTML标签只能绑定一个id属性,一个HTML标签可以绑定多个class属性】
单纯选择<div>标签的时候 是对全局的的(所有的)<div>进行修饰;
选择器优先级:
id选择器>class类选择器>标签选择器
所以有id和class 选择器的标签将不会被覆盖。交叉时是按照优先级覆盖显示的。
单纯的HTML 表格表单内容
标题<caption>标签:
表格的标题<caption>的内容填充(HTML):
<caption> 表格标题</caption>
标题<caption>的样式修饰(CSS)
table.formdata caption { text-shadow: #FF00ff; text-align: center; padding-bottom: 6px; font-weight: bold; }
其他<table>标签相关内容可参考 HTML中表格的实例应用 一文。
form在网页中主要负责数据采集功能。
一个表单有三个基本组成部分:
(1)表单标签:包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
(2)表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
(3)表单按钮:提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入。还可以用表单按钮来控制其他定义了处理脚本的处理工作。
定义:
<input> 标签规定用户可输入数据的输入字段。
根据不同的 type 属性,输入字段有多种形态。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等
语法代码:
<input type="value" >
实例代码:
<td><input type="text" name="Mainboard 6月" id="Mainboard 6月"></td>
关系展示:
实例代码:
<p>
<input type="submit" name="btnSubmit" id="btnSubmit" value="Add Data" class="btn">
<input type="reset" value= "Reset All" class="btn">
</p>
实例展示:
<input>标签的其他属性值:
input标签外是否添加form标签需要按情形区分:
应用场景的区别:
1.所有向后台提交数据(包括原生和ajax提交)的<input>都建议用<form>包裹.
2.如果只是用来做前台交互效果则不推荐使用form包裹。
但提交数据时,其实也可以不用form包裹input标签:
1.如果有form标签,在点击提交铵钮时,浏览器自动收集参数,并打包一个http请求到服务器,完成表单提交。在这一过程中,浏览器会根据method的不同,将参数编码后,放在urI中(get),或者放在请求的data中(post)。然后发送到服务器。
2.如果没有form,post方式的提交要使用ajax手工完成。get方式的提交需要自己拼接url。
<form>表单其他相关内容可参考 HTML中 表单 的应用实例 一文。
最后,附带一下该可输入的EXCEL表格的源码。
HTML code:
<!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>Make a Table Frame</title> <link rel="stylesheet" type="text/css" href="CSS/tableframe.css" > </head> <body image=""> <form method="psot"> <table border="1px" class="formdata"> <caption>电脑配件管理表2018年5月-8月</caption> <tr> <th></th> <th scope="col">5月</th> <th scope="col">6月</th> <th scope="col">7月</th> <th scope="col">8月</th> </tr> <tr> <th scope="row">Hard Disk</th> <td><input type="text" name="Hard Disk 5月" id="Hard Disk 5月"></td> <td><input type="text" name="Hard Disk 6月" id="Hard Disk 6月"></td> <td><input type="text" name="Hard Disk 7月" id="Hard Disk 7月"></td> <td><input type="text" name="Hard Disk 8月" id="Hard Disk 8月"></td> </tr> <tr> <th scope="row">Mainboard</th> <td><input type="text" name="Mainboard 5月" id="Mainboard 5月"></td> <td><input type="text" name="Mainboard 6月" id="Mainboard 6月"></td> <td><input type="text" name="Mainboard 7月" id="Mainboard 7月"></td> <td><input type="text" name="Mainboard 8月" id="Mainboard 8月"></td> </tr> <tr> <th scope="row">Case</th> <td><input type="text" name="Case 5月" id="Case 5月"></td> <td><input type="text" name="Case 6月" id="Case 6月"></td> <td><input type="text" name="Case 7月" id="Case 7月"></td> <td><input type="text" name="Case 8月" id="Case 8月"></td> </tr> <tr> <th scope="row">Power</th> <td><input type="text" name="Power 5月" id="Power 5月"></td> <td><input type="text" name="Power 6月" id="Power 6月"></td> <td><input type="text" name="Power 7月" id="Power 7月"></td> <td><input type="text" name="Power 8月" id="Power 8月"></td> </tr> <tr> <th scope="row">CPU Fan</th> <td><input type="text" name="CPU Fan 5月" id="CPU Fan 5月"></td> <td><input type="text" name="CPU Fan 6月" id="CPU Fan 6月"></td> <td><input type="text" name="CPU Fan 7月" id="CPU Fan 7月"></td> <td><input type="text" name="CPU Fan 8月" id="CPU Fan 8月"></td> </tr> <tr> <th scope="row">Total</th> <td><input type="text" name="Total 5月" id="Total 5月"></td> <td><input type="text" name="Total 6月" id="Total 6月"></td> <td><input type="text" name="Total7月" id="Total 7月"></td> <td><input type="text" name="Total 8月" id="Total 8月"></td> </tr> </table> <p> <input type="submit" name="btnSubmit" id="btnSubmit" value="Add Data" class="btn"> <input type="reset" value= "Reset All" class="btn"> </p> </form> </body> </html>
CSS code :
body { font-family: Arial; /*background-image: url(image/mainroad.jpg) no-repeat;*/ background-color: #00ff00; background-size: 100%; } table.formdata { width: 300px; height: 150px; border: 2px solid #F00; border-collapse: collapse; font-family: Arial; } table.formdata caption { text-shadow: #FF00ff; text-align: center; padding-bottom: 6px; font-weight: bold; } table.formdata th { border:1px solid #be34hc; background-color: #E2E2E2; color:#000000; text-aglin:center; font-weight: normal; padding: 2px 8px 2px 6px; margin: 0px; } table.formdata input { width: 100px; padding: 1px 3px 1px 3px; margin: 0px; border:none; font-family: Arial; } .btn { width:100px; background-color: #FF00ee; border:1px solid #00f2f2; font-family: Arial; }
本文部分内容来自网络,如有侵权,请联系修改。
django开发网页中经常会遇到需要将本地的文件上传到服务器,这里我们就需要通过post请求将数据推送到服务器上去
1 ,定义视图
def upLoadPic(request):
return render(request, 'booktest/upLoadPic.html')
2 ,定义URL
path('upLoadPic/',views.upLoadPic,name='upLoadPic'),
3 ,前台界面html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="/uploadHandler/" method="post" enctype="multipart/form-data">
{% csrf_token %}
<input type="file" name="pic1">
<br>
<input type="submit" value="上传">
</form>
</body>
</html>
其实这里也就是一个表单,通过post请求提交相关的数据
从上面可以看到,当点击提交的时候.post请求会携带数据发送到 这个地址,那我在定义一个处理数据的视图
上传部分
def uploadHandler(request):
if request.method == "POST":
f1 = request.FILES['pic1']
fname = '%scar/%s'%(MEDA_PATH, f1.name)
#fname = 'static/media/car/a.png'
print(fname)
with open(fname, 'wb+') as pic:
# 根据上传的流中的数据一点一点往内存中写
for c in f1.chunks():
pic.write(c)
return HttpResponse(fname)
else:
return HttpResponse("ERROR")
配置下 URL: path('uploadHandler/', views.uploadHandler,name='uploadHandler')
注释:解释下上面的内容,当post请求携带数据传到相关的页面后,这个接收页面,
1. 首先判断是不是POST请求,表单提交一定是post请求
2. 通过request.FILES['pic1'] 拿到指定的文件 pic1是传过来的键
3. 拼接需要存放的目标地址
4. 通过with,使用二进制的写权限向指定目录中写
5. 这里的 f1.chunks()表示将数据分块写到相关位置
天是刘小爱自学Java的第156天。
感谢你的观看,谢谢你。
学习计划安排如下:
后台管理系统的学习就暂且告一段落了,其实无外乎就是各种增删改查。
笔记中主要是记录了查询和新增操作,关于修改和删除基本也是大同小异。
后台管理系统是给网站管理人员看的,前几天写的功能主要都用于对商品的管理。
管理人员通过该系统控制商品的样式啊,是否上下架,库存啊这些。
而前台门户系统是给用户看的,如下图:
现在主流电商网站的前台门户系统,基本上都是这么一个样式。
以前后台管理系统较简单,我可以在对应页面做一个修改,从而将其转换成刘小爱商城。
现在前台门户系统较为复杂,有的还涉及到图片,我一时修改不过来,索性就不改了。
但愿不会说我在打广告什么的哈哈哈,到时候被平台给屏蔽了可就不好了。
那使用到的技术是什么呢?
以前后台系统使用的是SPA(单页应用),SPA理解起来其实非常简单。
它就是只有一个html文件,其它的都是以vue组件的形式拼接,从而实现了页面切换。
SPA的好处在于速度快,但是第一次加载慢,它等于是第一次将静态资源全部加载下来了,所以后续页面切换时就非常流畅。
但是这样有一个问题,不利于SEO优化,当然还有缓存的问题,在此就不说明了。
这个SEO是啥?我大致说下,当然不可能将其说得很清楚,我自己也不太懂,但作为一名程序员对这些有一定的了解肯定是没坏处的。
比如说用户要买东西,他可能会在百度上面搜索,那百度出来的页面是如何排序的呢?
这就涉及到SEO搜索引擎优化了,如果优化好,会排在更前面。
当然最前面的肯定是直接给百度钱打广告的。
而百度搜索引擎的一个机制,是利用爬虫爬别人的网站,再显示出来。
如果只是SPA单页应用,爬虫就只能爬到一个html文件,不利于SEO搜索引擎优化。
当然做一个强调:
SEO这块我也不是太了解,所以只是简单地做一个描述,自己了解的说不定也有问题。
总之SEO对于网站来说很重要,会增加搜索后的排名,使用单页应用就不太合适了。
所以前台门户系统使用多页应用:
依旧是前后端分离,不过前端页面会独立多个html页面,每个页面使用vue完成渲染。
做一个总结就是:
后台管理系统中用了webpack,很简单地就实现了热部署,这个太重要了,不像Java代码每次一改就要重启微服务,很麻烦。
而此处使用的叫live-server,其翻译过来就是“活的服务器”,很生动形象。
安装live-server
使用npm命令完成安装即可,命令如下:
npm install -g live-server
这里使用的是全局安装,以后任意位置可用。
安装好了之后运行live-server,同时可以使用命令指定端口:
命令:live-server --port=9002
port即端口的意思,我们这里指定9002为前台门户系统的端口。
域名即为本地域名,通过域名+端口就能访问到对应的页面了。
和后台管理系统一样,为了让域名更加地正规好看,我们使用SwitchHosts+nginx实现域名和端口的反向代理。
该方式在第142天的学习笔记中专门讲解过,这里做一个简单的回顾:
在SwitchHosts配置我们想要的一个域名为本地域名,也就是说当在浏览器上访问该域名时,系统会自动认为它对应本地域名。
而浏览器上如果不指定端口时,会默认解析成80端口,所以在nginx配置中监听该端口,并跳转到前台门户系统路径。
所以当在浏览器上访问对应域名时,实际上访问的就是nginx中配置的那个路径。
今天不涉及到具体的业务实现,但是对接下来一段时间的学习做一个了解。
①搜索业务的实现
一个电商网站,搜索肯定是核心关键了。
现在可不像以前那样,还用什么模糊查询,效率太低了,有专门的搜索技术,明天开始就专门学习。
②商品详细以及RabbitMQ?
这是个啥还不太清楚,后续学到了再说。
③用户中心的实现
最常见的也就是用户的注册和登录了,这个以前就实现过好几次了。
当然还有其它的一些比如个人信息管理呀,用户地址管理,收藏管理……等。
④购物车以及下单的实现
购物车也是商城非常核心的一环,并且肯定是需要使用到支付的,微信支付或者支付宝支付等多种方式。
行有不得反求诸己,我是@刘小爱
一个白天上班晚上学习的95后沪漂,不为其它,只为学会自律做好自己,也愿我的每日打卡能给你带来勇气,欢迎点赞关注和评论。
*请认真填写需求信息,我们会在24小时内与您取得联系。