900字范文 > Python后台开发基础——Web前端基础

Python后台开发基础——Web前端基础

时间：2023-07-03 22:36:47

1 Html

1.1 Html介绍

HTML是 HyperText Mark-upLanguage 的首字母简写，意思是超文本标记语言，HTML不是一种编程语言，而是一种标记语言超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为.html或者.htm，html文档也叫Web页面，其实就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。

1.2 Html语法

HTML是由：标签和内容构成

HTML标签（标记）的语法是由 < 和 > 括起来。

HTML标签有两种：双标签：<标签名>…</标签名> 和单标签：<标签名/>

HTML标签中还可以添加属性：<标签名属性名1=“值1” 属性名2=“值2”属性名n=“值n”>…</标签名>

HTML标签规范：标签名小写、属性使用双引号、标签要闭合。规范不遵守浏览器不会报错，会尽量解析，大不了不显示效果

1.3 Html结构

<!DOCTYPE html\> <html lang="en"\><head> <meta charset="UTF-8"\> <title\>网页标题\</title\>  </head> <body>网页显示内容 </body> </html>

1.4 Html—Header

1.5 Html注释

html文档代码中可以插入注释，注释是对代码的说明和解释

<!-- 这就是唯一的一种HTML注释了 --\>

注:可以使用ctrl+/对选中内容进行快捷注释.

1.6 Html常用标签

1.6.1 title

<head> <title>浏览器标题</title> <head/\>

1.6.2 标题与段落

<body\> <p>p标签<p\> <h1>h1<h1\> <h2>h2<h2\> <h3>h3<h3\> <h4>h4<h4\> <h5>h5<h5\> <h6>h6<h6\><body\>

效果如下:

1.6.3 水平线与换行符

1.6.4 常见的转义符

1.6.5 a链接

1.6.5.1 格式

<a href=" "\>...\</a\> 超级链接标签

1.6.5.2 属性

href:指的是链接跳转地址target: 表示链接的打开方式： _blank 新窗口_parent 父窗口_self 本窗口（默认）_top 顶级窗口framename 窗口名 title：文字提示属性（详情）

1.6.5.3 锚点连接

定义一个锚点：<a id="a1"></a>使用锚点：<a href="#a1">跳到a1处</a>

1.6.6 图片 img

1.6.6.1 格式

<img /> 在网页中插入一张图片

1.6.6.2 属性

src：图片名及url地址

alt: 图片加载失败时的提示信息

title：文字提示属性

width：图片宽度

height：图片高度

border：边框线粗细

1.6.6.3 实例

<img src="img/img.png" alt="图片加载异常显示的文字" title="鼠标放在图片上显示的文字"/>

1.6.7 表格

1.6.7.1 属性

1.6.7.2 标签

1.6.8 列表

1.6.8.1 标签

1.6.8.2 实例

<ul> <li>无序列表</li> <li>无序列表</li></ul><ol> <li>有序列表</li> <li>有序列表</li> </ol>

效果如下:

1.6.9 常见的无意义标签

1.6.10 form表单

1.6.10.1 <form>…</form> 表单标签

1.6.10.2 input定义输入字段

1.6.10.3 < select>…</select>下拉列表

1.6.10.4 <textarea>…</textarea> 多行的文本输入区域

大文本基础格式: <textarea cols=“列数” rows=“行数” > </textarea>

常用属性

2 CSS

2.1 概念

CSS：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化

样式定义如何显示控制 HTML 元素,从而实现美化HTML网页。

样式通常存储在样式表中，目的也是为了解决内容与表现分离的问题

外部样式表(CSS文件)可以极大提高工作效率

多个样式定义可层叠为一，后者可以覆盖前者样式

特点：作用于整个网站

优先级：当样式冲突时，就是采用就近原则，是值css属性离被修饰的内容最近的为主。

若没有样式冲突则采用叠加效果。

2.2 语法

2.2.1 格式

选择器{属性:值;属性:值;属性:值;....}

2.2.2 案例

p{ color:red; text-align:center;}

注: 选择器也叫选择符

2.3 引入方式

2.3.1 内联方式(行内样式)

2.3.1.1 概念

在HTML的标签中使用style属性来设置css样式

2.3.1.2 格式

<html标签 style="属性:值;属性:值;....">被修饰的内容</html标签>

2.3.1.3 实例

<p style="color:blue;font-family:隶书">在HTML中如何使用css样式</p><!-- 特点：仅作用于本标签。--\>

2.3.2 内部方式(内嵌样式)

2.3.2.1 概念

在head标签中使用<style type=“text/css”>…</style>标签来设置css样式

2.3.2.2 实例

<style type="text/css">....css样式代码</style> <!-- 特点：作用于当前整个页面 --\>

2.3.3 外部导入方式(外部链入)

2.3.3.1 概念

在head标签中使用标签导入一个css文件，在作用于本页面，实现css样式设置

2.3.3.2 实例

<link href="文件名.css" type="text/css" rel="stylesheet"/>

2.4 选择器

2.4.1html选择符(标签选择器)

