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>标签内注释是用块注释 (/* */) 不能用<!-- -->
  • 外部样式 ：写在外部文件里，且注释用的是块注释( /* */)，文件后缀名为.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;

}
  • 注意红色字体的属性。

  • 样式的优先级：行内样式>内嵌样式 >外部样式 >用户样式 >浏览器样式

浏览器先从行内中寻找css属性值，如果没有再从内嵌样式中寻找 ，如果没有再从外部样式（link）中寻找，若无再从用户样式中寻找，否则就用浏览器默认样式。
 
  • ！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选择器：


p,font {


color:red;


}


// 如果有很多个标签，那么在花括号前就要写很多个标签名


  • class选择器（最常用）




  • ID选择器




　　　　注意：如果同时有id和class选择器，则id选择器优先。若class和html选择器同时存在，则class选择器优先。


1.3 常用的样式属性




  • position中定位基础


  1. 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>





结果：


aaarticlea/png;base64,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" alt="" />




解析： 父层不管有没有设置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>





结果：


aaarticlea/png;base64,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" alt="" />


解析： 如果父层没有设置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>





结果：


aaarticlea/png;base64,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" alt="" /> 解析： 无父级则以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>





结果：


aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAALYAAABaCAIAAACaFDuqAAAHw0lEQVR4nO2az2vcRhSA9Vf46J588CGBLEvTwranLTmoEMKGQhRaiksogoayh7YQKNGhFIVA9qgeGpW4RTQQJ4VWKSXIFKpADC6FKuSi1nSVpI4Vx9jjJI4Tb9SDvLtaaTRvpP0l1+9DEGkkzYxmvnkzO45AkAQLCwvz8/Pb29sBEgTCuLujoCwsLFy9evUycvkyKoIAoCIIACqCAKAiCAAqggCgIggAKrKHmS41Mx35SoEVefpaKTx4LouAlMAwjHFXaihMl5r8O2CoSBdJkmKXp0+f/l9aElPkxvyTg4e9K9c2gyD46uuNs1882mntOUUWNalhJ5NdXRRSUSyurLskFVlaWuK3xFbLgqi78Qomq+Hbak2xvFiqpfTWXjdkxfQIIcS3lGo9PO15SrHiDcD7yTFFTn20Ml1qvn3835u3tsKZ5ZcbTxiKxKqa1vawIttteC4hbLUsz/nxVFcXu53S0x3UvgFIKkII4bTEt5VKTbd0SdIdQgixFEGxutVgutxu0t13iKWEH+VbyozuOLokaYvtT28/s5tz9DM7t2A6ijxaawVB8PGnD6dLzfdOPbhybTNU5LebW/xRxFarKmX8Dn+5ym7VsBGHrUgU1pueWZfDbnSNmqg5NEUUixDi2ZqiLya/NKlIcqS2nxlYFPn9j2fTpeb7H64s/fP8s89X/7y9vb7R+uTM6qxBHqzs3Ly1xaeIo4lUQzgUOXRRCo/w8pXzj8MjvFyfFcIj7XWeTh7qRMN5K+JHWCejVlHtmCKEEOKaqjiZJjsh0e6PpvXOXYOMIucurIUx46+/n8eWqG+8dW+61Pzue5KmCKPlOxUesSKWImpOeGo3qu11yVCjCOctR6sr9Z72EmuKoccUcQ1pqiZrekOqKaZLCCG+a6q1qmw4kW/snWgIoSoSHQNOP1Fk1iDTpeah1731jdbtO9vHTiwfP7l8996LrWcvQ3XOnF1lKBJfdyXSR6PIolaV5zwSjs3QkejM5+qibPrRFwjtgpOcUSQWK8JzShQhhBDfc21DrkxUKuWpat2wXc/rLrCiUURXhASRfNvZmVq3nzJHkZ1W8OPPj2/f2W56L159826oxZGj9x+ttT6QVw4e9uZ/fTpcRfpcrtrKhGIRR6tKhkcIsdUDNcONrY0KMdH0iOCb8qRixxWx1KooihVJVhv6nO34hBDiu/ac3pClSqU8KZRVmxpFHF0Uwu+nl1vXIkGoPqFQ1wRJor9oHq7uHDl6P7pR9s67y1vPXrKXq4OZaPrDN2VRdwnxDEnUXUJ8sz6l2sRWa5FWsZVyjy/jjCKOVhEEQZgUtUVCjSIprdqzFokp4mg1VdekntVg+i/OsmInfvPR6SiyvtGK+REeJ2cekM0WWxEoiriZJ5rnPwjhQb1MYKvlcEx4xszM3O448s36TGRMOVqlO8+MW5HulSEplp+8Q23V6FrDrAtSwzS0merE1FRFtX1TFjWH+KZc053EG7v/tnPN9MEdRS5e2kjbdP/mW9KXIr45XEV8Uy4nf0l5xky9qwSx1QMdeUiskRxttIrUO4X5plztBLpoNYAoYilTlYokq5rRkERt0bVUcXePhfiWUm2fD1aRcMVKPS5e2uhnovEMabiK2KpsuMylhmK5htyz49r5GSgIgiBMSgZFcia5FfFttTLRrtjElGS4nZ8akWqAUSSS1tAVSY1OG86cLDUW4W1NUef50o4iZLMVbq0eOXr/y/Nr5y6sHTuxHG6j9TfR+LaqjHh3dRQk/4zHu3W21yjKn/GQwlKU/wyA7HNQEQQAFUEAUBEEABVBAFARBEC4/tN1PPBgHAL/3guyP0FFEABUBAFARRAAVAQBQEUQAFQEAUBFEABUBAHgVUQQBOo59ck0+qopMia4ui3Wx+FJWpdnTacWlOYW9H8+UcTBwxsPYumxE+pddjqoAk8mOR5AssIbRaiXaYpkGt/JdEY3oyKjpy9FeB7OlA6KhRPN6GGNV35iL6ZlCKaDEQUNGD1DiSKZxjdVkeQJT9HIMOhXkf77LIciONGMkgyKULstmtj/xIRRpIBk2BeJXsZOGC/yZM7IGRUZO7zbWTyJnVvUc0b+yXOGIlmjVI7S057sv7i9CNwoAfRDgz1xgK2ZzIozc2rFMhGrVdrHsstKGz+ZJM7xysjIv1wV0gd62os8mSfz58ycvxHT2j3ti9j5Z+28TJnnLmWAZFaEZ9Cz25rxOqMs9i2e4sDnQUX6H9+5PSuuItFeZETI6MPJF8H80y6peQbM3uqnw3iE5k/P9CT7i7J+12DJMxFQH0izh/9r2emc3clTW34GUmKQMrqyZjIuiluzEZA1iuQe35zDrJgUt2YjgKFI7j7LF6WEyFSeW8QhgYrQV6nRxBxdTi0IrEkxKW7NRgB1KAdD6FFUZE9CHfeMYECVib8snsrkjlJDZT8q0mluqiLU8+StTJ2X9YFCBZUCVWX0UDsmbboZdhRh12qMoCKp54yUwSoCyjdeS/apItEuBxclbHv4C2I/0ym0UAuRYN8qEhRg15h6N18mQ2X/KoJwgoogAKgIAoCKIACoCAKAiiAAqAgCgIogAKgIAoCKIACoCAKAiiAAqAgCgIogAKgIAoCKIACoCAKAiiAAqAgCgIogAKgIAoCKIACoCAKAiiAA/wGlOH7DeaZVxQAAAABJRU5ErkJgggA=" alt="" />解析： 子级以父级坐标原始点为原始点。


　　　　　　　










