HTML优势:跨平台,适合javascript语言
一、html5j简单程序:(使用Editplus进行编辑)
1.输出helloworld+图片!
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>//标题
</head>
<body>
hello,world //输出
<br/>
<img src="1.jpg"/>//将图片和代码放到一起即可显示
</body>
</html>
显示结果如下:
2.css作为样式表可以调整和维护html页面各个元的样式。
<input type="button" value="btn" style="background:#00ff00/>
<style></style>
<link href="css/main.css" rel="stylesheet" type="text/css">
示例如下:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="css/css1.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<input class="btn" type="button" value="按钮" />
<input class="btn" type="text">
</body>
</html>
结果如下:
3.JavaScript初步
页面加载:window.onload
鼠标点击事件:onClick
获取元件:document.GetElementById('m1');
window.οnclick=function(){}
示例如下:加入script标签
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="css/css1.css" rel="stylesheet" type="text/css"/>//css1.css包含背景颜色显示,这里是蓝色和绿色
<script>
window.οnlοad=function(){
var btn1 = document.getElementById('btn1');
btn1.οnclick=changeStyle;
}
function changeStyle(){
var txt2 = document.getElementById('txt2');
txt2.style.display="none";
}
</script>
</head>
<body>
<input id="btn1" class="btn" type="button" value="按钮" />
<input id="txt2" class="btn" type="text">
</body>
结果如下: