HTML 超文本标记语言:
扩展名为.html 或者.htm
空格:&npsp
<hr/ > 横线
<pre>:原生标签,把copy过来的内容原封不动的粘过来
字体标签<font>文字</font>
<font>标签的属性:
color:字体的颜色
size:字体的大小
face: 字体
标题标签<h1>...<h6>
段落标签<p>
粗体标签<b>
斜体标签<i>
下划线标签<u>
居中显示<center>
图片标签<img>属性:
src: 图片的来源路径
width: 图片的宽度
height: 图片的高度
alt:图片找不到显示的内容
图片引入的路径问题?
路径:相对路径
同一路径可以直接写文件名或 ./ 文件名
上一级目录: ../
列表标签有序列表<ol>
<li></li>
</ol>
type属性 :
1 数字类型
a 英文类型
i 罗马字符
start : 从哪里开始,
无序列表<ul>
<li></li>
</ul>
type属性:
disc :实心点
circle:空心圆
square:方块
超链接标签<a>
属性:
href: 链接的路径
target: 打开的方式
_self : 在自身页面打开
_blank : 新打开一个窗口
_parent :
表格标签<table>
<tr> :行
<td> :列
属性:
width: 表格宽度
height:表格高度
border: 边框
aligh: 表格水平位置:
left :居左
right: 居右
center:居中
<td>的属性:
合并表格:
colspan = "列数"
rowspan = "行数"
HTML的表单标签<from>
常用属性:action属性: 提交的路径,如果没指定默认提交到当前页面
method属性: 请求的方式,GET和POST,默认是GET
常问的面试题:GET和POST属性的区别?
GET: 数据会显示到地址看重 , 提交是有大小限制的,请求行里边
POST: 数据不会显示到地址栏中 . 相对来说安全一点,提交没有大小限制,请求体中
<input type = "text">
:文本框 name : 表单名称,要有名字方便后台接收
value : 文本框的默认值
size : 设置文本框的长度
maxlength : 设定几个数字 就只能接收几个数字
readonly : 不允许输入的.只读的
<input type = "password">
:密码框 name : 表单名称,要有名字方便后台接收
value : 文本框的默认值
size : 设置文本框的长度
maxlength : 设定几个数字 就只能接收几个数字
<input type = "radio">
:单选按钮 name : 表单名称,要有名字方便后台接收
value :单选按钮的默认值
checked : 单选按钮默认被选中
<input type ="checkbox">
:复选框 name : 表单名称,要有名字方便后台接收
value :单选按钮的默认值
checked : 单选按钮默认被选中
<input type ="button">
:普通按钮<input type ="submit">
:提交按钮<input type ="reset">
:重置按钮<input type ="file">
:文件上传(可浏览上传)<input type ="hidden">
:隐藏字段<input type ="image">
:图片按钮<select>
: 下拉列表<textarea>
: 文本域HTML5扩展的表单标签(不是所有浏览器都支持)<input type = "email"> :只能输入邮箱形式的
<input type = "date"> :只能输入日期形式的
<input type = "number"> :只能输入数字
<input type = "color"> :颜色板 可以直接选
框架标签框架标签: frameset , 标签与body标签有冲突,有frameset就可以没有body
属性:
rows :横着切
cols : 竖着切
使用 frame 标签, frame代表切分的每个部分
特殊字符的标签:空格:  (要有分号)
小于号: <(要有分号)
大于号: >(要有分号)
HTML的块标签div : 默认占一行
span : 同一行显示
JAVASCRIPT:
JavaScriptECMAScript语法:区分大小写
弱变量类型的语言:(与java不同)如在java中 int i = 3; 先定义是啥类型
在js中 var i = 3; 根据后边赋的值决定前边是啥类型(全部用var声明变量)
分号可有可无,最好是写上
命名变量:第一个字母必须是以字母.下划线,或美元符号&
余下的字符可以是下划线,美元符号或任何字母或数字字符
数据类型:JS将数据类型分成两类:
原始类型:
undefined: 未定义类型
boolean: 布尔类型
number: 数字类型
string: 字符或字符串
null: 空
引用类型:
对象类型, 对象类型默认值是null
JS的运算符JS中的运算符和java中基本一致!!!
JS中有一个 === 全等于.全等于是类型和值都一致的情况下才为true.
JS的语句JS中的语句与JAVA的语句是一致的!!
JS的通常开发步骤JS 通常由一个事件触发:事件以on开头
触发一个函数,定义一个函数
定义函数:
function 函数名称(){
//函数体
}
匿名函数:
window.onload = function(){
//函数体
}
获得操作对象的控制权
修改要操作的对象的属性或值
常用事件: onclick 点击 ondblclick, 双击
JS引入方式1 页面内直接编写JS代码,JS代码需要使用 script标签
2 将JS 的代码编写到一个.js的文件中,在HTML中引入该JS代码即可
获得页面中的元素:
document.getElementById("");
BOM:浏览器对象模型设置定时的方法:
HTML 中的window对象
setInterval(): 每隔多少毫秒去执行某个表达式.
setInterval("xxx()" 500) :每隔500毫秒执行一次xxx
setTimeout():隔多少毫秒执行一次该表达式
清除定时:
clearlnterval()
clearTimeout()
alert(): 弹出框
confirm(): 弹出一个确认的窗口
prompy():弹出一个可输入的对话框
open(): 打开一个新的窗口
screenhistory 浏览器历史对象history.go(-1) :返回上一个页面
back(): 上一个
forword(): 下一个
go(): 去某个具体页面
Location:location.href = " [写路径] " 跳转
date:new Date().getTime(): 毫秒值/缓存
JS的输出document.getElementById(" ").innerHTML = "HTML的代码";
//document.write("");
JS的事件onfocus : 获得焦点
onblur : 失去焦点
onload:页面加载
onsubmit:表单提交
onchange: 下拉列表改变事件
键盘操作事件onkeydown: 键盘按下
onkeyup : 键盘抬起
onkeypress : 键盘按下或按住
鼠标操作事件onclick:单击事件
ondblclick: 双击事件
onmousemove: 鼠标移动时
onmouseout:鼠标从元素移开
onmouseover:鼠标移动到某元素上
onmousedown:鼠标按钮被按下
onmouseup:鼠标滚动时
onresize:窗口或框架被重新调整大小
onreset:重置按钮被点击
onselect:文本被选中
DOM的概述DOM: 文档对象模型
将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子
Document的常用操作整个html文档加载到内存中可以用document对象表示
获得元素:
document.getElementById(): 通过ID 获取元素(只能获取到一个元素)
document.getElementByName(): 通过name属性获取元素(集合)
document.getElementByTaName(): 通过标签名获取元素
创建元素:
document.createElement() : 创建元素
document.creatrTextNode(): 创建文本
添加节点
element.appendChild(): 在最后添加一个节点
element.insertBefore(): 在某个元素之前插入
删除节点
element.removeChild() : 删除元素
parseInt(): 转成整形
parseFloat():
编码和解码:
encodeURI(): 编码
encodeURLComponent(): 编码
decodeURI(): 解码
decodeURIComponent(); 解码
getTime(): 返回1970-1-1至今的毫秒数
eval函数: 将内容当成JS代码执行
var sss = "alert('aaaa')";
eval(sss);
CSS: 层叠样式表主要用于美化HTML
HTML 相当于网站的骨架 , CSS是对骨架进行美化
CSS的基本语法通常包含两个部分: 一个是选择器,一个声明
CSS的引入方式:行内样式: 直接在HTML的元素上使用style属性设置CSS
页面内的样式: 在HTML的 head 标签中使用 style 标签设置CSS
外部样式: 单独去定义一个.css的文件,在HTML中去引入.css文件 用 link
优先级关系: 就近原则
<link href = "(css文件的地址)"rel = "sytlesheet" type = "text/css">
CSS选择器元素选择器: 直接写标签名
(标签名称){
border : 1px solid blue;
width:40px;
height:45px;
}
ID选择器:
井号(ID名){
border: 2px; solid red;
}
类选择器:
.divClass{
border: 2px; solid yellow;
}
后代选择器:使用空格
CSS浮动使用float 属性可以完成div的浮动
float属性的取值:
float:right 右浮
float:left 左浮
none:默认值,元素不浮动,并会显示在其文本框出现的位置
inherit:
clear : 清除浮动
css的其他选择器属性选择器:
<style>
input[type = "text"] {
background-color = red;
}
</style>
后代选择器
div span查找的是所有div中的所有的span元素
子元素选择器:
div > span 找这个div 中的第一层及的span元素
并列选择器:
选择器,选择器{
}
CSS样式背景
文本
字体
列表
CSS中的盒子模型内边距: padding
单边内边距属性:
padding - top
padding - right
padding - bottom
padding - left
边框:border
外边距:margin
CSS中的定位position属性设置定位
relative: 相对定位
absolute : 绝对定位
fixed: 固定
使用另外两个属性: left top
显示和隐藏display:
block:显示
none:隐藏
inline:同一行
伪类a: link{color : # FF0000} 未访问的链接, 超链接还没被访问时候的样式
a:visited {color : #00FF00} 已访问的链接 ,已经被访问过的链接的样式
a: hover { color : # FF00FF} 鼠标移动到链接上时候的样式
a: active {color : # 0000FF} 选定的链接 (样式自己定义)
JQuery因为JQ效率高 所以我们使用JQ
JQ的所有的方法,必须只能是JQ的对象才能去调用
<script> 引入JQ
$ ===JQ
JQ方式:
$(function()){ });
$() : 帮助我们得到一个JQ对象
JQ的显示和隐藏show():显示
使用一:JQ对象 调用.show() 方法
使用二 : JQ对象.show("slow"); show, noemal,fast
使用三 : JQ对象.show(毫秒值);
使用四: JQ.show(毫秒值,function(){});
hide():隐藏
使用一:JQ对象 调用.show() 方法
使用二 : JQ对象.show("slow"); show, noemal,fast
使用三 : JQ对象.show(毫秒值);
使用四: JQ.show(毫秒值,function(){});
slideDown(): 向下滑动
使用一:JQ对象 调用.slideDown 方法
使用二 : JQ对象.slideDown("slow"); show, noemal,fast
使用三 : JQ对象.slideDown(毫秒值);
使用四: JQ.slideDown(毫秒值,function(){});
slideUp(): 向上滑动
使用一:JQ对象 调用.slideUp 方法
使用二 : JQ对象.slideUp("slow"); show, noemal,fast
使用三 : JQ对象.slideUp(毫秒值);
使用四: JQ.slideUp(毫秒值,function(){});
fadeOut(): 淡出
fadeIn() : 淡入
animate():自定义动画
toggle():单击切换函数
JQuery的选择器id 选择器
用法: $(" #id")
类选择器
用法: $(".类名")
元素选择器
用法: $("元素名称")
通配符选择器
用法: $("*")
并列选择器
用法: $("选择器,选择器,选择器")
层级选择器后代选择器:只要是属于他的后代都会找到 使用空格
子元素选择器 : 只找第一层的div 使用>
下一个元素: 查找下一个同辈元素 使用+
兄弟元素 使用波浪线
基本过滤选择器odd:
even:
prop: 为所有图像设置src和alt的值
JQ的遍历遍历的方式一:
$.each(object,function(i,n){ });
$(" ").each(function(i,n){ });
Val 函数:
直接调用可以获得Val的值,
属性:HTML代码/文本/值
HTML([val|fn]) :
text([val|fn]):
val([val|fn|arr]):
JQ的事件切换:toggle(): 单击事件的切换
hover(): 鼠标悬停的切换
事件处理:on/bind : ("事件一" "事件二") 中间用空格隔开 表示on/bind产生多个事件,事件做相同的事件
事件的委托:delegate:适用于当前或未来的元素(新元素)
栅格系统:Bootstrap提供了一套响应式,
使用 .row样式定义栅格的行