- html，css，javascript在制作网页中的作用是什么？三者之间有何种联系？
- 如何用html编写一个简单的网页
- HTML 网页，按照题目内容，编写1个HTML网页。详细在图里，求HTML、CSS 和 JavaScript代码，急用
一、html，css，javascript在制作网页中的作用是什么？三者之间有何种联系？
html、 css、 javascript三者的关系
网页主要由三部分组成： 结构（ structure） 、 表现（ presentation） 和行为（ behavior）
html —— 结构， 决定网页的结构和内容（ “是什么”）
css —— 表现（ 样式） ， 设定网页的表现样式（ “什么样子”）
javascript（ js） —— 行为， 控制网页的行为（ “做什么”）
一、 html语言
1.1什么是html语言（ html概述）
英文全称： hyper text markup language
中文全称： 超文本标记语言
html 语言是制作网页的最基本语言， 并且只能通过web浏览器显示出来。
hyper（ 超） ：
用html制作的网页可以通过其中的链接从一个网页“跳转”至另一个网页。
text（ 文本） ：
html是一种文本解释性的程序语言， 即它的源代码将不经过编译而直接在浏览器中运行时被“翻译”。
markup（ 标记） ：
html的基本规则就是用“标记语言” ---- 成对尖括号组成的标签元素来描述网页内容是如何在浏览器中显示的。
1.2 html文档结构
html文档一般由两部分组成：
1.文档所要表达的内容信息（ 文字、 图片等） ；
2.一系列的html标签；
1.3 html标签
1.3.1 什么是html标签
1.html标签是用 <> 所括住的指令， 主要分为：
单标签： <起始标签/>
双标签： <起始标签></结束标签>
例如：
<br/>
<div></div>
2.通常使用的是双标签。 有一个起始标签就对应有一个结束标签。 标签内容写在起始标签和结束标签之间。
<div>标签内容</div>
3.在元素的起始标签中， 还可以包含“属性”来设置元素的其他特性。 一个标签可以有多个属性,每个属性之间用空格隔开。
<div 属性名="属性值"></div>
例如：
<div class="wrap" id="wrap"></div>
4.每一对双标签之间可以嵌套， 但不能交叉。
正确示例：
<div>
<p></p>
</div>
错误示例：
<div>
<p>
</div>
</p>
1.4 编码器
1.4.1 webstorm源码主体标签含义
<!doctype> ：
是一个声明不是 html 标签； 它是用来告诉 web 浏览器要使用哪个 html 版本来对页面进行编写。
<html>：
<html>是文档标识符， 它是成对出现的， 首标签<html>和尾标签</html>分别位于 html 文档的最前面和最后面， 明确地表示文档是以超文本标识语
言（ html)编写的。 该标签不带有任何的属性。
<head>：
<head>标签用于定义文档的头部， 它是所有头部元素的容器。 <head> 中的元素可以引用脚本、 指示浏览器在哪里找到样式表、 提供元信息等等。
<meta>：
<meta>标签位于文档的头部， 用于定义文件信息， 对网页文件进行说明。 其中name属性主要用于描述网页， 与之对应的属性值为content， content中
的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<body>：
<body>标签用于定义文档的主体， 即在浏览器上看到的网页内容。
二、如何用html编写一个简单的网页
html源码如下：
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
</head>
<body style="text-align:center;background-color: bisque；padding-top:100px;">
<h5>hello word</h5>
<select id="ab">
<option value="0">html</option>
<option value="1">css</option>
<option value="0">js</option>
</select>
<div id="div1" data-zg="中国人" data-zgr="我们是祖国的儿女，我爱祖国">
我们爱祖国！！我们爱祖国！
</div>
</body>
</html>
效果预览图浏览器显示：
扩展资料：
html超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（www）盛行的原因之一，其主要特点如下：
1、简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。
2、可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
3、平台无关性：虽然个人计算机大行其道，但使用mac等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（www）盛行的另一个原因。
4、通用性：另外，html是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
参考资料：百度百科-html
三、HTML 网页，按照题目内容，编写1个HTML网页。详细在图里，求HTML、CSS 和 JavaScript代码，急用
按照题目要求编写的利率计算的html程序如下
要求compound-interest.css文件,compound-interest.js文件,compound-interest.html文件放在同一文件夹中.
下面是compound-interest.html文件
<!doctype html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<title>calculator</title>
<h1>compound interest calculator</h1>
<link rel="stylesheet" type="text/css" href="compound-interest.css"/>
<script src="compound-interest.js"></script>
</head>
<body>
author: mike<br/>
student id: 12345678d<br/>
<br/>
<table>
<tr><td>initial deposit:</td>
<td><input type="text" id="deposit"/></td></tr>
<tr><td>annual interest rate:</td>
<td><input type="text" id="rate"/>%</td></tr>
<tr><td>years to grow:</td>
<td><input type="text" id="years"/></td></tr>
<tr><td colspan=2> </td></tr>
<tr><td colspan=2><input type="button" id="calculate" value="calculate">
</td></tr>
<tr><td colspan=2> </td></tr>
</table>
<table border="1px" id="distab" style="display:none"></table>
</body>
</html>
下面是compound-interest.css文件
h1{color:blue;}
下面是compound-interest.js文件
$(document).ready(function(){
$("#calculate").click(function(){
if(parsefloat($("#deposit").val())<0){
alert("deposit could not be negative");
$("#deposit").focus();
return false;
}
if(parsefloat($("#rate").val())<0){
alert("rate could not be negative");
$("#rate").focus();
return false;
}
if(parseint($("#years").val())<0){
alert("years could not be negative");
$("#years").focus();
return false;
}
var deposit=parsefloat($("#deposit").val());
var rate=parsefloat($("#rate").val());
var years=parseint($("#years").val());
var str=$("<tr></tr>").appendto($("#distab"));
str.append("<th>year</th><th>starting value</th>");
str.append("<th>interest earned</th><th>ending value</th>");
var start=deposit;
var earned,end;
for(var i=1;i<=years;i++){
earned=start*rate/100;
end=start+earned;
str=$("<tr></tr>").appendto($("#distab"));
str.append("<td>"+i+"</td><td>"+start.tofixed(2)+"</td>");
str.append("<td>"+earned.tofixed(2)+"</td><td>"+end.tofixed(2)+"</td>");
start=end;
}
$("#distab").show();
});
});
