html文件

第十一章 前端开发-css

只谈情不闲聊 提交于 2019-12-05 20:02:04
第十一章 前端开发-css 1.1.0 css介绍 css是指层叠样式表(Cascading Style Sheets),样式定义如何显示html元素,样式通常又会存在于样式表中。 css优势 : 内容与表现分离 网页的表现统一,容易修改 丰富的样式,使页面布局更加灵活 减少代码量,增加网页浏览器速度,节省网路带宽 运用独立页面的css,有利于网页被搜索引擎收录 如何用? 我们通常会把样式规则的内容都保存在CSS文件中,此时该CSS文件被称为外部样式表,然后在HTML文件中通过 link 标签引用该CSS文件即可 这样浏览器在解析到该 link 标签的时候就会加载该CSS文件,并按照该文件中的样式规则渲染HTML文件。 1.1.1 css语法 css语法分为2个部分: 1.选择器 2.声明 声明由属性和值组成,多个声明之间用分号分隔。 css注释:注释是代码之母 /*这是注释*/ 1.1.2 css引入方式 1.1.2.1 内嵌样式 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> P{ color: green; font-size: 15px; } </style> </head> <body> <p>这是一个p标签</p> </body> <

Django 04

久未见 提交于 2019-12-05 18:24:38
目录 视图层 三个常用方法 JsonResponse FBV 和 CBV 模板层 模板语法 模板传值 过滤器 标签 自定义过滤器和标签 模板的继承 模板的导入 视图层 三个常用方法 HttpResponse render redirect render和redirect都继承了HttpResponse 视图函数必须要有一个返回值, 而且这个返回值必须是HttpResponse对象 JsonResponse 通常情况下, 前后端数据交互采用的都是json字符串 (字典) 我们先来回忆下前后端序列化和反序列化 操作 python后端 js前端 序列化 json.dumps() JSON.stringify() 反序列化 json.loads() JSON.parse() 现在我们要向前端返回一个json字符串, 该怎么操作呢? 利用我们已经学习的知识, 很容易实现 def index(request): user_dic = {'name': 'bigb', 'password': '123'} json_str = json.dumps(user_dic) return HttpResponse(json_str) 现在我们访问 /index/, 页面显示为 {"name": "bigb", "password": "123"} so far so good, right?

模板语言

安稳与你 提交于 2019-12-05 17:48:18
一.语法 关于模板渲染你只需要记两种特殊符号: {{ }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%} 二.过滤器 1.过滤器认识 1.过滤器的语法: {{ value|filter_name:参数 }} 2.使用管道符"|"来应用过滤器。 注意点: 1.过滤器支持“链式”操作。即一个过滤器的输出作为另一个过滤器的输入。 2.过滤器可以接受参数,例如:{{ sss|truncatewords:30 }},这将显示sss的前30个词。 3.过滤器参数包含空格的话,必须用引号包裹起来。比如使用逗号和空格去连接一个列表中的元素,如:{{ list|join:', ' }} 4.'|'左右没有空格 过滤器认识 2.过滤器方法使用 default {{ value|default:"nothing"}} #如果一个变量是false或者为空,使用给定的默认值。 否则,使用变量的值。 length {{ value|length }} #返回值的长度,作用于字符串和列表 filesizeformat {{ value|filesizeformat }} #将值格式化为文件尺寸(例如 '13 KB', '4.1 MB', '102 bytes', 等等) slice #切片 {{value|slice:"2:-1"}} date #格式化,如果 value=datetime

springboot模板

≡放荡痞女 提交于 2019-12-05 17:28:47
1、thymeleaf模板 2.Freemarker模板 Thymeleaf模板 首先导入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> Spring Boot官方文档建议在开发时将缓存关闭,那就在application.properties文件中加入下面这行 spring: thymeleaf: cache: true user package com.jt.springboot.entity; import lombok.Data; @Data public class user { private Integer uid; private String uname; private String pwd; public user(Integer uid, String uname, String pwd) { this.uid = uid; this.uname = uname; this.pwd = pwd; } public user() { } } controller层 package com.jt.springboot.controller; import

前端基础-html(1)

∥☆過路亽.° 提交于 2019-12-05 16:30:41
什么是前端?   前端    后端 C(client) S(server) B(browser) S(server) 以用户为出发点 一、web标准   1)web准备介绍:      w3c:万维网联盟组织,用来制定web标准的机构(组织)     web标准:制作网页遵循的规范     web准备规范的分类:结构标准、表现标准、行为标准。     结构:html。表示:css。行为:Javascript。   2)web准备总结:     结构标准:相当于人的骨架。html就是用来制作网页的。     表现标准: 相当于人的衣服。css就是对网页进行美化的。     行为标准: 相当于人的动作。JS就是让网页动起来,具有生命力的 二、浏览器介绍   浏览器是网页运行的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、猎豹浏览器、Safari和Opera等。 浏览器内核: 浏览器 内核 IE trident chrom blink 火狐 gecko Safari webkit                           PS:「浏览器内核」也就是浏览器所采用的「渲染引擎」,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。 总结:渲染引擎是兼容性问题出现的根本原因。 三、开发工具   Sublime Text   WebStorm  

将Swagger2文档导出为HTML或markdown等格式离线阅读

