1、 DHTML(動態HTML)前臺頁面技術介紹javascript
一、 DHTML介紹css
DHTML包含以四個方面的內容:html
(1)、HTML 4.0 :超文本標記語言,網頁文檔的主體,以文本文件形式存儲,由瀏覽器翻譯後展示出豐富多彩的頁面。java
(2)、CSSL:客戶端腳本語言,主要有JavaScript(JS),VBScript(VBS),JScript。Netscape主要支持JS,IE主要支持JS,VBS和JScript。web
(3)、DOM:文檔對象模型,是W3C推廣的web技術標準之一,它將網頁中的內容抽象成對象,每一個對象擁有各自的屬性(Properties)、方法(Method)和事件(Events),這些均可以經過CSSL來進行控制。瀏覽器
(4)、CSS:層疊樣式表單,用於控制網頁樣式並容許將樣式信息與網頁內容分離的一種標記性語言,用來彌補HTML在排版上的所受的限制致使的不足,它是DOM的一部分。可經過CSSL動態地改變CSS屬性,從而改變頁面視覺效果。服務器
二、 CSS樣式表介紹jsp
CSS是一組格式設置規則,用於控制Web頁面的外觀。經過使用CSS樣式設置頁面的格式,可將頁面的內容與表現形式分離。頁面內容存放在HTML文檔中,而用於定義表現形式的CSS規則則存放在另外一個文件中或HTML文檔的某一部分,一般爲文件頭部分。將內容與表現形式分離,不只可以使維護站點的外觀更加容易,並且還能夠使HTML文檔代碼更加簡練,縮短瀏覽器的加載時間。post
在一個網頁中能夠分爲外部CSS樣式表、內嵌CSS樣式表和內部CSS樣式表。ui
(1)、外部CSS樣式表(External Styles Sheet)模式,它經過一個獨立的CSS樣式表文字文件(擴展名一般爲CSS)控制其餘Web頁,也就是說,只要在須要指定樣式的Web頁中,設置一個連接至該CSS樣式表文件便可,並且以後只要改變此CSS樣式表內容,便可同時改變全部連接至該CSS樣式表的Web頁樣式。
(2)、內嵌CSS樣式表(Embedded Styles Sheet)模式,它直接在HTML<body>標籤前設置一個樣式標籤,而這個設置會直接影響該Web頁的樣式設置。
(3)、是內部CSS樣式表(Internal Styles Sheet)模式,它直接對HTML裏的任何單一對象(如文字、圖像等)進行樣式設置。CSS樣式表直接定義的樣式,只會影響單一選取的內容文字,而不會影響整個Web頁的樣式設置。
三、 JavaScript介紹
最經常使用的一種客戶端腳本語言,用於在瀏覽器端實現業務邏輯和開發交互式的 Web 頁面,並在瀏覽端進行解釋執行。
與css樣式表同樣,javascript也分爲外部js,頁面js和標籤內嵌js。
這裏你分別做個描述
四、 一個完整的HTML文件介紹
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"><!—meta標籤只能放在head標籤中,用於向服務器和客戶端傳達關於文檔的隱藏信息--!>
<link href="css.css" type="text/css" rel="stylesheet"><!--引用外部CSS樣式表文件--!>
<script type="text/javascript" src="test.js"></script><!--引用外部JS文件--!>
<style type="text/css"><!--內嵌CSS樣式--!>
.table1{
color:#ff0000;
width:500px;
height:200px;
}
</style>
<title>個人標題</title>
<script language="javascript"><!—內嵌javascript程序--!>
function abc(value){
alert(value);
}
</script>
</head>
<body><!--文檔主體開始--!>
<center>
<form name="form1" method="post" action="abc.jsp">
<table class="table1" border="2" id="tb">
<tr>
<td width="50%">1111</td>
<td width="50%">1111</td>
</tr>
<tr>
<td width="50%">2222</td>
<td width="50%">2222</td>
</tr>
</table>
<input type="button" class="button1" onclick="abc(this.value)" value="肯定">
<input type="button" style="background-color:#0000ff;color:#ff0000;width:150px" onclick="test()" value="改變表格屬性">
</form>
</center>
</body>
</html>
五、 HTML、CSS、DOM和JavaScript四者之間的關係