HTML + CSS + JavaScript速成

文章目录

  • HTML/CSS/JavaScript
    • HTML
      • Html HyperText Markup Language内容
      • font标签
        • font-01
        • font-011
      • 图象
        • image-01
      • 表格
        • table-03
      • 超链接标签:<a>
        • href-04
      • 表单标签:<form>
        • form-05
        • form-table-06
    • CSS
      • 行内样式
      • 内嵌样式
      • 外部样式
      • div:
    • JavaScript
      • js小结
      • 基本理解
      • 基本语法
      • 流程控制语句和函数
      • 图片自动更新
      • 实例
      • 漂浮的图片
      • 鼠标获取
      • js中的数组
      • 生成随机验证码
      • 统计字数
      • 标签与js分离
      • js的工具类

HTML/CSS/JavaScript

HTML

Html HyperText Markup Language内容

  1. Html就是超文本标记语言的简写,是最基础的网页语言。
  2. Html是通过标签来定义的语言,代码都是由标签所组成。
  3. Html代码不用区分大小写。
  4. Html代码由开始结束。里面由头部分和体部分两部分组成。
  5. 头部分是给Html页面增加一些辅助或者属性信息,它里面的内容会最先加载。
  6. 体部分是真正存放页面数据的地方。
  • 多数标签都是有开始标签和结束标签,其中有个别标签因为只有单一功能,或者没有要修饰的内容可以在标签内结束。

  • 想要对被标签修饰的内容进行更丰富的操作,就用到了标签中的属性,通过对属性值的改变,增加了更多的效果选择。

  • 属性与属性值之间用“=”连接,属性值可以用双引号或单引号或者不用引号,一般都会用双引号。或公司规定书写规范。

  • 格式:<标签名 属性名=‘属性值’> 数据内容 </标签名>
    <标签名 属性名=‘属性值’ />

  • 操作思想:
    为了操作数据,都需要对数据进行不同标签的封装,通过标签中的属性对封装的数据进行操作。
    标签就相当于一个容器。对容器中的数据进行操作,就是在再不断的改变容器的属性值。

font标签

  1. 字体标签:
    例:<font size=5 color=red>字体标签示例</font>
    注:简单颜色可是直接写对应的英文,复杂颜色用16进制表示,表现形式#FF0000两个数为一组,按红,绿,蓝排列,如:#00FF00表示绿色。建议用工具选取。
  2. 标题标签:

     

    ……


    因为标题是文本中常用的内容,为了方便操作而定义的。其实就是某个字号和粗体的组合。

  3. 特殊字符:
    如果要在网页上显示一些特殊符号,比如< > & 等。因为这些符号在代码中会被浏览器识别并解释,所以用一些特殊的方式来表示。
header 1header 2
& lt;<
& quot;
& trade;
& gt;>
& reg;®
& nbsp;空格
& amp;&
& copy;©
  1. 列表标签:<dl>
    <dt>:上层项目
    <dd>:下层项目
    例:
<dl>
	<dt>游戏名称</dt>
		<dd>星际争霸</dd>
		<dd>红色警戒</dd>
	<dt>部门名称</dt>
		<dd>技术部</dd>
		<dd>培训部</dd>
</dl>

列表中项目符号对应的标签
<ol>:数字标签(a A 1 i I)
<ul>:符号标签(○●■)
<li>:具体项目内容标签。此标签只在

    • 中有效。
      通过type属性更改项目符号,如果想做出效果更好的列表,如:黑色圆点用图片表示,就用到CSS。

font-01

<html>
<head>

</head>
<body>
	<font color='red' size="50">冰冰</font>
</body>

</html>

font-011

<!DOCTYPE html> <!-- 说明当前是html的文档 -->
<html><!-- html文件的根标签 -->
<head><!-- html的头标签,内部放的是属性相关 -->
<meta charset="UTF-8"><!-- 指明编码 -->
<title>font_01</title><!-- 设置当前文档的标题 -->
</head>
<body><!-- 体标签,放到是设置的内容 -->
    <!-- font标签     可以通过16进制的数设置颜色(RGBA模式)  
    R:red   G:green    B:blue    A:alpha(透明度)
   [0,255]    [0,255]    [0,255]   [0,1]
    -->
	<font color="#8E888E"  size=60>冰冰</font>
	
	<!-- 标题标签专门用来设置标题的,字号是固定,字体默认是加粗的 -->
	<h1>标题</h1>
	<h2>标题</h2>
	<h3>标题</h3>
	<h4>标题</h4>
	<h5>标题</h5>
	<h6>标题</h6>
	
	
	<!-- 特殊字符 -->
	<font> &lt;晨晨&gt; </font>