2.4.1.1定义

把html标签作为选择符使用

2.4.1.2实例

如: p{....} 网页中所有p标签采用此样式 h2{....} 网页中所有h2标签采用此样式

2.4.2 id选择符

2.4.2.1 定义

#id名{样式…}

2.4.2.2 实例

# id选择符只在网页中使用一次 <html标签 id="id名">...</html标签>

2.4.3 class类选择符

2.4.3.1 定义

使用点.将自定义名（类名）来定义的选择符

2.4.3.2 实例

<html标签 class="类名"\>...</html标签> .mc{color:blue;} /* 凡是class属性值为mc的都采用此样式 */ p.ps{color:green;} /* 只有p标签中class属性值为ps的才采用此样式*/

注：类选择符可以在网页中重复使用

2.5 常用样式

2.5.1 color

2.5.2 font

2.5.3 文本属性

2.5.4 背景属性:background

3 JavaScript

3.1 JavaScript简介

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能

JavaScript 通常被直接嵌入 HTML 页面。

JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。

特点：弱类型和基于对象。(因为面向对象需要具有封装、继承、多态的特征)

JavaScript语言中包含三个核心：ECMAScript基本语法、DOM、BOM

3.2 JavaScript语法

区分大小写：变量名、函数名、运算符以及其他一切东西都是区分大小写的。

和Python一样属于弱类型语言。

每行结尾的分号可有可无。(js中的每条语句之间的分割符可以是回车换行也可以是";"分号(推荐))

脚本注释：// 单行注释和 /* 多行注释 */

括号表示代码块:{ }

变量的定义：使用var关键字来声明。

变量的命名规范是：字母数字，$符和下划线构成，但是不可以以数字开始。变量名不可以使用关键字.

typeof函数获取一个变量的类型

3.3 JavaScript引入方式

3.3.1 script标签

属性实例

<script type="text/javascript">  </script>

3.3.2 事件写入

#在html标签的事件中，超级链接里。 <button onclick="javaScript语言"></button> <a href="javascript:alert('aa');alert('bb')">点击</a>

3.3.3 外部导入方式(推荐)

<script type="text/javascript" src="my.js"></script>

3.4 JavaScript数据类型

3.4.1 类型

3.4.2 实例

//数字： var numberObject = 1; //字符串： var stringObject = "1"; //布尔： var booleanObject = true; //空： var nullObject = null; //未定义： var undefinedObject = undefined; //对象 var jsObject = Object;

注: Object 对象自身用处不大，不过在了解其他类之前，还是应该了解它。因为ECMAScript 中的 Object 对象与 Java 中的 java.lang.Object 相似，ECMAScript中的所有对象都由这个对象继承而来，Object对象中的所有属性和方法都会出现在其他对象中，所以理解了 Object对象，就可以更好地理解其他对象。

3.5 JavaScript类型转换

3.6 JavaScript—alert对话框

基础语法:alert([对话框内容]);

实例效果

3.7 JavaScript运算符

3.7.1 算数运算符

3.7.2 赋值运算符

3.7.3 比较运算符

3.7.4 逻辑运算符

3.7.5 逗号运算符

#用逗号运算符可以在一条语句中执行多个运算。 var iNum1=1, iNum2=2, iNum3=3

3.8 判断循环语句

3.8.1 判断语句

if... else ...if ... else if ... else...

3.8.2 多分支语句

switch（）{。 case ：。。。。} switch (i) {case 20: alert("20");break; case 30: alert("30"); break; case 40: alert("40"); break; default: alert("other");}

3.8.3 循环语句

//for,while,do...while //for-in 语句: 语句是严格的迭代语句，用于枚举对象的属性。 var a = [10,20,30,40,50]; //迭代的是数组的下标。 for(i in a){document.write(a[i]); } //输出： 102030405

注:

break 和 continue 语句对循环中的代码执行提供了更严格的控制。

with 语句用于设置代码在特定对象中的作用域。

3.9 JavaScript函数和对象

3.9.1 函数的定义

3.9.1.1 function语句定义函数

function 函数名（[参数列表..]）{函数体。。。 [return 返回值;] }

3.9.1.2 Function()构造函数定义函数(不常用)

//格式: var 函数名 = new Function(“参数1”，”参数2”，”参数3”……”函数体”); //如： var 函数名 = new Function(”x”,”y”,”var z=x+y;return z;”);

3.9.1.3 表达式定义函数

//格式:var 函数名 = function(参数1，参数2，…){函数体}; //例如： //定义函数 var add = function(a,b){return a+b; } //调用函数 document.write(add(50,20));

3.9.1.4 arguments对象

在函数代码中，使用特殊对象arguments，开发者无需明确指出参数名，就能访问它们。

例如，在函数 sayHi() 中，第一个参数是 message。

用 arguments[0] 也可以访问这个值，即第一个参数的值（第一个参数位于位置0，第二个参数位于位置 1，依此类推）。

3.9.1.5 变量和参数

函数外面定义的变量是全局变量，函数内可以直接使用。

