HTML标签
- 1.超文本传输协议
- HTTP超文本传输协议是通过浏览器与服务器进行交互，进行了超文本传输的进行传输要遵守规定
- 2.超文本传输协议的四大特性
- 基于服务器响应
- 基于Tcp/IP左右在应用层的协议
- 无状态
- 无连接/短连接
- 3.请求的数据格
1 请求首行：包括请求的方式，协议名称和版本
2 请求头 ： 一大堆k:v键值对
3 换行
4 请求体 ： 请求体会携带一些敏感的数据值
- 4.响应的数据格式
1 响应首行：响应状态码(1xx,2xx,3xx,4xx,5xx)
公司内部自定义的状态码一般从10000开始
2 响应头 ：一大堆k:v键值对
3 换行
- 5.HTML叫超文本标记语言
- 6.HTML分类
1.块级标签和行内标签
<div></div> 块级
<span></span> 行内
2.单标签和双标签
- 7.head内常见标签
<title>Title</title>
<style></style>
<link rel="stylesheet" href="">
<script></script>
<meta charset="UTF-8">
- 8.body内基本标签
<h>标题</h>
<p>段落</p>
<hr>水平分割线
<br>换行
<u>下划线</u>
<i>倾斜</i>
<s>删除线</s>
<b>加粗</b>
- 9.基本字符
><&;
- 10.body内常见标签
1 <a href="网址" target="_self/_blank"></a>
2 <img src="图片地址" title="悬浮信息" alt="加载失败提示">
- 11.标签的两大重要属性
1 id属性:一对一(值不能重复)
2 class属性:一对多
- 12.列表，表格标签
1 无序列表 <ul><li></li></ul>
2 有序列表 <ol type="" start=""></ol>
3 标题列表 <dl><dt><dd></dd></dt></dl>
4 表格标签 <table>
表头<thead><tr><th></th></tr></thead>
表数据<tbody><tr><td></td></tr></tbody>
</table>
- 13.表单标签
<from action="数据提交地址" method="控制请求方式(get/post)"></from>
类型： type=""
text 文本
password 密码
date 时间
emali 邮箱
radio 单选
checkbox 多选
file 单文件 后面有multiple是多文件
submit 提交按钮
reset 刷新页面
button 普通的按钮
<select><option></option></select>
单选栏
<select multiple><option></option></select>
多选栏
<textarea></textarea>
自定义输入框
- 14.获取用户输入的标签两大重要的属性
1 name属性：类似于字典键
2 value属性：类似于字典的值
css样式
- 1.css层叠样式表
选择器 {
属性名1:属性值1;
属性名2:属性值2;
}
- 2.css选择器
1 当多个选择器标签需要调整相同的样式，就可以合并
2 引入位置不同时采用就近原则
3 当选择器不同时
行内 > id选择器 > 类选择器 > 标签选择器
- 3.基本选择器
1 标签选择器
2 类选择器class(.)
3 id选择器id(#)
4 通用选择器(*)
- 4.组合选择器
1 后代选择器(后代span)
2 儿子选择器(儿子span)
3 毗邻选择器(下方相邻span)
4弟弟选择器(同级别下所有span)
- 5.属性选择器
默认属性/自定义属性(选择器可以是任意类型的 标签、id、class)
1.查找属性名含有name的标签
[name]{}
2.查找属性名含有name并且值是username的标签
[name='username'] {}
3.查找input标签并且 属性名含有name值是username的
input[name='username'] {}
- 6.伪类选择器
a标签默认的颜色紫色(链接地址已经被点击过了),蓝色(链接地址从来没有点击过)
1.a标签内的文本，鼠标悬浮上去后，颜色发送变化
a:hover {} # 鼠标放置上去变色
- 7.伪元素选择器
伪元素选择器可以用在解决标签浮动所带来的的负面影响,也可以用来做数据的防爬
1. first-letter # 常用的给首字母设置特殊样式
2. before
3. after
- 8.css样式设计
1.宽和高 width/height
2.文字字体 font-family
3.字体大小 font-size
4.字体粗细 font-weight
5.文本颜色 color(三种)
6.文字对齐 text-align
7.首行缩进 text-indent
8.文字装饰 text-decoration
- 9.背景属性
背景的属性可以简写
# 1.背景色
background-color: lightblue; # 背景颜色
background-image: url('1.jpg'); # 背景图片
background-repeat: no-repeat; # 背景展开方式 background-position: left top; # 背景的位置
background-position: 200px 200px;
# 2.展开方式
repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
- 10.边框属性
none(无边框)
dotted(点状虚线边款)
dashed(矩形虚线边框)
solid(实线边框)
- 11.display属性可以控制HTML元素的显示效果
- 12.css盒子模型
1.内边距padding的使用方式和外边距margin的使用方式是一致的
margin-top: 20px;
margin-left: 30px;
margin-rignt: 40px;
margin-bottom: 50px;
# margin还可以让内部标签居中显示
margin： 100px auto # 仅限于水平方向的居中
- 13.浮动float
1.float是页面布局不可缺少的操作
2.浮动之后如果发生了父标签塌陷使用clearfix类值即可
.clearfix:after {
content: '';
display: block;
clear: both;
}
- 14.溢出属性
div {
height: 80px;
width: 120px;
border: 3px solid black;
overflow: 溢出的属性值;
}
div img {
max-width:100%
}
1.visible 默认的值，没什么帮助
2.hidden 内容被修剪，只能看到一角，一般可以用来制作头像
3.scroll 内容被修剪，但是浏览器会显示翻页键以便查看其它内容
4.auto 如果内容被修剪，可以在浏览器使用滚动来查看其他内容
5.inherit 从父元素继承溢出的属性值
- 15.position定位
定位分为四种:static(静态),relative(相对定位),absolute(绝对定位),fixed(固定定位)
position: 定位的方式;
left: 移动的像素值;
top: 移动的像素值;
- 16.z-index模态框
浏览器是一个三维坐标系，z轴指向用户
javascript基础
- 1.简介
在js中一切皆对象:包含字符串、数值、数组、函数等。
1. js全称javascript，与java没有关系
2. JavaScript 是 ECMAScript 标准的实现
3. 现在常用为5.1与6.0居多
4. javaScript是一门编程语言(nodejs)
5. html页面两种引入js的方式
* 1. 通过外部js文件
* 2. 通过Html内部head里的script
6. 两种注释语法： // 与/**/
7. 结束符号是;
- 2.变量
关键字：
var 全局有效
let 在局部名称空间中使用只对局部有效
const 定义常量
# js是动态类型,变量名绑定的数据值类型不固定
- 3.数据类型
在js中查看数据类型使用 typeof
- 4.数值类型
1.python中的整型，浮点型，在js中统称为数值类型
2.NaN表示不是一个数字(NOT A Number
- 5.字符串类型(js中的字符串(string))
- 6.布尔值类型 boolean
1.js内的布尔值(boolean)是小写的
2.null表示现在是空的/uddefined表示一直没有过
- 7.对象(python中的列表)
.length 数值的大小
.pop 获取尾部的元素取出移除
.push(ele) 尾部追加元素
.sort() 排序
.splice() 删除元素，并向数组添加新元素。
splice(index（必选）,howmany（必选）,item1,.....,itemX)
.map() 返回一个数组,元素调用函数处理后的值的新数组
map(function(currentValue,index（可选）,arr（可选）), thisValue（可选）)
.forEach() 将数组的每个元素传递给回调函数
forEach(function(currentValue（必选）, index, arr), thisValue)
- 8.自定义对象(python中的字典)
取值直接使用句点符
- 9.js运算符
- 1.算数运算符
+ - * / ++ --
- 2.比较运算符
1.js是一门弱类型语言，弱等于会自动转换数据类型，使其相等,强等于不会转换。
> 大于
>= 大于等于
< 小于
<= 小于等于
!= 弱不等于
== 弱等于
!== 强不等于
- 3.逻辑运算符
&& 等价于python中的and
|| 等价于python中的or
! 等价于python中的not
- 4.赋值运算符
= += -= *= /=
- 10.流程控制
1.单if
2.if...else
3.if...elseif...else
4.switch结构
# switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。
var day = new Date().getDay();
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
default:
console.log("...")
}
- 11.循环结构
1.for循环
for (let i=0;i<10;i++) {
console.log(i);
}
2.while循环
while(条件){
循环体代码
}
- 12.js函数
1.定义函数
# 限制参数的个数使用关键字arguments
function 函数名(形参){
函数体代码
return 返回值
}
2.匿名函数
function(a,b){
return v;
}
3.箭头函数
let f = function(v){
return V;
}
使用箭头函数写法后:
let f = v => v;
- 13.内置函数
固定语法: var 变量名 = new 内置对象名();
1.Date日期对象
2.JSON序列化对象
JSON.stringify() 序列化
JSON.parse() 反序列化
3.RegExp正则
let reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
- 14.js获取用户输入
1.普通数据 标签对象.value
2.文件数据 标签对像.files/files[0]
- 15.js类属性操作
针对于类属性的操作使用：
标签对象.classList
标签对象.classList.contains()
标签对象.classList.add()
标签对象.classList.remove()
标签对象.classList.toggle()
- 16.js样式操作
标签对象.style.标签样式属性名
backgroundColor
backgroundImage
- 17.js事件绑定
# 事件就是给html标签，绑定了一些额外的功能操作
1.绑定事件的方式第一种
直接在js内直接写好
2.绑定事件的方式第二种
先查找标签,批量绑定
3.事件中的关键字this
this指代的是当前被操作的标签对象(也就是按钮的标签)
4.待文档加载完毕再执行的一些代码
当页面上的元素绑定事件时，必须等到文档加载完毕，因为不存在的元素无法绑定事件
window.onload = function () {
页面js代码
5.js事件案例
1.校验用户输入
2.省市联动
BOM与DOM
jQery
- 1.关于jQery
1.jQuery是一个兼容多浏览器的JS库,它可以极大的简化JS编程
2.jQuery的宗旨是write less， do more
意思是:让我们写的代码更少，但是能处理的事情更多
3.使用jQuery需要先导入其js文件(本质就是js文件)
本地导入 下载文件放入项目文件夹下
网络CDN服务 通过联网访问服务就可以导入
(可以使用bootcdn网站去导入，可以提高加载速度)
- 2.jQuery类库
1.在jQuery语法中$就代表的jQuery
2.语法: $(selector).action()
3.jQuery选择器查找标签之后的结果与js的区别
1.如果使用索引取值，那么都是标签对象
2.标签对象想转换成jQuery提供的方法的要使用$()
- 3.jQery操作
1.基本筛选器
:first
:last
:eq(index)
:even
:odd
:gt(index)
:lt(index)
:not(元素选择器)
:has(元素选择器)
2.属性选择器
[attribute]
[attribute=value]
[attribute!=value]
3.表单筛选器
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
- 4.jQery表单对象属性
:enabled
:disabled
:checked
:selected
筛选器方法
1.同级别下方
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
2.同级别上方
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
3.父标签查找
$("#id").parent()
$("#id").parents()
$("#id").parentsUntil()
4.子标签或兄弟标签
$("#id").children();
$("#id").siblings();
5.链式操作
$('#d1').parent().parent().parent()
$('#d1').parent().parent().next().parents()
"""对象在调用完一个方法之后返回的还是一个对象"""
jQuery操作标签
- class操作
语法结构: $("#i1").addClass();
addClass() 添加指定的CSS类名
removeClass() 移除指定的CSS类名
hasClass() 判断样式存不存在
toggleClass() 切换CSS类名，如果有就移除，如果没有就添加
- 样式操作
语法结构: jQuery对象.css('属性名','属性值');
- 位置操作
offset() 获取匹配元素在当前窗口的相对偏移或设置元素位置
position() 获取匹配元素相对父元素的偏移
scrollTop() 获取匹配元素相对滚动条顶部的偏移
scrollLeft() 获取匹配元素相对滚动条左侧的偏移
- 文本值操作
html() 取得第一个匹配元素的html内容
html(val) 设置所有匹配元素的html内容
text() 取得所有匹配元素的内容
text(val) 设置所有匹配元素的内容
val() 取得第一个匹配元素的当前值
val(val) 设置所有匹配元素的值
val([val1, val2]) 设置多选的checkbox、多选select的值
- 属性操作
1.用于ID等或自定义属性：
attr(attrName) 返回第一个匹配元素的属性值
attr(attrName, attrValue) 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2}) 为所有匹配元素设置多个属性值
removeAttr() 从每一个匹配的元素中删除一个属性
2.用于checkbox和radio
prop() 获取属性
removeProp() 移除属性
- attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性
文档处理操作
1. 添加到指定元素内部的后面
$(A).append(B)
2. 添加到指定元素内部的前面
$(A).prepend(B)
3. 添加到指定元素外部的后面
$(A).after(B)
$(A).insertAfter(B)
4. 添加到指定元素外部的前面
$(A).before(B)
$(A).insertBefore(B)
5. 移除和清空元素
remove()
empty()
事件
jQuery绑定事件
标签对象.on事件名 = function(){事件代码}
btnEle.onclick = function(){alert(123)}
2.jQuery绑定事件
方式1
jQuery对象.事件名(function(){事件代码})
$btnEle.click(function(){alter(123)})
方式2
jQuery对象.on('事件名',function(){事件代码})
$btnEle.on('click',function(){alter(123)})
"""
1.克隆事件clone
2.实时监听input输入值变化
"""
组织后续事件
能够触发form表单提交数据动作的标签有两个
1. <input type="submit">
2. <button></button>
两种阻止后续事件方式
return false; // 常见阻止表单提交等
e.preventDefault();
事件冒泡
事件委托
创建标签的两种方式
JS document.createElement()
jQuery $('<标签名>')