</body>
</html>

图象

  1. 图像标签:<img>
    例:
<img src=”1.jpg” align=”middle” border=”3” alt=”图片说明文字”/>

align:属性定义图片的排列方式,border用来设置图像的边框。Src 连接一个文件
2. 图像地图:
应用:当要在图像中选取某一部分作为连接的时候。如:中国地图每个省所对应的区域。
map标签要和img标签联合使用。Href是超连接

<img src="Sunset.jpg" alt="图片说明文字" usemap="#Map" />
  <map >
    <area shape="rect" coords="50,59,116,104" href="1.html" />
    <area shape="circle" coords="118,203,40" href="2.html" />
  </map>

image-01

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img_02</title>
</head>
<body>
	<!-- 
	src:是图片的路径
	height:图片的高度
	width:图片的宽度
	
	默认的单位是像素(px),注意:以后最好所有的地方都将单位加上
	
	通过绝对路径获取图片
	
	注意:如果使用绝对路径访问资源无法获取资源,可以将file:///协议加上
	 -->
   <img src="file:///C:\Users\Administrator\Desktop\BigData1715资料\JAVAWEB\day01\课程资料\今天资料1\图片\bingbing.jpg" height=100px width=100px/>美女


	<!-- 工程内的图片可以通过相对路径找. 
	..代表向上一层
	
	src=两部分       第一部分:..\..\..\..\  找当前工程的目录
				 第二部分:images\120.jpg  图片的相对路径
	-->
	<img src="..\..\..\..\images\120.jpg" />美图
</body>
</html>

表格

  • 表格标签:<table>
    组成:标题标签:<caption>,给表格提供标题。
    表头标签:<th>,一般对表格的第一行或者第一列进行格式化,就是粗体显示。并不常用。
    行标签:<tr>

  • 单元格标签:<td>,加载行标签的里面。可以简单理解为,先有行,在行中在加入单元格。
    格式:

<table border="1" width=”40%”><!—width值为百分比可以让表格的宽度随浏览器窗口的大小变化-->
	<caption>表格标题</caption>
	<tr><!-- 第一行 -->
		<th>姓名</th>
		<th>年龄</th>
	</tr>
	<tr algin=”center”><!-- 第二行 -->
		<td>张三</td>
		<td>23</td>
	</tr>
</table>

效果:

姓名年龄
张三23
<table border="1" width=”40%”><!—width值为百分比可以让表格的宽度随浏览器窗口的大小变化-->
	<caption>表格标题</caption>
	<tr><!-- 第一行 -->
		<th>姓名</th>
		<th>年龄</th>
	</tr>
	<tr algin=”center”><!-- 第二行 -->
		<td>张三</td>
		<td>23</td>
	</tr>
</table>

table-03

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table_03</title>
</head>
<body>
<!-- 
	tr:代表行
	td:代表单元格
	th:代表头标签,默认加粗
	cellpadding:设置的是内容到左边框的距离
	cellspacing:设置的是单元格之间的间隙
 -->
	<table border=1px height=500px width=500px cellpadding=10px   cellspacing=10px>
		<tr>
			<th>姓名</th>
			<td>年龄</td>
			<td>美照</td>
		</tr>
		
		<tr>
			<td>冰冰</td>
			<td>18</td>
			<td><img src="..\..\..\..\images\bingbing.jpg"  height=100px  width=50px/></td>
		</tr>
		
	</table>
</body>
</html>

超链接标签:<a>

两种用法:

  1. 超链接<a href=””>
    例:
<a href=”http://www.sina.com.cn” target=”_blank”>新浪</a>
<!-- href属性值可以是url,也可以是本地文件。target属性是指定在哪个窗口或者帧中打开。 -->
  1. 定位标记<a name=””>
    一般在本页面中使用,当网页内容过长,定位标记会比拖动滚动条方便快捷。
    注:定位标记要和超链接结合使用才有效。
    例:
