HTML、CSS和JavaScript是構(gòu)建網(wǎng)頁的三種基本語言。HTML負(fù)責(zé)頁面內(nèi)容，CSS負(fù)責(zé)頁面樣式，而JavaScript則掌管網(wǎng)頁動(dòng)態(tài)效果。在實(shí)際開發(fā)中，這三種語言的源代碼往往需要分別編寫、嵌入到HTML文件中去。
<!DOCTYPE html> <html> <head> <title>網(wǎng)頁標(biāo)題</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="script.js"></script> </head> <body> <h1>歡迎訪問我們的網(wǎng)頁！</h1> <p>這是一個(gè)演示頁面，用于展示HTML、CSS和JavaScript的源代碼。</p> <div id="content"> <p>下面是一張圖片：</p> <img src="image.jpg" alt="演示圖片"> </div> </body> </html>
以上是一個(gè)簡單的HTML文件例子，它包含了一些CSS和JavaScript的引用，和一些基本的HTML元素。這個(gè)文件中，我們使用了pre標(biāo)簽展示了一段HTML源代碼，每段代碼都包含了一對(duì)起始標(biāo)簽和結(jié)束標(biāo)簽。 HTML標(biāo)簽是用于指定文檔中不同部分的起始和結(jié)束的符號(hào)，這些標(biāo)簽通過結(jié)構(gòu)化的方式描述了網(wǎng)頁的內(nèi)容。
CSS的樣式定義較為靈活，可以在HTML結(jié)構(gòu)上或者是外部文件中進(jìn)行定義。下面是一個(gè)示例：
body {
background-color: #f2f2f2;
}
h1 {
color: #333;
font-size: 30px;
}
#content {
border: 1px solid #ccc;
padding: 20px;
}以上代碼定義了網(wǎng)頁的背景色、標(biāo)題顏色和字體大小，以及一些網(wǎng)頁內(nèi)容的樣式。使用pre標(biāo)簽展示的這段代碼是CSS文件中的樣式定義，它直接應(yīng)用到了HTML中的元素上，以使頁面達(dá)到更好的效果。
JavaScript則用于頁面的動(dòng)態(tài)效果，我們可以通過JavaScript為網(wǎng)頁添加交互效果。下面是一個(gè)簡單的例子：
function showContent() {
var content = document.getElementById("content");
content.style.display = "block";
}
var btn = document.getElementById("btn");
btn.addEventListener("click", showContent);這段JavaScript會(huì)在按鈕被點(diǎn)擊的時(shí)候顯示指定的內(nèi)容。它包含了一個(gè)用于獲取頁面中元素的方法，還有一個(gè)添加事件處理程序的方法。在這個(gè)例子中，我們使用了JavaScript將HTML和CSS與腳本進(jìn)行了結(jié)合。