本帖最后由 小石姐姐 于 2017-11-20 14:44 编辑
WEB1
HTML: Hyper Text Markup Language 超文本标记语言; 不区分大小写
标签语言:通过一组标签的形式描述事物的一门语言;
超文本:比普通的文本更强大;
1.作用:制作页面(静态页面);
使用地方:做网页页面
2.使用:
HTML扩展名是.html或者.htm结尾
3.结构:
根标签<html></html>
<html>
<head>头部</head>
<title>标题</title>
<body>身体</body>
</html>
4.HTML字体标签:
<font>:字体标签
<font></font>
font属性: <标签 属性名="属性值" 属性名="属性值"></标签>
属性:color属性:字体颜色
英文单词设置:bleak,read,green
使用16进制
<br/>换行标签
fice属性:字体
size属性:字体大小
5.排版标签:
<h标题级别>:标题标签 <h1>一级标签</h1>
<p>:段落标签
<b>:字体加粗标签
<i>:斜体标签
<u>:下划线
<hr>:横线
<cunter>:居中标签(已过时)
标签的嵌套:<b><i></i></b>合理嵌套
<pre>原生标签,
* 6.图片标签:<img>
属性:1.src: 图片的来源,路径(相对路径)
路径:
在当前目录:直接文件名或./文件名
上级目录:../文件名
上两级目录:../../文件名 以此类推
下级目录:上级文件夹/文件名
2.width:宽度,默认px(像素点)
3.height:图片的高度
4.alt:图片找不到时显示的内容
* 7.列表标签:
有序列表:
<ol>
<li>显示内容</li>
</ol>
属性:type
start:从几开始
无序列表:
<ul>
<li>显示内容</li>
</ul>
<ul style="list-style:none">去除圆点
<ul>属性:disc实心点
circle空心圆
square方块
8.超链接标签:<a>
属性:
href:超链接,要跳转到的路径
相对路径:当前页面与跳转页面的相对路径
target:打开方式
_self:自身页面打开,默认的方式
_blank:在新窗口打开
_parent
* 9.表格标签:<table>
<tr>行
<tr>
<td><td>第一列
<td><td>第二列
</tr>
表格属性:
Width:宽度
Height:高度
Cender:
border:边框
align:表格水平位置
background:背景图片
<td>的属性
colspan:"列数"
rowspan:"行数"
*** 10.表单标签:<form>
属性:
action:提交的路径,默认提交到当前列面
method:请求的方式,默认的get
get方式和post的区别:
get:数据会显示到地址栏中,提交有大小限制,
post:数据不会显示到地址栏中,提交没有大小限制
表单元素:
<input type="text">:文本框
常用属性:
name:表单元素的名称,必须有name属性,后台才能接收数据
value:文本框默认值
size:文本框的长度
maxlength:文本框最大输入长度
readonly:只读文本框
placeholder:提示
<input type="password">密码框
常用属性:
name:表单元素的名称,必须有name属性,后台才能接收数据
value:密码框文本框默认值
size:密码框的长度
maxlength:密码框最大输入长度
<input type="radio">单选按钮
常用属性:
name:表单元素的名称,必须有name属性,后台才能接收数据,一组的name值相同
value:单选框文本框默认值,必须有,否则后台接受不到,一组的name值相同,与外面定义值一样
checked:单选按钮默认被选中.
<input type="CheckBox">复选按钮
常用属性:
name:复单元素的名称,必须有name属性,后台才能接收数据
value:复选框文本框默认值,必须有,否则后台接受不到,一组的name值相同,与外面定义值一样
checked:复选按钮默认被选中.
<input type="button">普通按钮,没有功能,可以设置功能
<input type="submit">提交按钮
<input type="file">文件上传的表单项
<input type="hidden">隐藏字段
<input type="image">图片按钮
<input type="reset">重置按钮
<select> 下拉列表
常用属性:
option:下拉区域选项,必须有value值
selected:默认选中
<textarea>文本框
常用属性:
cols : 文本占的行数
rows : 文本占的列数
11.html5特有的功能,但不是所有的浏览器都支持
<input type="email">只能输入数字
<input type="date">
<input type="number">
快速建表table> br*n >td*n n为数字,再按Tab键
WEB2
HTML 开源中国 网页字体最小是12px,一般取偶不取奇
1.常用标签 <div> <span> <ul> <a> <i>
框架标签:<frameset>,标签与body冲突,不能同时使用
属性:
rows:行
cols:列
(截图)
特殊字符标签:
空格:
< :<
> :>
常用标签:
<div>块标签:块级元素,写两行自动换行,不独占一行,可以修改高度和长度
更加灵活并且解析加载速度快
<span>块标签:行内元素,默认同一行,不可以修改修改高度和长度
块级元素转行内元素添加属性display:inline;
行内元素转块级元素添加属性display:block;
行内块级元素:不独立占一行,并且可以修改高度和宽度 img display:inline-block;
(截图)
<ul>无序列表 :有默认边框,需要手动清除,用margin:0;
(截图)
<a>超链接
<i>倾斜,也可能是做个图片
div居中:
margin: 0 auto;
calc(% - px) div的百分比与px的计算,注意减号两边必须有空格
CSS:层叠样式表,任何网站都可以用CSS
(截图)
语法:包含两个部分,一个选择器,一个声明
选择器{属性:属性值;属性:属性值...}
行内样式:
直接在HTML的元素上使用style属性设置CSS,优先行内模式(只有一个标签使用一个样式)
页面样式:
在HTML的<head>内使用<style>标题设置CSS.再则页面模式(同一个HTML文件中使用同一
个样式)
CSS的引入方式;创建CSS文件,再html中引入该CSS文件(多个HTML文件使用同一个样式)
(截图)
浮动:
float 为了让某些标签横着显示
(截图)
清空浮动
(截图)
在CSS中宽度可以继承,高度不可以继承
注意:浮动后的宽度不可以继承宽度,已经脱离HTML
alt shift+a:同时操作多行代码
css选择器:
元素(标签)选择器:通过元素找到所有要改的元素
border:四周都包含
border 下(英文):只包含下面
(截图)
ID选择器:
#id值
(截图)
类选择器:
.divClass
(截图)
属性选择器: 标签名[属性名='属性值']{}
(截图)
后代(子孙)选择器: div a{}
div spad查找的是所有div中的所有的span元素
(截图)
子元素选择器: div > a{}
(截图)
并列选择器:
选择器,选择器{
}
CSS样式
背景:
(截图)
文本:
(截图)
字体:
(截图)
style:字体(斜体/加粗/正常) weight:粗细 size:大小 family:艺术字
列表:
(截图)
盒模型:
(截图)
css 的内边距(盒子与泡沫的距离):padding
(截图)
宽度计算方式 padding-left + padding-right + border-left + border-right + content;
(截图)
css 的外边距(盒子与盒子之间距离):marin
(截图)
margin-left 与左边框的距离
(截图)
css边框:border : 1px solid black;
css 定位:
position属性设置定位
relative;相对定位
absolute:绝对定位,相对于body
使用时只需记住:子绝父相
(截图)
超链接的伪类:顺序不能乱
WEB3
(截图)
JavaScript是运行在浏览器的脚本语言
(截图)
用途:页面更丰富,是页面动起来
语法:
1.区分大小写
2.弱变量类语言:(与java不同,变量全部用var,没有具体类型,根据 = 后面的值确定类型)
变量名:局部变量(定义在方法内部的变量)我们以_开头
3.分号可有可无(建议加,增强阅读性)
4.变量的命名要合法(与Java类似)
数据类型:
原始类型:
undefined:未定义赋值
boolean:布尔类型
number:数字类型
string:字符或字符串
null:空
引用类型:
对象类型:默认值是null
(截图)
运算符:
(截图)
语句:
跟Java的语句一致!
方法:
(截图)
(截图)
JS的通常开发步骤
1.由一个事件触发
2.触发一个函数,定义一个函数
3.获得操作对对象的控制权
4.修改要操作的对象的属性或值
常用事件:onclick 单击
ondblclick 双击
onmouseenter 鼠标悬停
onmouseleave(鼠标离开)
onsubmit(提交事件)
onload :在HTML文本加载完毕后请求图片资源,图片请求回来之后才执行onload事件
JS的引入方式:
1.页面内直接编写JS代码,JS代码需要使用
(截图)
2.
(截图)
onsubmit(提交事件):必须有返回值否则默认true
(截图)
JS校验正则表达式:
(截图)
!!"" :判断字符串是否为空
空值: 0 , null , underfimed
(截图)
HTML 的window对象
setInterval(): 每隔多少毫秒
()内""为JS代码
设置定时:
(截图)
清除定时:
(截图)
轮播图的实现:
(截图)
使用js实现广告的定时弹出定时隐藏
(截图)
站位的意思是后面的元素不向前移
position: fixed:不管浏览器滚动条怎么动,始终悬浮不动的属性,定位符
(截图)
小手:
(截图)
默认选中:
(截图)
JS单词汇总:
(截图)
web4
想要深入研究可看:javaS...权威指南
(截图)
JS事件:
onfocus:获得焦点
onblur:失去焦点
onsubmit:提交的时候
onchange:下拉列表的改变事件
ondblclick:双击某个元素的事件
on
(截图)
--------------------------------------------------------------------------------
(截图)
(截图)
(截图)
(截图)
(截图)
thead:table表格的头
tbody:table表格的身
(截图)
(截图)
--------------------------------------------------------------------------------
表格的复选框的全选,全不选效果
(截图)
(截图)
--------------------------------------------------------------------------------
DOM
(截图)
整个树状结构HTML文档 称之为document
文本用Text表示
(截图)
(截图)
(截图)
DOM的使用:
知道document. element. attribute 中的属性方法
(截图)
--------------------------------------------------------------------------------
省市联动
(截图)
(截图)
Date属性:
避免本地缓存,接收浏览器最新数据;
(截图)
把字符串转int float
(截图)
编码和解码
(截图)
evel函数
(截图)
NaN == NaN 结果为float 唯一自己不等于自己的变量;
用isNaN() 判断是否为NaN
(截图)
维数组:JS里所有对象都是维数组
(截图)
红框向下top,绿框也会向下走,需要加pssotion:absolute
(截图)
事件冒泡:
event 那一行代码是去除事件冒泡
(截图)
WEB5
没有技术实现不了的东西,只要你给我充足的时间
window.onload 与 JQuery方式 的区别
(截图)
JS 与 JQuery 获取对象演示:
(截图)
将JQuery对象转JS对象(与上图相接):
(截图)
将JS对象转JQuery对象(与上图相接):
(截图)
JQuery的入口函数: DOM树加载完之后就加载
(截图)
JQuery与window.onload的加载顺序( 下图从左到右)
(截图)
JQuery对象,实际上是一个DOM,我们操作JQuery对象,实际上是操作里面的每一个元素,只有被$()包裹起来的才是JQ对象
(截图)
可以当数组用,也可以当集合用
(截图)
JQ 的现实和隐藏
slow(慢显示),normal(一般速度显示),fast(快显示)
show(传入毫秒值) X秒钟慢慢的显示 (执行过程)
(截图)
了解:(截图)
了解:(截图)
使用JQUERY完成定时弹广告
(截图)
动画: $()里的内容用 , 隔开(例width , heigth)
(截图)
opacity:透明度
(截图)
单线程 与 异步线程
setTimeout 为异步线程 执行时先放异步线程池里,先执行下一个语句,大约一秒钟后再执行setTimeout里内容
单线程是等setTimeout 内容显示完后在执行下一条语句
(截图)
JQuery中事件名没有on
JQ基本选择器:()
● 基本选择器
○ id选择器
■ 用法 $("#id")
○ 类选择器
■ 用法 $(".类名")
○ 元素选择器
■ 用法 $("元素名称")
○ 通配符选择器
■ 用法 $(" * ")
○ 并列选择器
■ 用法 $("选择器, 选择器, 选择器")
层级选择器:
(截图)
基本过滤选择器:
*** :eq() 选取 (前面不加空格 )
:even 偶数选择器
:odd 奇数选择器
(截图)
属性选择器:
input[ type=[ ' ' ]
(截图)
表单选择器:
:input表单
:text文本
:checked选中
(截图)
快速建表:
(截图)
--------------------------------------------------------------------------------
隔行换色
没有设置背景色时可以用CSS设置背景色,已经设置好背景色要用选择器修改
(截图)
*** 为表格绑定一个事件格式
(截图)
--------------------------------------------------------------------------------
使用JS 完成复选框全选全不选
*****开发只用on方式
$(function(){
$("#selectAll").on('click',function(){ //为id选择器选中的对象添加个事件,function 1 里为处理函数
var _this = $(this); //把DOM对象转为JQ对象
$("input[name='chick']").prop('checked',_this.prop('checked')); //通过表2 2 单选择器获取所有name为chick对象,利用prop修改值
})
})
name一致是因为定义同一个复选框
prop:非自定义属性
attr:自定义属性
(截图)
--------------------------------------------------------------------------------
利用JQ完成省市联动
JQ中DOM操作:
append():添加内容 (当append添加已有元素时,append就变成移动)
html():覆盖内容
remove:删除元素
(截图)
A.append(B) = B.appendTo(A) 可以互换
(截图)
遍历:
$().each(function(index,element){
//遍历内容
}; //index为索引,element为DOM对象
(截图)
省市联动:
(截图)
事件委派(给动态的对象添加事件):
(截图)
attr:自定义
val:只是val值
prop:所有软件定义值
WEB6
代码:
(截图)
(截图)
--------------------------------------------------------------------------------
JQ事件切换(晚补图)
JQ事件切换:
toggle(): 单击事件切换
hover(): 鼠标悬停切换
(截图)
--------------------------------------------------------------------------------
***JQ表单校验
事件查找:
find():里面传选择器
parent():
children():
(截图)
事件处理:
trigger:调用别的事件
了解:triggerHandler(type,[data]) 与 trigger 区别:
trigger:支持事件冒泡调用完后会触发默认
(截图)
$('button').trigger('click') == $('button').('click')
步骤分析:
(截图)
步骤1
(截图)
步骤2
(截图)
--------------------------------------------------------------------------------
Bootstrap
为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。
(截图)
引入:
(截图)
Bootstrap的全局CSS
(截图)
栅格系统
(截图)
td{
cursor:pointer;
}
指针变小手
JQ全选全不选
|
|
收藏
淘帖
踩
