HTML第七天学习笔记
今天主要是学习如何使用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>
效果图如下：
===============================================================================
第二个课堂练习就是使用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>
效果如下：
先有个弹窗：
当弹窗关闭后：
==========================================================================
第三个课堂练习就是在上个练习的基础上进行更详细的书写：
<!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>
效果如图：
=====================================================================
再下个练习就是对代码进行优化，使用+号将字符串链接起来：
<!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>
效果如图：
=======================================================
下一个练习是关于事件的
<!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第七天学习笔记的更多相关文章
- 《Linux内核分析》第七周学习笔记
<Linux内核分析>第七周学习笔记 可执行程序的装载 郭垚 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/co ...
- 20165326 java第七周学习笔记
第七周学习笔记 MySQL(数据管理系统)学习 知识点总结: 不能通过关闭MySQL数据库服务器所占用的命令行窗口来关闭MySQL数据库. 如果MySQL服务器和MySQL管理工具驻留在同一台计算机上 ...
- Linux内核分析第七周学习笔记——Linux内核如何装载和启动一个可执行程序
Linux内核分析第七周学习笔记--Linux内核如何装载和启动一个可执行程序 zl + 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study. ...
- Go语言核心36讲（Go语言实战与应用七）--学习笔记
29 | 原子操作(上) 我们在前两篇文章中讨论了互斥锁.读写锁以及基于它们的条件变量,先来总结一下. 互斥锁是一个很有用的同步工具,它可以保证每一时刻进入临界区的 goroutine 只有一个.读写 ...
- Linux内核分析——第七周学习笔记20135308
第七周 可执行程序的装载 一.预处理.编译.链接和目标文件的格式 1.可执行程序是怎么来的 C代码—>预处理—>汇编代码—>目标代码—>可执行文件 .asm汇编代码 .o目标码 ...
- 20135320赵瀚青LINUX第七周学习笔记
赵瀚青原创作品转载请注明出处<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 概述 本周学习的内容主要是讨 ...
- 20179223《Linux内核原理与分析》第七周学习笔记
视频知识学习 1.fork()函数被调用一次,但返回两次: 2.Linux通过复制父进程来创建一个子进程,通过调用fork来实现: 3.Linux会为每个子进程动态的分配一个task_struct结构 ...
- c#高级编程第七版 学习笔记 第一章 .NET体系结构
第一章 .NET体系结构 本章内容: 编译和运行面向.NET的代码 Microsoft中间语言(Microsoft Intermediate Language,MSIL或简称IL)的优点 值 ...
- 《Metasploit魔鬼训练营》第七章学习笔记
P314 木马程序的制作 msfpayload和msfencoder已被msfvenom取代.使用msfvenom -h查看具体用法.以下网址也有相关教程: https://github.com/ra ...
随机推荐
- Android 自定义view中的属性，命名空间，以及tools标签
昨日看到有人在知乎上问这3个琐碎的小知识点,今天索性就整理了一下,其实这些知识点并不难,但是很多开发者平时很少注意到这些, 导致的后果就是开发的时候 经常会被ide报错,开发效率很低,或者看开源代码的 ...
- myeclipse10添加jQuery自动提示
首先先要在装上spket插件,这个网上有好多教程,我就不详细说了,主要说一下后面的设置,因为我发现我按照网上的装完也设置完没办法使用自动提示功能,以下是我根据前辈的经验然后自己摸索出来的: 选中所建的 ...
- ASP.NET Web API 帮助（help）页面上没有 Test API按钮的解决方法
参与一个web API项目时发现它的help页面特别好用,不仅可以根据webapi的方法和注释自动生成帮助文档以方便查阅,还可以在这个页面上测试webapi方法.于是在自己新建项目时也打算将这个hel ...
- testng几个tips
1. testng的测试方法不能有返回值,即必须是void返回值类型. 测试方法前加入了@Test, 但以testNG方式运行,run test为0 以下public WebDriver ...应改为 ...
- <转+改>Web测试中关于登录的测试
请问,你为自己写过的用例怀疑过吗? 前两天听一个朋友说他同事写了100个用例,结果有92个是无效的,差点被公司开了,本人以前也写过不少用例,但现在忽然怀疑我的用例了,觉得越来越糊涂了,拿登陆框来说吧, ...
- maven（一）初步搭建，项目结构
一.环境准备 java环境, jdk 1.5 以上 MyEclipse集成工具,我装的是8.5 版本 二.快速安装及配置 1.下载maven: http://maven.apache.org/docs ...
- 【转】linux之fsck命令
转自:http://www.linuxso.com/command/fsck.html 使用权限 : 超级使用者 使用方式 : fsck [-sACVRP] [-t fstype] [--] [fsc ...
- 基于opencv的人脸检测的web应用
参考资料 https://github.com/bsdnoobz/web-based-face-detect http://opencv-code.com/projects/web-based-int ...
- margin四个元素的顺序
如果margin给的是四个值比如:margin:0px 0px 0px 0px;代表:margin: top right bottom left代表从上右下左,顺时针方向.如果margin给的是三个值 ...
- HighChart 实现从后台取数据来实时更新柱状和折线组图
前段时间公司让弄图表,给我说有HighCharts这个js插件,于是上网上搜,由于本人是写后端的,对于JavaScript和jQuery不是很熟悉,虽然找到了模板,但是还是不明白,所以一点一点的改,但 ...