HTML_day2
关于css与html结合使用的知识
1、css简介：
——层叠样式表
**** 层叠：表现为一层一层的。
****样式表：拥有很多的属性和属性值
——css作用：能使页面的显示效果更好
——css功能：将网页内容与显示样式进行分离，提高了显示功能。
2、css：属于单独的一个运用版块，但是它不单独使用，是和其他版块联合使用。比如html，JavaScript
——css与html的结合方式（四种结合方式）
****（1）在每一个html标签里面都有一个style属性，把css与html结合在一起。
引用案列：属性与属性值使用“：“”进行分割；不同的属性使用"；"进行分离.
<html>
<head>
<title>怪兽不纯粹的css测试</title>
</head>
<body>
<div style= "background-color:red;color:blue" >正在进行页面编辑语言的css测试</div>
</body>
</html>
****（2）使用html的<style>标签进行实现，此标签属于头标签，需要放在头标签里
引用案例：此种设置属于全局设置，被设置的此类标签都将拥有被设置的效果
<html> <head> <title>怪兽不纯粹的css测试</title> <style type = "text/css"> div{ background-color :yellow; color:red } </style> </head> <body> <div>正在进行页面编辑语言的css测试</div> </body> </html>
**** (3)在<style>标签里面使用@import url(css的文件路径)从外部导入css文件
——此种方法存在明显缺点，在有一些浏览器上不支持此操作，从而无法达到需要的显示效果。
运用案列：此种设置也属于全局设置。在使用此方法前，需要首先建立好css文件。
简略的.css文件
div{
background-color:black;
color:green
}
<html>
<head>
<title>怪兽不纯粹的css测试</title>
<style type = "text/css">
@import url(ss.css)
</style>
</head>
<body>
<div>正在进行页面编辑语言的css测试</div>
<div>1233456789</div>
</body>
</html>
**** (4)使用头标签<link>导入外部的css文件。
——标签格式：<link rel = "stylesheet" type = "text/css" href = "css文件路径"/>
——此标签作为常用的操作方式。此操作方式达到了内容与显示效果的分离，利于维护与修改。
——引用案列：此种设置也属于全局设置。使用此方法之前也要先建立css文件
<html>
<head>
<title>怪兽不纯粹的css测试</title>
<link rel = "stylesheet" type = "text/css" href = "ss.css">
</head>
<body>
<div>正在进行页面编辑语言的css测试</div>
<div>1233456789</div>
</body>
</html>
——css的优先级：一般情况下由上到下，由外到里，优先级依次降低。通常后加载的优先级高。类似于就近原则。
——css的基本选择器：
**** 标签选择器：使用标签名作为选择器的名称。
<html>
<head>
<title>怪兽不纯粹的css测试</title>
<style type = "text/css">
div{
background-color:red;
color:blue
}
</style>
</head>
<body>
<div id = "a1">正在进行页面编辑语言的css测试</div>
</body>
</html>
**** class选择器：使用.名称
<html> <head> <title>怪兽不纯粹的css测试</title> <style type = "text/css"> .hello{ background-color:red; color:blue } </style> </head> <body> <div class = "hello">正在进行页面编辑语言的css测试</div> </body> </html>
**** id选择器：使用#名称
<html> <head> <title>怪兽不纯粹的css测试</title> <style type = "text/css"> #hello{ background-color:yellow; color:blue } </style> </head> <body> <div id = "hello">正在进行页面编辑语言的css测试</div> </body> </html>
——css的扩展选择器：
**** 关联选择器：设置嵌套标签的样式
——使用格式：主标签 次标签（使用空格进行标签分离）
<html> <head> <title>怪兽不纯粹的css测试</title> <style type = "text/css"> div p{ background-color:black; color:blue } </style> </head> <body> <div id = "hello"><p>正在进行页面编辑语言的css测试</p></div> </body> </html>
**** 组合选择器：进行多选设置，是不同标签拥有相同的样式
——使用格式：标签1，标签2(使用逗号进行标签区分)
<html> <head> <title>怪兽不纯粹的css测试</title> <style type = "text/css"> div,p{ background-color:black; color:blue } </style> </head> <body> <div id = "hello">22222222222</div> <p>11111111111111</p> </body> </html>
**** 伪元素选择器（伪类选择器）：使用css已经定义的显示样式
——例如超链接的状态。（实际上是鼠标对超链接的触碰状态）
link：未进入 hover：悬空 active：按下 actived：拿起
<html>
<head>
<title>怪兽不纯粹的css测试</title>
<style type = "text/css">
a:link{
background-color:red;
}
a:hover{
background-color:yellow;
}
a:active{
background-color:blue;
}
a:actived{
background-color:black;
}
</style>
</head>
<body>
<a href = "hello.html">超链接</a>
</body>
</h
——css的盒子模型：将数据放置在div里面，然后对div进行设置
**** border:2px(边框大小) solid（边框线样式） red(边框线颜色)
**** 可以单独对某一边框线进行设置：border-top (顶部边框线); border-bottom（底部边框线） ; border-left（左部边框线） ; border-right（右部边框线） ;
***内边距：padding
***** 可以单独对某一内边距进行设置：padding-top ; padding-bottom;padding-left ; padding-right
` *** 外边距：margin
***** 可以单独对某一外边距进行设置：margin-top;margin-bottom ; margin-left; margin-right
——css的布局的漂浮：float
*****left：其他div放置在被漂浮div的右边
right：其他div放置在被漂浮div的左边
****应用：图文排版中的文字环绕效果
——css的布局的定位：position
***** absolute：将对象从文档中拖出，会出现页面覆盖效果
***** relative ：将对象保留在文档中，不会出现页面覆盖效果
***** top , bottom, left, right：设置页面偏移度。
js与html结合运用的知识
1、js的简介：
——js全称为JavaScript，是一种基于对象和事件的脚本语言，主要应用于客户端（此处客户端主要指浏览器）
——js与html结合使用的效果：实现动态网页
——java与JavaScript的区别：
（1） java是由sun公司开发，现在属于oracle公司，JavaScrip是由网景公司开发。
（2）java是强类型语言，JavaScript是弱类型语言
（3）java运行需要先生成字节码，JavaScript直接解析就可以运行
——Javascrip的特性：
（1）交互性：可以实现动态交互
(2) 安全性:JavaScript不能直接访问本地磁盘
（3）跨平台性：JavaScript几乎被所有的浏览器支持
——JavaScript的组成部分：
（1） ECMAScript：ECMA是欧洲计算机协会
（2）BOM：全称为browser object model ，浏览器抽象模型
（3）DOM：全称为document object model , 文档抽象模型
——js与html的结合方式（两种）：
（1：使用标签<script type = "text/javascript"> 代码 <script/>
(2)：使用标签<script type = "text/javascript" src = "js文件路径"> ，导入外部js文件
***特别：使用第二种方式后，在内部书写js代码将不会被执行
——js的原始变量：string(字符串) ， number（数字），boolean(布尔类型)，null（空类型），undefined(未定义的)
**** js定义变量：使用关键字var
**** null类型：变量获取对象的引用，实际上就是获取object对象，因为object是所有对象的超类。null虽然表达的含义是获取空对象，但实际打印出的是object（源自早期错误的延续，后被规则化）
—— var data = new Date()
**** undefined:只声明对象，但没有赋值
——var data
——typeof：用于查看原始变量类型
——js的语句：类似于python的语法。
——js语法：
（1）js不区分整数与小数
（2）js的数字型字符串，执行的加减操作是数字内容的加减操作。
（3）== 表示比较值 ； ===表示比较类型后再比较值
(4) document.write() ：可以直接在页面上输入内容
（5）js中的数组：功能类似于python中数组的定义与使用方法
1、声明数组变量的同时，进行赋值。 var arrary = {1,2,3} ;
2、先声明变量，再依次进行赋值。var array = new arrar() , array[0] = 1;
3、在new 变量的同时进行数据的传入，调用了构造方法。 var array = new array(1,2,3);
4、数组里面存在属性length。
5、数组里面可以存放任何内容。
（6）js的函数：使用函数创建关键字function
1、有名函数：function 函数名( 参数表 ){ 函数体 }
**** 参数表可以为空。
2、匿名件数：var func = function( 参数表 ){ 函数体 }
****参数表可以为空。
3、动态分配函数：var func = new function("参数内容" ，"函数体内容" )
**** 此种方法为实时动态分配，没有函数体。
*** 此种方式使用较少。
· （7）js的重载：相同的函数名，解析器根据函数的参数表进行编号识别。js实际不存在真正的重载，但是可以使用其他的方式进行模拟（arguments）
（8）js的局部变量与全局变量：
1、局部变量：函数体内部定义，也只能在函数体内部使用。
2、全局变量：script标签内，函数体外部定义，可以在任何函数体内使用。
——js的放置位置：建议放置在</body>的后面，原因是html从上到下的解析方式
——js的常用对象：string，array
******string对象：字符对象，可以对字符串进行相应的操作。其使用方式和java中的string对象高度相似
—string的常用方法：
（1）bold：加粗。
（2）link：将字符串显示为超链接。
（3）concat：字符串连接。
（4）sup：上标。英语原型字母superscript
（5）sub：下标。英语字母原型subscript
（6）charAt：返回值指定位置的字符。
（7）fontcolor：设置字体颜色。
（8）fontsize：设置字体大小。
（9）indexOf：检所指定字符是否存在，存在则返回位置，不存在则返回-1.
（10）split：将字符串分割成指定的字符数组。
（11）replace：对指定的子字符串进行替换
——示列： string.repace(old_sub_str , new_sub_st )； 第一个参数为原始参数，第二个参数为将要替换的参数。
（12）substr：字符串截取。截取长度为从第一个参数开始，往后寻找第二个参数个长度。即第一个参数为起始位置，第二个参数为长度
——示列： string.substr(index_1 , len )
（13）substring：同样属于字符串截取，截取长度为从第一个参数开始，往后寻找开区间个长度。
——substr与substring的区别：substr的计数是起始位置之后的第一个元素开始。substring的计数是从起始位置开始。
· ***** array对象：数组对象，相同类型的元素集合的操作，与java数组拥有高度相似性，属于泛型数组。
——数组的三种创建方式：创建数组的同时进行赋值；先声明数组大小，再进行数组赋值；使用数组的构造方法进行赋值
——数组拥有length属性。可以知道数组的实际空间占有长度
——数组的常用方法：
（1）concat：进行数组的连接。
（2）join：将数组分割成指定类型的字符串。
（3）push：向数组末尾添加一个或多个元素。（添加数组时，会将整个数组作为一个元素进行识别）
（4）pop：删除并返回数组的最后一个元素。
***** date对象：日期对象，可以通过此对象获得日期的具体内容。与java的date对象存在部分相似的地方。
——new date()：可以获得正确的日期时间，但是时间格式不正确。
——tolocalString（）： 可以获取我们熟悉的时间格式。
——getFullYear（）： 获取年份。getYear（）方法已经逐渐被放弃，因为它有时候会回返回两位数的年份格式。
——getMonth（）： 获取的月份是0-11，需要+1才为当前的真正月份
——getDate()： 获得的是当前月的第几天。
——getday()： 获取的星期时间为0-6，星期日被规定为0
——getHours(): 获取当前日的小时。
——getMinutes（）： 获取当前小时的分钟。
——getSeconds(): 获取当前分钟的秒。
——getTime（）：获取1977/1/1到现在的毫秒时间。
****** 使用毫秒数处理缓存的效果（当数据不需要分配缓存时）。
**** math对象：math对象没有构造方法，math内部的方法全是静态方法，可以直接调用。
——math对象里的部分特殊方法：
***** ceil（x）：对一个数进行向上舍入
***** floor（x）：对一个数进行向下舍入
***** round（x）：对一个数进行四舍五入。
***** random（）：产生0-1的随机数，属于伪随机数，可以通过乘法进行值的扩大
*** BOM对象：浏览器对象模型
（1）navigator（导航器）：获取客户机信息
**** navigator.appName:：获得浏览器名称。
（2）scree：获得屏幕的各种参数（如宽、高等）
（3）location：用于请求url地址
*** href属性：用于获得本机的href属性。
*** 设置href：需要使用到标签的特殊属性onclick（onclick：js方法名；）
<html> <head> <title>怪兽不纯粹的js测试</title> </head> <input type = "button" value = "a" onclick = "my_href();"/> <script type = "text/javascript"/> function my_href() { location.href = "hello.html" } </script> </html>
（4）history：实现当前页面的前后跳转。
——history.back：向前
——history.forward：向后
——history.go():向前（-1），向后（1）
（5）window：窗体，属于顶层操作。所有的操作都是在窗体内进行，但是在使用时不用显示声明，系统会默认存在。
——window的许多操作都是对java的frame框架中方法的封装
（6）alert（）：向窗体中弹出提示信息。等同于Java面板中的showMessageDialogue（）。
（7）prompt（）：窗体中弹出信息输入框。等同于java面板中showInputDialogue（）。
（8）confirm（）:向窗体中弹出选择信息。等同于java面板中的showConfirmDialog()。
（9）setInterval（）：设置内容周期显示
——setInterval（"js代码",xxx毫秒）：毫秒时间为显示的间隔周期。
（10）setTimeout（）：使内容在设置的时间后显示一次。
——setTimeout（"js代码",xxx毫秒）：此方法与setInterval不同之处在于只显示1次。
（11）setInterval与setTimeout的撤销：clearInterval（），clearTimeout（）。
**** DOM对象：文档被分配空间后，进行树形存储，使用同层次关系排列。
——DOM对象里面还存在有下级对象：标签对象，属性对象，文本对象。
——DOM获取下级对象的方式：
（1）getElementById()：通过id属性值获取标签对象，实际返回值为object对象。
（2）getElementsByName（）：通过name的属性值获取标签对象集合，获取值为相同name值的集合。
(3) getElementsByTagName()：通过标签名获取标签对象集合，返回值为同类标签集合。
——特殊之处：返回的标签对象集合可以当做数组处理。
——下级对象的获取：获取时严格遵守上下级关系。
（1）追加标签：使用到appendChild（）
（2）Element对象：标签对象，此对象可以通过dacument相应方法获取。
——Element的相应方法：
***** getAttribute():获得属性名称
——格式：getAttribute（"value值"）；
***** setAttribute():设置属性名称。
***** removeArribute（）：删除相应属性（不能删除value属性）
***** childNodes：获得某标签下的子标签对象集合,但是它的返回值由浏览器的解析方式决定，兼容性差。补救方法：通过getElementsTagName()获取子标签的对象集合，然后依次进行遍历（此种方式也是唯一有效的获取方法）。
（3）Node对象：节点对象，也是所有DOM对象的父对象。
——存在三个属性：nodeType，nodeName, nodeValue
标签结点对应的值：
nodeType：1
nodeName：标签的大写名称
nodeValue：null
属性结点对应的值：
nodeType：2
nodeName：属性的名称
nodeValue：属性的值
文本结点对应的值：
nodeType:3
nodeName:#text
nodeValue:文本的内容
其余属性结点：
——parentNode（父节点），childNodes（孩子结点），firstChild（第一个结点），lastChild（最后一个结点）。
——nextSibling（当前结点的下一个兄弟结点），previousSibling（当前结点的上一个结点）。
——结点创造方法：js是将内容进行树形结构的层级存储。
**** createElement():创建新的标签结点
**** createTextNode()：创建新的文本结点
——表单的提交方式：
（1）使用表单标签进行提交：<form> <inpput type = "submit"/> </form>
（2）使用js中的submit()方法： 表单对象.submit()；
（3）使用超链接进行提交：<a href = "提交地址?key1 = value1;key2 = value2;……">
——此种提交方式是将地址栏的内容简化到了超链接当中。
浙公网安备 33010602011771号