ぐ巨炮叔叔 提交于 2019-12-05 16:25:19
网上有很多《使用swagger2构建API文档》的文章,该文档是一个在线文档,需要使用HTTP访问。但是在我们日常使用swagger接口文档的时候,有的时候需要接口文档离线访问,如将文档导出为html、markdown格式。又或者我们不希望应用系统与swagger接口文档使用同一个服务,而是导出HTML之后单独部署,这样做保证了对接口文档的访问不影响业务系统,也一定程度提高了接口文档的安全性。核心的实现过程就是: 在swagger2接口文档所在的应用内,利用swagger2markup将接口文档导出为adoc文件,也可以导出markdown文件。 然后将adoc文件转换为静态的html格式,可以将html发布到nginx或者其他的web应用容器,提供访问(本文不会讲html静态部署,只讲HTML导出)。 注意:adoc是一种文件格式,不是我的笔误。不是doc文件也不是docx文件。 一、maven依赖类库 在已经集成了swagger2的应用内,通过maven坐标引入相关依赖类库,pom.xml代码如下: <dependency> <groupId>io.github.swagger2markup</groupId> <artifactId>swagger2markup</artifactId> <version>1.3.1</version> </dependency>

html基础篇一

倾然丶 夕夏残阳落幕 提交于 2019-12-05 15:20:02
一、html基本结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> </body> </html> 说明: (1)html是hyper text markup language的简写,是超文本标记语言。 (2)lang=“en”———>语言为英文。 (3)<head> </head> 结构标签,<head>里的元素页面不可见,用来修饰<body>元素; <body> </body> 结构标签,<body>里的元素页面可见。 (4)charset----->字符集 gb2312:简体字;gbk(繁体字); unicode:万国码(所有国家的语言都可显示)------->升级版:utf-8。 (5)<title>标签描述了网页的标题。 二、html的标签 1. <h1>~~<h6>:定义标题,标题的字体加粗,从h1到h6字体依次减小(h1最大,h6最小)。 写法:<h1>这是一个标题</h1> 2. <p>定义段落,独成一段。 写法:<p>这是一个段落</p> 3. <img src="图片位置">:在网页中插入图片。 引入图片有三种方法: (1)引入在线图片,<img src="网上图片的位置信息(类似于网站地址)"> (2

【nodejs】express框架(一) express的使用以及express.static的使用,顺带解决一些服务器路径问题和浏览器解析过程

 ̄綄美尐妖づ 提交于 2019-12-05 14:52:15
express的基本使用 npm init//创建管理文档 npm i express -S //-S表示在生产环境下也要用到的包 var express = require ( 'express' ) ; //导出express的顶级函数 var app = express ( ) ; //创建express对象 app . get ( '/' , function ( req , res ) { //监听get请求的'/'地址 res . send ( 'ok' ) //向客户端传送回'ok'字符串 } ) app . listen ( 8080 , function ( ) { //监听8080端口, console . log ( 'http://localhost:8080' ) ; } ) 是不是很简单,下面开始第一个拓展。 express.static(root,[options]) 简介:express的static静态方法用于托管静态文件的请求,比如css,img,js,font等文件的请求,因为nodejs和其他服务器不一样,不会默认有读取文件并传给客户端这个功能,所以需要这个方法来自动读取并传送静态文件。 使用: 下面指的是所有静态文件的请求都到app . js的工作目录的里去寻找并加载并送到客户端 app . use ( express . static (

开始nodejs+express的学习+实践(7)

百般思念 提交于 2019-12-05 13:39:16
1.分页显示数据 准备工作:启动数据库服务,打开mongo.exe,启动nodejs服务。 浏览器地址: http://localhost:1234/ 会看见显示的数据。 我们要做的是分页显示数据,在预览时我们经常看见,现在news集合只有3条记录,我们增加到10条,作为操作使用。 刷新看见数据全部进来了,我们可以着手分页的工作了。 我们先简单分析分页原理: 首先地址上有当前页参数(get方法) 如变量 currentpage=1第一页,地址变为localhost:1234/?currentpage=1; 每页显示个数 如变量 count=3; 然后就是当前页显示记录 公式(currentpage-1)*3 第1页 0-2记录 第2页 3-5记录 类推; 记录总个数/每页个数 等于总页数,不整除+1页。 我们修改index.js的首页处理,get获取当前页数: app.get('/',function(req, res){ var currentpage=req.query.currentpage?req.query.currentpage:1; model.model_index(currentpage,function(items){ res.render('index', { title: 'Express',hello: 'hello world!',arr: items

HTML5学习系列(2):属性、表格、链接和列表、块

隐身守侯 提交于 2019-12-05 11:20:41
HTML 基础标签 Head 、 body <html> <head> <title></title> </head> <body> </body> </html> 1. 标题 <h1>.....<h6> 依次减小标题尺寸 2. 段落 <p> 文字 1</p> 文字 2 定义文字 1 和 2 分段 3. 链接 <a href= “网址” > 文字 </a> 定义文字链接 4. 图像 <img src = “指定图片具体位置” > 定义图像 5. 换行 <br/> HTML 属性 1. 标签有属性 2. 属性以键 / 值对的形式出现 网址属性:href= “ www.baidu.com ” 3. 常用标签属性 <h1>:align 对齐方式 <body>:bgcolor 背景颜色 <a>:target 规定在何处打开链接 4. 通用属性 class :类名 id : ID style :样式 title :额外信息 举例: <html> <head lang=“en”> <meta charset=“utf-8”> <title></title> <style></style> </head> <body bgcolor=”#8b0000”> <a href=”hrefht.html” target =“-blank”>打开本地</a> <h1 align=”center”>标题h1