HTML_CSS_JS_JSON

HTML

概要

（1）主要强调HTML的标签都是成对儿的，有开始标签，一般都会有对应的结束标签。
（2）强调代码的合理缩进
（3）强调HTML语法松散不严格
（4）强调HTML不区分大小写
（5）强调标签的属性，每个属性都包括属性名和属性值，属性值可以使用单引号括起来，也可以使用双引号括起来。
（6）强调HTML中的注释怎么写
（7）<meta charset="UTF-8"/>该行代码的作用就是告诉浏览器采用哪一种字符编码打开该文件。
	解决乱码问题：乱码产生是因为文件采用UTF-8方式，但浏览器打开该文件时采用GBK方式打开的，所以乱码

基本标签

标题字：h1~h6	水平线：<hr/>（独目标记的概念）	粗体：<b></b>	斜体字：<i></i>		插入字：<ins></ins>

删除字：<del></del>		右上角加字：<sup></sup>		右下角加字：<sub></sub>	字体标签：<font></font>

图片标签：
    （1）<img src="" width="" height="" alt="" title=""/>
    （2）只设置图片的宽度，高度等比例缩放，不建议设置高度，设置高度容易失真。

超链接：
    （1）超链接的作用：向服务器发送请求，链接到某个资源
    （2）链接到网络中的某个资源<a href="http://www.baidu.com"></a>
    （3）链接到本地的某个资源<a href="本地文件的相对路径或绝对路径都可以"></a>
    （4）图片做超链接<a href=""><img/></a>
    （5）超链接的target属性"_blank"、" _self"
    （6）用户点击超链接和在浏览器地址栏上直接输入URL是完全相同的效果，只不过超链接更傻瓜式。

列表：
	有序：<ol type="1/A/a/I"><li></li></ol>
	无序：<ul type="disc/circle/square"><li></li></ul>

实体符号

空格： 		大于号：>		小于号：<

表格

<table border="像素" width="像素或百分比" height="像素或百分比" align="center">
    <tr align="center">
		<td align="center">test</td>
		<td>test</td>
	</tr>
</table>
<--<th> 定义表格的表头。  <thead> 定义表格的页眉。  <tbody> 定义表格的主体。-->
    
行合并：rowspan  列合并：colspan

表单

<form action="">
    <input type="" name="" value="" />
</form>

input输入域标签的tpye属性值：
	text、password、		radio、checkbox(默认值：checked)		
	select(选项：option  默认选项：selected  多选：multiple="multiple"	显示多个条目：size="3"	)、
	submit、reset、button、textarea、file、hidden

    readonly：只读，不能修改，提交表单时数据会提交
    disabled：只读，不能修改，提交表单时数据不会提交
    maxlength 属性规定输入字段的最大长度，以字符个数计。

form表单的method属性：
	（1）method不写或写上get都属于get请求，method写post才是post请求
    （2）"get"请求在HTTP协议的请求体中提交数据，最终提交的数据会显示在浏览器地址栏上而"post"不会
    （3）只有当使用form表单，并且method属性设置为post才是post请求，其他请求均为get，超链接也是get请求。

	action属性等同于超链接的href属性，填写请求的url
	表单的提交是发送请求url，并携带数据给服务器。
	发送请求并提交数据时，数据格式遵循HTTP协议，所有浏览器都会采用这种格式：
		url?name=value&name=value&name=value...，
		其中name是input标签的name属性，value是input标签的value属性

DIV (Division)和 span

（1）理解div是一种图层，div主要使用在网页布局方面，通过后期所学的CSS可以设置div的宽度、高度、位置等样式。div比table的布局更加灵活。
（2）div图层可以嵌套使用
（3）默认情况下div独占一行，span不会独占行。

HTML中元素的id属性

讲述HTML文档是一棵树（DOM树），树上有很多节点，每个节点一般都会有id属性，id属性具有唯一性，在同一个文档中不能重复，id是该节点的唯一标识。

Cascading Style Sheets

HTML中嵌入CSS样式的三种方式

