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 ...
随机推荐
- phonegap 使用极光推送实现消息推送
最近一直在研究各种推送,ios的由于是apns,比较容易实现,但是andriod的就比较麻烦.后来看了很多解决方案,gcm明显是不行的,其他的方案更是一头雾水,而且需要做第二次开发,太麻烦,后来就选择 ...
- beginUpdates和endUpdates
我们在做UITableView的修改,删除,选择时,需要对UITableView进行一系列的动作操作. 这样,我们就会用到 [tableView beginUpdates]; if (newCount ...
- PubSub的一种实现
今天在浏览JavaScript事件时,复习了下Dean Edward大神的addEvent.突然觉得可以基于他的思路实现一个结构更好的PubSub. 思路也很简单,就是要维护一个类似如下的一个仓库结构 ...
- hdu 1166 敌兵布阵（线段树单点更新，区间查询）
题意:区间和 思路:线段树 #include<iostream> #include<stdio.h> using namespace std; #define MAXN 500 ...
- Unity 5 引擎收费版和免费版的区别（转）
最新Unity 5的Professional Edition(收费版)具备全新而强大的功能,除了全局动态光照或是最新的基于物理的着色器之外,也把原本分开销售的Team License放入,并含有12个 ...
- Autodesk Stingray 游戏引擎
Autodesk的游戏引擎质量够高的. http://v.youku.com/v_show/id_XMTMwMjc0MDIwMA==.html?qq-pf-to=pcqq.group http://v ...
- IGF职业组比赛
IGF职业组比赛 参赛资格: 面向亚太区所有独立游戏开发者(参见详细规则) 截止日期: 2015年7月20日 2015年IGF职业组七大奖项设置如下: * 最佳游戏(RMB20, 000) * 最佳移 ...
- 备份数据库SQL Server 2008下实测
下面的存储过程适用: 1.一次想备份多个数据库. 2.只需要一步操作,在有存储过程的条件下. 3.可以根据自己的需要修改存储过程. /*----------------------------- De ...
- 事务处理: databse jdbc mybatis spring
事务的认识需要一个相当漫长的流程,慢慢在实践中理解,然后在强化相关理论基础. 数据库中的事务: 传统的本地事务处理都是依靠数据库自身事务处理能力,而事务本身是传统关系型数据库的基石.简单来说事务就是一 ...
- spring实例化bean的方式
1.使用类构造器实现实例化(bean的自身构造器) <bean id = "orderService" class="cn.itcast.OrderServiceB ...