<a name=”标记”>标记位置</a>
<p>……<!--很多空行以制造网页过长的效果 -->
<a href=”#标记”>返回标记位置</a>
注:使用定位标记时一定在href值的开始加入#标记名。

href-04

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链_04</title>
</head>
<body>
	<!-- 超链接
	file:///  代表获取的是本地的路径
	http:// 或https:// 代表访问网络路径,如果什么协议都不写默认是file:///
	
	href:放的是超链接的地址
	
	a的内容是进行超链接的内容
	
	 -->
	<a href="font_011.html">haha</a>
	<a href="www.baidu.com">baidu</a>
	<!-- 刷新当前的界面 -->
	<a href="">ook</a>
</body>
</html>

表单标签:<form>

表单标签是最常用的标签,用于与服务器端的交互。
<input>:输入标签 :接收用户输入信息。
其中的type属性指定输入标签的类型。

  • 文本框 text。输入的文本信息直接显示在框中。
  • 密码框 password。输入的文本以原点或者星号的形式显示。
  • 单选框 radio 如:性别选择。
  • 复选框 checkbox 如:兴趣选择。
  • 隐藏字段 hidden 在页面上不显示,但在提交的时候随其他内容一起提交。
  • 提交按钮 submit 用于提交表单中的内容。
  • 重置按钮 reset 将表单中填写的内容设置为初始值。
  • 按钮 button 可以为其自定义事件。
  • 文件上传 file 后期扩展内容,会自动生成一个文本框,和一个浏览按钮。
  • 图像 image 它可以替代submit按钮。

<select>:选择标签 提供用户选择内容。如:用户所在的省市。size 属性为显示项目个数。

<option>:子项标签 属性 selected 没有属性值,加在子项上,其中一个子项上,子项就变成默认被选项。

<textarea>:多行文本框。如:个人信息描述。

<label>:用于给各元素定义快捷键。

for 属性:指定快捷键作用的表单元素。必须与要作用的表单元素的id值相同。
accesskey 属性:指定快捷键,此快捷键需要和alt键组合使用。

例:

<label for="user" accesskey="u">用户名(u)</label>
<input type="text" id="user" />

表单提交:

1. 先定义form表单中的action属性值,指定表单数据提交的目的地(服务端)。

2. 明确提交方式,通过指定method属性值。如果不定义,那么method的值默认是get。

  • get和post这两种最常用的提交方式的区别:

    1.

    • get提交将数据显示在地址栏,对于敏感信息不安全。
    • post提交不显示在地址栏,对于敏感信息安全

    2. 地址栏中存放的数据是有限,所以get方式对提交的数据体积有限制。
    post可以提交大体积数据。

    3. 对提交数据的封装方式不同:

    • get:将提交数据封装到了http消息头的第一行,请求行中。

    • post:将提交的数据封装到消息头后,在请求数据体中。

    • 注意:通常表单使用post提交,因为编码方便。

    • 对于Tomcat服务器端,默认的解码方式是ISO8859-1,那么中文会出现乱码。
      通过post提交,可以使用request.setCharacterEncoding(“GBK”);来解决乱码问题,该方法只对数据体有效。

      如果是get提交,request.setCharacterEncoding(“GBK”)该方法对乱码解决不了,必须先进行ISO8859-1编码,然后在进行GBK的解码。这种方式虽然对post提交的乱码也通用,但是麻烦。所以建立表单提交使用post。

form-05

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form_05</title>
</head>
<body>
<!-- 表单标签
作用:可以直接将表单的内容提交到服务器
常用作:登录界面,注册界面等

action:指定表单的提交服务器的地址

提交数据的方式:get,post
区别:get方式提交的数据会直接显示在网址上,不安全
post:不会显示在网址上,数据比较安全

method:设置提交数据的方式,默认是get

