HTML知识点梳理
HTML
概念
超文本标记语言。
块级元素：使用时默认独占一行的空间。
内联元素：可以与其他元素在同一行使用。
基本语法
标签：HTML的标签不能自定义
单标签<标签 属性=“属性值”/>
双标签<标签 属性=“属性值”></标签>
结果组成
- 声明部分。如：<!doctype html>
- HTML
<html>
<head>
主要包含内容：标题（网页的标题）、样式（CSS代码）、关键字（搜索时的索引）、JS代码等
</head>
</body>
包含内容：需要在页面中显示的内容和JS代码
</body>
</html>
标签分类
标题标签<h>
<h1>文本</h1>
h1-h6表示不同级的标题，默认字体加粗。
主要属性align=left/center/right段落的位置
换行标签<br/>
水平分割线<hr/>
预格式文本标签<pre>
会保留其中文本的格式，适合放代码。
焦点标签<label>
<label for><label/>
链接标签<link>
写在<head>标签内，主要用于导入外部的CSS文件。
<link rel=“stylesheet” type=”text/css” href=”css路径”/>
段落标签<p>
<p>文本</p>
主要属性：align=left/center/right段落的位置
文本加粗标签<strong>
<strong>文本</strong>
加粗，用于强调文本，但它强调的程度比em更强一些
斜体标签<em>
斜体，用于强调文本
文字标签<font>
<font>文本</font> 常用属性：color size face(字体，要求系统支持)
超链接标签<a>
一般格式：<a href=”对象路径”>文本</a>
属性：target。新页面在指定的位置打开。
【target属性值为frame的name值时，会在对应的frame窗口打开新的页面。
_top:返回当前页面顶部
_self:默认值。在当前窗口打开
_blank:在新窗口打开。
_parent:在父窗口打开】
其中文本为超链接对象，默认带下划线和字体颜色。
链接分类
- 外部链接：对象路径为URL，链接外部网站。
- 内部链接：对象路径为网站内部的不同页面的存储路径。有相 对路径和绝对路径。
相对路径：从当前网站所处的目录开始。若为同级目录下的其 他文件，路径只需要写文件名称。【../表示上一级目录】
绝对路径：从文件的根目录开始：根目录/子目录/文件名称
- 书签链接：链接到当前页面的指定位置。要求指定位置的<a> 标签定义name属性，则路径为”#属性值。”举例如下：
<a href = “#人物简介”></a>
<a name=”任务简介”></a>
注意：书签链接只能链接到指定name属性值的<a>标签位 置，其他标签无效。
图片标签<img>
一般格式：<img src=“图片路径”/>
图片路径分绝对路径和相对路径，同链接路径。
常用属性：width：图片宽度，单位为px（像素）
height：图片高度，单位为px
src：图片的路径
alt：图片加载失败时显示的文字
title：鼠标悬浮图片上时显示的文字说明
列表标签
- 有序列表
<ol>
<li>内容</li>
. ..
</ol>
- 无序列表
<ul>
<li>内容</li>
...
</ul>
- 自定义列表
<dl>
<dt>标题</dt> 标题指列表的一级内容
<dd>内容</dd> 此处的内容为上述标题下的二级内容
...
</dl>
表格标签<table>
一般格式：th表示标题行，tr表示一行内容。td表示单元格
常用属性：border边框 cellspacing：单元格间距 bgcolor：背景色
Background：背景图 colspan：跨列合并 rowspan：跨行合并
Cellpadding：表格内容与单元格之间的间距
<table>
<th>
<td>内容</td>
<td>内容</td>
...
</th>
<tr>
<td>内容</td>
<td>内容</td>
...
</tr>
...
</table>
表单标签<form>
表单是网页中提供的一种交互式操作手段，在网页中的使用十分广泛。用户可以通过提交表单信息与服务器进行动态交流。
表单是一个包含表单元素的区域。表单元素应定义在表单中。
表单元素是允许用户在表单中输入信息的元素（比如：文本域、 下拉列表、单选框、复选框等等）。
常用属性：action：提交的路径；
method：提交的方式，get或post。
【区别：get会在新页面的地址栏显示输入的信息，post会隐藏】
输入标签<input>
通过input标签向表单中添加输入数据的元素（如文本框）。输入类型是由类型属性（type）定义的。
type=“text”：文本框。Size:显示长度 value:默认内容
type=“password”：密码框（输入的内容用黑点表示）
type=“radio”：单选框
【多个单选框需要设置相同的name属性值才能实现单选的功能】
type=“checkbox”：复选框
【一般给复选框设置相同的name值，不是必须的】
注意：在单选框或复选框中添加checked属性设置该选项为默认选项。
type=“button”：普通按钮。没有实际功能。可以添加事件。
type=“reset”：重置按钮。
type=“submit”：提交按钮。提交按钮用于向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面。
【对于所有类型的按钮，设置value的属性值，可以设置按钮上显示的文本】
type=“file”：上传文件file multiple==》属性，可以选择多个文件
选择标签<select>
下拉列表框。用<option>标签设置下拉选项。
<option>文本</option>其中的文本为下拉列表中的选项。
Select size：下拉选项的显示个数
option select：默认选项
文本域标签<textarea>
主要属性：rows:行数；cols：列数
元素集标签fieldset legend
将表单内容的一部分打包，生成一组相关表单的字段，可将表单分组。legend为其定义的标题。
Frame框架
<frameset>标签表示框架集，用于分割页面，用于存放框架元素。 代替body标签使用。
常用属性：rows=”值1，值2，...,*”
cols=”值1，值2，...,*”
【值可以是百分比，也可以是具体的px像素值，*用来表示页面的剩余部分，如果前面已经百分百分配页面的空间，则不需要*】
<frame>标签表示单个框架。
常用属性：name；【可以通过<a>标签进行链接在对应名称的框架 中打开】
<iframe>标签：可以自定义长度和宽度。其他操作同frame。
实体符号
- 表示空格
- &it <符号
- > >符号
- © ©版权符号
- " “引号
CSS层叠样式表
概念
Cascading style sheet 层叠样式表。用于美化页面。
作用
- 美化页面
- 减少代码的重复。
- 可以将代码导出到外部文件，应用在不同的界面上。
CSS引入
1.外部样式表
（1）link（推荐）
<link href=“mystyle.css" rel="stylesheet“ type="text/css">
放在head中，与页面同步加载，可使用javascript控制dom去改变样式。
（2）@import
@import url('css路径');
放在style中，等到页面全部被下载完再被加载，IE5以上的才能识别，不可使用js改变样式。
2.内嵌样式表
<style></style>
3.行内样式表
<p style=“text-align:center;”>
一般格式
选择器{属性:属性值;.......}
注意 选择器 属性都是不能自定义的
选择器分类
1.标签选择器 HTML的标签{属性：属性值；......}
举例：h1{color:red;}【标题1的字体颜色为红色】
2.id选择器（优先级高于类选择器） #id的名称{属性：属性值；......} **id的值可以自定义，原则上页面中的id值不重复
举例：#footer{color:yellow;} <p id="footer">文本</p>【id为footer的段落中文字颜色为黄色】
3.类选择器 .类的名称{属性：属性值；......}类的名称是自定义的，可重复。
例：.t{color:green；......} <p class="t">文本</p>【类为t的段落文本颜色为绿色】
4.包含选择器 选择器 选择器 选择器......{属性：属性值；.....}最里层选择器中的元素应用的样式
p b{color:blue;}【p标签内包含的标签b中的文本颜色为蓝色】
5.群组选择器 标签，标签，标签......{属性：属性值；......}一组标记使用相同的样式
例：ul,ol{color:gray;}【有序列表和无序列表的颜色统一为灰色】
6.伪类选择器nth:child() nth-of-type ()a:hover
link-visited-hover-active
伪对象选择器:before :after
属性选择器input[type=“submit”]
7.通配符 *{属性：属性值；......} 所有的元素应用的样式（实际开发中很少使用）【可以用于清除所有默认样式重新自定义】
*{color:red;}【表示页面中所有元素初始颜色为红色。（就近原则）】
文本处理
1.文本颜色 color:red;
2.文字大小 font-size （属性值一定用px作单位） 例：font-size：12px;【页面中字体一般为12-14px，标题为16-18px】
3.文字字体 font-family：Arial；【不建议使用特殊字体，中文多数为宋体和微软雅黑】
4.文字缩进 text-indent：32px；【首行缩进32px】
5.行高：line-height:30px;【行高为30px，值可以设置为像素；也可以设置为几倍行距】
line-height:3em;【行高设置为3倍行距】
6.文本对齐方式 text-align:center;【居中对齐】
7.英文单词间距 word-spacing:30px;
8.汉字或英文字母的间距 letter-spacing:30px;
9.两端对齐 justify
10.英文大小写 text-tranform:uppercase;【uppercase:大写；lowercase：小写】
11.文本装饰 text-decoration：none;【none：没有装饰；underline：下划线； overline：上划线； line-through：删除线； blink：闪烁】
背景处理
背景颜色 background-color:
插入背景图片 background-image:url('b.jpg'【对应的路径】);
设置背景图片的填充方式 background-repeat:no--repeat;
【no-repeat:图片不重复 repeat-x:水平重复 repeat-y:垂直方向重复】
列表
去掉列表样式 ul{list-style：none;}【去掉小黑点】
用图片代替小黑点 list-style-image:url('b.jpg'【对应的路径】);
表格
边框 border：1px solid #000000;
边框的粗细 线型 颜色
【前后位置可以调整，但是三者必须都有】
【所有的标记都可以加边框,这样只有最外层有边框】
**通常采用群组选择器 table,th,td{border：1px solid #000000;}
折叠边框为单一边框 border-collapse:collapse;
表格宽度：width：60%;【可以放具体值，也可以放百分比】
分区<div>
内边距：padding 【会撑大div的范围】
padding-left:只增加左边的内边距
padding-right:只增加右边的内边距
padding-top:只增加顶边的内边距
padding-bottom:只增加底边的内边距
加边框：border【同上，可以单边加边框】
外边距：margin【不同div之间的距离，同上可以单边加外边距】
浮动：float：left【用于位置调整，当一行放不下多个div时会进行自动换行】
清除浮动：clear：both
JavaScript
概念
运行在客户端浏览器的 基于事件驱动的脚本语言。面向对象的语言。
【添加在对象上，由事件驱动执行】
变量
Var关键字声明。可以使用数字 字母 下划线 $，不能以数字开头。变量的数据类型由赋值的数据确定，未赋值的变量类型为undifined。
console.log(变量名) 在浏览器控制台输出对应的变量值
数据类型
JS的数据类型根据所赋予的值来确认，不存在类型转换。typeof(值或者变量)方法用于查看数据类型。
number类型
包含整数和浮点数
String字符串类型
使用单引号（''）或者双引号（""）包含字符串
boolean布尔类型
只有两个值true和false
undifined类型
变量没有赋值就使用了
function函数类型
定义的格式：
1.var 函数名称 = function(){};
2.function 函数名称(){}【末尾有无分号没有影响】
举例：1.var fun = function(){};
3.function test(){}
fun = test;【将函数赋值给变量时，不能加括号。加括号代表函数执行】
object对象类型
【null是特殊值，表示什么都没有】
运算符和表达式
数学运算符
加（+）、减（-）、乘（*）、除（/）、取余数（%）
赋值运算符
+= 、-= 、*=、 /=、%=
自增（++）、自减运算符（--）
运算符在前时，先运算后使用；
运算符在后时，先使用后运算。
比较运算符
【运算结果为布尔类型】
等于（==）、恒等于（===）【变量值和变量的类型都相同:结果为true】、不等于（!=)、不恒等于（！==）【变量值或者变量类型不相同】、
大于（>）、小于（<）、大于等于（>=）、小于等于（<=）
逻辑运算符
且（&&）、或（||）、取反（！）【运算结果为布尔类型】
条件运算符
也称三元运算符或三目运算符
格式：var 变量名称 = 表达式?结果1：结果2；
若表达式结果为true，将结果1赋值给变量；否则将结果2赋值给变量。
流程控制语句
结构分类
顺序
分支
循环
1.分支结构
if（表达式）{执行代码}else if(表达式){执行代码}else{执行代码}
switch（变量）{case 变量值：执行语句；break；default：执行语句，break；}
break用于结束当前的条件，没有break，switch语句会从满足条件的位置开始向下贯穿执行。
2.循环结构
①for（初始语句；条件判断语句；步进语句）{执行代码}
②while(条件判断语句）{执行代码；步进语句}【先判断，后执行】
③do(执行语句；步进语句)while(条件判断语句)【相比于while循环，do-while结构必定会执行至少一次执行语句。】
内置函数
parseInt
返回字符串中的第一个数字【整数】
parseFloat
返回字符串中的第一个数字【浮点数】
isNaN（not a number）
判断括号内的数据是否为number类型，是数值或数值的字符串时返回false，其他类型时返回true。
alert()
弹窗显示括号里的内容
自定义函数
定义的格式
1.function 函数的名称（参数名称，...）{
函数体；
}
2.匿名函数：var 变量名 = function(参数名称，...){
函数体；
}
【参数列表可以为空，参数名称可以自定义，不同参数用逗号隔开】
函数的调用
括号即表示方法调用。
函数的名称或者变量名（参数值，...）；【参数值用逗号分隔，当设定参数却没有给参数值时，默认参数值为undifined】
内置对象
数组对象
用于存放数据，和java数组不同，js的数组不限定数据类型，且 长度可以改变。操作方式像是java中数组与stack的组合。
创建方式
1.var arr=[元素1，元素2,...]
2.var arr=new Array(数组长度);
使用方式
数组取值
arr[下标/索引]【下标从0开始】
数组长度
数组名称.length方法【数组内的元素个数】
数组元素的增加和删除
Push()和pop(): 添加或删除尾部元素。
数组排序
arr.sort（）：排序【默认按照字符编码顺序进行排序，可以自定义比 较函数作为参数传入】
function method(a,b){return a-b}//从小到大 {return b-a}//从大到小
arr.reverse（）数组反向
日期对象Date
getFullYear():获取系统当前年；
getMonth():获得当前是第几个月，从0开始
getDate():获取日期（几号）
getHours(）:获得小时
getMinutes():获得分钟；
getSeconds():获得秒
getTime():获得自1970-01-01零时开始至今的毫秒数
toLocaleString();获取系统日期与时间
toLocaleDateString();获取系统日期
toLocaleTimeString();获取系统日期
【设置时间将get改成set,括号内输入修改后的内容即可】
字符串对象String
对象名称.length:字符串长度；【字符串中字符的个数，空格也计算在内】
对象名称.toLowerCase:转成小写字母
对象名称.toUpperCase:转成大写字母
对象名称.charAt(i):获得第i个位置的字符【i从0开始】
对象名称.charCodeAt(i):获得第i个位置字符对象的ASCII值【i从0开始】
对象名称.split("分隔符")；在对象中以存在的分隔符进行分隔，返回一个数组
Math对象
【不需要通过对象来调用。在参数中输入要计算的值，按照不同的方法返回对应的计算结果】
Math.pow（a,b）;//求a的b次方值
Math.sqrt()：平方根
自定义对象
function 对象名称（）{} //
var 对象的引用 = new 对象名称（）；//创建对象
对象的引用.属性名称=“”；//
【自定义构造函数，创建对象后对属性单独赋值】
构造函数创建对象
function 对象类名称（参数1名称，参数2名称，...）{
this.参数1名称=参数1名称；
this.参数2名称=参数2名称；//this表示当前对象，在调用构造函数时会声明一个对象
...
}
var 对象名称 = new 对象类名称（参数1，参数2...）;//对象创建时输入参数值，即为对象对应的属性值
文字标记创建对象
【每一行属性或方法之间需要用逗号结尾】
var 对象名称={
属性名称1：属性值，
属性名称2：属性值，
...
方法名称1：function(){方法体}，
方法名称2：function(){方法体}，
}
工厂模式创建对象
function 对象类名称(属性值1，属性值2...){
var 对象引用= new 对象名称();
引用.属性=属性值1；
引用.属性=属性值2；
引用.方法=function(){
方法体；
}
Return 对象引用；
}
【这种方式创建对象后可以在外面声明变量进行接收】
原型模式创建对象
function Car(){}
Car.prototype.name="小轿车";
Car.prototype.wheel="朝阳";
Car.prototype.drive=function(){alert('可以上路')}
【定义原型模式。函数的名称.prototype.属性的名字或者是方法的名称。通过该函数创建对象时，对象的属性默认值为函数里的赋值】
正则表达式
格式：/匹配项/可选项（g/i/m）
【g:全局匹配；i:不区分大小写匹配；m:多行匹配】
举例：/匹配项/g
字符^：表示匹配开始位置
字符$:表示匹配结束位置
.：点符号。表示任意字符；【不包括换行符和行结束符】
*：表示0个或多个字符
？：表示0个或1个字符
+：表示一个或多个字符
\d:表示数字的匹配
\D:表示非数字的匹配
\s:表示空白符的匹配
\S:表示非空白符的匹配
\w:单词匹配（数字、字母、下划线）
\W:非单词匹配
{n}:表示个数范围匹配，n代表要匹配的个数
{x,y}表示个数匹配范围为x-y个。
[a-b]:表示字符范围的匹配，【可以是数字，也可以是英文字母，大小写不同】
【不同的范围写在同一个中括号内，用空格隔开，表示或者的意思。】
\:表示转义符
中文匹配：[\u4E00-\u9FA5]|[\uFE30-\uFFA0]
使用方法
- /表达式/.test(“字符串”)；
- 字符串.match(/表达式/可选项)；返回值为一个字符串，若设置 可选项为全局匹配时，返回一个字符串数组
- 字符串.search(/表达式/可选项);返回值为匹配的位置
JavaScript交互
window对象
window.prompt（"文本框前要显示的内容"）
输入文本框【确定是获得输入的值，取消获得null】
window.confirm("要显示的内容")
确认框【确认返回值为true,取消为false】
window.open("url")
在新的窗口打开对应的网页
window.location.href="url"
【跳转到指定页面】
window.history.back()
后退
window.history.forward()
前进
setTimeout("函数名称()"，调用函数的时间间隔)
【间隔一段时间调用该函数，时间间隔单位是毫秒】
DOM操作
获得节点对象：
- document.getElementById(“id属性值”)；==》返回单个元素
- Document.getElementsByName(“name属性值”)==>元素集合
- Document.getElementsByTagName(“标签名称”)==>元素集合
- Document.getElementsByClassName(“class属性值”)==>元素集合
- 节点元素.elements==》获得该节点所有子节点元素
窗口相关事件
Onload:页面加载时执行，只能加在body上。
Onunload:页面卸载时执行，只能加在body上。【与浏览器有关】
表单相关事件
Onchange：表单元素发生改变时执行
Onblur：表单元素失去焦点时执行
Onfocus：表单元素获得焦点时执行
JQuery
概念
JavaScript框架，操作更加方便，代码简洁。
Jquery对象与javascript对象是不通用的，因此彼此的方法没有办 法互相使用。
Jquery对象
对象获取
$(“选择器”)：根据选择器返回指定元素或者元素的集合
对象转换
Jquery对象转换成节点对象可以使用 $()[第几个]
JS对象转换成Jquery对象 $(JS的节点对象)
Each函数遍历
Jquery对象.each(function(i){
方法体；});
Jquery集合对象中的每个DOM节点元素都会执行该方法，i表示该节点元素的索引。【该参数不是必须的。方法返回true时会指示下一个元素继续执行，若返回false则循环结束】
选择器分类
1. id选择器
$(“#id属性值”)；匹配指定id值的元素
2. 标签(元素)选择器
$(“标签名”)；匹配指定标签的元素，返回对应的元素集合
3. 类选择器
$(“.class属性值”)；返回符合class属性值的元素集合
4. 群组选择器
$(“标签1，标签2，...”)；返回所有标签的元素集合
5. 包含选择器
$(“标签1，标签2，...”)；返回符合指定嵌套关系的元素集合
6. 匹配指定元素后的单个同级元素的集合
$(“选择器1 + 选择器2”)；匹配符合的选择器2的元素
【要求选择器2与选择器1的元素相邻】
7. 匹配指定元素后的所有同级元素的集合
$(“选择器1 ~ 选择器2”)；匹配所有选择器2的元素
【要求选择器2与选择器1的元素同级】
8. 属性选择器
$(“标签名[属性]”)匹配标签中有设置对应属性的元素
$(“标签名[属性=‘值’]”)匹配对应标签中属性值符合要求 的元素。
属性=‘值’：匹配属性值相同的元素
属性！=‘值’：匹配属性值不同的元素
属性^=‘值’：匹配属性值以指定值开头的所有元素
属性$=‘值’：匹配属性值以指定值结尾的所有元素
属性*=‘值’：匹配属性值中包含指定值的所有元素
9. 复合属性选择器
在属性选择器的基础上再增加一次属性查询。
$(“标签名[属性] [属性=‘值’]”)匹配标签中有设置对应属性的 元素
$(“标签名[属性=‘值’] [属性=‘值’]”)匹配对应标签中属性 值符合要求 的元素。
属性
1. 添加属性
$("选择器").attr("属性","属性值");
【注意属性是HTML的属性和属性值，不可以自定义】
2. 删除属性
$("选择器").removeAttr("属性名");
3. 设置节点的值
$("h1").html("<span>内容</span>"); //改变节点对象的值
$("h1").text("<span>内容</span>");
注意 html是可以解析标签的text单纯的文本的操作标签不会被解析，用text设置时span标签会被当做普通字符串作为内容的一部分传入。
4. 获得节点的值
$("h1").html();
$("h1").text();
【获得节点内容只需要不设置参数即可】
5. 设置表单的值
$("input").val("内容");【该方法只能用于表单元素】
6. 获得表单的值
$("input").val();【获得节点内容只需要不设置参数即可】
筛选
1. 获得匹配的元素集合中的第一个元素
$("p").first()
2. 获得匹配的元素集合中的最后一个元素
$("p").last()
3. 获得匹配的元素集合中的指定位置的元素
$("p").eq(3)
4. 获得匹配的元素集合中元素的所有子节点对象
$("p").children()
5. 从元素集合中删除指定的元素
$("p").not(参数);
【参数可以是：1.选择器字符串2.DOM 元素3.函数对象】
文档处理
1. 添加节点
$("select").append("<option value='1002'>北京</option><option value='1001'>上海</option><option value='2'>广州</option>");
【在指定的标签中添加子节点，作用同appendChild方法】
2. 删除节点
$("select").remove();
【删除的是对应的标签对象】
CSS
1. 获得CSS样式属性值
$(选择器).css(“属性名”)；【获得对应的属性值，如具体的颜色。】
2. 设置CSS样式
设置单个样式：$(选择器).css(“属性名”，“属性值”)；
设置多个样式：$(选择器).css({属性名：”属性值”，属性名：”属性值”})
【多个样式时用逗号进行分隔】
事件
- ready(函数对象)：页面加载时触发，需要加在body上
- Hover(函数对象)：鼠标悬浮时触发
- Change(函数对象)：元素发生改变，失去或者获得焦点时触发。
- Click(函数对象)：点击时触发
- Dbclick(函数对象)：双击时触发
- Keydown(函数对象)
- Keypress(函数对象)
- Keyup(函数对象)
- Mousedown(函数对象)
- Mouseenter(函数对象)
- Mouseleave(函数对象)
- Mouseout(函数对象)
- Mouseover(函数对象)
- Mouseup(函数对象)
效果
- show()：元素可见
- hide()：元素隐藏
- toggle()：元素可见和隐藏来回切换
