XX学Python·前端
HTML:网页结构布局
-
HTML(HyperText Mark-up Language)超文本标记语言。
-
HTML控制页面整体布局
-
书写形式用标签形式,
<标签名称> </标签名称>, 比如:<html></html> -
基本结构：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网页标题</title> </head> <body> 网页显示内容 </body> </html> -
-
VS Code(Visual Studio Code)是由微软研发的一款免费开源跨平台代码编辑器，目前是前端(网页)开发使用最多的一款软件开发工具。
-
VScode 使用: 快捷导入模版
英文！+ tab注释ctrl+/ -
先保存再运行前端文件
1、直接进入文件所在位置打开
2、使用open in 插件
-
常用html标签
<!-- 1、成对出现的标签：-->
<h1>h1标题</h1>
<div>这是一个div块标签</div>
<p>这个一个段落标签</p>
<!-- 2、单个出现的标签： -->
<br>换行标签
<hr> 分割线标签
<img src="images/pic.jpg" alt="图片">
<video src="路径"></video>
<!-- 3、带属性的标签，如src、alt 和 href等都是属性 -->
<img src="./images/pic.jpg" alt="图片"> 建议相对路径
<a href="http://www.baidu.com">百度网</a>
<!-- 4、标签的嵌套 -->
<div>
<img src="images/pic.jpg" alt="图片">
<a href="http://www.baidu.com">百度网</a>
</div>
<!-- 5、ol标签定义有序号列表 -->
<ol>
<!-- li标签定义列表项目 -->
<li><a href="#">列表标题一</a></li>
<li><a href="#">列表标题二</a></li>
<li><a href="#">列表标题三</a></li>
</ol>
<!-- 6、ul标签定义无序号列表 -->
<ul>
<!-- li标签定义列表项目 -->
<li>列表标题一</li>
<li>列表标题二</li>
<li>列表标题三</li>
</ul>
css:网页样式
- css (Cascading Style Sheet)层叠样式表，用来美化页面的一种语言。
- css 的语法格式: 选择器
- css的三种引入方式:行内式、内嵌式、外链式
- css 选择器:用来选择标签设置样式的
- 常用css选择器:标签选择器、类选择器、id选择器、层级选择器(后代选择器)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css use</title>
<!-- 2、内嵌式 在head标签内创建style编写样式 -->
<style>
/* (1)、使用标签选择器，直接使用标签名进行选择 */
p{
color:blueviolet
}
/* (2)、使用类选择器，使用.class属性定义名称进行选择 */
.box1{
color: blueviolet
}
.box2{color: blue;}
/* (3)、使用id选择器，使用#id属性定义名称进行选择 */
#bd_link{color:blue;}
#tb_link{color:pink}
/* (4)、使用层级选择器,注意明确每层 */
.boxppp p{color: black}
</style>
<!-- 3、使用link标签引入外链css文件 -->
<link rel="stylesheet" href="./wailian.css">
</head>
<body>
<!-- 1、行内式 在标签内使用style指定样式-->
<h1 style="color:brown">1级标题</h1>
<!-- 2、给p标签使用内嵌式 -->
<p>文本段落</p>
<!-- 3、给span标签使用外链式 -->
<span>文本行标签</span>
<!-- 选择器的使用 -->
<!-- (1)、标签选择器 直接使用标签进行选择 -->
<!-- (2)、类选择器 -->
<div class="box1">
块标签111
</div>
<div class="box2">
块标签222
</div>
<div class="box3">快标签333</div>
<!-- (3)、id选择器 -->
<a href="http://www.baidu.com" id="bd_link">百度连接</a>
<a href="http://www.taobao.com" id="tb_link">淘宝连接</a>
<!-- (4)、层级选择器 -->
<div class="boxppp">
<p>div内部的段落标签</p>
</div>
</body>
</html>
- 新建css文件wailian.css
/* css样式文件后缀为css */
/* 可在该文件编写css样式代码，在html文件head中用link标签进行引入 */
/* 使用选择器选择标签进行控制 */
/* 使用多个样式时需要用;号(英文)隔开 */
span{
color:aqua;
font-size:100px
}
.box3{color:brown}
-
css常用属性
-
布局常用样式属性
- width 设置元素(标签)的宽度，如：width:100px
- height 设置元素(标签)的高度，如：height:200px
- background 设置元素背景色或背景图片，如：background:gold; 设置元素的背景色, background: url(images/logo.png); 设置元素的背景图片
- border 设置元素四周的边框，如：border:1px solid black; 设置元素四周边框是1像素宽的黑色实线
-
文本常用样式属性
- color 设置文字颜色，如： color:red
- font-size 设置文字的大小，如：font-size:12px;
- font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
- line-height 设置文字的行高，如：line-height:24px; 表示文字高度加上文字上下的间距是24px，也就是每一行占有的高度是24px
- text-decoration 设置文字下划线，如：text-decoration:none; 去掉文字下划线
- text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
- text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
-
JavaScript:数据操作
-
JavaScript(Js)是运行在浏览器端的脚本语言，负责网页和用户的交互效果。
-
JavaScript三种使用方式:行内式、内嵌式、外链式
-
定义变量 var 变量名 = 值
-
JavaScript的注释分为单行注释(//注释内容)和多行注释(/多行注释/)
-
数据类型：
- 5种基本数据类型：
1、number 数字类型
2、string 字符串类型
3、boolean 布尔类型 true 或 false
4、undefined undefined类型，变量声明未初始化，它的值就是undefined
5、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null - 1种复合类型： object 后面学习的JavaScript对象属于复合类型
- 5种基本数据类型：
-
函数定义和调用
-
用关键字 function 定义函数
-
函数调用就是函数名加小括号
-
-
变量作用域
-
局部变量只能在函数内部使用
-
全局变量可以在不同函数内使用
-
-
if条件语句
-
比较运算符，值等于，=全等(值和类型)，其他同python
-
逻辑运算符，&&与，||或，！非
-
-
数组，相当于python中列表，数组的定义使用一对中括号
-
获取数组的长度使用length属性
-
从数组最后添加元素使用push方法
-
从数组最后删除元素使用pop方法
-
根据下标添加和删除元素使用splice方法
-
-
循环语句：for循环，while循环
-
字符串拼接：使用+
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS使用</title>
<!-- 2、内嵌式js -->
<script>
alert('内嵌式引入js')
// 变量使用,undefined表示该变量未定义,null表示为空,数据对象key:value
var a = 10
var b = 'python'
var c =true
var d = undefined, e = null
var f = {name:'xx', age:18}
var g = 20
// typeof判断类型后弹窗显示类型
// alert(typeof a)
// alert(typeof b)
// alert(typeof c)
// alert(typeof d)
// alert(typeof e)
// alert(typeof f)
// alert(a+g)
// alert(f.name)
// 函数定义,用function关键词.全局变量可直接在函数内使用
function add_num(num1,num2){
alert(b)
var data = num1 + num2
return data
}
// 函数执行,函数内局部变量在函数外不能直接使用,在外部定义变量接收return返回值
// var res_data = add_num(1,5)
// alert(res_data)
// if条件判断,==只要值相等,类型会进行隐式转换
function myfunc2(data){if (data==1) {
alert('条件成立')
} else {
alert('条件不成立')
}}
// === 数值和类型必须都一样
function myfunc3(data){
if (data===1) {
alert('data值为1')
} else if (data===2) {
alert('data值为2')
}else{
alert('其他数据')
}}
// myfunc3('1')
// 数组,相当于python的list
function myarrfunc(){var arrdata=[1,2,3,'a','b','c']
// alert(arrdata.length) 长度
// alert(arrdata[3]) 通过下标获得数据
// arrdata.push('xx') 写入数据，在最后哦写入数据
// alert(arrdata)
// alert(arrdata.pop()) 弹出数据，从最后一位取值从数据中删除
// alert(arrdata)
// arrdata.splice(3,2) 删除数据，从下标3开始删除2个，则删除a和b
// arrdata.splice(3,2,'xx','lsl') 删除后并替换，则把a和b替换成xx和lsl
// arrdata.splice(3,0,'xx','lsl') 删除0个,相当于插入数据,则a前插入xx和lsl
alert(arrdata)
}
// myarrfunc()
// for循环,指定循环开始起始位置、循环条件、起始数据累加,++表示每次循环加1
function myfor(){
var arr1=[1,2,'xx','lsl']
// for(var i=0;i<arr1.length;i++){alert(arr1[i])}
// while循环
i=0
while(i<arr1.length){alert(arr1[i]);i++}
}
// myfor()
// 字符串拼接,用+号拼接
var h = 'Hi,'
alert(h+b)
</script>
<!-- 3、外链引入js文件，src指定引入文件路径 -->
<script src="./wanlian.js"></script>
</head>
<body>
<!-- 1、行内式js -->
<!-- type指定按钮类型，value指定按钮名字，onclick点击事件，alert()点击后触发弹窗提示 -->
<input type="button" value="按钮1" onclick="alert('按我一下完成')">
</body>
</html>
jQuery
- jQuery是对JavaScript的封装，免费开源的JavaScript函数库，jQuery 极大地简化了 JavaScript 编程。
- jQuery的用法
- 引入jQuery
- 入口函数两种写法，获取标签元素需要在入口函数里完成
- 选择要操作标签数据
- 标签 $('标签名')
- 类选择 $('.类名')
- id $('#id名')
- 层级选择
- 方法的使用：$('标签').方法
- css() 修改标签样式
- html() 添加数据覆盖标签内的原有数据
- append() 在标签的原有数据的基础上增加数据
- prop() 标签属性数据获取修改添加
<a href='http://www.baidu.com'></a> - click() 点击事件方法
- blur() 失去焦点方法
- val() 获取数据框数据方法
- json数据类型是对js数据对象转为字符串,在{}外加单引号,里面键值对全用双引号
<!-- 引入jQuery：本地、线上 -->
<script src="js/jquery-1.12.4.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>jx
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jquery使用</title>
<!-- 引入jquery方法（线上引入需要连网） -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<!-- 使用Jquery的方法 -->
<script>
window.onload = function(){
// 编写jq代码,将p标签数据写入div标签,先选中div,再通过html方法写入数据
// $('div').html('<p>这是一个段落</p>')
var str1 = '第一个div'
$('.box1').html('<p>'+str1+'</p>') //写成变量的形式
}
// 简写调用jquery方法 $(function(){})
$(function(){
// 写jq方法，css方法可对选中标签进行样式控制
$('p').css({color:'red'})
// jQuery类选择器
$('.box2').html('<h2>第二个div</h2>')
// id选择器
$('#box3').html('<h3>第三个div</h3>')
// 层级选择器
$('div span').html('<span>内嵌文本行标签</span>')
// 过滤选择
// $('div')会选择所有div标签,has方法进行过滤选择包含p标签的
$('div').has('p').html('通过has方法选中div标签')
// $('div')选择所有div标签放入列表里,eq中数字是下标
$('div').eq(1).html('通过eq方法选中div标签')
// 数据写入,html方法会覆盖原有数据,append方法在原有数据后追加
// $('#box6').html('新写入的div数据')
$('#box6').append('新写入的div数据')
// 标签属性值操作,用prop(属性)方法获取属性值
var baidu_href_data=$('#baidu').prop('href')
// alert(baidu_href_data)
// 添加或修改属性值,通过键值对形式,原本有值则修改无则添加
$('#unknown').prop({href:'https://www.jd.com'})
// 用户事件处理
// 定义一个处理事件的方法
function myfunc(){alert('点击事件被触发')}
function myfunc2(){
// alert('失去焦点事件被触发')
// val方法获取input标签输入框中的数据
var text_data=$('.inp2').val()
alert(text_data)}
// 选择要触发事件标签,input标签被点击时执行myfunc方法
$('.inp1').click(myfunc) // click()鼠标单击事件
// 失去焦点事件
$('.inp2').blur(myfunc2) // blur()失去焦点事件
// js数据对象，类似于字典(key有没有引号都行)，数据对象里面可定义函数
var a = {name:'xx',age:18,myfunc3:function(){alert('myfunc3被执行')}}
// a.myfunc3()
// key存在就修改，不存在就添加
a.name='lsl'
a.gender='boy'
// alert(a.name)
// alert(a.gender)
// json数据类型是对js数据对象转为字符串,在{}外加单引号,里面键值对全用双引号
// 可将python字典转为json字符串给前端用,外{}不加单引号即python字典或js数据对象了
var bob = '{"name":"B","age":18,"hobby":["reading","travel"],"school":{"name":"BK College","location":"CN"}}'
var bob_boj=JSON.parse(bob)
alert(bob_boj.hobby)
alert(bob_boj.school.name)
})
</script>
</head>
<body>
<div class="box1"></div>
<p>段落标签</p>
<!-- jQuery选择器 -->
<div class="box2"></div>
<div id="box3"></div>
<div>
<span>文本行标签</span>
</div>
<div>
<p>段落标签</p>
</div>
<!-- 数据写入 -->
<div id="box6">
原始div数据
</div>
<!-- 标签属性值操作 -->
<a id="baidu" href="https://www.baidu.com">百度连接</a>
<a href="" id="unknown">新写入确定</a>
<!-- 事件处理 -->
<!-- 按钮触发点击事件 -->
<input type="button" value="按钮1" class="inp1">
<!-- 输入框触发失去焦点事件 -->
<input type="text" class="inp2">
</body>
</html>
Ajax
-
ajax 是发送http请求获取后台服务器数据的方法
-
jquery将它封装成了一个方法$.ajax()，可直接用这个方法来执行ajax请求
-
ajax的简写方式可以使用
$.get和$.post方法来完成 -
简格式:$.get(网址,function(){ 处理成功的结果} ).error(function(){处理请求失败的业务})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax请求三方服务获取数据</title>
<!-- 引入jquery方法（线上引入需要连网） -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>
// 使用jquery方法
$(function(){
// 发送get请求，第一个参数是请求网址，第二个是处理请求成功的方法
$.get('http://api-toutiao-web.itheima.net/app/v1_1/articles?timestamp=1556789000002&channel_id=0&with_top=1',function(response,status){
// response是返回数据内容,status是返回状态码。输出终端打印,在浏览器console中显示
console.log('输出终端')
console.log(response)
console.log(status)
// js数据对象response = {...,data:{...,results:[{title:...,aut_id:...,...},{...}...,{...}]}}
console.log('从返回结果中取值')
console.log(response.data.results)
var data_arr = response.data.results // 得到一个包含数据对象的数组
// 遍历数组数据得到每一个数据对象
for(var index=0;index<data_arr.length;index++){
data_arr[index]
// 取出数据对象的title值赋给一个变量
var title = data_arr[index].title
var aut_name = data_arr[index].aut_name
// 将取出的title值写入页面
$('ul').append('<li>'+title+'--'+aut_name+'</li>')
}
}).error(function(data){
// 若请求失败执行error方法中业务
console.log(data)
})
})
</script>
</head>
<body>
<!-- 无序号列表展示 -->
<ul>
</ul>
</body>
</html>
