HTML（超文本标记语言）
列表标签
无序列表ul：属性type：circle（空心圆） disc（默认，实心圆） square（黑色方块）
有序列表ol：属性type：1、A、a、I、i（数字、字母、罗马数字）
定义列表dl:
dt:定义标题
dd:定义描述
a标签的作用：
- 超级链接
- 锚链接（a href="#xxx",xxx代表的是锚点的位置，可以使用a标签声明，用name来坐定名称，或者使用其他的标签来定义，用id声明）
a链接中target属性的使用：
- _self 在自身页面打开
- _blank 在新窗口打开
- _parent 在父窗口打开
- _top 在顶部窗口打开
- _search相当于给窗口起一个名字，如果打开过不再打开新的页面（search可以换为任何自己起的名字）
target的属性值：top和parent
target=_parent，将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就象self参数一样。
target=_top，在当前的整个浏览器窗口中打开所链接的文档，因而会删除所有框架 不写的话就是表示默认值，默认值一般跟浏览器有关。
普通表格
<tr>表示为行
<td>表示为列（单元格）
<th>表示表头
表格的属性
border：边框像素为单位
width:宽度
height:高度
行的属性：
align:控制表格的对齐方式：center right left
valign:控制表格的垂直对齐(都是对表格的内容的控制)
跨列和跨行：
colspan=""占几列
rowspan=""占几行
<b> 定义粗体
<big>定义大号字体
<em>着重文字（斜体）
<i>斜体字
<sub>下标字，数学上的log下标
<sup>上标字，数学上的平方
<del>删除字，在文字上打上一条横线
表单标签
form标签
常用属性： action 表示动作，值为服务器端的地址，把表单的数据提交到该地址上进行处理
method：请求方式：get和post
enctype:表示表单提交的类型
默认值：application/x-www-form-urlencoded 普通表单
multipart/form-data 多部分表单（一般用于文件上传）
text/plain普通文本
get和set的区别：
get：数据储存在地址栏中，请求参数都在地址后拼接，不安全、效率高，大小有限制，一般用于查询数据
post：地址没有数据，请求参数单独处理，安全可靠、效率低，大小理论上没有限制，一般用于插入删除操作
input标签
type：可能要取得值：
text 文本框 输入内容
password 密码，密文或者掩码
radio 单选按钮，name必须要一致；value：提交给服务器的数据，表示同一组只能选中一个
checkbox 表示多选，name必须一致，返回值是数组，可以选多个
file 表示选择上传文件
以上具有输入性质的必须要有name属性，初始开始写value表示要有默认值（以后获取输入框的内容要根据name来获取)
一下按钮不具有输入性质，不需要name属性，但是按钮上的文字提示使用的是value属性
submit 提交
reset 重置
image 图片提交按钮
button 普通按钮
hidden 表示隐藏域，该框的内容服务器需要，但是不想让用户知道（不想清楚地显示在界面上）
email 表示邮箱格式的数据
name属性：表单元素的名字，只有name属性才能提交给服务器
value属性:提交给服务器的数据
placeholder：提示信息
高级属性：
disabled:禁用
readonly:只读
select元素（下拉列表）
<select name="">
<option value=""></option>
<option value=""></option>
</select>
selected表示选中该项，默认是选择第一项
textarea元素（文本区）
<textarea cols="100" rows="5">
框架标签
frameset框架结构标签，把body删除掉，使用frameset代替body
基本的注意事项
1.不能将<body></body>标签与<framesete></frameset>标签同时使用
2.假如一个框架有可见边框，用户可以拖动边框来改变他的大小。可以使用<frame>标签中加入：noresize="noresize"
3.freamset 的属性freamborder="1|0|yes|no"表示是否有边框，border="1"表示边框的粗细 bordercolor表示边框的颜色
其他标签
<!--该网页的关键字-->
<meta name="keywords" content="keyword1,keyword2,keyword3">
<!--该网页的描述-->
<meta name="description" content="this is my page">
<!--该网页的编码-->
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> html4.01
<!--页面自动跳转,2秒后跳转到百度-->
<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">
<!--该网页的编码-->
<meta charset="UTF-8"> html5
<!-- href：引入css文件的地址-->
<link rel="stylesheet" type="text/css" href="./styles.css">
<!--src：js的文件地址-->
<script type="text/javascript" src=""></script>
特殊符号
< 小于号
> 大于号
& 与字符
" 引号
® 己注册
© 版权
™ 商标
空格
CSS（层叠样式表）
语法规则：选择器{属性：值；属性：值}
使用方式：
-
内联方式
把css样式嵌入到HTML标签中 <div style="color:blue;font-size:50px">This is my HTML page. </div> -
内部样式
使用style标签引用css <style type=“text/css”> //告诉浏览器使用css解析器去解析 div {color:red; font-size:50px} </style> 好处是：能够控制页面中的多个元素样式，缺点：只能一个页面使用 -
外部样式
将css样式抽成一个单独文件，谁用谁就引用，好处:多个页面可以同时使用 方式1：链接式： <link rel="stylesheet" type="text/css" href=“div.css"></link> rel:代表当前页面与href所指定文档的关系 type:文件类型，告诉浏览器使用css解析器去解析 href:css文件地址 方式2：导入式： <style type="text/css"> @import url("div.css") </style> 备注：link和@import区别： link所有浏览器都支持，@import某些版本低的IE不支持 @import是等待HTML加载完才加载，link解析到这个语句，就加载 @import不支持js动态修改优先级：内联样式>内部样式>外部样式，就近原则
CSS选择器
基本选择器：
- 标签选择器 span{ }
- id选择器 #xx{ }
- class选择器 .xx{ }
- 优先级从高到低：id>class>标签
属性选择器：
格式为:html标签[属性='属性值']{css属性:css属性值;}
或者html标签[属性]{css属性:css属性值;}具体示例：
input[type='text'] {
background-color: pink
}
font[size] {
color: green
}
伪元素选择器：主要是针对a标签
a:link 静止状态
a:hover 悬浮状态
a:active 触发状态
a:visited 完成状态
层级选择器：
空格 表示后代选择器
大于号 子代选择器
加号 相邻的兄弟
~ 通用兄弟
其他选择器：
全局选择器 *{ }
群组选择器 h1,h2{ }
CSS属性
文本和文字属性
文字属性：font：italic bold 30px “幼圆”；/style weight size family swsf/
文本属性：text-indent:缩进，单位是em或者百分比
text-decoration:文字修饰
word-spacing:字符之间的间隔
letter-spacing：字母或单词之间的间隔
line-height:设置行高
背景属性：background-repeat: repeat-y:垂直方向平铺、repeat-x：水平方向平铺、repeat:水平垂直方向平铺、no-repeat:任何方向都不平铺
列表属性：
list-style-type:decimal;改变列表的标志类型
list-style-image: url(“images/dog.gif”);用图像表示标志
list-style-position: inside;确定标志出现在列表项内容之外还是内容内部
简写
list-style: decimal url(img/001.png) inside;
去掉样式:
list-style:none;
list-style-type:none;
尺寸显示轮廓属性：
display：none 不显示 block 块级显示 inline：行级显示 inline-block:行级块
block块元素 有宽度和高度
inline 是默认的行元素，没有高度和宽度
inline-block行块标签，既有行又有块
overflow：溢出，当内容超出了盒子的大小，如何处理
H5之后添加了弹性盒子，用于设置垂直对齐
display:flex
align-items:center;垂直居中
justify-content:center;水平居中
clear属性：规定元素的哪一侧不允许其他浮动元素
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |
定位属性
position：static|relative|absolute|fixed
静态定位（默认定位方式）static
相对定位（relative）相对于原来位置偏移某个距离。元素仍保持其未定位前的形状，他原本所占的空间仍保留
绝对定位（absolute）:元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是视窗本身。元素原先在正常文档流中所占的空间会关闭，就好像原来不存在一样。元素定位后会生成一个块级框，而不论原来它在正常流中生成何种类型的框
固定定位（fixed）元素框的表现类似于将position设置为absolute，不过其位置相对于视窗本身。
盒子模型
border margin padding
CSS3扩展属性
border-radius 圆角属性 示例：border-radius:20px;
box-shadow 向方框添加阴影 示例：box-shadow:10px 10px 5px #333333;
background-size属性设置背景图片的大小
background-url(img/1.png);
background-size:200px 300px;
background-repeat:no-repeat;
background-image 为指定元素使用多个背景图像，多个URL用逗号隔开
text-shadow 文本阴影
javaScript
完整的javaScript实现包含了三个部分：ECMAScript，文档对象模型（DOM Document Object Model），浏览器对象模型（BOM Brower Object Model）
数据类型：
-
基本类型（原始类型）undefined null number string boolean
-
引用类型（对象类型）Object(Person) Array String Number Boolean RegExp
数组的声明：var a=[1,1,1,2];
三种使用方式：
- 在<script>标签中，可以放在网页中的任意位置
- 使用外部的js文件，把js代码单独放在文件中，通过引用来使用<script type="" src=""></script>>
- 放在标签中的事件中，常见事件onclick()
关系运算符：
==：比较的是两个值，会自动转换类型
===：比较的是引用，首先比较类型，如果类型不同，直接返回false
if语句：
if(变量)：如果变量值是undefined,null表示false，其他是true，如果变量没有定义会出现异常。
zhangsan.name：是给zhangsan添加name的属性，没有赋值
增强for的写法：
for（var i in arr）{ }i指的是下标
function中的参数不用写数据类型，返回值也不用写，如果有返回值就直接return
自行执行的匿名函数：
（function(){ document.write("")}）();
闭包：
闭包就是能够读取其他函数内部局部变量的函数; 闭包可以理解成“定义在一个函数内部的函数“。
闭包三个条件：
1 闭包是一个内部函数
2 闭包能够读取其他（外部）函数的局部变量
3 闭包和局部变量在同一个作用域。
使用形式：1 闭包作为函数的返回值；2闭包作为函数的参数。
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>闭包 closure</title>
<script type="text/javascript">
/*定义一个函数*/
function a(){
var a=10;
document.write(a);
document.write("<br/>");
}
// a();
// a();
// a();
function b(){
var num=10;//没有释放
/*函数包含函数*/
function c(){
num++;
document.write(num);
document.write("<br />")
}
return c;
}
var f=b();//f是一个函数：闭包
f();
f();
f();
</script>
</head>
<body>
</body>
</body>
</html>
闭包的好处：
- 使局部变量常驻内存
- 避免污染全局变量
- 提高封装性保护局部变量
系统函数：
- 提示框alert(),，没有返回值，如果接受是undefined
- 确认框confirm()，返回值是boolean型，点击确定返回true，取消返回false
- 输入框prompt("","")第一个参数是提示信息，第二个参数是用户输入的默认值，点击确定返回用户的输入值，否则返回null.
其他系统函数：
- parseInt():将字符串转换为整形
- parseFloat():字符串转换为小数
- isNaN():判断数字是不是不是一个数字，不是一个数字返回true
事件：
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素内容改变(离开光标触发) |
| onclick | 用户点击 HTML 元素 |
| onmouseover | 光标移动到HTML元素 |
| onmouseout | 光标离开HTML元素 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已完成页面的加载 |
字符串、正则表达式：
var str="hello,我爱java";//原始类型
var str2=new String("hello");//引用类型对象类型
var str3=String("hello");//原始类型
RegExp对象方法：
exec:检索字符串中指定的值，返回找到的值，并确定其位置
test:检索字符串中的指定的值，返回true或者false
支持正则表达式的String对象的方法：
match：找到一个或者多个正则表达式的匹配
replace：替换与正则表达式匹配的子串
split：把字符串分割为字符串数组
正则表达式的示例：
var patt1=new RegExp("^1[3589]\\d{9}$");
document.write(patt1.test("13688889999"));//true
DOM
获取HTML元素：
- 通过id来获取 document.getElementById("");
- 通过标签名获取 document.getElementsByTagName("")
- 通过类名获取 document.getElementsByClassName("")
修改HTML元素：
- 修改内容：innerHTML=""(这个可以实现标签的效果显示) innerText(不能解析标签效果) 示例：document.getElementById(“p1”).innerHTML=“abcd”;
- 修改属性：attribute=新属性值 示例：document.getElementById(“image”).src=“2.jpg”;
- 修改css样式：style.property=新样式 示例：document.getElementById(“p2”).style.color=“blue”;
元素操作：
-
创建新元素 document.creatElement() 在已知的元素后面添加新的元素appendChild();
-
删除已有的元素 parent…removeChild(child)
如果能够在不引用父元素的情况下删除某个元素，就太好了。不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。
这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：
var child=document.getElementById(“p1”);
child.parentNode.removeChild(child);
DOM事件
DOM允许我们通过触发事件来执行代码，比如：元素被点击，页面加载完成，输入框被修改
示例：<h1 onclick="this.innerHTML='改变内容!'">点击文本!</h1>
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onchange 事件常结合对输入字段的验证来使用。
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数
<div οnmοuseοver="mOver(this)" οnmοuseοut="mOut(this)" </div>
<script>
function mOver(obj){
obj.innerHTML="Thank You"
}
function mOut(obj){
obj.innerHTML="Mouse Over Me"
}
</script>
EventListener addEventListener()方法
document.getElementById("myBtn").addEventListener("click", displayDate);
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 “click” 或 “mousedown”). 把on去掉
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
注意:不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick”。
事件传递有两种方式：冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将
元素插入到
元素, 哪个元素的 “click” 事件先被触发呢？
在 *冒泡 *中，内部元素的事件会先被触发，然后再触发外部元素，即：
元素的点击事件先触发，然后会触发
在 *捕获 *中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即：
元素的点击事件。
addEventListener()的第三个参数默认值是false即冒泡传递，当值为true时，就是捕获传递
BOM
获取window尺寸(涵盖所有的浏览器)
var w=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
var h=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
window方法
- window.open()打开新的窗口
- window.close()关闭当前窗口
Screen
- 可用宽度：screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏
- 可用高度：screen.availHeight属性返回访问者的屏幕高度，以像素计，减去界面特性，比如窗口任务栏
Location
window.location对象用于获取当前页面的地址（URL）,并把浏览器重新定向到新的页面
window.location对于在编写时可不使用window这个前缀。
- location.href 属性返回当前页面的URL
- location.hostname 返回web主机的域名
- location.pathname返回当前页面的路径和文件夹
- location.port返回web主机的端口
- location.protocal返回使用的web协议
history
window.history对象包含浏览器的历史
window.history对象在编写时可不使用window这个前缀
- history.back()–与在浏览器中点击后退按钮功能相同
- history.forward()–与在浏览器中点击前进按钮功能相同
- history.go(number|url)–加载历史列表中的某个具体页面。URL 参数使用的是要访问的 URL，或 URL 的子串。而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。
JavaScript计时
Date对象（获取年 月 日 时 分 秒）
计时函数
setInterval()周期执行函数，间隔指定的毫秒数不停的执行指定的代码
cleanInterval()方法用于停止setInterval()方法执行的函数代码
setTimeout()延迟执行函数，只能执行一次
clearTimeout()方法用于停止执行setTimeout()方法的函数代码
动态显示时间：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input id="btn1" type="button" value="暂停" onclick="stoptime()" />
<input id="btn2" type="button" value="开始" onclick="starttime()" disabled="disabled" /><br />
<div id="clock">
<script type="text/javascript">
var clock = document.getElementById("clock");
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
function showtime() {
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth() + 1;
var day = d.getDate();
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
clock.innerHTML = t = year + "-" + month + "-" + day + " " + h + ":" + m + ":" + s;
}
var tid = setInterval("showtime()", 1000);
function stoptime() {
clearInterval(tid);
btn2.disabled = false;
btn1.disabled = true;
}
function starttime() {
tid = setInterval("showtime()", 1000);
btn1.disabled = false;
btn2.disabled = true;
}
</script>
</div>
</body>
</html>
1631
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