二、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语法


















												


											
(五)CSS和JavaScript基础的更多相关文章
	

    
								
  1. Html5、css、JavaScript基础
		
    一.HTML学习 HTML样式Css 内联样式- 在HTML元素中使用"style" 属性 内部样式表 -在HTML文档头部 <head> 区域使用<style& ...
    
		
    2. 
						
  2. Node.js实战(五)之必备JavaScript基础
		
    阅读本章的话,个人觉得之前使用过JavaScript,完全轻松. Node.js的核心类型有:number.boolean.string以及object.另外两种类型分别是函数合数组,其实它们你可以理 ...
    
		
    3. 
						
  3. Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”
		
    Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...
    
		
    4. 
						
  4. 第五模块·WEB开发基础-第2章JavaScript基础
		
    第1章 JavaScript基础 01-JavaScript历史介绍 02-JavaScript的组成 03-JavaScript的引入方式 04-变量的使用 05-基本数据类型(一) 06-基本数据 ...
    
		
    5. 
						
  5. 学习笔记 第十五章 JavaScript基础
		
    第15章   JavaScript基础 [学习重点] 了解JavaScript基础知识 熟悉常量和变量 能够使用表达式和运算符 正确使用语句 能够掌握数据类型和转换的基本方法 正确使用函数.对象.数组 ...
    
		
    6. 
						
  6. 前端之JavaScript基础
		
    前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...
    
		
    7. 
						
  7. 【JavaScript基础入门】总结目录
		
    一.JavaScript基础 1.1JavaScript概述 1.2如何使用的JavaScript 1.3JavaScript基本语法 1.4JavaScript数据类型 1.5JavaScript运 ...
    
		
    8. 
						
  8. JavaScript基础---语言基础（1）
		
    写在前面: 通过四篇博客把JS基础中的基础整理一下,方便自己查阅,这些内容对于实际项目开发中也许并不会在意,但是作为JS的语言基础,自觉还是应该熟悉.在完成这三篇博客(JavaScript基础---语 ...
    
		
    9. 
						
  9. 第三篇：web之前端之JavaScript基础
		
    前端之JavaScript基础   前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. jquery.cookie实战用法详细解析
			
    Cookie是由服务器端生成,发送给User-Agent(一般是浏览器),浏览器会将Cookie的key/value保存到某个目录下的文本文件内,下次请求同一网站时就发送该Cookie给服务器(前提是 ...
    
			
    2. 
						
  2. 实现微信浏览器自动播放MP3音乐
			
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
    
			
    3. 
						
  3. 记一次DG搭建过程中ORA-09925: Unable to createaudit trail file 错误
			
    今天做Oracle DG  编写initorcl的时候,修改完以后,sqlplus就不能再登陆,一直报 ERROR: ORA-09925: Unable to createaudit trail fi ...
    
			
    4. 
						
  4. Java泛型类型擦除导致的类型转换问题
			
    初步结论:泛型类型转换不靠谱: 源码: package com.srie.testjava; public class TestClassDefine4<T> { public stati ...
    
			
    5. 
						
  5. CSS3-----图片翻页效果的展示
			
    在开发一个网站的过程中各种翻页效果数不胜数,在这里我将介绍一下简单的一种方法就是使用css3的旋转即可实现这种常见的效果: 显示效果如下: 首先是页面的布局,不用那么复杂; a标签的href属性,一般 ...
    
			
    6. 
						
  6. 使用jsCompress压缩混淆js代码的一些常见的问题和技巧
			
    不同的团队使用的js混淆器或压缩工具不一样,jsCompress是一款绿色的免费的js压缩工具,时代定制的UI团队推荐大家使用,不仅性能优越,而且操作非常人性化. 使用jsCompress.exe时, ...
    
			
    7. 
						
  7. LoRaWAN协议(七)--完整数据流程
			
    以下的GW指Gateway 所用指令: root@lora-iot-sk:~# tcpdump -i lo -nn -x 'length>100' 入网流程 GW -> NS join_r ...
    
			
    8. 
						
  8. Linux系统（三）系统基础扫盲大全
			
    序言 如果大家都爱装逼,一般会偏爱使用安装最小化的liunx系统,那么你的系统就不带图形化的桌面功能,这样对于一个想装B的初学者来说,Liunx就是黑漆马虎,一望无际的黑屏,黑屏,如何快速的对liun ...
    
			
    9. 
						
  9. java Socket(TCP)编程小项目
			
    package 服务器端相关操作; import java.io.Serializable; /* * 创建存储需要传输信息的对象,方便客户端向服务器端传送数据 */ public class Cli ...
    
			
    10. 
						
  10. PHP 中使用 Composer
			
    在线安装版本: http://www.phpcomposer.com/ 这个是国内的composer网站 thinkphp5自带了composer.phar组件,如果没有安装,则需要进行安装 以下命令 ...
    
			
    11.