这里写目录标题
1、网页HTML概述
HTML是超文本标记语言(Hyper Text Markup Language)
HTML由各种各样的标签(tag)组成，如、
HTML标签
（1）由尖括号包围的关键词，比如
（2）通常是成对（开始标签，结束标签）出现的比如,
1.1、元信息标记
提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词
2、 标签位于文档的头部，不包含任何内容。
3、 标签的属性定义了与文档相关联的名称/值对。
4、在 HTML 中， 标签没有结束标签。
5、 标签永远位于 head 元素内部。
6、元数据总是以名称/值的形式被成对传递的
<html>
<head>
<title>02_meta</title>
<meta charset="UTF-8"/>
<meta http-equiv="refresh" content="5;url=http://www.baidu.com/">
<meta name="keywords" content="jump">
</head>
<body>
5秒后我们将去一个神奇的地方！(这个网页的关键字是：jump)
</body>
</html>
1.2、文字标签
案例：
<html>
<head>
<title>03_char</title>
<meta charset="UTF-8">
</head>
<body>
b:<b>这些文字是粗体的</b>
<br>
<br>
i:<i>这些文字是斜体的</i>
<br>
<br>
u:<u>这些文字带有下划线</u>
<br>
<br>
em:<em>用于强调的文本，一般显示为斜体字</em>
<br>
<br>
strong:<strong>用于特别强调的文本，显示为粗体字</strong>
<br>
<br>
code:<code>用来指出这是一组代码:int main(void)</code>
<br>
<br>
small:<small>规定文本以小号字显示</small>
<br>
<br>
big:<big>规定文本以大号字显示</big>
<br>
<br>
sup:12<sup>2</sup>=144
<br>
<br>
sub:硫酸亚铁的分子式是Fe<sub>2</sub>SO<sub>4</sub>
<br>
<br>
</body>
</html>
运行结果：
1.3、标题
<h1> - <h6> 一级标题 -->6级标题
以及标题字体最大
<html>
<head>
<title>04_head_style</title>
</head>
<body style="background-color:#90EE90">
<br>
<h1 style="color:red" >一级标题</h1>
<h2 style="color:orange">二级标题</h2>
<h3 style="color:yellow">三级标题</h3>
<h4 style="color:green">四级标题</h4>
<h5 style="color:black">五级标题</h5>
<h6 style="color:blue">六级标题</h6>
<p style="background-color: white; font-family: arial; color: #ff00ff; font-size:50px; text-align: center">普通段落</p>
<br>
</body>
</html>
运行结果：
1.4、超链接
超链接<a></a>
（1）电子邮件超链接
<a href="mailto:kitty_zjy@126.com?subject=Hi"></a>
注：subject ---主题
（2）页面内的超链接
回到顶部：<a href="#top"></a>
回到某一位置：<a name="tome"></a>
<a href="#tome"></a>
（3）页面外的超链接
外网：<a href="http://www.baidu.com/"></a>
内网：<a href="a.html" target="_blank"></a>
（4）图片超链接
<a src="a.html"><img src="image/a.jpg"></a>
<html>
<head>
<title>05_a_href</title>
<meta charset="UTF-8">
</head>
<body>
<br>
<a href="mailto:kitty_zjy@126.com?subject=Hi">email to others</a>
<br>
<br>
<a href="#mike">去中间看看</a>
<br>
<br>
<a href="http://www.taobao.com">逛淘宝</a>
<br>
<br>
<a href="a.html" target="_blank">打开本地一个新的网页</a>
<br>
<br>
<a href="a.html"><img src="image/a.jpg"></a>
<br>
<br>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p><a name="mike">中间</a></p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<a href="#top">回到顶部</a>
<br>
</body>
</html>
1.5、table表格标签
案例：
<html>
<head>
<title>table</title>
<meta charset="UTF-8">
</head>
<body>
<table border="1" align="center"><!--border表示线宽-->
<caption>统计学生信息</caption><!--表头信息-->
<tr align="center">
<td colspan="3"><b>学生信息</b></td><!--单元格信息-->
<td colspan="2"><b>成绩信息</b></td><!--colspan 跨列-->
<td rowspan="2">照片</td><!--rowspan 跨行-->
</tr><!--行标签-->
<tr align="center">
<td>姓名</td><!--单元格信息-->
<td>性别</td>
<td>专业</td><!--单元格信息-->
<td>课程</td>
<td>分数</td><!--单元格信息-->
</tr>
<tr align="center">
<td>郑涵</td><!--单元格信息-->
<td>男</td>
<td>电子信息</td><!--单元格信息-->
<td>web开发</td>
<td>99</td><!--单元格信息-->
<td>调皮</td><!--单元格信息-->
</tr>
</table>
</body>
</html>
运行结果：
1.6、form表单
HTML页面与服务器交互的手段
(1)属性
name：表单的名称
method：表单数据从浏览器传输到服务器的方法
get：将表单数据附加在URL地址后面，长度不超过8192个字符,不具有保密性，默认为get
post：将表单数据包含在表单的主体中，一起传输到服务器上。没有长度限制,密文传输
action：用来定义表单处理程序
（2）<form></form>内的标签
a、<input> 表单输入标签
常用的文本域、按钮都是使用这个标签
属性：
name 域名称
type 域类型
value 元素值
type属性值:
text 文字域 password 密码域
file 文件域 checkbox 复选框
radio 单选框 button 普通按钮
submit 提交按钮 reset 重置按钮
hidden 隐藏域 image 图像域
b、选择列表 <select><option></option></select>
菜单和列表是为了节省网页的空间而产生的
属性
name 菜单和列表的名称
size 显示的选项数目
multiple 列表中的选项为多项
selected 默认被选中的选项(option中的属性)
c、文本域 <textarea></textarea>
用来制作多行文本输入域
属性
name 文字域的名称
rows 文字域的行数
cols 文字域的列数
案例1：input输入框
<html>
<head>
<title>table</title>
<meta charset="UTF-8">
</head>
<body>
<h3>这是一个表单的案例</h3>
<form method="GET" action="deal.cgi">
用户名:<input type="text" name="usr">
<br>
密     码:<input type="password" name="pwd">
<br>
请选择你要上传的文件:<input type="file" name="file">
<br>
请选择你的爱好:<input type="checkbox" name="hobby" value="LoL">LOL
<input type="checkbox" name="hobby" value="王者">王者
<input type="checkbox" name="hobby" value="吃鸡">吃鸡
<br>
你的性别：<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
<br>
<input type="button" value="错我呀">
<br>
你猜猜这是谁:<input type="image" src="./image/zkd.jpg">
<br>
<input type="submit" value="提交">         <input type="reset" value="复位">
</form>
</body>
</html>
运行结果：
案例2：
选择列表 <select><option></option></select>
菜单和列表是为了节省网页的空间而产生的属性
name 菜单和列表的名称
size 显示的选项数目
multiple 列表中的选项为多项
selected 默认被选中的选项(option中的属性)
<html>
<head>
<title>table</title>
<meta charset="UTF-8">
</head>
<body>
选择你的车型：
<select>
<option>BMW</option>
<option>玛莎拉蒂</option>
<option>火车</option>
<option selected>宝骏</option>
<option>自行车</option>
</select>
</body>
</html>
运行结果：
案例3：文本域
文本域 <textarea></textarea>
用来制作多行文本输入域
属性
name 文字域的名称
rows 文字域的行数
cols 文字域的列数
<html>
<head>
<title>table</title>
<meta charset="UTF-8">
</head>
<body>
请输入你的留言：
<br>
<textarea>
今天心情挺好！！！！！！！！啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
</textarea>
</body>
</html>
运行结果：
2、JavaScript的概述（让网页动起来）
2.1、什么是 Javascript
Javascript是一种基于对象并具有安全性能的脚本语言，是由浏览器内解释器翻译成可执行格式后执行，在概念和设计方面，Java和Jvascript是两种完全不同的语言。
它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
Javascript的四个特点：基于对象的语言、简单性、动态性、跨平台性
2.2、网页使用js脚本的三种方式
- 1、直接添加脚本
- 2、使用script标记插入脚本
- 3、链接脚本文件（推荐）
直接添加脚本
<html>
<head>
<title>table</title>
<meta charset="UTF-8">
</head>
<body>
<!--alert会弹出一个对话框-->
<input type="button" value="点击这里给你惊喜" onclick='alert("我就是你的惊喜！")' >
</body>
</html>
运行结果：
使用script标记插入脚本
<html>
<head>
<title>table</title>
<meta charset="UTF-8">
<script type="text/javascript">
function my_button()
{
alert("我就是你的惊喜！！");
}
</script>
</head>
<body>
<!--alert会弹出一个对话框-->
<input type="button" value="点击这里给你惊喜" onclick="my_button();" >
</body>
</html>
链接脚本文件（推荐）
<html>
<head>
<title>table</title>
<meta charset="UTF-8">
<!--这是描述 js中的函数来之哪个js文件-->
<script type="text/javascript" src="01_js.js"></script>
</head>
<body>
<!--alert会弹出一个对话框-->
<input type="button" value="点击这里给你惊喜" onclick="my_button();" >
</body>
</html>
01_js.js
function my_button()
{
alert("我就是你的惊喜！！");
}
js能用的运算符
（1）算数运算符
+、－、*、/、%、++、－－
（2）逻辑运算符
&&、||、!
（3）比较运算符
==、>、<、>＝、<＝、!=、===
（4）位运算符
~、&、|、^、<<、>>、>>>(无符号右移)
（5）字符串运算符
+(合并运算符)
（6）赋值运算符
=、+=、-=、 *=、/=、%=
（7）条件运算符
? :（条件 ？结果1 ：结果2）
2.3、js的函数
函数的语法结构:
function 函数名(参数1,参数2,…)
{
函数体
}
案例：
index.html
<input type="button" value="错误呀给你惊喜"
onclick='my_button(10,"hehe",20);' >
deal.js
//arg1, arg2, arg3 不用写类型
function my_button(arg1, arg2, arg3)
{
var data="";
data += arg1;
data +=":"
data +=arg2;
data +=":"
data += arg3;
//10:hehe:20
alert(data);
}
运行结果：
2.4、JS的对象
2.4.1、浏览器对象（window对象）
Window 对象表示浏览器中打开的窗口，打开一个HTML网页会创建一个window对象
Window 对象是全局对象
window.open()打开一个新的窗口
window.close()关闭当前窗口
window.location.href：返回完整的URL;对其进行赋值，则能够跳转到相应的网页
function my_button()
{
//open在新的窗口中打开网页
//window.open("http://www.baidu.com");
//在当前窗口中打开网页
//window.location.href="http://www.baidu.com";
//获取当前网页的url
//alert(window.location.href);
//关闭close关闭窗口
window.close();
}
2.4.2、文本对象（Document对象）（重要）
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问
1、提供了从JS脚本中对 HTML 页面中的所有元素进行访问
2、可以通过getElementById()方法,来根据对应的ID号去访问、控制HTML页面中的标签元素
3、可以通过title，URL属性获取当前文档的标题，URL信息等
4、可以通过write方法在HTML页面中写入HTML表达式
案例1：登录界面 value
index.html
<html>
<head>
<title>table</title>
<meta charset="UTF-8">
<!--这是描述 js中的函数来之哪个js文件-->
<script type="text/javascript" src="01_js.js"></script>
</head>
<body>
<!--id是唯一 标记一个个标签-->
用户名:<input type="text" id="usr">
<br>
密码:<input type="password" id="pwd">
<br>
<input type="button" value="登录" onclick="my_button(1);">
<input type="button" value="取消" onclick="my_button(0);">
</body>
</html>
01_js.js
function my_button(arg)
{
if(arg == 1)//登录 admin 123456
{
//获取网页上输入框的用户名密码
var usr = document.getElementById("usr").value;//重点
var pwd = document.getElementById("pwd").value;
if(usr=="admin" && pwd=="123456")
{
window.location.href="http://www.baidu.com";
}
else
{
alert("用户名或密码错误请重新输入");
//清空用户名密码的输入框
document.getElementById("usr").value="";
document.getElementById("pwd").value="";
}
}
else if(arg == 0)//取消
{
//清空用户名密码的输入框
document.getElementById("usr").value="";
document.getElementById("pwd").value="";
}
}
运行结果：
总结： document.getElementById(“usr”).value
value一般用于输入框
案例2： document获得label的内容 innerHTML
var text = document.getElementById("addr").innerHTML;
index.html
<html>
<head>
<title>table</title>
<meta charset="UTF-8">
<!--这是描述 js中的函数来之哪个js文件-->
<script type="text/javascript" src="02_js.js"></script>
</head>
<body>
地址:<label id="addr">BJ</label>
<br>
<input type="button" value="单击改变地址" onclick="change_fun();">
</body>
</html>
02_js.js
function change_fun()
{
//获取label的内容 对于label 而是innerHTML
var text = document.getElementById("addr").innerHTML;
alert("获得的内容为:"+text);
//更改label的内容
document.getElementById("addr").innerHTML="SZ";
}
案例3： document获得img的内容 src
index.html
<html>
<head>
<title>table</title>
<meta charset="UTF-8">
<!--这是描述 js中的函数来之哪个js文件-->
<script type="text/javascript" src="16_js.js"></script>
</head>
<body>
此处有帅哥:
<br>
<img src="./image/zkd.jpg" id="img">
<br>
<input type="button" value="单击改变图片" onclick="change_fun();">
</body>
</html>
03_js.js
function change_fun()
{
//更改img的内容 src
document.getElementById("img").src="./image/0001.png";
}
案例4： document获得单选框的内容
index.html
<html>
<head>
<title>table</title>
<meta charset="UTF-8">
<!--这是描述 js中的函数来之哪个js文件-->
<script type="text/javascript" src="04_js.js"></script>
</head>
<body>
请选择你的性别:
男:<input type="radio" name="sex" id="nan">
女:<input type="radio" name="sex" id="nv">
<br>
<input type="button" value="单击获取性别" onclick="sex_fun();">
</body>
</html>
04_js.js
function sex_fun()
{
alert("男:"+document.getElementById("nan").checked);//选中true 否则false
alert("女:"+document.getElementById("nv").checked);//选中true 否则false
}
运行结果：
案例5： document获得复选框的内容
<html>
<head>
<title>table</title>
<meta charset="UTF-8">
<!--这是描述 js中的函数来之哪个js文件-->
<script type="text/javascript" src="05_js.js"></script>
</head>
<body>
请选择你的英雄:
<!--onchange 下拉列表框被选择的时候自动调用hero_fun函数-->
<select onchange="hero_fun();" id="hero">
<option>德玛西亚</option>
<option>烬</option>
<option>小法</option>
<option>盲僧</option>
<option>小炮</option>
</select>
</body>
</html>
05_js.js
function hero_fun()
{
//获取下拉列表框被选中的索引号
var index = document.getElementById("hero").selectedIndex;
//根据索引号 从选项数据中options[]中得到选中的内容
var hero_name = document.getElementById("hero").options[index].value;
alert("你选择的英雄为:"+hero_name);
}
运行结果：
2.5、日期Date对象
Date对象方法
getFullYear()：返回当前年份
getMonth()：返回当前月份，0～11
getDay()：返回星期中的某一天，0~6,0表示周日
getDate()：返回一月中的某一天
getHours()：返回当前时间的小时，0～23
getMinutes()：返回当前时间的分钟，0～59
getSeconds()：返回当前时间的秒，0～59
index.html
<html>
<head>
<title>table</title>
<meta charset="UTF-8">
<!--这是描述 js中的函数来之哪个js文件-->
<script type="text/javascript" src="01_js.js"></script>
</head>
<body onload="get_time();">
当前的时间为:
<div id="div"></div>
</body>
</html>
01_js.js
function get_time()
{
setInterval("get_time_fun()", 1000);
}
function get_time_fun()
{
var d = new Date();
//在js中 去写网页
var text= "<table border='1'>";
//首行
text += "<tr> <td>时</td><td>分</td><td>秒</td></tr>"
//第一行
text += "<tr><td>";
text += d.getHours();
text += "</td><td>";
text += d.getMinutes();
text += "</td><td>";
text += d.getSeconds();
text += "</td></tr>";
text += "</table>";
document.getElementById("div").innerHTML= text;
}
运行结果：
2.6、string对象
String对象用于处理文本（字符串）
字符串是 JavaScript 的一种基本的数据类型。
String 对象定义了大量操作字符串的方法，例如从字符串中提取字符或子串，或者检索字符等
常用方法
charAt()返回在指定位置的字符
indexOf()检索字符串
substr()从起始索引号提取字符串中指定数目的字符串
substring()提取字符串中两个指定的索引号之间的字符串
indexOf函数：
substring()函数：
案例：例如有：“2020:nz2001:good” 提取:号之间的字符串
index.html
<html>
<head>
<title>table</title>
<meta charset="UTF-8">
<!--这是描述 js中的函数来之哪个js文件-->
<script type="text/javascript" src="02_js.js"></script>
</head>
<body onload="my_string();">
</body>
</html>
02_js.js
function my_string()
{
var text="2020:nz2001:good";
//write讲字符串写入到浏览器上
document.write("字符串的长度:"+text.length+"<br>");
document.write("第0个字符为:"+text.charAt(0)+"<br>");
var start = 0;
var stop = 0;
while(1)
{
//寻找:的位置
stop = text.indexOf(":", start);
if(stop == -1)
{
//提取最后一个字符串
var tmp = text.substring(start,text.length);
document.write("提取的内容为:"+tmp+"<br>");
break;
}
var tmp = text.substring(start,stop);
document.write("提取的内容为:"+tmp+"<br>");
//步进条件
start = stop +1;
}
}
运行结果：
2.7、Math数学对象
执行常见的算数任务
2.8、全局函数
常用的函数：isNaN Number String
js获取网页上数据 以及讲数据 局部刷新到网页上
3、定时器
案例：每秒自加一
index.html
<html>
<head>
<title>table</title>
<meta charset="UTF-8">
<!--这是描述 js中的函数来之哪个js文件-->
<script type="text/javascript" src="00_js.js"></script>
</head>
<body>
定时第:<label id="num">0.0</label>秒
<br>
<input type="button" onclick="timer_fun(1);" value="开启定时器">
<input type="button" onclick="timer_fun(0);" value="停止定时器">
</body>
</html>
00_js.js
var my_timer;
var num = 0;
function timer_fun(arg)
{
if(arg == "1")//开启定时器
{
//每1秒 就调用一次 my_fun()函数
my_timer = setInterval( "my_fun()" ,1000 );//定时单位毫秒
}
else if(arg == "0")//关闭定时器
{
//清除定时器
clearInterval(my_timer);
}
}
function my_fun()
{
num++;
document.getElementById("num").innerHTML = num;
}
运行结果：
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
