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 ...
随机推荐
- 【转】Git连接oschina管理代码版本
原文网址:http://blog.csdn.net/liukang325/article/details/24051467 工作中一般都是用的SVN,最近好像GitHub有些火,看到开源中国上也有Gi ...
- 【转】MIPS交叉编译环境的建立
原文网址:http://imgtec.eetrend.com/forum/2371 我觉得对于MIPS处理起来说最令新手头疼的应该就是编译环境的建立了,这点MIPS做的确实不是很好,不像ARM那样有许 ...
- Math.random();函数 随机数
random函数参数 无参数 random函数返回值 返回0和1之间的伪随机数,可能为0,但总是小于1,[0,1) random函数示例 document.write(Math.random()); ...
- 嵌入式 busybox自带的tftp、telnet、ftp服务器
a.tftp server服务器配置与使用 方法1: #udpsvd -vE 069 tftpd -c /root& //上面的0表示对所有ip地址都进行侦听 方法2: #vi/etc/ine ...
- Linux下常用软件
一, vmtool安装, 进入桌面就后,如果没有看到VMware Tools光盘, 请点击VMware Station菜单栏上的“虚拟机”,然后选择“安装VMware Tools”,就可以在桌面上以看 ...
- Yii 显示错误信息(Fatal Error,Warning)在页面上
Yii由于设计上对于一些php奇怪问题的顾虑,并没有像cake,kohana一样把php错误信息打印在页面上. 遇到错误时,只是显示白页,这让没有经验的programmer会一头雾水. 实际上通常vh ...
- sqlserver数据可空插入报错
数据库和C#中均为可空类型. 这时候直接给字段赋值为null parameters[9].Value = null : 执行的时候报错了,一大堆,总之说它少了一个参数. 用sql ser ...
- FreeMarker笔记 第二章 数值和类型
2.1 基本内容 2.1.1 简介 2.1.2 什么是数值 和程序语言中的数值类型是相似的. 2.1.3 什么是类型? 2.1.4 数据模型是哈希表 2.2 类型 2.2.1 简介 2.2.2 标量 ...
- 黑马程序员——Block数据类型
Block数据类型,又被称为代码段.因为它可以封装一段代码.苹果官方建议多用block.因为在多线程控制.异步任务,集合遍历.集合排序.动画转场等方面用的很多. Block的特点: 1.Block 用 ...
- echart图表控件配置入门(一)
现在主流的web图表控件主要有hightchart.fusionchart.echart: echart作为百度前端部门近期推出的一个基于html5的免费图表控件,以其丰富图表类型和良好的兼容性速度得 ...