程序员的知识教程库

网站首页 > 教程分享 正文

网页设计|HTML、CSS、JavaScript三者关系

henian88 2024-10-23 10:45:39 教程分享 10 ℃ 0 评论

网页能将文本、图片、音频、视频等诸多元素结合起来，通过CSS，能呈现这些元素预定的外观，通过JavaScrip脚本，能呈现预定的动作。

网页设计前端语言HTML、HTML、JavaScript三者关系：

前端网页语言功能说明符号
HTML内容Hyper Text Markup Language<tag>…</tag>
CSS内容呈现的外观Cascading Style Sheets<style>...</style>
JavaScript内容呈现的动作嵌入网页有脚本<script>...</script>

以上由浏览器解释执行。

代码举例：

<!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">

<h4>前端语言比较</h4>

<p class="descri">简单加法器：</p>

<form name="myform">

加数:<input type="text" name="first" size="6" />

<span style="color:red;">+</span>&nbsp;被加数

<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浏览器呈现：

HTML，Hyper Text Markup Language，就其字面理解，其核心是"Markup“（标记），通过“标记”，让将文本、图片、音频、视频等诸多元素呈现“超文本”（HyperText）的特点。

CSS，Cascading Style Sheets，就其字面理解，其核心是“Style“，也就是”样式“。就像我们做Word文档一样，对文本进行格式化。但在网页设计中，样式是通过“属性：属性值“的代码来表示，且这些“样式”可以叠加，对对象的样式描述可以列成序列的形式；

JavaScript，是一种网页脚本语言，通过网页中的一些事件能引发一些代码的执行。

最好的参考网站或查询页面：http://www.w3school.com.cn/index.html

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表