在函数内部没有使用var定义的=变量则为全局变量，

在函数内使用var关键字定义的变量是局部变量，即出了函数外边无法获取。

3.9.2 常用的内置函数

3.9.3 对象的定义和使用

3.9.3.1 原始方式构建对象

var myObject = new Object(); myObject.name = “lijie”; myObject.age = 20; myObject.say = function(){...}

3.9.3.2 创建自定义对象

var 对象名 = {属性名1：属性值，属性名2：属性值2，…….}

3.9.3.3 自定义构建函数创建对象

function pen(name,color,price){//对象的name属性 this.name = name; //对象的color属性 this.color = color; //对象的piece属性 this.price = price; //对象的say方法 this.say = function(){}; } var pen = new pen(“铅笔”,”红色”,20);pen.say();

3.9.3.4 检测常用的方法

typeof() //global对象的其中一个方法，typeof()

对象.constructor; //查看当前对象的构造函数是谁

if(arr.constructor==Array){alert("数组"); //数组推荐用这种方法，因为typeof得到是object }

3.10 JavaScript—DOM

3.10.1 基本概念

HTML DOM 定义了访问和操作HTML文档的标准方法。

HTML DOM 把 HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

DOM 被分为不同的部分：

Core DOM 定义了一套标准的针对任何结构化文档的对象XML DOM 定义了一套标准的针对 XML 文档的对象HTML DOM 定义了一套标准的针对HTML 文档的对象。

节点：根据 DOM，HTML 文档中的每个成分都是一个节点。 DOM 是这样规定的：

整个文档是一个文档节点每个 HTML标签是一个元素节点包含在 HTML 元素中的文本是文本节点每一个HTML 属性是一个属性节点注释属于注释节点

节点彼此间都存在关系。

除文档节点之外的每个节点都有父节点。大部分元素节点都有子节点。当节点分享同一个父节点时，它们就是同辈（同级节点）。节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点

查找并访问节点你可通过若干种方法来查找您希望操作的元素：

通过使用 getElementById()和 getElementsByTagName() 方法通过使用一个元素节点的parentNode、firstChild 以及 lastChild childNodes属性nextSibling返回节点之后紧跟的同级节点。previousSibling返回节点之前紧跟的同级节点。

节点信息每个节点都拥有包含着关于节点某些信息的属性。这些属性是：

nodeName（节点名称）nodeValue（节点值）nodeType（节点类型）

nodeName 属性含有某个节点的名称。

元素节点的nodeName 是标签名称属性节点的 nodeName 是属性名称文本节点的nodeName 永远是 #text文档节点的 nodeName 永远是 #document

3.10.2 DOM对象参考

4 JQuery

4.1 概念

JQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀JavaScript代码库（或JavaScript框架）。

JQuery设计的宗旨是“write Less，DoMore”，即倡导写更少的代码，做更多的事情。

它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

4.2 引入方式

jquery文件下载地址: /

注: 在开发或调试过程中使用未压缩的文件

引入方式:

<head\> <script type="text/javascript" src="【本地JQuery地址】"\></script\></head\>

使用实例

代码部分：

<!DOCTYPE html\><html\> <head\> <meta charset="utf-8"/\> <title\>jQuery实例\</title\> <script type="text/javascript" src="jquery-1.8.3.min.js"\></script> <script type="text/javascript"\>//两种使用方式： $(document).ready(function(){// 在这里写你的代码... }); //简写 $(function(\$) {// 你可以在这里继续使用\$作为别名... }); </script> </head> <body>  </body></html>

4.3 JQuery选择器

4.3.1 基本选择器

4.3.2 层级选择器

4.3.3 过滤选择器

4.3.4 内容过滤选择器

4.3.5 可见性过滤选择器

4.3.6 属性选择过滤选择器

4.3.7 状态过滤选择器

4.3.8 表单选择器

4.4 JQuery对象

4.4.1 概念

Query对象是拥有0—length-1的属性，并且包含length属性的维数组在JQuery库中，可以通过本身自带的方法获取页面DOM 元素的对象叫做JQuery对象。对象用var开头定义。

4.4.2 规范

1.JQuery对象习惯性采用$开口，

例如： $div = $(“div”);

JQuery对象的格式是[Object]

JQuery对象转JS对象

jsObject = $jqueryObject[0];

jsObject = $jqueryObject.get(0);

4.JS对象转JQuery对象

$jqueryObject = $(jsObject);

4.4.3 常用方法

4.5 JQuery事件

4.5.1 概念

页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML中发生某些事件时所调用的方法。

4.5.2 语法

#页面中指定一个点击事件： \$("p").click(); #下一步是定义什么时间触发事件。您可以通过一个事件函数实现： \$("p").click(function(){// 动作触发后执行的代码!! });

4.5.3 实例

<input type="button" value="按钮" id="button_id"> <script type="text/javascript"> //1.得到按钮对象 $buttonElement = $("#button_id"); //2.绑定点击事件 $buttonElement.click(function(){ alert("按钮被被点击了"); }); </script>