DHTML ：制作动态HTML页面的技术
- DHTML=HTML+层叠样式表CSS+脚本语言javascript
一、CSS
1.1 CSS样式的分类：
- 行内样式：只影响一行，其他相同标签也不影响。如下：
<font style="color: red;font-size: 55px;">我是font标签</font>
- 内嵌样式： 影响一个页面内的指定标签。如下：
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
font{
color:grey;
font-size:25px;
}
</style>
</head>
<body>
<font >我是font标签</font><br/>
<font>我也是一个font标签</font>
</body>
-
- type属性是必须的，且值只能是“text/css” 。 这里影响到这个页面内所有的font标签。
<style>标签内注释是用块注释 (/* */) 不能用<!-- -->
- type属性是必须的，且值只能是“text/css” 。 这里影响到这个页面内所有的font标签。
- 外部样式 ：写在外部文件里，且注释用的是块注释( /* */)，文件后缀名为.css . 如下： cssTest.html
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="./fontCss.css">
</head>
<body>
<font >我是font标签</font><br/>
<font>我也是一个font标签</font>
</body>
fontCss.css如下：
font{
border:1px solid blue;
}
- 注意红色字体的属性。
-
样式的优先级：行内样式>内嵌样式 >外部样式 >用户样式 >浏览器样式
- ！important : 用 !important 将属性值标记为重要，被标记的属性值浏览器会优先显示。
<style type="text/css" > p{ color:blue !important; } </style> </head> <body> <p style="color:red">hello!!</p> </body>
结果：
解析：原本优先显示行内样式red， 但是加了!important 之后会优先显示。
1.2 CSS选择器
- HTML选择器：
- class选择器（最常用）
- ID选择器
注意：如果同时有id和class选择器，则id选择器优先。若class和html选择器同时存在，则class选择器优先。
1.3 常用的样式属性
- position中定位基础
- position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。（可层叠）
（1）没有父级，参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT进行定位。
（2）有父级 ： （1） 在没有设定TRBL，默认依据父级的做标原始点为原始点。
<style type="text/css">
font.htop{
}
font.hs{
position:absolute;
}
</style>
</head>
<body>
<font class="htop"> 我是顶层
<font class="hs">我是子层</font>
</font>
</body>
结果：
解析： 父层不管有没有设置position，absolute定位的子层都是以父层的坐标原始点为原始点的。
（2）如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。
<style type="text/css">
font.htop{
}
font.hs{
position: absolute;
top:20px;
left:20px;
}
</style>
</head>
<body>
<font class="htop"> 我是顶层
<font class="hs">我是子层</font>
</font>
</body>
结果：
解析： 如果父层没有设置position，则子类以浏览器左上角为坐标原始点。
2. position:relative; 他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。
<style type="text/css">
font.htop{
position:relative;
top:20px;
left:0px;
}
</style>
</head>
<body>
<font class="htop"> 我是顶层
</font>
</body>
结果：
解析： 无父级则以BODY的原始点为原始点，配合TRBL进行定位。
<style type="text/css">
font.htop{ }
font.hs{
position:relative;
top:10px;
left:0px;
}
</style>
</head>
<body>
<font class="htop"> 我是顶层
<font class="hs">我是子层</font>
</font>
</body>
结果：
解析： 子级以父级坐标原始点为原始点。
二、JavaScript
- 区分大小写，Date.getHours() 中 写成Date.gethours()； 就是错的
- 在网页上使用javaScript ，如下：
1. 第一种：
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
alert("你好");
</script>
</head>
2.第二种：
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script lang="javascript" src="./fontJs.js"></script>
</head>
<body>
<font >我是font标签</font><br/>
<font>我也是一个font标签</font>
</body>
fontJs.js:
alert("hello!!");
2.2 变量
- 变量名必须以字母（a~z）或者下划线(_)开头。
- 变量可以包括字母、数字，且字母分大小写，A不等于a。
2.3 转义字符
2.4 函数的定义与调用
函数的定义与调用有以下几种形式：
- 1. function func1([参数]){/*函数体*/}
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <title>JavaScript测试</title> <script type="text/javascript" src="../js/JsTest.js"></script> // 注意导入方式 <script> function f2(){ alert("lalala"); } f1(); //f1()是在上面链接的JsTest.js文件里定义的函数 f2(); //函数调用。 </script> </head> <body> hello!! </body> </html>
解析： javascript脚本文件的导入和css文件的导入方法不一样，js导入用<script>标签导入，而css用<link>导入。如果外部的js文件和html文件定义了同一个名字（无论是否重载即参数列表不相同即重载）都调用的是本文件定义的函数。
- 2. var func2=function([参数]){/*函数体*/}; //第二种是将一匿名函数赋给一个变量，调用方法： func2([函数]);
<script type="text/javascript" src="../js/JsTest.js"></script>
<script>
var f2=function(){ //f2后不能加括号
alert("我是第二种定义方法");
}
f1();
f2();
</script>
- 3. var func3=function func4([参数]){/*函数体*/}; //是将func4赋给变量func3，调用方法：func3([参数数])
<script type="text/javascript" src="../js/JsTest.js"></script>
<script>
var f3=function f4(){
alert("我是定义的第三种方法");
}
f1();
f3();
</script>
解析： var f3=function f4(){ alert("我是定义的第三种方法"); } 只能调用f3()方法，不能调用f4(）方法。
- var func5=new Function(); //声明func5为一个对象。 具体请查看（六）javascriptJS中定义对象的几种方式
<script>
var a=new Function();
a.aaa=function(){
alert("nihao");
}
a.aaa();
</script>
解析： js与java不同的是， js不能在var a=new Function()｛｝花括号里直接定义方法并调用。 如果写成如下就是错的：
<script>
var a=new Function(){
var aaa=function(){
alert("nihao");
}}
a.aaa();
</script>
2.5 javaScript语法