br:换行标签
 -->
 <form action=""  method="get">
 
 <!-- 单行文本框 -->
 	姓名:<input type="text"  name="user"/><br/>
 	密码:<input type="password" name="pwd"/><br/>
 	<!-- 单选框:   通过name属性设置分组     通过checked设置默认选项   -->
 	性别:<input type="radio"  name="sex" checked="checked" />男    <input type="radio" name="sex" />女<br/>
 	<!-- 复选框 -->
 	爱好:<input type="checkbox" name="hobby" />java <input type="checkbox" name="hobby" />大数据   <input type="checkbox" name="hobby" />php<br/> 
 	上传文件:<input type="file"><br/>
 	<!--下拉列表    selected:默认项-->
 	国籍:<select>
 		<option>中国</option>
 		<option>美国</option>
 		<option>朝鲜</option>
 		<option selected="selected">巴基斯坦</option>
 	</select><br/>
 	<!-- 普通按钮    value是按钮的名字     onclick:是点击按钮触发的事件     alert(内容):是一个提示的方法 -->
 	普通按钮:<input type="button" value="普通按钮"  onclick="alert('哈哈')"/><br/>
 	<!-- 多行文本框   row:行数     cols:列数 -->
 	个人介绍:<textarea rows="4" cols="50" />我们该下课了</textarea>
 	<!-- 提交:专门用来提交当前的表单信息 -->
 	<input type="submit" value="提交" /><br/>
 	<!--  重置:将当前表单的状态恢复到最开始的状态,不代表情况 -->
 	<input type="reset" value="重置" /><br/>
 </form>

</body>
</html>

form-table-06

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form_table_06</title>
</head>
<body>
	<form  action=""  method="post">
	    <table>
	    	<tr>
	    		<th>姓名:</th>
	    		<td><input type="text"  name="user"/></td>
	    	</tr>
	    	<tr>
	    		<th>密码:</th>
	    		<td><input type="password" name="pwd"/></td>
	    	</tr>
	    	<tr>
	    		<th>性别:</th>
	    		<td><input type="radio"  name="sex" checked="checked" />男    <input type="radio" name="sex" />女</td>
	    	</tr>
	    	<tr>
	    		<th>爱好:</th>
	    		<td><input type="checkbox" name="hobby" />java <input type="checkbox" name="hobby" />大数据   <input type="checkbox" name="hobby" />php</td>
	    	</tr>
	    	<tr>
	    		<th>上传文件</th>
	    		<td><input type="file"></td>
	    	</tr>
	    	<tr>
	    		<th>普通按钮</th>
	    		<td><input type="button" value="普通按钮"  onclick="alert('哈哈')"/></td>
	    	</tr>
	    	<tr>
	    		<th>国籍</th>
	    		<td><select>
 		<option>中国</option>
 		<option>美国</option>
 		<option>朝鲜</option>
 		<option selected="selected">巴基斯坦</option>
 	</select></td>
	    	</tr>
	    	<tr>
	    		<th>个人介绍</th>
	    		<td><textarea rows="4" cols="50" />我们该下课了</textarea></td>
	    	</tr>
	    	<tr>
	    		<th></th>
	    		<td><input type="submit" value="提交" /><input type="reset" value="重置" /></td>
	    	</tr>

	    </table>
	</form>
</body>
</html>

CSS

  • DHTML 是网页中 HTML、样式表和脚本的组合应用程序,增强网页的交互性
  • 样式分为行内样式、内嵌样式、外部样式
  • 样式表包括选择器和样式规则,选择器又分为HTML选择器、类选择器、ID选择器以及特殊的伪类
  • <DIV>和<SPAN>都是容器标签,<DIV>是块级标签,可包含段落、标题等,<SPAN>是行级标签,不能包含段落、标题等,只能包含部分文字

行内样式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行内样式:通过style直接给某个具体的标签设置样式</title>
</head>
<body>
<!-- 通过style设置的是行内样式,缺点:只能作用于当前的标签,如果有一批拥有相同样式的标签,需要写很多重复的代码,造成冗余 -->
	<p  style="color:red;font-size:50px;" >
		冰冰真漂亮
	</p>
	<p style="color:red;font-size:50px" >
		晨晨开心
	</p>
</body>
</html>

