web三剑客
HTML
对于html5的整体认识，用h5写网页的基础内容；
用html5举例——
每个代码的架构都是，先进行文本类型声明，然后是一个html标签包含着所有内容，其中有head（头部）和body（身体，即写内容的区域），其中head又包含了title（网页标签）和代码格式（charset）等等内容；
在body里运用基础标签实现，这些是网页最常用的标签：
| 标签名 | 作用 |
|---|---|
| h1-h6 | 标题，有加粗效果 |
| div | 盒子，将每一块内容封装起来 |
| a | 超链接，点击跳转 |
| p | 段落，会自动换行 |
| span | 内联，正文内容，不换行 |
| ul-li | 无序列表，将同一层级内容放在一起 |
| img | 图片标签 |
| table-tr-td | 表格，行和列 |
| br | 换行 |
| form | 表单，用来与后台做数据交互 |
当然除了这些基础标签外还有很多其他各种功能的标签，这里只是列举最常见的部分；
除了写基础标签外，还有一部分属性是写在标签里面的，如
img标签里的src属性写图片存放的路径，
a标签里地href属性写要跳转的路由等等；
CSS
css的作用是装饰网页，是网页呈现得更美观；
三种引入方式：
1.头部加style标签，用于较小地项目；
2.外部引入，头部加link标签，用于大型项目或者各文件之间需要使用同一套模板；
3.标签内部加style属性，很少使用；
使用css主要是两个步骤：
第一，选中要操作的元素；
第二，给元素添加样式；
针对第一个，就是要掌握css选择器：
简单选择器——
| 选择器名称 | 用法 |
|---|---|
| id选择器 | # id名 |
| class选择器 | . class名 |
| 标签选择器 | 标签名 |
后面加大括号，然后写要添加的样式；
复杂选择器（为了让选择的元素更精确）——
| 选择器名称 | 用法 |
|---|---|
| 后代选择器 | 标识符为空格 |
| 子代选择器 | 标识符为 > |
| 伪类选择器 | 标识符为：，后面加功能名 |
以上是比较常用的选择器；
样式——
常用样式包括字体样式，文本样式，背景样式，边框等等；
作用分别是，改变字体显示效果，使文本能够以各种布局出现，让背景色彩更加丰富，让每块区域分开得更明显等等；
其中css内容还包括盒子模型，定位，弹性布局等方面的内容；
能够让整个网页的布局更多元化，以及让各元素在网页的分布更合理；
盒子模型内容包括——
每个元素所占的空间大小，以及它的构成有内容部分，边框部分，内边距，外边距等；
浮动：让div脱离文档流；
清除浮动影响：保证父级盒子高度不会坍塌；
定位包括：
固定定位：搜索栏那种；
相对定位：相对于某一参照物的位置变化；
绝对定位：会让div脱离文档流，要给父级设置相对定位；
javascript
JavaScript作用为实现简单功能；
两种使用方式：
将功能写在script标签里面；
写在外部.js文件然后通过script标签引入；
使用也主要是分两步：
1.获取标签；
2.实现功能；
js获取标签方法：
获取独有标签：
| 方法 | 作用 |
|---|---|
| doucument.title | 获取标题 |
| doucument.head | 获取头部信息 |
| doucument.body | 获取body标签所有内容 |
一般得到的内容会是多个，所以会以列表形式存在；
可以通过console.log 在控制台打印输出查看；
js获取其他标签
| 代码 | 功能 |
|---|---|
| document.getElementById | 通过id获取元素 |
| document.getElementsByClassName | 通过class获取元素 |
| document.getElementsByTagName | 通过标签名获取元素 |
| document.getElementsByName | 通过表单中的name获取元素 |
| document.querySelector | 通过CSS选择器获取一个元素 |
| document.querySeletorAll | 通过CSS选择器获取所有 |
（参数要以字符串的形式传递）
（除了id和选择器选择一个的方法外，其他的方法返回值都是一个数组，通过下标获取单个元素)
jq(jquery)获取元素：
通过 $() 方法；若获取到的是多个元素，则通过eq（）来获取单个；
参数为CSS选择器、Element、Document或者Window对象、HTML文本字符串、函数、字符串等对象，就可以实现获取元素或者先其他功能都可以；
但要注意：JQ的API只对自己开放，JQ不能用js的API，js也不能用JQ的API；
js常用的简单事件：点击事件（onclick，要注意是左键点击）
配合着function（）{}来实现功能；
jq实现为：click
对比：
修改样式：
js操作——
获取元素后，通过 .style.功能名 的方式，或者 style[] 的方式来修改选中元素样式；
或者通过这些方法修改样式：
获取： .getAttribute()
设置： .setAttribute()
移除： .removeAttribute()
jq操作：
获取元素，然后通过 . 的方式来实现；
其中方法有：
attr——设置属性；
removeAttr——删除属性；
html——修改文本内容，会渲染标签；
text——修改文本内容，不渲染标签；
val——获取值
等方法；
ajax
对于ajax有一个很重要的数据格式，就是json
json：是一种轻量级的数据交换格式，基于ECMScript（欧洲计算机协会制定的js规范）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
json对象转js对象：
JSON.parse()
js对象转json对象：
JSON.stringify()
python中json格式转换：
利用json模块（自带的）
字典转json：
json.dumps()
json转字典：
json.loads()
AJAX :是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术印AJAX = 异步 JavaScript 和 XML。(asynchronous JavaScript and XML)
作用：通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页 (不使用 AJAX) 如果需要更新内容，必需重载整个网页面。
jq使用ajax：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="father">
<div class="son">
<textarea name="text" id="text" cols="30" rows="10"></textarea>
<br>
<input type="text">
<button id="btn">提交</button>
</div>
<div id="res"></div>
</div>
<script src="../../jQuery_3_6.js"></script>
<script>
var btn = $("#btn")
btn.click(function () {
$.ajax({
"method":"post",
"url":"/ajax",
"data":{
name:"Ray",
age:"19"
},
"success":function (data) {
console.log("jquery ajax success");
console.log(data);
$("#res").html("success")
},
"error":function (error) {
$("#res").html("error")
}
})
})
</script>
</body>
</html>
一般ajax通过按钮触发，这里是通过jq来实现，只是前端部分的代码，可以通过python中的tornado模块同时模拟后端来完成一次简陋的数据交互。
下面是结合html，css，js做了一个轮播图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MC Jin</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
}
div {
caret-color: transparent;
}
#imgbox {
width: 600px;
height: 400px;
border: 2px solid gray;
overflow: hidden;
position: relative;
margin: 0 auto;
}
#imglists {
width: 3000px;
height: 400px;
}
#imglists li img {
height: 400px;
}
#imglists li {
float: left;
}
.last {
background: gray;
width: 30px;
height: 40px;
text-align: center;
line-height: 40px;
color: white;
position: absolute;
left: 5px;
top: 45%;
cursor: pointer;
}
.next {
background: gray;
width: 30px;
height: 40px;
text-align: center;
line-height: 40px;
color: white;
position: absolute;
right: 5px;
top: 45%;
cursor: pointer;
}
#circle {
position: absolute;
right: 10px;
bottom: 10px;
}
#circle li {
width: 10px;
height: 10px;
border-radius: 50%;
background: #888888;
text-align: center;
line-height: 20px;
float: left;
margin: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="imgbox">
<ul id="imglists">
<li><img src="jin1.jpg" alt=""></li>
<li><img src="jin2.jpg" alt=""></li>
<li><img src="jin3.jpg" alt=""></li>
<li><img src="jin4.jpg" alt=""></li>
<li><img src="jin1.jpg" alt=""></li>
</ul>
<ul id="circle">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="last"><</div>
<div class="next">></div>
</div>
<script>
var last = document.querySelector(".last")
var next = document.querySelector(".next")
var left = 0;
var circles = document.getElementById('circle').getElementsByTagName('li')
var timer;
var circlelist=document.querySelector('#circle')
run();
function run() {
if (left <= -2400) {
left = 0;
}
var m = Math.floor(-left / 600);
var n = (left % 600 == 0) ? n = 1200 : n = 1;
imglists.style.marginLeft = left + 'px';
left -= 10;
timer = setTimeout(run, n);
circlechange(m);
}
function imgchange(n) {
let lt = -(n * 600);
imglists.style.marginLeft = lt + 'px';
left = lt;
}
last.onclick = function () {
let lastone = Math.floor(-left / 600) - 1;
if (lastone == -1) {
lastone = 3;
}
imgchange(lastone);
circlechange(lastone);
}
next.onclick = function () {
let nextone = Math.floor(-left / 600) + 1;
if (nextone == 4) {
nextone = 0;
}
imgchange(nextone);
circlechange(nextone);
}
function circlechange(m) {
for (let index = 0; index < circles.length; index++) {
circles[index].style.backgroundColor = '';
}
if (m < circles.length) {
circles[m].style.backgroundColor = 'white';
}
}
circlelist.onclick=function(){
var tg= window.event.target;
let cir = tg.innerHTML - 1;
imgchange(cir);
circlechange(cir);
}
</script>
</body>active
</html>
大家可以换成自己的图片路径运行一下；
初学django
为了防止因python版本隔离对项目造成影响，我把django装在了window的虚拟环境里面；
创建好文件夹，用cmd进入；
然后cd venv进入虚拟环境文件夹，找到Scripts下面的activate.bat运行它则进入虚拟环境；
之后用命令创建项目：django-admin startproject 项目名
创建app: python manage.py app名
运行项目：python manage.py runserver
在pycharm配置好环境就可以直接在pycharm里面写代码了；
这次先到这了，后面的内容有机会再分享，毕竟这主要是前端的总结~
扫一扫
549
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
