淺析html+css+javascript之間的關係與作用 三者間的關係
阿新 • • 發佈：2018-11-04
淺析html+css+javascript之間的關係與作用
三者間的關係
一個基本的網站包含很多個網頁，一個網頁由html, css和javascript組成。
html是主體，裝載各種dom元素；css用來裝飾dom元素；javascript控制dom元素。
用一扇門比喻三者間的關係是：html是門的門板，css是門上的油漆或花紋，javascript是門的開關；
html介紹
html是用來描述網頁的一種語言，它不是一種程式語言，而是一種標記語言（標記標籤），總的來說，html使用標記標籤來描述網頁，本文就用標籤來代替標記標籤進行說明。
標籤是指<html></html>，<div></div>。
標籤是有語義的：標題用<h1>，表格展示用<table>，連結用<a>，無序排列用<ul>等等。
標籤裡可帶有各類屬性，最基本的就是class和id。class屬性的作用是引用css樣式；id的作用是配合javascript使用，具有唯一性。下面舉幾個例子說明
l 圖片標籤<img>的主要屬性有src，alt。src是引用圖片的網路地址（必要）；alt是對這張圖片的描述，如果圖片載入不成功，則會顯示alt的文字。
l 超連結<a>的主要屬性有href，target。href是指連結要跳轉的網址（必要）；target是告訴瀏覽器點選這個連結後要以哪種形式找開視窗，target=”_blank”是指開啟一個新視窗
若想了解更多關於html的資料，請點選這裡。
css介紹
css的官方名字叫層疊樣式表，它的出現是為了解決內容和表現分離的問題，一般存放在.css檔案裡。
使用css。
可在html的頭元素<head>裡書寫，或者書寫在CSS檔案並在html裡引用該檔案。
css優先權。
多個css樣式可集中在單個html標籤裡，出現這種情況時，一般按優先權劃分
瀏覽器預設設定 （最低）
外部樣式表
內部樣式表（寫在html的<head>標籤內部）
內聯樣式（寫在html的標籤裡，即style屬性）（最高）
css的語法。
css由兩個主要部分組成，選擇器，一條或多條宣告。
選擇器是指css樣式的名字“.seletor”，名字前面要帶上一點“.”。宣告是由屬性和值組成，給個例子“margin: 0 auto”，冒號前面是屬性，後面是值，該例子是定義元素居中顯示。
具體的屬性和值可點選這裡。
javascript介紹
javascript是指令碼語言，它是連線前臺（html）和後臺伺服器的橋樑，它是操縱html的能手，本文用js代替javascript進行說明。
平時聽到原生js，js庫，js框架，js外掛等等，下面簡單說明一下。
l 原生js，是指最基礎的js，沒有封裝過，但因為各瀏覽器對js的支援不同，就導致用基礎的js程式設計需要為不同的瀏覽器寫相容程式碼。
l Js庫，js框架，是指整合一系列dom操作，API封裝，介面UI封裝的的庫類，常見的有jQuery，extjs等等，這方面的定義比較難區分，暫不誤導大家
l Js外掛，就是集成了幫助程式設計師輕鬆完成功能的程式。Js外掛用得比較多，網頁製作上隨處可見。如圖片輪換功能，導航製作，上傳圖片等等。
三者間的關係
一個基本的網站包含很多個網頁，一個網頁由html, css和javascript組成。
html是主體，裝載各種dom元素；css用來裝飾dom元素；javascript控制dom元素。
用一扇門比喻三者間的關係是：html是門的門板，css是門上的油漆或花紋，javascript是門的開關；
html介紹
html是用來描述網頁的一種語言，它不是一種程式語言，而是一種標記語言（標記標籤），總的來說，html使用標記標籤來描述網頁，本文就用標籤來代替標記標籤進行說明。
標籤是指<html></html>，<div></div>。
標籤是有語義的：標題用<h1>，表格展示用<table>，連結用<a>，無序排列用<ul>等等。
標籤裡可帶有各類屬性，最基本的就是class和id。class屬性的作用是引用css樣式；id的作用是配合javascript使用，具有唯一性。下面舉幾個例子說明
l 圖片標籤<img>的主要屬性有src，alt。src是引用圖片的網路地址（必要）；alt是對這張圖片的描述，如果圖片載入不成功，則會顯示alt的文字。
l 超連結<a>的主要屬性有href，target。href是指連結要跳轉的網址（必要）；target是告訴瀏覽器點選這個連結後要以哪種形式找開視窗，target=”_blank”是指開啟一個新視窗
若想了解更多關於html的資料，請點選這裡。
css介紹
css的官方名字叫層疊樣式表，它的出現是為了解決內容和表現分離的問題，一般存放在.css檔案裡。
使用css。
可在html的頭元素<head>裡書寫，或者書寫在CSS檔案並在html裡引用該檔案。
css優先權。
多個css樣式可集中在單個html標籤裡，出現這種情況時，一般按優先權劃分
瀏覽器預設設定 （最低）
外部樣式表
內部樣式表（寫在html的<head>標籤內部）
內聯樣式（寫在html的標籤裡，即style屬性）（最高）
css的語法。
css由兩個主要部分組成，選擇器，一條或多條宣告。
選擇器是指css樣式的名字“.seletor”，名字前面要帶上一點“.”。宣告是由屬性和值組成，給個例子“margin: 0 auto”，冒號前面是屬性，後面是值，該例子是定義元素居中顯示。
具體的屬性和值可點選這裡。
javascript介紹
javascript是指令碼語言，它是連線前臺（html）和後臺伺服器的橋樑，它是操縱html的能手，本文用js代替javascript進行說明。
平時聽到原生js，js庫，js框架，js外掛等等，下面簡單說明一下。
l 原生js，是指最基礎的js，沒有封裝過，但因為各瀏覽器對js的支援不同，就導致用基礎的js程式設計需要為不同的瀏覽器寫相容程式碼。
l Js庫，js框架，是指整合一系列dom操作，API封裝，介面UI封裝的的庫類，常見的有jQuery，extjs等等，這方面的定義比較難區分，暫不誤導大家
l Js外掛，就是集成了幫助程式設計師輕鬆完成功能的程式。Js外掛用得比較多，網頁製作上隨處可見。如圖片輪換功能，導航製作，上傳圖片等等。
至於js語法介紹，則太過於瑣碎，詳情請點選這裡
<HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft Visual Studio 8.0"> <TITLE></TITLE> <!-- Row Highlight Javascript --> window.onload=function(){ var tfrow = document.getElementById('tfhover').rows.length; var tbRow=[]; for (var i=1;i<tfrow;i++) { tbRow[i]=document.getElementById('tfhover').rows[i]; tbRow[i].onmouseover = function(){ this.style.backgroundColor = '#f3f8aa'; }; tbRow[i].onmouseout = function() { this.style.backgroundColor = '#ffffff'; }; } }; </HEAD> <BODY> 當前登入使用者名稱：<TMPL_VAR name="name" /> <ul> <li><a href="MySqlTest1.cgi?mod=netdisk&action=list">網盤</a></li> <li><a href="MySqlTest1.cgi?mod=student&action=list">學生管理</a></li> <li><a href="MySqlTest1.cgi?mod=teacher&action=list">教師管理</a></li> </ul> <table> <tr><td>年</td><td>製造商</td><td>型號</td><td>說明</td><td>價值</td></tr> <tr><td>1997</td><td>Ford</td><td>E350</td><td>"ac</td><td> abs</td><td> moon"</td><td>3000.00</td></tr> <tr><td>1999</td><td>Chevy</td><td>"Venture ""Extended Edition"""</td><td>""</td><td>4900.00</td></tr> <tr><td>1999</td><td>Chevy</td><td>"Venture ""Extended Edition</td><td> Very Large"""</td><td>""</td><td>5000.00</td></tr> <tr><td>1996</td><td>Jeep</td><td>Grand Cherokee</td><td>"MUST SELL!</td></tr> <tr><td>air</td><td> moon roof</td><td> loaded"</td><td>4799.00</td></tr> </table> <style type="text/css"> table.tftable {font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #729ea5;border-collapse: collapse;} table.tftable th {font-size:12px;background-color:#acc8cc;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;text-align:left;} table.tftable tr {background-color:#ffffff;} table.tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;} </style> <table id="Table1" class="tftable" border="1"> <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th><th>Header 5</th><th>Header 6</th><th>Header 7</th></tr> <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr> <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr> <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr> <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr> <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr> <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr> </table> <p><small>Created with the <a href="http://www.textfixer.com/html/html-table-generator.php" target="_blank">HTML Table Generator</a></small></p> <p><small>Created with the <a href="http://www.textfixer.com/html/html-table-generator.php" target="_blank">HTML Table Generator</a></small></p> </BODY> </HTML>