内嵌样式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内部样式(内嵌样式)</title>
<!-- 实现内嵌样式的方式
	html选择器
	class类选择器
	id选择器
	
	
	缺点:只能供当前的文件使用,其他的文件不能使用
	
	<style type="text/css" >这是是css的代码</style>
 -->
 
 <!-- html选择器
 构成:标签+{给这个标签设置的样式}
  -->
 <style type="text/css" >
 	p{
 		font-size:50px;
 		color:red;
 		font-family:楷书;
 	}
 	
 	font{
 		font-size:30px;
 		color:green;
 		font-family:楷书;
 	}
 	
 </style>
 
 <!--  class类选择器
 构成:.+名字+{设置的样式}
  -->
 <style type="text/css">
 	.myInput{
 		font-size:100px;
 		color:blue;
 		font-family:楷书;
 	}
 
 </style>
 
 <!-- ID选择器
 构成:#+id的名字+{设置的样式}
 缺点:因为标签本身有id属性,当与id选择器同时使用的时候出现了两个id,id选择器有可能失效
  -->
  <style type="text/css">
  	#myname{
  		font-size:200px;
 		color:blue;
 		font-family:楷书;
  	}
  </style>
  
  <!-- 伪类(特殊类型的样式表):专门用于超链接
  构成:通过HOVER设置当鼠标放在超链接上,内容的显示状态
  text-decoration:划线     overline:上划线     underline:下划线
   -->
  <style type="text/css">
  	a{
  		font-size:200px;
 		color:blue;
 		font-family:楷书;
 		text-decoration:overline;
  	}
  	
  	a:HOVER{
  	    font-size:100px;
 		color:red;
 		font-family:楷书;
 		text-decoration:underline;
  	}
  	
  
  </style>
</head>
<body>
	<p>冰冰1</p>
	<p>冰冰1</p>
	<p>冰冰1</p>

	<font>冰冰2</font>
	
	<font class="myInput">冰冰3</font>
	
	<font  id="3" id="myname"  >冰冰4</font>
	
	<a href="css1.html">真热</a>
</body>
</html>

外部样式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部样式</title>
<!-- 获取外部的css文件 -->
<link rel="stylesheet" type="text/css" href="..\..\..\..\css\mycss.css">
</head>
<body>
	<P >该下课了,累了</P>
	
	<!-- span:给几个文字设置属性 -->
	<h1>一会儿芳姐给大家发红包<span style="color:red;font-size:100px">1000</span>元</h1>
</body>
</html>

div:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div:层</title>
</head>
<body>
<!-- z-index:是z轴上的索引,值越大离我们越近
世界坐标:参考物是地球
本地坐标:参考物是自身
 -->
<div id="layer1" style="background-color:red;width:100px;height:100px;top:50px;left:50px;z-index:3;position:absolute">
	<img src="..\..\..\..\images\120.jpg" height=50px width=50px />美图
	<p>这里是第一层包含图片,文字</p>
</div>
<div id="layer2" style="background-color:green;width:100px;height:100px;top:120px;left:120px;z-index:4;position:absolute">
	<img src="..\..\..\..\images\bingbing.jpg" height=50px width=50px />美图
	<p>这里是第二层包含图片,文字</p>
</div>
</body>
</html>

JavaScript

js小结

  • 网页中嵌入脚本有两种方式:使用<Script>标签或外部 *. js文件
  • JavaScript 中声明变量:var 变量名
  • “+”可以用于两个数相加,还可以用于连接字符串
  • parseInt() 和 parseFloat() 函数将字符串分别转换为整型和小数
  • 运算符号分为算术运算符、比较运算符、逻辑运算符
  • 条件语句分为if语句,if-else语句、if的嵌套
  • 多分支语句switch根据表达式的值,进入不同的分支执行

基本理解

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js1:基本理解</title>
<!-- 注意:代码的执行顺序是从上到下 

<script type="text/javascript">
//第一种方式:这里写js的代码--将js代码内嵌到html
	//alert("这是提示方法");   // 直接出一个提示框
	document.write("ok");   //在屏幕上写内容
</script>
-->

<!-- 第二种使用外部链接 -->
<script type="text/javascript"  src="..\..\..\..\js\myjs.js"></script>

<!-- js:javascript
分成三部分:ECMAScript:内部包含js的基本语法,ECMA:是一个国际化的组织
BOM:Brower Object Model:处理的是与当前页面相关的各种配套功能
DOM:Document Object Model:处理的是当前页面的内容
 -->
</head>
<body>
	<h2>哈哈</h2>
</body>


</html>

基本语法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js2:基本语法</title>
<!--常量:变量
var:在js中他代表所有的数据类型,因为js是弱语法,var后面变量的类型由后面具体的值确定
注意:在js中使用变量前要先给变量赋值,如果不赋值直接使用会报undefind(未定义)错误.因为这个变量没有默认值

