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设置截图保存位置
补充: killall 用来杀死指定名字的进程 defaults 可以对一些系统属性进行read,write,delete操作 下面举几个常用的例子: 1.显示隐藏文件 defaults write ...
- mysql创建/删除表的例子
创建表 简单的方式 CREATE TABLE person ( number INT(11), name VARCHAR(255), birthday DATE ); 或者是 CREATE TABLE ...
- android view生命周期
onFinishInflate() 当View中所有的子控件均被映射成xml后触发 onMeasure( int , int ) 确定所有子元素的大小 onLayout( boolean , in ...
- 13、NFC技术：读写非NDEF格式的数据
MifareUltralight数据格式 将NFC标签的存储区域分为16个页,每一个页可以存储4个字节,一个可存储64个字节(512位).页码从0开始(0至15).前4页(0至3)存储了NFC标签相关 ...
- nginx 负载均衡相关知识
Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器. Nginx 是由 Igor Sysoev ...
- sql server 数据库的操作
Technorati 标记: sql截取,sql修改 把一个字段的部分取出来,插入到新字段 1 ) //方法二 sql server修改一个字段中的部分数据 update tablename se ...
- SSD Cloud Hosting - Linode的配置和部署，搭建Java环境
0.发牢骚 前一个月在淘宝购买了个Jsp空间,挺便宜的,才38元/年.部署了程序,然后ALIMAMA验证网站,一直提示验证失败.最后找卖家,他说可能是因为空间太慢,照他的推荐换了最好的空间,138元/ ...
- 把两个DataTable连接起来，相当于Sql的Inner Join方法
在C#中把两个DataTable连接起来,相当于Sql的Inner Join方法 作者:浪漫十一狼在下面的例子中实现了3个Join方法,其目的是把两个DataTable连接起来,相当于Sql的Inne ...
- html --- javascript --- div --- 拖拽方块
当鼠标拖拽的很快时,光标会走出方块,所以把事件注册在了方块的父节点上, 如有疑问请参照:http://blog.csdn.net/a9529lty/article/details/2708171 使用 ...
- C++C#时间转换
time_t是从1970年1月1日的格林尼治时间开始的,所以以下就是你要的结果System.DateTime time= new System.DateTime(1970, 1, 1).ToLocal ...