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 ...
随机推荐
- 【转】Mac 10.10 yosemite 安装samba替代系统samba组件 -- samba不错不错
原文网址:http://gcell.blog.163.com/blog/static/52666594201501084530277/ 1.首先,在系统偏好设置的共享设置中,关掉局域网文件共享(去掉打 ...
- 实现LoaderCallbacks接口动态循环加载网上图片并展示在手机屏幕上 ...
1.布局xml文件 activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/re ...
- jquery easyui datagrid字段绑定问题
表字段为G_XIAN,生成PO对象时为private String GXian; datagrid字段必须写为gXian,否则数据无法正确绑定. 总结:不管VO对象中字段名称首字母是否大写,在data ...
- php 实现 jsonp 数据接口
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
- nginx上传目录配置,禁止执行权限
我们经常会把网站的图片文件上传目录设置为只可上传文件但不能执行文件,就是要禁止执行权限,小编来给大家举一个上传目录配置,禁止执行权限方法,各位可参考. 如果不让有执行权限最简单的办法 代码如下 复制 ...
- SqlServer 列的增加和删除
有些时候我们需要删除或增加数据库中有数据中表的列.总结一下列的删除和增加. 1. 删除列 当表中存在数据时,删除列后,数据也会被删除. sql语句: alter table 表名 drop colum ...
- 北邮网关登录python脚本
闲来无聊,来码一发 安装 pip install byrlogin 登录 登出
- 精品手游《里奥的财富》高清版逆向移植家用机与PC平台（转）
冒险动作游戏<里奥的财富>于去年10月登陆移动平台,曾荣获App Store“年度优秀游戏”.开发商宣布将推出其HD版本,近期会陆续登陆PS4.PC.MAC.Xbox One平台. 由瑞典 ...
- Qt之操作数据库（SQLite）
SQLite 简介 SQLite,是一款轻型的数据库,是遵守ACID的关联式数据库管理系统,它的设计目标是嵌入式的,而且目前已经在很多嵌入式产品中使用了它,它占用资源非常的低,在嵌入式设备中,可能只需 ...
- 理解display:inline、block、inline-block
要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...