内联定义方式:
	<div style="font-size:12px; text-align:center;">HTML中引用CSS的行内式方法</div>

样式块:
	（1）<style type="text/css">选择器{} 选择器{}</style>
	（2）CSS的注释怎么写

引入外部独立的CSS样式文件:
	<link href="css文件路径" rel="stylesheet" type="text/css" />

基本选择器：
       id选择器->#id{样式名1:样式值1;……}
    class选择器->.calss{样式名1:样式值1;……}
     标签选择器->标签{样式名1:样式值1;……}
     全局选择器->*{样式名1:样式值1;……}

    基本选择器优先级：ID选择器>类选择器>标签选择器

扩展选择器：
    选择所有元素：
        语法： *{}

    并集选择器：
        选择器1,选择器2{}

    子选择器：筛选选择器1元素下的选择器2元素
        语法：  选择器1 选择器2{}

    父选择器：筛选选择器2的父元素选择器1
    	语法：  选择器1 > 选择器2{}

    属性选择器：选择元素名称，属性名=属性值的元素
    	语法：  元素名称[属性名="属性值"]{}

    伪类选择器：选择一些元素具有的状态
    	语法： 元素:状态{}
        如： <a>
            * 状态：
            * link：初始化的状态
            * visited：被访问过的状态
            * active：正在访问状态
            * hover：鼠标悬浮状态

样式

字体、文本
	* font-size：字体大小
	* color：文本颜色
	* text-align：文本对其方式，和父标签一致时垂直居中
	* line-height：行高 
	* text-decoration:none：无下划线
背景
	* background：
	* background-image:url
边框
	* border：10px solid red
尺寸
	* width：宽度
	* height：高度
盒子模型：控制布局
	* margin：外边距
	* padding：内边距
	* 默认情况下内边距会影响整个盒子的大小
	* box-sizing: border-box;  设置盒子的属性，让width和height就是最终盒子的大小

布局float：浮动
	* left
	* right

超链接：
	•a:link - 普通的、未被访问的链接
	•a:visited - 用户已访问的链接
	•a:hover - 鼠标指针位于链接的上方
	•a:active - 链接被点击的时刻

定位：
    为了将标签放到指定的位置上。通常情况下，能用盒子模型解决，就不要用定位。
    	样式：position
    常用值：
    	absolute：绝对定位特征：
    		1）Z轴上往人的方向移动，原本的位置会空出来，后面的标签就会去挤占掉
    		2）相对于页面的顶点进行移动
    	relative：相对定位特征：
            1）原本的位置会一直保留
            2）相对于原来的位置进行偏移
    	fixed：固定定位特征：
            1）原本的位置不保留
            2）相对于页面的顶点进行偏移
            3）不受滚动条的影响
    调整位置的样式：left，right，top，bottom

标签的分类

块标签：
    独占一行，自动换行、可以手动设置宽高
    比如：<div>,<p>,<h*>,<ol>,<ul>,<li>,<table>,<form>……

行标签：
    不会自动换行、不能设置宽高
    比如：<span>,<font>,<strong>,<b>,<em>,<i>,<a>,<input>,<select>……

行块标签：
    不能自动换行、可以设置宽高
    比如：<img>

标签类型的转换：
    样式：display
    常用值：block(转成块标签)，inline(转成行标签)，inline-block(转成行块标签)

JavaScript

JavaScript包括三块：ECMAScript、DOM、BOM

ECMAScript是ECMA制定的262标准，JavaScript和JScript都遵守这个标准，ECMAScript是JavaScript核心语法

DOM编程是通过JavaScript对HTML中的dom节点进行操作，DOM是有规范的，DOM规范是W3C制定的。(Document Object Model：文档对象模型)

BOM编程是对浏览器本身操作，例如：前进、后退、地址栏、关闭窗口、弹窗等。由于浏览器有不同的厂家制造，所以BOM缺少规范，一般只是有一个默认的行业规范。（Browser Object Model：浏览器对象模型）

嵌入JS三种方式以及JS的注释

一、行间事件
    （1）<input type="button" value="hello" onclick="window.alert('hello js')" />
        
    （2）JS是一种基于事件驱动型的编程语言，当触发某个事件之后，执行一段代码

    （3）JS中的任何一个事件都对应一个事件句柄，例如鼠标单击事件click，对应的事件句柄就是onclick，事件句柄都是以标签的属性方式存在。在事件句柄后面可以编写JS代码，当触发这个事件之后，这段JS代码则执行了。
    
    （4）JS中的字符串可以使用单引号括起来，也可以使用双引号括起来
    
    （5）window是JS中的内置BOM顶级对象，代表当前浏览器窗口，window对象有一个alert()函数，该函数可以在浏览器上弹出消息框。
    
    （6）JS中的一条语句结束后可以使用“;”结尾，也可以不写。
    
    （7）window.alert()中的window.可以省略。

二、页面script标签嵌入
    （1）<script type="text/javascript">JS代码</script>

    （2）window.alert()的执行会阻塞当前页面的加载
    
    （3）一个页面中可以写多个脚本块、脚本块的位置没有限制
    
    （5）暴露在脚本块中的JS代码在页面打开的时候遵循自上而下的顺序依次逐行执行

三、外部引入
    （1）<script type="text/javascript" src="js文件路径">这里不能写JS代码</script>

变量

变量的声明与赋值
    （1）变量未赋值，系统默认赋值undefined
    （2）JS是一种弱类型编程语言，一个变量可以接收任何类型的数据
    （3）一行上也可以声明多个变量

函数的定义与调用
    （1）函数类似于java语言中的方法，是一段可以完成某个功能的可以被重复利用的代码片段
    （2）定义函数的两种语法
            第一种：普通函数定义
            	function 函数名(形式参数列表){
    
    函数体;}

            第二种：如果是把函数的声明当做类进行定义
            	函数名 = function(形式参数列表){
    
    函数体;}

 	JS中的函数在调用的时候，实参可以随意，没传的参数都是undefined。
    
    （3）JS中的函数定义在脚本块中，页面在打开的时候，函数并不会自动执行，函数是需要手动调用才能执行的。
    
    （4）由于JS是一种弱类型编程语言，所以函数不能同名，没有重载机制

    （5）页面打开的时候会先进行所有函数的声明，函数声明优先级较高。
    
局部变量和全局变量：
    局部变量：函数的形参是局部变量，另外使用var关键字在函数体中声明的变量是局部变量，函数执行结束之后，局部变量的内存就释放了。
    
    全局变量：在函数体外声明的变量属于全局变量，另外不使用var关键字声明的变量无论位置在哪，它都是全局变量，全局变量在浏览器关闭时销毁。

JS数据类型

typeof运算符
	typeof运算符运算结果全部为小写字符串：
    	"undefined"、"number"、"string"、"boolean"、"object"、"function"

Undefined：
	只有一个值undefined，变量声明没赋值，系统默认赋值undefined
    
Number：
    （1）Number类型包括哪些值：0,1，-1,3.14,12,300，NaN，Infinity
    （2）parseInt()函数
    （3）parseFloat()函数
    （4）Math.ceil()函数：向上取整
    （5）isNaN()函数
    
String：
    （1）可以使用单引号，也可以用双引号
    （2）字符串中常用方法讲一些，主要讲解字符串的substr()和substring()的区别。
    （3）去除前后空白方法trim();

Null：
    （1）该类型只有一个值：null
    （2）typeof运算符的执行结果是"object"

Boolean
    （1）只有两个值：true和false
    （2）Boolean()函数
    （3）JS中的if语句自动调用Boolean()函数。

Object：
    （1）JS中如何定义一个类。
    （2）JS中如何创建一个对象。
    （3）JS中如何访问对象属性，调用对象的方法。
    （4）JS中的一个函数，既是函数声明，又是类的定义，同时函数名也可以看做构造方法名。直接调用函数表示普通函数调用，如果使用new运算符来调用该函数则会创建对象。
    （5）使用prototype属性动态的给对象扩展属性以及方法。

