Python后台开发（第一章补充： Web前端技术）
HTML是 HyperText Mark-upLanguage 的首字母简写，意思是超文本标记语言，
HTML不是一种编程语言，而是一种标记语言
超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，
用这种语言制作的文件保存的是一个文本文件，文件的扩展名为.html或者.htm，
html文档也叫Web页面，其实就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，
如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
HTML是由：标签和内容构成
HTML标签（标记）的语法是由 < 和 > 括起来。
HTML标签有两种：双标签：<标签名>…</标签名> 和 单标签：<标签名/>
HTML标签中还可以添加属性：<标签名 属性名1=“值1” 属性名2=“值2”属性名n=“值n”>…</标签名>
HTML标签规范：标签名小写、属性使用双引号、标签要闭合。规范不遵守浏览器不会报错，会尽量解析，大不了不显示效果
<!DOCTYPE html\>
<html lang="en"\>
< head> < title\> </ title\> </ head> < body> </ body> </ html> 1.4 Html—Header
说明 代码
设置网页编码
<meta charset=“utf-8”/>
关键字
<meta name=“Keywords” content=“关键字” />
描述
<meta name=“Description” content=“简介、描述” />
网页标题
<title>本网页标题</title>
导入CSS文件
<link type=“text/css” rel=“stylesheet” href="**.css"/>
CSS代码
<style type=“text/css”>嵌入css样式代码</style>
JS文件或代码
<script >。。。</script>
html文档代码中可以插入注释，注释是对代码的说明和解释
< !--这就是唯一的一种HTML注释了 --\ > 注:可以使用ctrl+/对选中内容进行快捷注释.
< head> < title> </ title> < head\> < body\> < p> < p\> < h1> < h1\> < h2> < h2\> < h3> < h3\> < h4> < h4\> < h5> < h5\> < h6> < h6\> < body\> 效果如下:
标签 命令
水平线
<hr/>
换行符
<br/>
字符 代码
空格
>
>
<
<
<a href=" "\>...\</ a\>
href:指的是链接跳转地址
target: 表示链接的打开方式：
_blank 新窗口
_parent 父窗口
_self 本窗口（默认）
_top 顶级窗口
framename 窗口名
title：文字提示属性（详情）
定义一个锚点：< aid = " a1" > </ a> < ahref = " #a1" > </ a> < img/>
src： 图片名及url地址
alt: 图片加载失败时的提示信息
title：文字提示属性
width：图片宽度
height：图片高度
border：边框线粗细
< imgsrc = " img/img.png" alt = " 图片加载异常显示的文字" title = " 鼠标放在图片上显示的文字" />
属性 说明
border
这个整型元素使用像素，定义了表格边框的大小。如果设置为1，表示表格具有1px大小的边框
width
表格的宽度
bgcolor
表格的背景颜色
align
这个属性指定了包含在文档中的表格必须如何对齐。有如下值: left，表格将在文档左侧显示； center， 表格将在文档中央显示； right， 表格将在文档右侧显示；
cellpadding
表格单元的内容和边框之间的空间
cellspacing
单元格之间空间的大小
标签 说明
<table>…</table>
表格标志
<caption>…</caption>
表格标题
<tr>…</tr>
行标签
<th>…</th>
列头标签
<td>…</td>
列标签 : 跨行属性rowspan 跨列属性：colspan
<thead>…</thead>
表头
<tbody>…</tbody>
表体
<tfoot>…</tfoot>
表尾
标签 说明
ul
无序列表
li
列表项
ol
有序列表
< ul> < li> </ li> < li> </ li> </ ul> < ol> < li> </ li> < li> </ li> </ ol> 效果如下:
标签
说明
<div>…</div>
常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化
<span>…</span>
常用于包含的文本，您可以使用 CSS 对它定义样式，或者使用 JavaScript 对它进行操作。
属性 说明
action
交的目标地址(URL)
method
提交方式:get(默认)和post get方式是URL地址栏可见,长度 受限制(IE2k 火狐8k),相对不安全. post方式是URL地址不可见,长度不受限制,相对安全.
enctype
提交类型
target
在何处打开目标 URL
属性 说明
type
表示表单项的类型,值如下: text:单行文本框 password:密码输入框 checkbox:多选框 注意要提供value值 radio:单选框 注意要提供value值 file:文件上传选择框 button:普通按钮 submit:提交按钮 image:图片提交按钮 reset:重置按钮, 还原到开始(第一次打开时)的效果 hidden:主表单隐藏域,要是和表单一块提交的信息,但是不需要用户修改 email 用于应该包含 e-mail 地址的输入域 url 用于应该包含 URL 地址的输入域 number 用于应该包含数值的输入域。 max 规定允许的最大值 min 规定允许的最小值 step 规定合法的数字间隔（如果 step=“3”，则合法的数是 -3,0,3,6 等） value 规定默认值 range 用于应该包含一定范围内数字值的输入域，显示为滑动条 max 规定允许的最大值 min 规定允许的最小值 step 规定合法的数字间隔（如果 step=“3”，则合法的数是 -3,0,3,6 等） value 规定默认值 日期选择器 Date pickers date - 选取日、月、年 month - 选取月、年 week - 选取周和年 time - 选取时间（小时和分钟） datetime - 选取时间、日、月、年（UTC 时间） datetime-local - 选取时间、日、月、年（本地时间） search 用于搜索域，比如站点搜索或 Google 搜索 color 颜色选择
method属性
提交方式:get(默认)和post get方式是URL地址栏可见,长度 受限制(IE2k 火狐8k),相对不安全. post方式是URL地址不可见,长度不受限制,相对安全.
enctype
提交类型
target
在何处打开目标 URL
name
表单项名,用于存储内容值的
value
输入的值(默认指定值)
placeholder
预期值的简短的提示信息
size
输入框的宽度值
maxlength
输入框的输入内容的最大长度
readonly
对输入框只读属性
disabled
禁用属性
checked
对选择框指定默认选项
属性 说明
value
下拉项的值
name
定义名称,用于存储下拉值的
size
定义菜单中可见项目的数目，html5不支持
<option>… </option>
下拉选择项标签,用于嵌入到<select>标签中使用的;
multiple
多选
disabled
当该属性为 true 时，会禁用该菜单
大文本基础格式: <textarea cols=“列数” rows=“行数” > </textarea>
常用属性
属性 说明
name
定义名称,用于存储文本区域中的值
cols
规定文本区内可见的列数
rows
规定文本区内可见的行数
readonly
只读
disabled
是否禁用
CSS：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页 各元素进行格式化
样式定义如何显示控制 HTML 元素,从而实现美化HTML网页。
样式通常存储在样式表中，目的也是为了解决内容与表现分离的问题
外部样式表(CSS文件)可以极大提高工作效率
多个样式定义可层叠为一，后者可以覆盖前者样式
特点：作用于整个网站
优先级：当样式冲突时，就是采用就近原则，是值css属性离被修饰的内容最近的为主。
若没有样式冲突则采用叠加效果。
选择器{属性:值;属性:值;属性:值;....}
p{
color:red;
text-align:center;
}
注: 选择器也叫选择符
在HTML的标签中使用style属性来设置css样式
< html标签 style =" 属性 : 值; 属性 : 值; ...." > </ html标签> < p style =" color : blue; font-family : 隶书" > </ p> < !--特点：仅作用于本标签。--\ > 在head标签中使用<style type=“text/css”>…</style>标签来设置css样式
< styletype = " text/css" > ....css样式代码 </ style> < !--特点：作用于当前整个页面 --\ > 在head标签中使用标签导入一个css文件，在作用于本页面，实现css样式设置
< linkhref = " 文件名.css" type = " text/css" rel = " stylesheet" /> 把html标签作为选择符使用
如: p{....} 网页中所有p标签采用此样式
h2{....} 网页中所有h2标签采用此样式
#id名{样式…}
# id选择符只在网页中使用一次
< html标签id = " id名" > </ html标签> 使用点.将自定义名（类名）来定义的选择符
<html标签 class="类名"\>...</ html标签> 注：类选择符可以在网页中重复使用
属性 说明
HSL
通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色. background-color:hsl(240,100%,50%);color:white；
HSLA
色调(H)、饱和度(S)、亮度(L)、透明度(A)； background-color: hsla(0,100%,50%,0.2);
RGB
颜色: 红®、绿(G)、蓝(B)三个颜色通道的变化 background-color:rgba(200,100,0)
RGBA
颜色: 红®、绿(G)、蓝(B)、透明度(A) background-color: rgba(0,0,0,0.5);
属性 说明
font-size
字体大小
font-family
字体 比如: 宋体，Arial
font-style
字体格式,参数如下 normal正常； italic斜体； oblique倾斜的字体
属性 说明
text-indent
首行缩进
text-overflow
文本的溢出是否使用省略标记（…）。clip|ellipsis（显示省略标记）
text-align
文本的位置：left center right
text-transform
对象中的文本的大小写：capitalize(首字母)|uppercase大写|lowercase小写
text-decoration
字体画线：none无、underline下画线，line-through贯穿线
text-shadow
文本的文字是否有阴影及模糊效果
vertical-align
文本的垂直对齐方式
direction
文字流方向。ltr | rtl
white-space:nowrap
/* 强制在同一行内显示所有文本*/
letter-spacing
文字或字母的间距
word-spacing
单词间距
line-height
行高
color
字体颜色
属性 说明
background- color
背景颜色
background-image
背景图片
background-repeat：
重复平铺
background-attachment
是否固定背景 scroll:默认值。背景图像是随对象内容滚动 fixed:背景图像固定
background-position
定位
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能
JavaScript 通常被直接嵌入 HTML 页面。
JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。
特点：弱类型和基于对象。(因为面向对象需要具有封装、继承、多态的特征)
JavaScript语言中包含三个核心：ECMAScript基本语法、DOM、BOM
区分大小写：变量名、函数名、运算符以及其他一切东西都是区分大小写的。
和Python一样属于弱类型语言。
每行结尾的分号可有可无。(js中的每条语句之间的分割符可以是回车换行也可以是";"分号(推荐))
脚本注释：// 单行注释 和 /* 多行注释 */
括号表示代码块:{ }
变量的定义：使用var关键字来声明。
变量的命名规范是：字母数字，$符和下划线构成，但是不可以以数字开始。变量名不可以使用关键字.
typeof函数获取一个变量的类型
类型 说明
undefined
undefined
boolean
布尔类型
number
Number 类型 (整数、浮点数)
string
String 类型（采用""、 ‘’）
object
变量是一种引用类型或 Null 类型
function
函数类型
属性
属性 说明
charset（可选）
字符集设置、
src（可选）
使用外部的js脚本文件
type(必选)
类型：值 text/javascript
实例
< scripttype = " text/javascript" >
< ! -- javaScript语言
</ script> #在html标签的事件中，超级链接里。
< buttononclick = " javaScript语言" > </ button> < ahref = " javascript:alert(' aa' );alert(' bb' )" > </ a> < scripttype = " text/javascript" src = " my.js" > </ script>
类型 说明
undefined
undefined
null
null
boolean
boolean
number
八进制数和十六进制数 012 浮点数 特殊的 Number 值
string
string
object引用类型
引用类型通常叫做类（class），也就是说，遇到引用值，所处理的就是对象。
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对象，就可以更好地理解其他对象。
方法 说明
Number()
强转一个数值(包含整数和浮点数)。
parseInt()
强转整数
parseFloat（）
强转浮点数
isNaN()
检测参数是否不是一个数字
基础语法:alert([对话框内容]);
实例效果
运算符 描述 例子 结果
+
加
x=1+1
x = 2
-
减
x=1-1
x =0
*
乘
x=2*3
x = 6
/
除
x=4/2
x = 2
%
取余数
x = 5/2
x=1
++
叠加
x = 2 x ++
x = 3
–
叠减
x = 2 x –
x = 1
运算符 例子 等价于 结果
=
x=5
x=5
x=5
+=
x += 2
x = x +2
x =7
-=
x -= 2
x = x - 2
x =3
*=
x *= 2
x = x * 2
x = 10
%
x%2
x = 5/2
x=1
/=
x /= 2
x = x / 2
x=2.5
%=
x %= 2
x = x %
x = 1
运算符 描述
==
值相等
===
类型和值都相等
!=
不等于
>
大于
<
小于
>=
大于等于
<=
小于等于
运算符 描述
&
与
&&
短路与
|
或
||
短路或
!
非
#用逗号运算符可以在一条语句中执行多个运算。 var iNum1= 1 , iNum2= 2 , iNum3= 3
if ...
else ...
if ...
else if ...
else ...
switch （）{ 。 case ：。。。。}
switch ( i) {
case 20 : alert ( "20" ) ;
break ; case 30 :
alert ( "30" ) ;
break ;
case 40 :
alert ( "40" ) ;
break ;
default : alert ( "other" ) ;
}
var a = [ 10 , 20 , 30 , 40 , 50 ] ;
for ( i in a) {
document. write ( a[ i] ) ;
}
注:
break 和 continue 语句对循环中的代码执行提供了更严格的控制。
with 语句用于设置代码在特定对象中的作用域。
function 函数名（[ 参数列表. . ] ）{
函数体。。。 [ return 返回值; ]
}
var 函数名 = new Function ( “参数1 ”，”参数2 ”，”参数3 ”……”函数体”) ;
var 函数名 = new Function ( ”x”, ”y”, ”var z= x+ y; return z; ”) ;
var add = function ( a, b) {
return a+ b;
}
在函数代码中，使用特殊对象arguments，开发者无需明确指出参数名，就能访问它们。
例如，在函数 sayHi() 中，第一个参数是 message。
用 arguments[0] 也可以访问这个值，即第一个参数的值（第一个参数位于位置0，第二个参数位于位置 1，依此类推）。
函数外面定义的变量是全局变量，函数内可以直接使用。
在函数内部没有使用var定义的=变量则为全局变量，
在函数内使用var关键字定义的变量是局部变量，即出了函数外边无法获取。
方法 说明
escape()
字串编码
unescape()
字串反编码
eval()
将参数字符串作为脚本代码来执行
isNaN()
检测参数是否不是一个数字
var myObject = new Object ( ) ;
myObject. name = “lijie”;
myObject. age = 20 ;
myObject. say = function ( ) { ... }
var 对象名 = { 属性名1 ：属性值，属性名2 ：属性值2 ，……. }
function pen ( name, color, price) {
this . name = name;
this . color = color;
this . price = price;
this . say = function ( ) { } ; }
var pen = new pen ( “铅笔”, ”红色”, 20 ) ;
pen. say ( ) ;
typeof() //global对象的其中一个方法，typeof()
对象.constructor; //查看当前对象的构造函数是谁
if ( arr. constructor== Array) { alert ( "数组" ) ;
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
方法 说明
Document
代表整个 HTML 文档，可被用来访问页面中的所有元素 常用集合属性：forms
Anchor
代表 <a> 元素
Area
代表图像映射中的 <area> 元素
Base
代表 <base> 元素
Body
代表 <body> 元素
Button
代表 <button> 元素
Event
代表某个事件的状态
Form
代表 <form> 元素
Frame
代表 <frame> 元素
Frameset
代表 <frameset> 元素
Iframe
代表 <iframe> 元素
Image
代表 <img> 元素
Input button
代表 HTML 表单中的一个按钮
Input checkbox
代表 HTML 表单中的复选框
Input file
代表 HTML 表单中的文件上传
Input hidden
代表 HTML 表单中的隐藏域
Input password
代表 HTML 表单中的密码域
Input radio
代表 HTML 表单中的单选按钮
Input reset
代表 HTML 表单中的重置按钮
Input submit
代表 HTML 表单中的确认按钮
Input text
代表 HTML 表单中的文本输入域（文本框）
Link
代表 <link> 元素
Meta
代表 <meta> 元素
Object
代表 <Object> 元素
Option
代表 <option> 元素
Select
代表 HTML 表单中的选择列表
Style
代表单独的样式声明
Table
代表 <table> 元素
TableData
代表 <td> 元素
TableRow
代表 <tr> 元素
Textarea
代表 <textarea> 元素
JQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀JavaScript代码库（或JavaScript框架）。
JQuery设计的宗旨是“write Less，DoMore”，即倡导写更少的代码，做更多的事情。
它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jquery文件下载地址: https://jquery.com/
注: 在开发或调试过程中使用未压缩的文件
引入方式:
<head> <script type=“text/javascript” src="【本地JQuery地址】"></script>
使用实例
代码部分：
<!DOCTYPE html\>
< html\> < head\> < title\> </ title\> </ script>
$ ( document) . ready ( function ( ) {
} ) ;
$ ( function ( \$) {
} ) ;
</ script> </ head> < body> </ body> </ html>
格式 说明
$("#id")
ID选择器
$(“div”)
元素选择器
$(".classname")
类选择器
$(".classname,.classname1,#id1")
组合选择器
格式 说明
$("#id>.classname ")
子元素选择器
$("#id .classname ")
后代元素选择器
$("#id + .classname ")
紧邻下一个元素选择器
$("#id ~ .classname ")
兄弟元素选择器
格式 说明
$(“li:first”)
第一个li
$(“li:last”)
最后一个li
$(“li:even”)
挑选下标为偶数的li
$(“li:odd”)
挑选下标为奇数的li
$(“li:eq(4)”)
下标等于 4 的li(第五个 li 元素)
$(“li:gt(2)”)
下标大于 2 的li
$(“li:lt(2)”)
下标小于 2 的li
$(“li:not(#runoob)”)
挑选除 id=“runoob” 以外的所有li
格式 说明
$(“div:contains(‘Runob’)”)
包含 Runob文本的元素
$(“td:empty”)
不包含子元素或者文本的空元素
$(“div:has(selector)”)
含有选择器所匹配的元素
$(“td:parent”)
挑选下标为奇数的li
格式 说明
$(“li:hidden”)
匹配所有不可见元素，或type为hidden的元素
$(“li:visible”)
匹配所有可见元素
格式 说明
$(“div[id]”)
所有含有 id 属性的 div 元素
$(“div[id=‘123’]”)
匹id属性值为123的div 元素
$ (“div[id!=‘123’]”)
id属性值不等于123的div 元素
$ (“div[id^=‘qq’]”)
id属性值以qq开头的div 元素
$(“div[id$=‘zz’]”)
id属性值以zz结尾的div 元素
$(“div[id*=‘bb’]”)
id属性值包含bb的div 元素
$(“input[id][name$=‘man’]”)
多属性选过滤，同时满足两个属性的条件的元素
格式 说明
$(“input:enabled”)
匹配可用的 input
$(“input:disabled”)
匹配不可用的 input
$(“input:checked”)
匹配选中的 input
$(“option:selected”)
匹配选中的 option
格式 说明
$(":input")
匹配所有 input, textarea, select 和 button 元素
$(":text")
所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$(“input:text”)效率更高，下同
$(":password")
所有密码框
$(":radio")
所有单选按钮
$(":checkbox"
所有复选框
$(":submit")
所有提交按钮
$(":reset")
所有重置按钮
$(":button")
所有button按钮
$(":file")
所有文件域
Query对象是拥有0—length-1的属性，并且包含length属性的维数组在JQuery 库中，可以通过本身自带的方法获取页面DOM 元素 的对象叫做JQuery对象。对象用var开头定义。
1.JQuery对象习惯性采用$开口，
例如： $div = $(“div”);
JQuery对象的格式是[Object]
JQuery对象转JS对象
jsObject = $jqueryObject[0];
jsObject = $jqueryObject.get(0);
4.JS对象 转JQuery对象
$jqueryObject = $(jsObject);
方法 说明
get()
取得所有匹配的元素
get(index);
取得其中一个匹配的元素 $(this).get(0) 等同于 $(this)[0]
Number index(jqueryObj);
搜索子对象
each(callback)
类似foreach，不过遍历的是元素数组
页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML中发生某些事件时所调用的方法。
#页面中指定一个点击事件：
\$ ( "p" ) . click ( ) ;
#下一步是定义什么时间触发事件。您可以通过一个事件函数实现：
\$ ( "p" ) . click ( function ( ) {
< inputtype = " button" value = " 按钮" id = " button_id" > < scripttype = " text/javascript" >
</ script>
命令 说明
click()
鼠标点击
dblclick()
鼠标双击
keydown()
键盘按下
keypress()
键盘按住
keyup()
键盘抬起
focus()
得到焦点
blur()
失去焦点
scroll()
滚动
select()
被选中
submit()
提交
load()
加载成功
unload()
离开页面
resize()
窗口调整尺寸
mousedown()
鼠标按下
mouseup()
鼠标抬起
mouseenter()
鼠标穿过
mouseleave()
鼠标离开
mousemove()
鼠标移动
mouseover()
鼠标位于元素
命令 说明
show(speed,callback)
显示
hide(speed,callback)
隐藏
命令 说明
fadeIn(speed,callback)
淡入
fadeOut(speed,callback)
淡出
命令 说明
slideDown(speed,callback)
向下滑动
slideUp(speed,callback)
向上滑动
