HTML5   发布时间:2022-04-25  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了HTML5之javascript(一)大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

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>

显示结果如下:

HTML5之javascript(一)


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>

结果如下:

HTML5之javascript(一)


3.JavaScript初步

页面加载:window.onload

鼠标点击事件: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,请注明来意。