HTML第七天学习笔记

时间:2021-07-24 09:27:37

今天主要是学习如何使用JS,第一个就是先是使用JS输出"Hello world"

 <!doctype html>
<html lang="en">
<head>
<meta http-equiv = "content-type" content = "text/html; charset=UTF-8">
<title>Document</title>
<script type = "text/javascript">
document.write("Hello wlord");/*输出Hello wrold*/
document.body.bgColor = "red";/*body背景颜色*/
</script>
</head>
<body> </body>
</html>

效果图如下:

HTML第七天学习笔记

===============================================================================

第二个课堂练习就是使用JS输出一个表格,源码如下:

 <!doctype html>
<html lang="en">
<head>
<meta http-equiv = "content-type" content = "text/html; charset=UTF-8">
<title>Document</title>
<title>Document</title>
<script type = "text/javascript">
window.alert(1+1);/*使用弹窗输出*/
document.write("<h2>个人信息</h2>");
document.write("<ol>");
document.write("<li>姓名:叭叭叭</li>");
document.write("<li>性别:男</li>");
document.write("<li>年龄:38</li>");
document.write("<li>职业:演员</li>");
document.write("<li>经纪人:隔壁老宋</li>");
document.write("</ol>");
</script>
</head>
<body>
</body>
</html>

效果如下:

  先有个弹窗:

HTML第七天学习笔记

当弹窗关闭后:

HTML第七天学习笔记

==========================================================================

第三个课堂练习就是在上个练习的基础上进行更详细的书写:

 <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script type = "text/javascript">
var user_name = "Ld";
var age = 38;
var job = "演员";
var jjr = "隔壁老宋"; document.write("<ol>");
document.write("<h2>");
document.write(user_name);
document.write("的个人信息</h2>");
document.write("<li>姓名:");
document.write(user_name);
document.write("</li>");
document.write("<li>年龄:");
document.write(age);
document.write("</li>");
document.write("<li>职业:");
document.write(job);
document.write("</li>");
document.write("<li>经纪人:");
document.write(jjr);
document.write("</li>");
document.write("</ol>");
</script>
</head>
<body> </body>
</html>

效果如图:

HTML第七天学习笔记

=====================================================================

再下个练习就是对代码进行优化,使用+号将字符串链接起来:

 <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script type = "text/javascript">
var user_name = "LD";
var age = 38;
var job_= "演员"; document.write("<h2>"+user_name+"的个人信息</h2>");
document.write("<ol>");
document.write("<li>姓名"+user_name+"</li>");
document.write("<li>年龄"+age+"</li>");
document.write("<li>工作"+job+"</li>");
document.write("</ol>");
</script>
</head>
<body> </body>
</html>

效果如图:

HTML第七天学习笔记

=======================================================

下一个练习是关于事件的

 <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<img src = "Images/jd1.png" id = "Images_01"> <!--显示图片-->
<script type = "text/javascript">
var imgObj = document.getElementById("Images_01"); /*获取图片*/
imgObj.onmouseover = function(){ /*调用鼠标经过时的事件方法*/
imgObj.src = "Images/jd2.png";
}
imgObj.onmouseout = function(){ /*调用鼠标离开时的事件方法*/
imgObj.src = "Images/jd1.png";
}
</script>
</body>
</html>

鼠标未经过时:

HTML第七天学习笔记

鼠标经过后:

HTML第七天学习笔记