window:是一个窗口类,在使用他的方法的时候,可以省略当前的名字,直接使用方法
document:是当前的页面类,write方法是他内部的方法,而document在调用方法的时候,前面的对象不能省略.
write方法:作用是将内容写到页面上
+:1.相加   2.字符串拼接
  -->
<script type="text/javascript">
   34;
   2.3;
   
   var a = 4;
   var b = 3.4;
   
   var c ;
   c = 4;
   alert(c);
   
   var x;
   x = prompt("淘宝网竞拍,请出一口价",1);//第一个参数是提示信息   第二个参数是输入框内的默认值--1
   document.write("拍卖价格:"+x);
   document.write("恭喜你拍卖成功!");
   
   alert("吃"+x+"斤饭");

</script>
</head>
<body>
	
</body>
</html>

流程控制语句和函数

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js3:流程控制语句和函数</title>
<!-- 求两个数的商
1.写对应的标签
2.使用js的函数实现求商的过程
3.将得到的结果重新交给标签显示
 -->
<script type="text/javascript">
//全局变量:直接写在script内部的变量
//特点:可以省略var
//var  d = 3;
d = 3;


//2.使用js的函数实现求商的过程

//函数的构成:function 函数名(参数列表){函数体}
function div(){
	
	
	//获取三个标签对象
	var input1 = document.getElementById("1");
	
	//通过name调用
	//var input11s - document.getElementsByName("number1");
	//var input11 = input11s[0];
	var input2 = document.getElementById("2");
	var input3 = document.getElementById("3");
	
	//获取值-默认都是字符串
	var num1 = input1.value;
	var num2 = input2.value;
	
	//求商--转换成浮点型计算
	var shang = parseFloat(num1)/parseFloat(num2);
	
	alert(shang);
	//3.将得到的结果重新交给标签显示
	//将值传给input3
	input3.value = shang;
	

	//注意点:在js中两个整数相除得到的是小数,在java中得到的是整数
	var x =3,y = 2;
	var z = x/y;
	document.write(z);
	
	//流程控制语句
	if(1){//在js中,0代表false    非零代表ture
		
	}
	
	var dd = 2;
	switch(dd){
	    case 1:{
		
	    }
	        break;
	    case 2:{
		
	    }
	        break;
    	default:
		    break;
	}
	
}
 
</script>
</head>
<body>
<!-- 1.写对应的标签 -->
第一个数:<input id="1" type="text" name="number1" value="11"/><br/>
第二个数:<input id="2" type="text" name="number2" /><br/>
商:<input id="3" type="text" name="number3" />
<!-- onclick:是一个点击事件,我们将点击按钮触发事件的过程称为事件驱动 -->
<input type="button"  value="求商" onclick="div()"/>
</body>
</html>

图片自动更新

<!DOCTYPE html>
<html>
<head>

<!-- meta作用:
<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对

注释:<meta> 标签永远位于 head 元素内部。
注释:元数据总是以名称/值的形式被成对传递的。

1.标识了创作者和编辑软件
2.描述了该文档和它的关键词
3.重定向

属性:
name 属性
name 属性提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。
通常情况下,您可以自由使用对自己和源文档的读者来说富有意义的名称。
"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时,
会用这些关键字对文档进行分类。
类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助:
如果没有提供 name 属性,那么名称/值对中的名称会采用 http-equiv 属性的值。

http-equiv 属性
http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 
文档头部包含名称/值对。
当服务器向浏览器发送文档时,会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对,
但是所有服务器都至少要发送一个:content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。

使用带有 http-equiv 属性的 <meta> 标签时,服务器将把名称/值对添加到发送给浏览器的内容头部。
对应的值有:content-type   expires    refresh   set-cookie

content 属性
content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。
content 属性始终要和 name 属性或 http-equiv 属性一起使用。
 -->
<meta charset="UTF-8">
<!-- 通过meta标签设置页面的刷新
根据下面的设置,当前页面会自动每隔1秒刷新一次
 -->
<meta http-equiv="refresh" content="1">
<title>美女自动更新</title>
<script type="text/javascript">
document.write("<center><h2>这里是美女们,每一秒更新一次</h2></center>");
//Math.floor :向下取整 ceil:向上取整    round:四舍五入    random是取随机数,范围[0,1)
var a = Math.round(Math.random()*8+1)
document.write("<center><img height=400px  width=600px  src=..\\..\\..\\..\\images\\"+a+".jpg></center>");

