HTML
HTML
网页的基础
CSS
美化网页
JavaScript
网页动态的数据和效果
jQuery
框架 提高 JavaScript的开发效率
<!-- 版本声明 --> <!DOCTYPE html> <!-- 唯一的根元素 --> <html> <!-- 对网页做基本的配置 --> <head> <!-- 声明网页编码 --> <meta charset="UTF-8"> <!-- 声明网页的标题 --> <title>ICEOPSYS</title> </head> <!-- 写网页的具体的内容 --> <body>
1
</body> </html> 文本处理 文本元素 文本元素的作用 文本元素列表 标题 标题元素 <h1></h1> <h2></h2> 从1-6 段落 段落元素 <p></p> 列表 列表元素 有序列表 <ol> <li></li> <li></li> </ol> 无序列表 <ul> <li></li> <li></li> </ul> 列表嵌套 <ol> <li> <ul> <li></li> <li></li> </ul> </li> <li> <ul> <li></li> <li></li> </ul> </li> </ol> 分区 分区元素 <div> </div> 元素显示方式 元素显示方式 块级元素 <p> <div> <hn> 行内元素 行内元素 行内元素 <span></span> 是内联元素 可以用作文本的容器 元素也没有特定的含义 当与CSS 一同使用时 可以为部分文本设置样式属性 <a>
<!-- 版本声明 --> <!DOCTYPE html> <!-- 唯一的根元素 --> <html> <!-- 对网页做基本的配置 --> <head> <!-- 声明网页编码 --> <meta charset="UTF-8"> <!-- 声明网页的标题 --> <title>ICEOPSYS</title> </head> <!-- 写网页的具体的内容 --> <body> <!-- 标题 --> <h1>标题1</h1> <h2>标题2</h3> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <!-- 段落 --> <p>段落1</p> <p>段落2</p> <!-- 有序列表 --> <ol> <li>列表1</li> <li>列表2 <ol> <li>列表2.1</li> <li>列表2.2</li> <li>列表2.3</li> </ol> </li> <li>列表3</li> </ol> <!-- 无序列表 --> <ul> <li>列表1</li> <ul> <li>列表1.1</li> <li>列表1.2</li> <li>列表1.3</li> </ul> <li>列表2</li> <li>列表3</li> </ul> <!-- div分区 --> <div> <p>头</p> </div> <div style="color:red;"> <p>身体</p> </div> <div> <p>脚</p> </div> </body> </html>
<br> 换行
空格
图片 行内 左右排列
<img src=""/>
1绝对路径
2相对路径
width height
超链接
<a></a> <a href="www.baidu.com" target="_self">文本</a>
target 规定在何处打开目标 URL _self _blank
锚点
<a name="c1"></a> <a href="#c1"></a>//自定义 <a href="#"></a>//头
表格
表格的属性
<table>
border 边框
width height
align
cellpadding
单元格边框和内容之间的间距
cellspacing
单元格之间的间距
<tr>
align/valign
<td>
align/valign/width/height/
跨行跨列 （单元格合并）
colspan/rowspan
table tr td
<table border="1" cellspacing="0"> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> </table>
<table border="1" cellspacing="0"> <tr> <td rowspan="2">2222</td> <td>3333</td> </tr> <tr> <!-- <td>4444</td> --> <td>5555</td> </tr> <tr> <td colspan="2">2222</td> <!-- <td>3333</td> --> </tr> <tr> <td>4444</td> <td>5555</td> </tr> </table>
行分组
表格
表头
表体
表尾
表单
<!-- 表单元素
用来声明数据提交的范围，只有在此元素内的数据可以提交给服务器
文本框和密码框
value： 设置默认值
maxlength: 最大长度
readonly 设置只读
-->
属性：
action 表单提交的URL
method 指出表单数据提交的方式
enctype 表单数据进行编码的方式
input 元素（9个）
用type属性区分 这9个
test 和password
主要属性： value 属性 有访问者自由输入的任何文本 设置默认值
maxlength 属性 限制输入的字符数 限制用户名长度
readonly 属性 设置文本控件只读 uid之类的
<form> 账号： <input type="test" value="www" maxlength=10 readonly /> 密码： <input type="password"/> </form>
其他元素（3个）
label
select
testarea
<form> <input type="text" value="123"/> <input type="password" maxlength="16"/> <input type="text" readonly/> </form>
s
单选框
要加name 组名 才能互斥 同一组radio 互斥
checked 默认选择
value
<form> <p> 男：<input type="radio" name="sex" checked /> 女：<input type="radio" name="sex"/> </p> </form>
多选框
checked
name、 value
<input type="checkbox"/>
隐藏域 文件
<input type="file"/> <input type="hidden"/>
按钮
<input type="submit">
提交
<input type="reset"/>
重置
<input type="button"/>
普通按钮 功能自己写 js
属性 value 按钮的名字
id 元素的唯一标识
label 用来管理表单中的文本
<label for="id"> 文本 <label> 通过id 和控件绑定在一起 <form> <input type="checkbox" id="c1"/> <label for="c1"> 我已阅读并原则上同意遵守</label> <!-- 这个时候 我点击 label 中的文字和 点击选择框有一样的效果 --> </form>
select
下拉选
selected 默认值
value
<select> <option></option> <option selected ></option> <!-- 默认值--> <option></option> </select>
textarea
文本域 大的文本框
<form> <testarea> 文本 </testarea> </form>
主要属性：
cols 指定文本区域的列数
rows 指定文本区域的行数
readonly 只读
CSS
内联样式
样式定义在单个HTML 元素中
内部样式
样式定义在HTML页的头元素中
外部样式
将样式定义在一个外部的CSS文件中（.css文件）
由HTML页面引用样式表文件
内联样式
在元素的style 属性内直接写
这个写样式无法复用
内部样式
在head中 <style></style>
这样的可以被当前页面上的众多元素复用
外部样式
引用css文件
在head中
<link rel="stylesheet" href="my.css"/>
语法
选择器{
声明(属性:值);
}
继承性
父元素的CSS的生米被子元素继承， 字体 颜色
层叠性
同应给元素若存在多个css 规则对于不冲突的声明可以叠加
优先级
同一个元素若存在多个css 规则 对于冲突的声明以优先级高者为准
元素选择器
p{ color:blue } body{ font-family:"黑体"; }
类选择器
<h2 calss="need">123</h2> <p calss="need">321</p> .need{ color:blue; }
id 选择器
<div id="d1">123</div> #d1{ color:blue; }
选择器组
类选择器 和 元素选择器
.1,div{ color:blue; } #d1,body{ font-size:100px; }
派生选择器
分为2种
选择子孙
#p5 b{ color:bule; }
选儿子
#p5>b{ color:bule; }
伪类选择器
:link
未被访问的超链接
a:link{ font-size:100px; }
:visited
已经被访问的超链接
a:visited{ font-size:10px; }
:active
被激活的元素
:hover
当鼠标悬停在元素
:focus
当元素获取焦点
通用选择器
*{
}
边框
border width值 style值 color值
边框 宽度 样式 颜色
border 宽度：
% 百分比
in 英寸
cm 厘米
mm 毫米
pt 磅
px 像素
em 当前字体尺寸
border 样式：
dotted: dotted:定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值
border 颜色
name - 指定颜色的名称，如 "red"
RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
Hex - 指定16进制值, 如 "#ff0000"
块元素一般宽度默认是100% 高度会自适应 内容越多 它越高 当给它固定高度时可以会导致内容溢出
溢出时的处理：
overflow：
visible 可见
hidden 不可见
scroll 加滚动条
auto 不溢出就不加滚动条
box 框模型
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
padding 内边距
margin 外边距
上右下左 顺时针
四个边设置相同的边距
#d1{ padding:20px; margin:30px; }
四个边设置不同的边距
#d2{ padding:10px 20px 30px 40px; margin:40px 30px 20px 10px; }
单个边设置边距
#d3{ padding-left: 10px; padding-top: 20px; padding-bottom: 30px; padding-right: 40px; }
对边设置相同的边距
先上下 后左右
#d4{ padding:20px 40px; margin:60px 80px; }
对边设置边距的特例
在设置外边距是 若左右歪边咀值为auto 这个元素水平居中
#d5{ margin:20px auto; }
选择器的优先级
ID 100
类 10
元素 1
背景色
background-color 属于用于为元素设置背景色 该属性接受任何合法的颜色
background-image 背景图
background-image:url{"../images/123.jpg"}
background-color: 背景色
background-image:url(img.jpg);
background-repeat:填充 repeat/no-repeat/repeat-x/repeat-y
平铺/不平铺/x轴/y轴
background-positioni:left top;
background-attachment: 背景图像的附着方式
文本
font_family:字体
color: 字体颜色
font-size:字体大小
font_weight:字体加粗 normal/bold;
text-align:文本排列 center left right
line-height:行高
text-dexoration:文字修饰 none/underline 下划线
text-indent:文本首行缩进
h1 { text-align: center; }
/*鼠标悬停加粗*/ .logo a:hover { font-weight: bold; }
.logo a{ margin-right: 40px; color: #FFF; /*删除下划线*/ text-decoration: none; }
.copy p{ color:#FFF; text-align: center; height: 50%; }
表格常用样式属性
表格
border-collapse:separate/collapse;单元格 合并
vertical-align:top/middle/bottom; 垂直
方向上的对齐，设置单元格中的垂直对齐
this
在js 中 这个this 指代你正在点击的那个元素 给方法加参数接受这个值 参数名不能是关键字this
function add(this){ }
用下面的这个方式
function add(btn){ }
调用函数的时候 onclick=add(this);
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> function add(btn){ //console.log(btn.parentNode); var tr = btn.parentNode.parentNode; var tds = tr.getElementsByTagName("td"); console.log("商品名："+tds[0].innerHTML); } </script> </head> <body> <table> <thead></thead> <tbody> <tr> <td>白糖</td> <td>201802226</td> <td>1</td> <td><input type="button" value="添加" onclick="add(this);"/></td> </tr> </tbody> </table> </body> </html>
自定义对象
分类
直接量
构造器
首字母大写的 要new
首字母小写的 不要new
内置构造器
特殊的：Array Date RegExp Function
通用的：Object
自定义构造器
声明一个函数 首字母要大写
声明参数让调用者清楚要传什么参数
让对象记住这些参数
var student = {"name":"zx","age":23};
{}代表对象内含多组键值对
key 一般都是字符串 value 可以是任意类型的数据
采用直接量方式创建的对象也叫json对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> function f1(){ var student ={ "name":"zx", "age":23, "work":function(){alert("java")} }; alert(student.name); alert(student.age); student.work(); } function f2(){ var teacher = new Object(); teacher.name="zxc"; teacher.age=18; teacher.work=function(){ alert("PHP"); } alert(teacher.name); alert(teacher.age); teacher.work(); } function Coder(name,age,work){ //this 指代当前对象 //.job是给此对象增加job 属性 //=work 是将参数work赋值给此属性 this.name=name; this.age=age; this.work=work; } function f3(){ var coder = new Coder("zx",25,function(){alert("javaer")}); alert(coder.name); alert(coder.age); coder.work(); } </script> </head> <body> <input type="button" value="按钮1" onclick="f1();"/> <input type="button" value="按钮2" onclick="f2();"> <input type="button" value="按钮3" onclick="f3();"> </body> </html>
无论 用暗中方式创建出来的对象都一样 都是Object
若创建的对象给别人用使用 自定义构造器
若创建的对象给自已用 用json方式
事件
什么是事件
就是用户的动作 就是js调用的时机
事件的分类
鼠标事件
键盘事件
状态事件 摸个条件 状态达成的时候自动触发
事件的定义·
直接定义事件
在元素上通过事件属性 onclick 定义事件 很直观 耦合度高了
后绑定事件
在页面加载后 使用js 获取元素并给它绑定事件 HTML和js耦合度低 不直观
取消事件
在事件函数内 return false
event 对象
事件对象
当事件被触发时 有一些信息可以被确定下来
左键 右键 点击的位置 按键
获取事件对象
直接定义事件
在调用函数时 直接传入event
在写这个函数时加参数来增加它
后绑定事件
触发事件时浏览器 会自动给函数传入event 在写这个函数时加参数来接受它就可以了
function f4(){ console.log(event); }
window.onload = function(){ var btn = docuemnt.getElementById("btn2"); btn.onclick = function(){ console.log("asdf"); console.log(e); }
event 对象 事件源
由内向外触发
冒泡机制
事件可以由内向外传播
也可以停止冒泡
停止事件 不同的浏览器有不同的方法
if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble=true; }
可以简化事件的定义
可以在父元素上定义一个事件 接受众多子元素的事件
需要知道事件源
事件源
事件发生具体位置
事件发生的源头
通过事件对象可以获取事件源
浏览器 获取事件源的 不同的浏览器有不同的方法
var obj = e.srcElement || e.target;
console.log(obj);
//兼容写法
