Python前端开发
1.前端三剑客（HTML，CSS和JavaScript）
1.1 HTML
1.1.1 HTML简介
HyperText Mark-up Language, 指的是超文本标记语言；
html是开发网页的语言；
html中的标签大多数都是成对出现的, 格式: <标签名></标签名>
1.1.2 HTML结构
第一行是文档声明部分
HTML：分为页头，页身和页脚。标签大部分是成对出现
1.1.3第一行文档声明部分HTML在vscode中的使用
vscode是由微软研发的一种代码编辑器；通过资源管理器打开可以创建html文档和编写HTML代码；可以根据需求安装插件
1.1.4常用的HTML标签初识
学习HTML语言就是学习标签的用法，常见的标签有20种；标签建议使用小写；
根据标签书写形式分为单标签和双标签；
单标签没有内容，双标签可以可以嵌套其他标签和承载文本内容
1.1.5资源路径
绝对路径和相对路径，一般使用相对路径；
相对路径是从当前操作的HTML文档所在，目录算起的路径；
绝对路径是从根目录算起的路径
1.1.6列表标签
列表标签有无序列表标签ul和有序列表标签ol
1.1.7表格标签
表格标签table、tr、th、td
1.1.8表单标签
表单标签是form标签
常用的表单标签有：lable、input、select
1.1.9表单提交
表单标签的作用就是可以把用户输入数据一起提交到web服务器
表单属性设置
action：是设置表单数据提交地址
method：是表单提交方式，提交方式有get，post
表单元素属性设置
name：表单元素的名称，用于作为提交表单数据时的参数名
value：表单元素的值，用于作为提交表单数据时参数名所代表的值
1.2 CSS
1.2.1 css简介
css 是层叠样式表，它是用来美化网页和控制页面布局
定义 css 的语法格式是: 选择器{样式规则}
1.2.2 css选择器
css 的引入有三种方式, 分别是行内式、内嵌式、外链式。
外链式是在公司开发的时候会使用，最能体现 div+css 的标签内容与显示样式分离的思想， 也最易改版维护，代码看起来也是最美观的一种。
1.2.3 css选择器
- css 选择器就是用来选择标签设置样式的
- 常用的 css 选择器有六种，分别是:
- 标签选择器
- 类选择器
- 层级选择器(后代选择器)
- id选择器
- 组选择器
- 伪类选择器
1.2.4 css属性
- 设置不同的样式属性会呈现不同网页的显示效果
- 样式属性的表现形式是: 属性名:属性值;
1.2.5 css 元素溢出
- overflow样式属性是设置子标签溢出的显示方式
- 常用使用**overflow:hidden;**来解决元素溢出
1.2.6 css显示特性
通常隐藏元素使用 display:none
1.2.7盒子模型
- 盒子模型的5个主要样式属性
- width：内容的宽度(不是盒子的宽度)
- height：内容的高度(不是盒子的高度)
- padding：内边距。
- border：边框。
- margin：外边距
- 盒子的真实尺寸只会受到宽度、高度、边框、内边距四个属性的影响，不会受到外边距属性的影响。
1.3 JavaScript
前端开发三大块 1、HTML：负责网页结构 2、CSS：负责网页样式 3、JavaScript：负责网页行为， 比如:网页与用户的交互效果
1.3.1 JavaScript简介
JavaScript是运行在浏览器端的脚步语言, 是由浏览器解释执行的, 简称js, 它能够让网页和用户有交互功能, 增加良好的用户体验效果。
JavaScript是运行在浏览器端的脚步语言，它的作用就是负责网页和用户的交互效果。
1.3.2 JavaScript的使用方式
- 行内式
- 内嵌式
- 外链式
1.3.3变量和数据类型
js中有六种数据类型，分别是:
- number
- string
- boolean
- undefined
- null
- object
1.3.4函数定义和调用
-
函数的定义
function 函数名(参数[参数可选]){ // 函数的代码实现 ... } -
函数的调用
函数名(参数[参数可选])
1.3.5变量作用域
- 局部变量只能在函数内部使用
- 全局变量可以在不同函数内使用
1.3.6条件语句
条件语句三种写法
- if 语句 适用于单条件判断
- if else 语句 适用于两种条件的判断(成立和不成立条件判断)。
- if else if else 语句 适用于多条件判断
1.3.7获取标签元素
获取标签元素需要等待页面加载完成，使用document.getElementById(‘标签id’);
1.3.8操作标签元素属性
标签属性的获取和设置:
- var 标签对象 = document.getElementById(‘id名称’); -> 获取标签对象
- var 变量名 = 标签对象.属性名 -> 读取属性
- 标签对象.属性名 = 新属性值 -> 设置属性
1.3.9数组及操作方法
- 数组的定义使用一对中括号
- 获取数组的长度使用length属性
- 从数组最后添加元素使用push方法
- 从数组最后删除元素使用pop方法
- 根据下标添加和删除元素使用splice方法
1.3.10循环语句
js中循环语句有:
- for
- while
- do-while
1.3.11字符串拼接
"+" 运算符能够实现字符串的拼接操作
1.3.12定时器
- 定时器的创建
- 只执行一次函数的定时器, 对应的代码是setTimeout函数
- 反复执行函数的定时器, 对应的代码是setInterval函数
- 清除定时器
- 清除只执行一次函数的定时器, 对应的代码是clearTimeout函数
- 清除清除反复执行的定时器, 对应的代码是clearInterval函数
1.4 jQuery
1.4.1 jQuery简介
- jQuery是一个免费、开源的JavaScript函数库
- jQuery的作用和JavaScript一样，都是负责网页和用户的交互效果。
- jQuery的优点就是兼容主流浏览器，代码编写更加简单。
1.4.2 jQuery用法
-
引入jQuery
-
获取标签元素需要在入口函数来完成，它的速度比原生的 window.onload 更快
-
jQuery入口函数有两种写法:
// 完整写法 $(document).ready(function(){ ... }); // 简化写法 $(function(){ ... });
1.4.3 jQuery选择器
- jQuery选择器就是选择标签的
- 标签选择器是根据标签名来选择标签
- 类选择器是根据类名来选择标签
- id选择器是根据id来选择标签
- 层级选择器是根据层级关系来选择标签
- 属性选择器是根据属性名来选择标签
1.4.4选择集过滤
- 选择集过滤可以使用has方法和eq方法来完成
- jquery给标签设置样式使用css方法
1.4.5选择集转移
- prev() 表示获取上一个同级元素
- prevAll() 表示获取上面所有同级元素
- next() 表示获取下一个同级元素
- nextAll() 表示获取下面所有同级元素
- parent() 表示获取父元素
- children() 表示获取所有的子元素
- siblings() 表示获取其它同级元素
- find(“选择器名称”) 表示获取指定选择器的元素
1.4.6获取和设置元素内容
- 获取和设置元素的内容使用: html方法
- 给指定元素追加html内容使用: append方法
1.4.7获取和设置元素属性
- 获取和设置元素属性的操作可以通过prop方法来完成
- 获取和设置元素的value属性可以通过val方法来完成，更加简单和方便
1.4.8 jQuery事件
jQuery常用事件:
- click() 鼠标单击
- blur() 元素失去焦点
- focus() 元素获得焦点
- mouseover() 鼠标进入（进入子元素也触发）
- mouseout() 鼠标离开（离开子元素也触发）
- ready() DOM加载完成
1.4.9事件代理
- 事件代理就是使用父元素来代理子元素的事件，好处是减少事件的绑定次数，提高性能。
- 使用场景当多个相同的子元素绑定同一个事件，可以使用事件代理。
- 事件代理使用是使用delegate方法来完成
创建自定义javascript对象有两种方式:
- Object
- 字面量
1.4.10 jQuery对象
创建自定义javascript对象有两种方式:
- Object
- 字面量
1.4.11 json
- json就是一个javascript对象表示法，json本质上是一个字符串。
- json有两种格式：1. 对象格式, 2. 数组格式
1.4.12 Ajax
- ajax 是发送http请求获取后台服务器数据的技术
- ajax的简写方式可以使用 . g e t 和 .get和 .get和.post方法来完成
最低0.47元/天 解锁文章
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
