大佬教程收集整理的这篇文章主要介绍了HTML5之javascript(一),大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
HTML优势:跨平台,适合javascript语言
一、html5j简单程序:(使用Editplus进行编辑)
<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初步
鼠标点击事件:onClick
获取元件:document.GetElementById('m1');
window.onclick=function(){}
示例如下:加入script标签
<head>
<Meta charset="UTF-8">
<title>Document</title>
<link href="css/css1.css" rel="stylesheet" type="text/css"/>//css1.css包含背景颜色显示,这里是蓝色和绿色
<script>
window.onload=function(){
var btn1 = document.getElementById('btn1');
btn1.onclick=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>
结果如下:
以上是大佬教程为你收集整理的HTML5之javascript(一)全部内容,希望文章能够帮你解决HTML5之javascript(一)所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。