null NaN undefined区别
    （1）=、==、===三者的区别
    （2）null NaN undefined三者类型不同，null和undefined的值可以等同

JS中的事件

常用事件
    （1）blur失去焦点		（2）focus获得焦点
    （3）keydown键盘按下	（4）keyup键盘弹起
    （5）click鼠标单击	（6）dblclick鼠标双击
    （7）mousedown鼠标按下 （8）mouseup鼠标弹起
    （9）mouseover鼠标经过 （10）mouseout鼠标离开	（11）mousemove鼠标移动
    （12）load页面加载完毕
    （13）change下拉列表选中项改变，或文本框内容改变
    （14）reset表单重置
    （15）select文本被选定
    （16）submit表单提交

注册事件的两种方式：
	（1）在标签中使用事件句柄的方式注册事件
			<body onload="sayHello()"></body>
	（2）在页面加载完毕后使用JS代码给元素绑定事件
            <script>
                window.onload = function(){
    
    
                }
            </script>
重点：通过事件注册，理解回调函数的概念

JS中也可以使用JS代码调用事件函数来触发事件
	格式eg:元素.click();

回车键13，ESC键27

JS运算符之void

javascript:void(0)执行某段表达式，但不返回任何结果，包括"";

for…in

可以使用for..in语句遍历数组，以及遍历一个对象的属性。

JS内置对象

Array
    （1）创建数组用
    	var a = [1,2,3,]   var arr1 = new Array()长度为0的数组
	    var arr1 = new Array(3)长度为3的数组  var arr1 = new Array(1,2,3)有元素的 
    （2）JS中的数组特点
    	长度可变,会自动扩容，无自动越界问题
    （3）JS中数组对象常用方法：push(新增)，pop(删除)，join(连接)，reverse(翻转)等。
    （4）数组遍历
    
Date
    （1）var time = new Date() 获取当前系统时间	
    （2）time.getFullYear()年  time.getMonth()月  time.getDate()日
    （3）time.getHours()/getMinutes()/getSeconds()/getMilliseconds()
    （4）time.toLocaleString()转换成具有本地语言环境的格式
    （5）time.getTime()获取时间戳（1970.1.1 0:0:0到现在的秒数）

BOM和DOM的区别与联系

BOM包括DOM
window是BOM的顶级对象
document是DOM的顶级对象

DOM编程

innerHTML和innerText：
	都是属性
    innerHtml会将后面的字符串当做一段HTML代码解释并执行
    innerText后面的字符串即使是一段HTML代码也会当作一段普通文本
 
查找元素：    
    document.getElementById(“id”);通过id属性的值查找元素

    document.getElementsByName(“name”);通过name属性的值查找元素，返回的是元素数组。

    document.getElementsByClassName(“class”);通过class属性的值查找元素,返回的是元素数组。

    document.getElementsByTagName(“标签名”);通过标签名查找元素，返回的是元素数组。
 

BOM编程

如果当前窗口不是顶级窗口，那就高为顶级窗口
	if(window.top!=window.self){
    
    
        window.top.location = window.self.location;
    }

window两种定时器：
    周期定时器
    	var id = window.setInterval(function,time);		清除周期定时器：window.clearInterval(id);
	超时定时器
		var id = window.setTimeout(function,time);		清除超时定时器：window.clearTimeout(id);

window三种弹窗：
    警告框:window.alert()
    确认框:window.confirm("确认信息"),返回值为true/false
    提示框:window.prompt("提示语句","默认可选参数")

location地址对象：
	跳转页面的多种方式(发送请求)：
        一、直接在浏览器地址栏上写URL
        二、点击超链接
        三、提交表单
        四、window.open(url,target)工
        五、js代码：
            windouw.location.href		window.location
            document.location.href		document.location

history历史对象：
	window.history.go()/back();注:go()的参数也可以是1/-1

screen屏幕对象：
	screen.width		screen.height

document对象：
	document.body.offsetWidth:网页可见区域的宽度
	documnt..body.offsetheight:网页可见区域的高度
	html{
    
    height:100%}  body{
    
    height:100%}

