Html
HTML的全称是Hyper Text Mark-up Language,超文本标记语言。
1.超文本:页面内可以包含图片、链接,甚至音乐、程序等非文字元素。
2.标记:与之相对是的编译型语言,标记型语音无需编译,直接可以被解析展示。
特点
可以设置文本的格式,比如
可以创建列表标题、字号、文本颜色、段落等等
可以插入图像和媒体
可以建立表格
超链接,可以使用鼠标点击超链接来实现页面之间的跳转
标签
标签和内容构建出HTML文档,注意每一个标签都需要闭合。
<标签名>内容</标签名> (围堵标记)
<标签名/> (自闭合标签)
标签名不区分大小写,建议都用小写。
HTML中不支持空格,回车,制表符,它们都会被解析成一个空白字符。
属性
属性,就是用来控制我们的内容(图像、文本等的)如何的显示。
格式
<标签 属性1='属性值' 属性2='属性值'>内容</标签>
注释
<!-- 注释内容-->
基本结构
<html> :HTML文档的文档标记,也称为HTML开始标记
<head> :HTML文件头标记,也称为HTML头信息开始标记
<meta></meta> :页面的元信息(meta-information)
<title></title> :HTML文件标题标记
</head>
<body> :HTML文档的主体标记
</body>
</html>
head,title,meta ,body标签
head:用来包含文件的基本信息,比如网页的标题、关键字。
在<head></head>内可以放<title></title>、<meta></meta>、<style></style>等等标记
注意:在<head></head>标记内的内容不会在浏览器中显示
title:显示在浏览器的窗口的左上角的标题
meta:页面的元信息(meta-information)
常见的属性:author,keywords,description
注意:meta标记必须放在head元素里面
body:HTML文档的主体标记,<body>...</body>是网页的主体部分,在此标记之间可以包含如<p></p>、<h1></h1>、<br/>、<hr/>等等标记,正是由这些内容组成了我们所看见的网页
文本标签
<hn>:标题标记,n的范围1~6,不同级别对应显示大小不同的标题,h1最大
<font>字体设置标记,三个常用属性size,color,face(字体)
<b>:粗字体标记
<i>:斜字体标记
<sub>:文字下标字体标记
<sup>:文字上标字体标记
<tt>:打印机字体标记
<cite>:引用方式的字体,通常是斜体
<em>:表示强调,通常显示为斜体字
<strong>:表示强调,通常显示为粗体字
<small>:小型字体标记
<big>:大型字体标记
<u>:下划线字体标记
格式标签
<br>:强制换行标记,让后面的文字、图片、表格等等,显示在下一行
<p>:换段落标记,由于多个空格和回车在HTML中会被等效为一个空格,HTML要换段落用<p>
<center>:居中对齐标记,让段落或者是文字相对于父标记居中显示
<pre>:预格式化标记
<li>:列表项目标记,配合<ul>和<ol>使用,可以嵌套使用
<ul>:无序列表标记
<ol>:有序列表标记,属性:type="1/A/a/I/i",value="指定序列数字起始值"
<hr>:水平分割线标记
<dl>:定义型列表,配合<dt><dd>使用
<div>:分区显示标记,也称之为层标记
<img>图片标签
常用属性:
src:指定我们要加载的图片的路径和图片的名称以及图片格式
width:指定图片的宽度,单位px、em、cm、mm
height:指定图片的高度,单位px、em、cm、mm
border:指定图标的边框宽度,单位px、em、cm、mm
alt:三个作用:
1.当网页上的图片被加载完成后,鼠标移动到上面去,会显示这个图片指定的属性文字
2.如果图像没有下载或者加载失败,会用文字来代替图像显示
3.搜索引擎可以通过这个属性的文字来抓取图片
注意:
<img>为单标记,不需要使用</img>闭合
在加载图像文件的时候,文件的路径或者文件名文件格式错误,将无法加载图片
<a>超链接标签
<a href="" target="打开方式" name="页面锚点名称" >链接文字或者图片</a>
常用属性:
href:链接的地址,链接的地址可以是一个网页,也可以是一个视频、图片、音乐等等
target:定义超链接的打开方式
_blank:在一个新的窗口中打开链接
_seif(默认值):在当前窗口中打开链接
_parent/_top:在父窗口/顶层窗口中打开页面(框架中使用较多)
name:指定页面的锚点名称(访问定义好的锚点,连接需要加 )
可以包围在Img标签外部,让img有链接作用
<table>表格标签
表格使用结构
<table> :表格
<caption></caption> :表名称
<tr> :表格的一行
<th></th><th></th> :表格的两个单元格,th表示列名单元格
</tr>
<tr>
<td></td><td></td> :表格的两个单元格,th表示普通单元格
</tr>
<table>
属性:
width:表示表格的宽度,他的值可以是像素(px)也可以是父级元素的百分百(%)
height:表示表格的高度,他的值可以是像素(px)也可以是父级元素的百分百(%)
border:表示表格外边框的宽度
align:表格的显示位置(left,center,right)
cellspacing:单元格之间的间距,默认是2px,单位像素
cellpadding:单元格内容与单元格边框的显示距离,单位像素
frame:控制边框最外层的四条框void,above,below,hsides,lhs,rhs,vsides,box,border
rules:控制如何显示单元格内边框none,groups,rows,cols,all
bgcolor:表格的背景颜色
表单标签
Form
<form></form>定义表单的开始位置和结束位置,表单提交时的内容就是<form>表单中的内容
常用属性
name:表单名称
method:传送数据的方式,分为post和get两种方式
get方式:get方式提交时,会将表单的内容附加在URL地址的后面,所以限制了提交的内容的长度,不超过8192个字符,且不具备保密性
post方式提交时,将表单中的数据一并包含在表单主体中,一起传送到服务器中处理,没有数据大小限制
action:表单数据的处理程序的URL地址
enctype:设置表单的资料的编码方式
target:和超链接form
的属于类似,用来指定目标窗口
Input
input常用表单类型,具体类型根据type参数决定
常用属性
type:多种类型,如下
text:默认值,表示文本框
password:密码框
submit:提交按钮
button:普通按钮
radio:单选按钮,可以使用cheked属性来设置默认选中项
checkbox:复选按钮,可以使用cheked属性来设置默认选中项
hidden:隐藏域,用于某些数据无需展示,但是可能需要提交到后台使用
name:定义控件的名称,很重要,以键值对提交数据时,该name就是key
value:初始化值,打开浏览器时,文本框中的内容,编辑修改后,value也会变化
size:设置控件的长度
maxlength:输入框中最大允许输入的字符数
Select
格式
<select name='name' size='size' multiple>
<option value='value1' selected>选项1</option>
<option value='value2'>选项2</option>
</select>
属性
multiple:表示用可以多选的下来列表,如果没有这个属性就只能单选
size:设置列表的高度
name:定义这个列表的名称,以键值对提交数据时,该name就是key
option标签
value:给选项赋值,指定传送到服务器上面的值(键值对中的value)
selected:指定默认的选项
Textarea
多行文本域
属性
rows:显示的行数,单位是字符个数
cols:显示的列数,单位是字符个数
frameset标签
框架将浏览器划分成不同的部分,每一部分加载不同的网页,实现在同一浏览器窗口中加载多个页面的效果
常用属性
cols:
使用“像素数”和%分割左右窗口,“*”表示剩余部分
使用“*”,“*”表示框架平均分成2个
使用“*”,“*”,“*”表示框架平均分成3个
rows:使用“像素数”和%分割上下窗口,“*”表示剩余部分
frameborder:指定是否显示边框,0不显示,1显示
border:设置边框的大小,默认值5像素
<frame>子窗口标签
是一个单标记,
必须放在<frameset>中使用
在<frameset>中设置了几个窗口,就必须对应使用几个<frame>框架
使用src属性指定一个网页。
常用属性:
src:加载网页文件的URL地址
name:框架名称,是链接标记的target所要参数
noresize:表示不能调整框架大小,没有设置时就可以调整,参数值为noresize
scrolling:是否需要滚动条,可选auto,yes,no
frameborder:是否需要边框可选1显示边框,0不显示边框
CSS
CSS 指层叠样式表 (Cascading Style Sheets),是为了解决内容与表现分离的问题。
<body bgcolor='red'></red>
body为内容
bgcolor为表现
定义css几种方式
第一种定义css的方式:内链样式表
<body bgcolor="red" >
<body style="background-color: red" >
但是这种方式还是没有将内容和表现分离
第二种定义css的方式:嵌入式样式表
<style type="text/css"></style>
需要将样式放在<head></head>中
<body bgcolor="yellow" >
<style type="text/css">
body{background-color:yellow}
</style>
但是这种方式还是没有将内容和表现完全分离
第三种定义css的方式:引入式样式表
<link rel="StyleSheet" type="text/css" href="style.css">
style.css中
body{background-color:yellow}
这种方式完全将内容和表现完全分离
选择器
通过选择器,我们可以定位到css样式需要修饰的目标,常用的选择器有:
<p id='p1' class='c1'>选我啊,选我啊</p>
标签选择器 p{color:red}
类选择器 .c1{color:red}
ID选择器 p1{color:red}
组合选择器 如果有多个类型选择器使用同一种样式p,.p1, c1,h1,h2,h2{color:red}
伪元素选择器 a:link{color:black} a:hover、a:active、a:visited
优先级:就近原则
常用属性
颜色属性
颜色属性表达方式有多种:
color:green
color: ff6600
color:rgb(255,255,255)
color:rgba(255,255,255,1)
字体属性
font-size 字体大小
font-family:font-family:微软雅黑,serif,可以使用“,”隔开,以确保当字体不存在的时候直接使用下一个
font-weight:normal(默认值)、bold(粗)、bolder(更粗)、lighter(更细)
背景属性
背景颜色 background-color
背景图片 background-image
background-image:url(图片路径),无背景图片值为none
背景重复 background-repeat
background-repeat:repeat/repeat-x/repeat-y/no-repeat
背景位置 background-position
横向(left,center,right)纵向(top,center,bottom):background-position:left top;
直接使用数值:background-position:30px 30px;
简写方式
background:背景颜色 url(图像) 重复 位置
background: ff6600 url(images/bg,jpg) no-repeat top center
文本属性
text-align 横向排列
可选值为left,center,right
line-height 文本行高
%基于字体大小的百分比行高
数值 来设置固定值
text-indent 首行缩进
letter-spacing 字符间距
word-spacing
normal 默认
length设置具体的数值(可以设置负值)
inherit 继承
direction:ltr/rtl/inherit
text-transform:capitalize(单词首字母大写)lowercase/uppercase/inherit
边框属性
border-style 边框风格
border-bottom-style,border-top-style,border-left-style,border-right-style
属性值
none无边框/solid直线边框/dashed虚线边框/dotted点状边框/double双线边框
groove 凸槽边框/ridge 垄状边框/inset inset边框/outset outset边框
inherit继承
border-width 边框宽度
border-top-width,border-top-width,border-left-width,border-right-width
属性值:thin 细边框/medium 中等边框/thick 粗边框/inherit继承/px 固定值的边框
border-color 边框颜色
border-top-color,border-top-color,border-left-color,border-right-color
一个值:border-color:(上、下、左、右);
两个值:border-color:(上下) (左右);
三个值:border-color:(上) (左、右) (下);
四个值:border-color:(上)(右)(下)(左);
简写方式:
border:solid 2px f60
列表属性
标记的类型:list-style-type
属性值:none,disc(默认),circle
标记的位置:list-style-position
inside列表项目标记放置在文本以内,且环绕文本根据标记对齐。
outside默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。
inherit规定应该从父元素继承 list-style-position 属性的值。
设置图像列表标记:list-style-image
URL 图像的路径。
none 默认。无图形被显示。
inherit 规定应该从父元素继承 list-style-image 属性的值。
简写方式
list-style:square inside url('/images/a.jpg');
Div,span标签
DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式,DIV和span的区别在与,span是内联元素,div是块级元素。
<style type="text/css">
div{
background-color: green;
}
span
{
background-color: green;
}
</style>
布局相关属性
position 定位方式
static:没有定位,默认方式,用以防止继承造成的影响
left(左),right(右),top(上),bottom(下)无效果
relative:相对定位
相对指的是其原来的位置,移动后,不会影响周边的元素
absolute:
与relative类似,相对于body,而不是与原来的位置
fixed:
与relative类似,流量拿起窗口,而不是与原来的位置
z-index
z-index 层覆盖先后顺序(优先级),参数为数值
display
display:none 层不显示
display:block 块状显示,在元素后面换行,显示下一个块元素
display:inline 内联显示,多个块可以显示在一行内
block相当于将span转化为div,inline相当于将div转化为span
float
left :左浮动
right:右浮动
clear:left/right/both清除浮动
<div sytle='float:left'></div>
<div sytle='float:left'></div>
<div sytle='clear:both'></div>//添加这个div,可以屏蔽前一个div的float影响到后面的div
<div></div>
JavaScript
JavaScript是NetScape公司为Navigator浏览器开发的,是写在HTML文件中的一种脚本语言,能实现网页内容的交互显示。当用户在客户端显示该网页时,浏览器就会执行JavaScript程序,用户通过交互的操作来改变网页的内容,来实现HTML语言无法实现的效果。
定义javascript
通过<script></script>中直接编写
通过<script src='目标文档的URL'></script>链接外部的Js文件
作为某个元素的事件属性值或者是超链接的href属性值
基本语法
JavaScript的执行顺序:按照在HTML文件中出现的顺序依次执行
大小写敏感:JavaScript严格区分大小写
忽略空白符和换行符
通过\对代码进行折行操作:
document.write(' hello\
world');
注释:
单行注释//
多行注释/*注释内容*/
JavaScript的保留字
通过document.write()向文档书写内容
通过console.log()向控制台写入内容
JavaScript中调试的错误
通过alert()进行调试
通过控制台进行调试
常用事件
onchange |
HTML 元素改变 |
onclick |
用户点击 HTML 元素 |
onmouseover |
用户在一个HTML元素上移动鼠标 |
onmouseout |
用户从一个HTML元素上移开鼠标 |
onkeydown |
用户按下键盘按键 |
onload |
浏览器已完成页面的加载 |
DOM
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)
常见用法
查找 HTML 元素
getElementsByTagName
getElementsByName
GetElementById
创建节点
createElement
createTextNode
appendChild
删除节点
removeChild
BOM
1. ESCMScript
2. dom(重点)
3. bom() browser object model
五大对象
1. window 整个浏览器
2. location 当前位置
3. history 历史
4. screen 屏幕信息
5. navigator 浏览器信息
window
1. 可以获取其他四大对象
1. window.location
2. location
2. 弹框
1. 警告框 alert("msg");
2. 确认框 confirm("确定退出吗??");
3. 输入框 prompt("请输入账号");
3. 定时器
1. setInterval(fn,ms);
2. setTimeout(fn,ms);
清除定时器
clearInterval(id):
clearTimeout(id):
4. 打开关闭
1. window.open();
* 相当于a标签 target="blank"
2. window.close();
* 关闭自己
location
1. href 属性
1. 获取当前位置
var l =location.href
2. 设置当前的地址
location.href ="http://wwww.baidu.com'
* 相当于a标签 target="self"
history
1. go(数字)
Jquery
1. js封装
2. 方法更加简便,更加易用
3. 框架(半成品)
4. 宗旨是“write Less,Do More”
模拟jquery查找元素的封装
1. js找元素
1. document.getElementById("");
2. document.getElementsByName("");
3. document.getElementsByClassName("");
4. document.getElementsByTagName("");
2. var obj = getElement("参数"); //封装 ,,, css选择器
参数 " add"
3. jquery(" s");
4. $
1. java 类名? 可以(不推荐)
2. java 变量名? 可以(不推荐)
3. java 方法名? 可以(不推荐)
jquery步骤
1. 下载
1. http://jquery.com/
2. http://jquery.com/download/
1. compressed 压缩
2. uncompressed 未压缩
2. 导入
1. typeof(xx)
2. typeof xx
找元素(重要)
var $jqObj = $(" username");
alert($jqObj.val());
转换 (有的人喜欢js,jq)
1. js转成jquery
* 通过js找到dom
* 转成jq对象
* 方式 $(dom);
2. jquery转成 js
* 通过jquery找jquery对象
* 转成js
* get(0);
事件
1. js: onxxx
1. 内联 onclick(add());
2. 事件分配
* dom.onclick=fn;
2. jquery:所有的on去除
1. $jqObj.click(fn);
1. dom.onclick = fn;
----------
function(){...} 等价于 fn
页面加载
1. 完成事件分发
2. js
1. onload =function(){..}
3. jqueyr
1. $(function(){...});
2. $(document).ready(fn);
4. 区别
1. js一个页面只能一个
2. jquery一个页面多个
事件
blur([[data],fn])
change([[data],fn])
click([[data],fn])
dblclick([[data],fn])
error([[data],fn])
focus([[data],fn])
focusin([data],fn)
focusout([data],fn)
keydown([[data],fn])
keypress([[data],fn])
keyup([[data],fn])
mousedown([[data],fn])
mouseenter([[data],fn])
mouseleave([[data],fn])
mousemove([[data],fn])
mouseout([[data],fn])
mouseover([[data],fn])
mouseup([[data],fn])
resize([[data],fn])
scroll([[data],fn])
select([[data],fn])
submit([[data],fn])
unload([[data]])
事件派发(页面加载完)
1. dom对象.onclick = function(){...};
1. $("选择器").click(function(){...});
2. 所有事件的on全部去掉
----------
找元素(重点)
var dom对象=document.getElementById("id");
$("选择器");-> var $jq对象= $(" id");
基本选择器(4个)
1. js id class name tag
2. jquery
1. id选择器
* var $jquery = $(" id");
2. class选择器 .
* var $jquery = $(".className");
3. tag标签选择器
* var $jquery = $("标签名");
4. 多个
* var $jquery = $("标签名1, id,.className");
层次选择器(4个)
1. 后代选择器 $("a b");
$("body div");
2. 孩子选择器 $("a>b");
$("body>div");
3. 大弟弟选择器 $("a+b");
$(" first+div");
4. 所有弟弟 $("a~b");
$(" first~div");
基本过滤选择器(7个)
1. 第一个 $(":first");
$("div:first");
2. 最后 $(":last");
3. 奇数 $(":odd");
4. 偶数 $(":even");
5. 下标等于 $(":eq(num)");
6. > geater than $(":gt(num)");
7. < less than $(":lt(num)");
$("").hide /show /toggle();
内容过滤
1. :has(选择器)
$("div:has( first-f)");
slideUp (ms)
slideDown(ms)
slideToggle(ms)
可见选择器
1. :hidden -> display:none
$(":hidden").show(1000);
2. :visible
属性选择器
1. [属性名]
2. [属性名=值]
$("[属性名='值']")
$("[属性名=值]")
表单过滤器
1. :input :表单标签: input selector textarea
$("input,select,textarea")
$(":input")
jquery样式css
dom.style.backgroundColor="red";
css background-color
1. 获取: $jqObj.css("background-color");
2. 设置: $jqObj.css("background-color","red");
jquery属性attr,prop
1. js 属性 dom.属性名
dom.属性名;
dom.属性名= xx;
1. 获取: $("").attr("属性名");
2. 设置: $("").attr("属性名","属性值");
3. 移除: $("").remove("属性名");
4. prop properties
动画
基本
1. show
2. hide
3. toggle
滑动
1. slideUp
2. slideDown
3. slideToggle
淡入淡出
1. fadeIn
2. fadeOut
3. fadeToggle
----------
jquery数组遍历-2种方式
for(var i=0; i<length; i++)
{
..
}
1. ajax
2. 数组.each(function(index,dom));
3. $.each(数组,fn);
数组 jquery
属性
value属性val
1. 获取:val();
2. 设置:val("值");
标签体内容
1. $jq.html(); //
2. $jq.html("<a>xx</a>");//
3. $jq.text();//
4. $jq.text("<a>xx</a>");//
text : 获取普通文本 设置普通文本
html : 代码
元素
创建
1. $("<a></a>");
添加
1. a.append(b)->在a标签里面,追加b标签到最后面
2. a.prepend(b) ->在a标签里面,追加b标签到最前面