溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

HTML、CSS、JavaScript網(wǎng)頁設(shè)計(jì)實(shí)例分析

發(fā)布時(shí)間：2022-03-02 11:00:57 來源：億速云 閱讀：208 作者：iii 欄目：web開發(fā)

這篇文章主要介紹了HTML、CSS、JavaScript網(wǎng)頁設(shè)計(jì)實(shí)例分析的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇HTML、CSS、JavaScript網(wǎng)頁設(shè)計(jì)實(shí)例分析文章都會(huì)有所收獲，下面我們一起來看看吧。

網(wǎng)頁能將文本、圖片、音頻、視頻等諸多元素結(jié)合起來，通過CSS，能呈現(xiàn)這些元素預(yù)定的外觀，通過JavaScrip腳本，能呈現(xiàn)預(yù)定的動(dòng)作。

網(wǎng)頁設(shè)計(jì)前端語言HTML、HTML、JavaScript三者關(guān)系：

前端網(wǎng)頁語言 功能 說明 符號(hào)
HTML 內(nèi)容 Hyper Text Markup Language <tag>&hellip;</tag>
CSS 內(nèi)容呈現(xiàn)的外觀 Cascading Style Sheets <style>...</style>
JavaScript 內(nèi)容呈現(xiàn)的動(dòng)作 嵌入網(wǎng)頁有腳本 <script>...</script>

以上由瀏覽器解釋執(zhí)行。

代碼舉例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>前端語言比較</title>

</head>

<style>

#container{

margin:auto;

width:75%;

.descri{

color:#990000;

font-size:120%;

</style>

<body>

<div id="container">

<h5>前端語言比較</h5>

<p class="descri">簡單加法器：</p>

<form name="myform">

加數(shù):<input type="text" name="first" size="6" />

<span style="color:red;">+</span>&nbsp;被加數(shù)

<input type="text" name="second" size="6" />

<input type="button" onclick="sum()" value="求和" />

<span style="color:blue;">=</span>&nbsp;

<input type="text" name="result" size="6" />

</form>

</div>

<script type="text/javascript">

function sum(){

var resultValue,firstValue,secondValue;

firstValue = parseFloat(document.myform.first.value);

secondValue = parseFloat(document.myform.second.value);

resultValue = parseFloat(firstValue + secondValue);

document.myform.result.value = resultValue;

</script>

</body>

</html>

Chrome瀏覽器呈現(xiàn)：

HTML、CSS、JavaScript網(wǎng)頁設(shè)計(jì)實(shí)例分析

網(wǎng)頁設(shè)計(jì)｜HTML、CSS、JavaScript三者關(guān)系

HTML，Hyper Text Markup Language，就其字面理解，其核心是"Markup“（標(biāo)記），通過“標(biāo)記”，讓將文本、圖片、音頻、視頻等諸多元素呈現(xiàn)“超文本”（HyperText）的特點(diǎn)。

CSS，Cascading Style Sheets，就其字面理解，其核心是“Style“，也就是”樣式“。就像我們做Word文檔一樣，對(duì)文本進(jìn)行格式化。但在網(wǎng)頁設(shè)計(jì)中，樣式是通過“屬性：屬性值“的代碼來表示，且這些“樣式”可以疊加，對(duì)對(duì)象的樣式描述可以列成序列的形式；

HTML、CSS、JavaScript網(wǎng)頁設(shè)計(jì)實(shí)例分析

網(wǎng)頁設(shè)計(jì)｜HTML、CSS、JavaScript三者關(guān)系

JavaScript，是一種網(wǎng)頁腳本語言，通過網(wǎng)頁中的一些事件能引發(fā)一些代碼的執(zhí)行。

關(guān)于“HTML、CSS、JavaScript網(wǎng)頁設(shè)計(jì)實(shí)例分析”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“HTML、CSS、JavaScript網(wǎng)頁設(shè)計(jì)實(shí)例分析”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手