font 中间文字,前面的里面写颜色,字体大小,字体型号(color,size,face)
< h1 >一直到< h6 >:标题标签
< hr >:横线
< p >:段落标签
< b >:字体加粗
< i >:斜体
< u >:加下划线
< center >:居中
& nbsp; 可以加在文字中,是空格
< pre > :文字原封不动的显示【原生标签】
图片
< img >:图片
src :图片的来源【路径】
width :图片的宽度【图片后面设置】
height :图片的高度【图片后面设置】
alt > :图片找不到显示的内容
./是同级路径 ../上一级路径 ../../更上一级路径
img/上一级路径
有序列表
有序标签【type 类型 start:默认[1,2,3..] 数字类型[1],英文类型[a]罗马类型】【可以写大写】
< ol >
< li>< /li >
< /ol >
start属性:从哪儿开始
无序列表
无序列表【type:前面显示的实心点[disc] 空心圆[circle]方块[square]】
< ul >
< li>< /li >
< /ul >
超链接
target
< a >:超链接【属性:href 链接的路径,parent自身一小块区域打开】
href:超链接跳转的地址
target:打开的方式
_self :在自身页面打开
_blank :新打开一个窗口
表格标签
< table >
< tr >这是几行
< td>< /td > :这是几列
< /tr >
< /table >
cellspacing:表格空隙
属性: width :表格宽度
Height:表格高度
Border:边框
Align:表格水平位置:
left:左
center:居中
right:右
colspan:合并列
rowspan:合并行
表单标签
表单标签 :< form >
常用属性:
action属性:提交的路径,默认提交到当前页面
method属性:请求的方式。GET和POST。默认GET
【面试题】GET方式和POST方式区别?【不仅仅只有这两个,有很多种】
GET:数据会显示到地址栏中【不安全】有大小限制
POST:数据不会显示到地址栏中【】
表单元素:< input type = "text" > :文本框
常用属性: name :表单元素的名称,必须有
value:文本框的默认值
size:文本框的长度
maxlength:文本框输入的最大长度
readonly:只读文本框
< inputtype = "password" > :密码框
常用属性: name :密码框的名称,必须有
value:密码框的默认值
size:密码框的长度
maxlength:密码框输入的最大长度
readonly:只读文本框
< inputtype = "radio" > :单选按钮
name :密码框的名称,必须有
、 readonly:只读文本框
checked:单选按钮默认选择
< inputtype = "checkbox" > :多选按钮
checked:多选按钮默认选择
< inputtype = "button" > :普通按钮,没有任何功能的按钮
< inputtype = "submit" > :提交按钮
< inputtype = "reset" > :重置按钮
< inputtype = "file" > :文件上传的表单项
< inputtype = "hidden" > :隐藏字段
< inputtype = "image" > :图片按钮
< select> :下拉列表
< option>:下拉列表里的内容
selected:谁是默认的
< textarea>:文本域
cols:列
rows:行
单选,多选,下拉列表,value值必须写的
HTML框架标签框架标签:< frameset >,标签与body标签是冲突的,有它没它,
<frame >:切完之后的页面【 *代表切完之后剩下的部分】
frame有名字,name,,在分类的打开方式上,就可以写相对的名字了,就会在这个name的这个里面,显示内容,只能框架使用。
属性:
rows:横切
cols:竖切
HTML特殊字符的标签空格:  ;
小于号:< ;
大于号:> ;
块标记< div> :分行显示【默认自己占一行】
< span> :同一行显示
CSS【层叠样式表】CSS基本语法
包括两个重要部分:选择器,一个声明,或者多个声明
选择器:{ 属性:属性值;属性:属性值;..... }
CSS的引入方式第一种行内样式:直接在HTML的元素上使用style属性设置CSS
例题:< h1 style=“颜色,字体。等等 ;”>内容< /h1 >
第二种页面内样式:在HTML中的< head > 标签中使用< style >标签设置CSS
例题:
<style>
h1{颜色;字体;等等;。。。;}
</style>
第三种外部样式【单独定义一个.CSS文件,在HTML中引入这个文件】:
在< head >标签中用< link href=" " >,引入CSS
CSS里面例题:
h1{ 颜色;字体;等等。。。 }
CSS选择器元素选择器border:边框
solid:实现【可以设置边框颜色】
< style > div{ border:1px solid blue; width:40px; height:45px; } < /style >
ID选择器在< body >里面设置< div > 里面写 一个ID名字【只能写一个ID】
< divid="d1" >内容< /div >
#d1{ border:2px solid red;}
类选择器【写一个class名字】< divclass="divClass">内容< /div >
class里面可以写多个选择器,用空格分开【叠加使用】
.divClass{ border:2px solid red;}
后代选择器#
he em{ border:2px solid red;}
属性选择器<style> input[type="text"]{ border:2px solid red; } </style>
子元素选择器浮动使用float属性可以完成div的浮动
float属性的取值left:向左浮动
right:向右浮动
none:不动
清除浮动:使用clear属性
在< head >里面写 比如在div里面写ID,就对ID进行编辑浮动
JavaScript组成:ECMAScript,DOM,BOM
其他的脚本语言
JavaScript,ActionScript,Flex
区分大小写和Java一样
【变量、函数名、运算符】
弱变量类型语言都用var声明
例题: var i = 3;
和Java不一样
在js中,根据后面赋的值决定你前面是啥类型【全部用var定义】
命名变量第一个字母必须是字母、下划线、或美元符号
余下的字符可以是下划线、美元符号或任意字母或数字
数据类型原始类型undefined :未定义类型
boolean :布尔类型
number :数字类型
string :字符或字符串
null :空
引用类型 对象类型,对象类型默认值是null
运算符=== : 全等 【是指类型和值都一致的情况下才为true】
【其他和Java一样】
语句里面要写var
for(var ;后面一样){}
输出获得页面的元素
document .getElementById(“ ”);
定义函数第一种function 函数名(){
//函数体
}
第二种【匿名】window .onload = function(){
}
Java的通常开发步骤JS通常都有一个事件触发:【要有是个事件】
定义一个函数,触发一个函数:
找到它的元素
修改要操作的对象的属性或值。
常用事件JS引入方式
第一种
页面内直接编写JS代码,JS代码需要使用< script >< /script >包含起来
第二种
将JS代码编写到一个 .js 的文件中,在HTML中引入该 JS 代码即可
正则校验正则表达式
string 对象中的match方法【str.match(“正则表达式”)】
一个正则对象中的test方法【正则.test(‘"字符串")】
图片滚动设置定时【HTML】中的【window对象】
在head function setTime(){
Windows.定时的方法(“alert(“ ”)”,5000);
}
在< bodymd-line">()" >
setInterval():每隔多少毫秒就执行某个表达式【一直循环】
例题 setInterval(“change()”,5000)
setTimeout():每隔多少毫秒就执行一次表达式【一次】
例题 setTimeout(“change()”,5000)
清除定时clearInterval:
clearTimeout:
BOMalert():弹出对话框
confirm():弹出一个确认窗口
prompt():弹出一个可输入的对话框
open():打开一个新的窗口【网页】
setInterval():每隔多少毫秒就执行某个表达式【一直循环】
setTimeout():每隔多少毫秒就执行一次表达式【一次】
clearInterval: 清除
clearTimeout:清除
Screen获得屏幕的信息
History浏览器历史对象
back():上一个历史记录
forward():下一个历史记录
history.go(-1);:返回上一个历史记录
Location包含路径【】信息的对象
Location.href="":可以利用它跳转网页
JS输出document.getElementById( "" ).innerHTML=“HTML的代码”
document.write(”“);
JS事件onfocus :获得焦点
onblur :失去焦点
onsubmit :表单提交
onabort :图像的加载被中断
onkeyup :键盘按键被松开
表格隔行换色onload事件,进来就加载了表格
获得表格元素的控制器
document。getEByid(表格id名字)
表格id名字. rows. length;
function tabcolor(){ var tab1=document.getElementById("tab1"); var count =tab1.rows.length; for (var i=1;i<=count;i++) { if(i % 2 ==0){ /*偶数*/ tab1.rows.style.backgroundColor="red"; }else{ /*奇数*/ }
多选框的全选和全不选DOM的概述文档对象模型,将HTML 的文档加载到内存,形成一个树形结构Node【代表下面的全部】
document【整个HTML文档】,element【元素节点】,attribute【属性节点】Text【文本节点】中的属性和方法
document可以控制整个文本的全部节点
document和element的常用方法获得元素document .getElementById(): 通过ID获得元素
document .getElementsByName():通过Name获得元素
document .getElementByTagName():通过标签名获得元素
创建元素document .createElement(” “):创建元素
document .createTest Node():创建文本
添加节点element .appendChild(): 在最后添加一个节点
element .insertBefore():在指定元素之前插入
element .removeChild():删除元素
前面的element要换成你要找的那个元素比如:
document .getElementById(" " ) . insertBefore.【前面就是获取某个元素节点,获取某个元素就是代表了Element】
JS内置对象date对象【日期】getTime() :返回1970-1-1日到至今的毫秒数
全局函数parseInt():
例题: parseInt(” 11 “);直接把字符串11,转成数字11
parseFloat():
例题:parseFloat(” 32.09 “);
编码和解码编码encodeURI()
encodeURIComponent()
解码decodeURI()
decodeURIComponent()
eval函数将一段内容当初是JS的代码执行
JSON数据后台会往前台发数据,都是字符串,然后就可以把返回值用eval括起来
事件最重要,做一个要先确定事件,然后触发
JQuery[$]用< script src="">< script >引入Jquery的包
JQuery是在DOM绘制树形图完成的时候就执行
JS是在页面加载完毕以后才执行
简单写法$(function());
复杂写法$((document).ready(function());
JS转成JQuery获得一个元素
var img1=document.getElementById(“img1”);
$(img1)
JQ的效果操作show();显示JQ对象.show();
JQ对象.show(“show”);
JQ对象.show(毫秒值);
JQ对象.show(毫秒值,function(){});
hide();隐藏JQ对象.hide();
JQ对象.hide(“show”);
JQ对象.hide(毫秒值);
JQ对象.hide(毫秒值,function(){});
slidDown();向下滑动JQ对象.slidDown();
JQ对象.slidDown(“show”);
JQ对象.slidDown(毫秒值);
JQ对象.slidDown(毫秒值,function(){});
slidup();向上滑动JQ对象.slidup();
JQ对象.slidup(“show”);
JQ对象.slidup(毫秒值);
JQ对象.slidup(毫秒值,function(){});
fadeIn();淡入JQ对象.fadeIn();
JQ对象.fadeIn(“show”);
JQ对象.fadeIn(毫秒值);
JQ对象.fadeIn(毫秒值,function(){});
fadeOut();淡出JQ对象.fadeOut();
JQ对象.fadeOut(“show”);
JQ对象.fadeOut(毫秒值);
JQ对象.fadeOut(毫秒值,function(){});
自定义动画animate():自定义动画
JQuery的选择器id选择器$(" #id")
类选择器$(".类名")
元素选择器$("元素名称")
通配符选择器$("*")
并列选择器$("选择器,选择器,选择器")
层级选择器后代选择器【使用空格】子元素选择器【使用>】下一个同辈元素【使用+】兄弟元素【使用波浪线】基本过滤选择器【都用冒号链接前面的元素,比如div:first】
first:第一个元素
last:最后一个元素
odd:奇数元素
even:偶数元素
内容选择器contains(text):指定内容的元素
属性选择器$("div [ telete='aaa' ] ") 有id属性的div,自定义的也行
[属性名称=属性的值]
attr :获得属性的值
attr .(" a( href , 修改后的) ")
prop(nlplk, vlf ): 获得元素的属性,
prop.(" a( href , 修改后的) ")
表单选择器.addCkass(odd );
JQuery的DOM操作常用方法
append ( ); 在已有的基础上添加
appendTo () ; 将某个元素添加到另一个元素后面
remove ( ); 将某个元素移除
JQuery的遍历each (callback );
第一种
$ . each ( 要遍历的对象, function ( i , n ){
} );
第二种
$ ( 要遍历的对象 ) . each ( function ( i , n ){
} );
i 是0,1,2,3..... n是二维数组里面的值,还是数组,一维数组
JQ的对象 . html ( "< option >--请选择--< /option >" )
val : 是获得文本框,密码框,文本域等等的value值,里面不写,就是获取你输入的值,
text : 不写,是获取文本的值,写了,是替换原先的值
html : 不写,是获取代码,写了,是覆盖代码
empty :删除别人,留下自己的标签 [清空]
remove :删除自己,不留标签
prop(nlplk, vlf ): 获得元素的属性,
prop.(" a( href , 修改后的) ")
textarea :
JQ的事件切换toggle ( ): 单击事件的切换
hover ( ) :鼠标悬停的切换
选择器 : hover{ background-color:red;}伪类改变样式,只能改变样式CSS的
需要别的业务逻辑的时候,就需要JQ的
JQ表单校验JQuery的查找元素find ( ) :
parent ( ) :
children () :
bind ( ) :
delegate () : 未来创建的元素[事件委派]
响应式页面. col - lg- n 大桌面显示器
. col - md- n 中等屏幕
. col - sm-n 小屏幕[平板]
. col - xs-n 超小屏幕[手机]