window.eval()函数

/*eval()函数的作用是：
	将字符串当做一段JS代码解释并执行。
*/
<script>
	window.eval("var i = 100;");
	alert("i = " + i); // i = 100
</script>

JSON

JavaScript Object Notation（JavaScript对象标记），简称JSON。
	(一种轻量级的数据交换格式特点是：体积小，易解析。)

什么是数据交换：
	java和c语言之间交换数据、python和java语言交换数据、js和java之间交换数据等等

JSON主要的作用是：
	一种标准的数据交换格式。（目前非常流行，90%以上的系统，系统A与系统B交换数据的话，都是采用JSON。）

在实际的开发中有两种数据交换格式，使用最多
	其一是JSON，另一个是XML。两种都是标准的数据交换格式
	XML体积较大，解析麻烦，但是有其优点是：语法严谨。（银行相关的系统等使用XML。）

在JS中JSON是以对象的形式存在
    
JSON的语法格式：
        var jsonObj = {
    
    "属性名" : 属性值,"属性名" : 属性值,"属性名" : 属性值,....};
			属性值可以是任意类型；
            
定义好之后怎么访问属性：

	第一种方式:对象.属性名的方式---->eg:console.log(jsonObj.属性名)

	第二种方式:对象["对象名"]-->eg:console.log(jsonObj["对象名"])   

注意：
    在JS当中：[]和{
    
    }有什么区别？
		[] 是数组。			
         {
    
    } 是JSON。

eval()和JSON联合使用

<script type="text/javascript">		  
	// java连接数据库,查询数据之后,将数据在java程序中拼接成JSON格式的“字符串”,将json格式的字符串响应到浏览器
	// 也就是说java响应到浏览器上的仅仅是一个"JSON格式的字符串",还不是一个json对象.
	// 可以使用eval函数,将json格式的字符串转换成json对象.
    
	var fromJava = "{\"name\":\"zhangsan\",\"password\":\"123\"}"; 
	//上面这是java程序给发过来的json格式的"字符串"

	// 将以上的json格式的字符串转换成json对象
	window.eval("var jsonObj = " + fromJava);

	// 现在就可以访问json对象
	alert(jsonObj.name + "," + jsonObj.password); // 在前端取数据.
</script>

正则表达式

预定义字符类：
	.         表示任意的字符  \.表示的一个确定的.这个字符串
	\d        表示数字字符
	\D        表示非数字字符
	\b		 匹配单词的开始或结束
	\B 		 匹配不是单词开头或结束的位置 
	^		 匹配字符串的开始
	$		 匹配字符串的结束
	\s        表示空格字符
    \S        表示非空格字符
    \w        表示的[a-zA-Z0-9_]
    \W        表示除了[a-zA-Z0-9_]以外的其他字符
    
数量词：
	模糊的数量词
        X?  表示的x这个字符，出现0次或者1次
        X+  表示x这个字符，出现1次或者多次
        X*  表示x这个字符，出现0次，1次或者多次
	精确的数量词
        X{
    
    n}  表示x这个字符恰好出现n次
        X{
    
    n,} 表示x这个字符至少出现n次
        X{
    
    n,m}表示x这个字符至少出现n次，至多出现m次
        
在JS中怎么创建正则表达式呢？
	第一种方式(主要使用)：
		直接量语法
		var regExp = /正则表达式/标记;
	第二种方式：
		使用内置类RegExp类
		var regExp = new RegExp("正则表达式","标记");
		
	以上的标记是可选项，可选的值有：
		g:全局的(global)
		i：忽略大小写(ignorecase)
		gi:全局扫描并且忽略大小写
		
正则表达式对象有一个很重要的方法：
	正则表达式对象.test();
		返回值为true表示匹配成功	
        
JS中字符串String也是支持正则表达式的：
    1、stringObj.match(String regex)判断当前字符串和参数正则表达式是否匹配
    2、stringObj.replace(regExp,replacetext)根据正则替换