</script>
</head>
<body>


</body>
</html>

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>买美女</title>
</head>
<body>
<!-- onMouseOver:是鼠标移到图片上面的时候触发    onMouseOut:是鼠标离开图片的时候触发 -->
<img  src="..\..\..\..\images\美女1.jpg" width=200px height=300px align="center" onMouseOver="src='..\\..\\..\\..\\images\\美女03.jpg'" onMouseOut="src='..\\..\\..\\..\\images\\美女1.jpg'">
低价拍卖美女
<h2>移过来看看我啊</h2>
</body>
</html>

漂浮的图片

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漂浮的图片</title>
<script type="text/javascript">
//随机生成层的top和left
function fun(){
    document.getElementById("myDiv").style.left = Math.floor(Math.random()*500)+"px";
    document.getElementById("myDiv").style.top = Math.floor(Math.random()*500)+"px";
    
    
   //刷新函数:定期刷新,第一个参数是:要执行的功能   第二个参数:刷新的时间
   setInterval("fun()",50);
    //只刷新一次
    //setTimeout("fun()",100);
}


</script>
</head>
<!-- onload(函数):当当前页面加载完成后,执行后面的函数,只执行一次 -->
<body onload="fun()">
<div id="myDiv" style="position:absolute;left:100px;top:100px;width:100px;height:100px;background-color:red;z-index:1">
	<img src="..\..\..\..\images\1.jpg" width=100px height=100px>
</div>
</body>
</html>

鼠标获取

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标获取onfocus释放onblur焦点</title>
<style type="text/css">
input{
	color:green;
	font-size:20px;
	background-color:red;
	border:1px solid;

}
</style>

<script type="text/javascript">
//点击
function myFocus(){
	var value = document.getElementById("user").value;
	if(value == "请注意格式10XXXXXXX")
		document.getElementById("user").value = "";
}

//离开
function myBlur(){
	var value = document.getElementById("user").value;
	if(value.substr(0,2) != "10"){
		alert("输入不符合规则");
		//重新获取焦点
		document.getElementById("user").value.focus();
	}
}


</script>
</head>
<body>
<!-- onfocus:当鼠标点击输入框触发的事件    onblur:当鼠标离开的时候触发的事件 -->
卡号:<input id="user" type="text" value="请注意格式10XXXXXXX" onfocus="myFocus()" onblur="myBlur()"><br><br>
密码:<input type="text">
</body>
</html>

js中的数组

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js中的数组</title>

<!-- typeof的使用:是js中一个函数,把类型信息当字符串返回
可能返回的结果可能有六种:nuber,string,object,function,boolean,undefined
number:说明是数字
string:字符串
object:说明是Array,Null,对象
function:说明是函数
boolean:说明是布尔值
undefined:说明是类型未定义 

typeof可以判断一个变量是否存在
如:if(typeof a !="undefeined")  不要直接使用if(a) 这样如果a不存在(未声明),就会出错
注意:对于数组,Null等特殊的对象,会返回object,这是typeof的局限性

如果我们希望获取某个变量(对象)是否是某个类的实例可以使用instanceof
-->
<script type="text/javascript">
//注意点:1.js中的数组是动态的,可以直接添加元素
//2.可以同时存储多个不同类型的变量

//第一种创建方法   10没有太大的意义
 var arr1 = new Array(2);
 
 arr1[0] = 2;
 arr1[1] = 3;
 arr1[2] = 6;
 arr1[3] = true;
 
 for(var i=0;i<arr1.length;i++){
	 document.write("元素:"+arr1[i]+"<br>");
	 
 }
 
 //alert(typeof arr1); //object
 //alert(typeof Array);  //function  
 //alert(typeof 1);//number
 
 //alert(arr1 instanceof Array);
 
 //第二种
 var arr2 = [];
 
 //第三种
 var arr3 = new Array();
 
 //第四种
 var arr4 = Array();

</script>
</head>
<body>

</body>
</html>

