HTML_CSS_JS

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>

实体符号

空格：&nbsp;     大于号：&gt;     小于号：&lt;

表格

<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、hiddenreadonly：只读，不能修改，提交表单时数据会提交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，变量声明没赋值，系统默认赋值undefinedNumber：（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.locationdocument.location.href       document.locationhistory历史对象：window.history.go()/back();注:go()的参数也可以是1/-1screen屏幕对象：screen.width      screen.heightdocument对象：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)根据正则替换

HTML_CSS_JS_JSON

HTML

概要

基本标签

实体符号

表格

表单

DIV (Division)和 span

HTML中元素的id属性

Cascading Style Sheets

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

样式

标签的分类

JavaScript

JavaScript包括三块：ECMAScript、DOM、BOM

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

变量

JS数据类型

JS中的事件

回车键13，ESC键27

JS运算符之void

for…in

JS内置对象

BOM和DOM的区别与联系

DOM编程

BOM编程

window.eval()函数

JSON

eval()和JSON联合使用

正则表达式

HTML_CSS_JS_JSON相关推荐

最新文章

热门文章