生成随机验证码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>生成随机的验证码,用户输入验证码,验证用户输入的是否正确</title>
<script type="text/javascript">
var codes = "";
function setCodes(){
	var arr = [")",3,"@","名",6,"&"];
	
	//var codes = "";
	if(codes != "")
		codes="";
	for(var i=0;i<4;i++){
		var a = arr[Math.floor(Math.random()*arr.length)];
		codes =codes+a;
	}
	//用来显示添加到层上的内容
	document.getElementById("mydiv").innerHTML = codes;
	
	
}

function checkCodes(){
	var bb = document.getElementById("user").value;
	if(bb != codes){
		alert("验证码不正确");
		document.getElementById("user").value = "";
		document.getElementById("user").focus();
		//刷新验证码
		setCodes();
	}
}


</script>
</head>
<body onload="setCodes()">
输入验证码<input id="user" type="text" >
<div id="mydiv" style="display:inline; border:1px solid;" onclick="setCodes()"></div><br>
<input type="button" value="确定" onclick="checkCodes()">
</body>
</html>

统计字数

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户在文本域中输入多个字符,当点击按钮时分别统计字符串中大写字母,小写字母,
                  数字以及其他字符的个数并把统计结果显示在div中</title>
<script type="text/javascript">

//统计个数
function check(){
	var str = document.getElementById("textarea").value;
	var a=b=c=0;
	
	for(var i=0;i<str.length;i++){
		var tt = str.charAt(i);
		//大写字母
		if(tt>="A" && tt<="Z"){
			a++;
		}else if(tt>="a" && tt<="z"){//小写字母
			b++;
		}else if(tt>="0" && tt<="9"){//数字
			c++;
		}
		
	}
	
    document.getElementById("div").innerHTML = "一共有大写字母:"+a+"小写字母:"+b+"数字:"+c+"其他字符:"+(str.length-a-b-c);
}


//统计字符个数
function counts(){
	//设置可以输入的最大的值---100
	if(document.getElementById("textarea").value.length>100){
		document.getElementById("textarea").value = document.getElementById("textarea").value.substr(0,100);
	}
	
	var length = document.getElementById("textarea").value.length;
	var sheng = 100-length;
	
	document.getElementById("span").innerHTML = "还剩下("+sheng+")个字";
	
	if(sheng == 0)
		document.getElementById("span").style.color="red";
	
}

</script>
</head>
<body>
<textarea id="textarea" rows="5" cols="10" onkeyup="counts()"></textarea>
<span id="span"style="color:blue;font-size:20px">还剩下(100)个字</span>
<input type="button" value="统计" onclick="check()">
<div id="div" style="position:absolute;left:50px;top:100px;width:200px;height:200px;z-index:1;background-color:gray"></div>
</body>
</html>

标签与js分离

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标签与js分离</title>
<script type="text/javascript">
//当页面都加载完成之后,在执行它
window.onload = function(){
	 button = document.getElementById("btn");
	 button.onclick = function (){
			alert("hehe");
	 }
}



//因为这样直接调用,button对象还没有创建
 <!-- var button = document.getElementById("btn");
 button.onclick = function (){
		doucment.write("gggod");
 }
 -->

//原来的方式
//function fun(){
//	doucment.write("gggod");
//}

</script>
</head>
<body>
<input id="btn" type="button" value="确定"  onclick="fun()">
</body>
</html>

js的工具类

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js的工具类</title>
<!--创建.js文件作为工具类,将要使用的方法写在js文件里面,
注意:两个函数之间要用,隔开
格式: var  Util(名字) = {
//函数1
函数名:function(参数){函数体},
//函数2
函数名:function(参数){函数体},
...
} -->
<script src="..\..\..\..\js\Util.js"></script>
<script type="text/javascript">

window.onload = function(){
	
	var btn1 = document.getElementById("btn1");
	btn1.onclick = function(){
		
		//alert("这里是test");
		Util.test();
	}
	
	
	var btn2 = document.getElementById("btn2");
	btn2.onclick = function(){
        var year = 2014;
       var isTrue =  Util.isLeapYear(year);
		//if((year%4==0 && year%100!= 0) || (year%400==0)){
		//	alert("这是闰年");
		//}else{
		//	alert("这不是闰年");
		//}
		alert(isTrue);
	}
	
}

</script>
</head>
<body>
<input id="btn1" type="button" value="点我">
<input id="btn2" type="button" value="判断是否是闰年">
</body>
</html>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页