HTML

一、HTML

1、系统结构

2、HTML的介绍，开发与运行

3、HTML的标签

3.1 基本标签

3.2 表格标签

"table"标签用来插入表格；"tr"标签用来插入表格中的一行，这个标签在"table"标签里面；"td"标签是用来创建单元格的，在"tr"标签内

单元格合并

"rowspan"是"td"标签里的属性，用来对单元格行合并

列合并

"colspan"是"td"标签里的属性，对单元格进行列合并的。

th标签

表格三部分

3.3 背景颜色和图片

背景颜色和背景图片都是嵌入到浏览器背景当中的

"body"标签里的"bgcolor = "颜色""属性，可以用来设置网页的背景颜色

"background"属性，用来设置网页的背景图片

图片

"img"标签用来插入一个图片元素，此标签可以没有结束标志

3.4 超链接(重点)

"a"标签用来插入超链接

"href"属性

请求路径

内部窗体

"a"标签里面的target属性

3.5 列表和表单

3.5.1 列表

"ol"标签是有序列表，"ul"标签是无序列表，"li"标签是列表里的字段，包含在"ol"或者"ul"标签内

代码如下：

数学书

第一章
第二章
第三章

英语书
语文书

中国

湖南省
广东省
广西省

葡萄牙
韩国

3.5.2 表单(重点)

什么是表单？

表单标签

"form"标签用来创建表单，"method"是属性，用来指定表单的提交方式

"input"标签是表单中非常重要的输入域标签，"type"是属性，只有当type的属性是"submit"的时候这个按钮才有提交的功能

"input"标签

想要提交的数据里必须要有"name"属性，否则是无法提交的；并且只有需要提交的数据才要写"name"属性

代码如下：

表单

user login

单选按钮

下拉列表

多选按钮

文本域

代码如下：

隐藏域控件

disabled和readonly属性

maxlength属性

HTML中的id属性

div和span标签

二、CSS

1、概述

2、HTML中嵌入CSS样式的三种方式

2.1 第一种方式：内联定义

代码如下

嵌入CSS的第一种方式

2.2 第二种方式：定义内部样式块对象

"style"标签就是一个样式块对象，在这个标签里面使用选择器定义样式

"id选择器的使用只能将样式作用于某一个节点"

格式：#id名{

}

代码如下：

标签选择器的使用会作用于当前页面所有选择的标签，以下代码使用的标签选择器就会作用于所有的input标签

格式：标签名{

}

代码如下：

类选择器的使用会作用于当前页面所有类的标签，HTML中每一个标签/节点都具有"class"属性用来指定标签类名

格式：.类名{

}

代码如下

注意：三种选择器的优先级：

id选择器 > 类选择器 > 标签选择器

2.3 第三种方式：引入外部独立的css样式表文件(使用较多)

在实际开发当中，这种方式使用较多。因为这种方式可以降低维护成本，修改的时候只需要改css文件就行

代码如下：

"link"标签用来引入外部的css样式表文件

3、常见的CSS样式：

边框："border"属性

隐藏："display: none;"隐藏对象

字体："font"属性

文本装饰："text-decoration"属性

列表："list"属性

设置鼠标悬停效果：

布局："float"属性

定位："position"属性

三、JavaScript

1、概述

2、嵌入JS代码的方式

2.1 嵌入js代码的第一种方式：在事件句柄中提供JS代码

代码如下：

2.2 嵌入JS代码的第二种方式：脚本块

2.3 嵌入JS代码的第三种方式：引入外部独立的JS文件

3、变量

定义变量的语法格式：var 变量名;

赋值：变量名 = 值;

全局变量和局部变量

注意：

4、函数

定义函数：

调用函数：

1. 在"script"标签里直接输入函数名，例：

sum(1,2);

2.在事件句柄中提供JS代码，例：

<input type="button" value="求和" onclick="sum(3,8)"/>

函数的另一种写法：

注意：

5、数据类型

5.1 JS中的数据类型介绍

5.2 undefined类型

5.3 Number类型

Number类型和NaN

parseInt()函数、parseFloat()函数、Math.ceil()函数

无穷大和isNaN函数

5.4 Boolean类型

Boolean()的特点："有"就转换成true，"没有"就转换成false

6、根据id获取元素，获取和修改元素里的内容(重点)

6.1 根据id获取元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script>
		function getIdEle(){
            //获取div对象
			var divId = document.getElementById("mydiv")
            //将div对象输出到控制台
			console.log(divId);
			
           
			var inputId = document.getElementById("myinput")
			console.log(inputId)
		}
	</script>
	<body>
		<div id="mydiv">我的div</div>
		<input type="text" id="myinput">
		<input type="button" value="获取节点对象" onclick="getIdEle()">
	</body>
</html>

6.2 获取和修改元素里的内容

innerHTML属性

在获取到节点对象之后，通过这个属性可以获取或修改节点元素里的内容

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			function getId(){
                //获取div对象
				var div1 = document.getElementById("mydiv1")
				var div2 = document.getElementById("mydiv2")
                
                //修改div对象的值
				div1.innerHTML = "hello world!"
				div2.innerHTML = div1.innerHTML
			}
		</script>
		<div id="mydiv1">hello zhonglei!</div>
		<div id="mydiv2"></div>
		<input type="button" value="设置节点对象" onclick="getId()">
	</body>
</html>

innerHTML和innerText的区别

获取文本框里属性"value"的值

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			function getusername(){
				//获取input对象
				var inputObj = document.getElementById("username")
				
				//获取input对象里的value
				var inputValue = inputObj.value
				
				//修改input对象里的type
				inputObj.type = "checkbox"
				
				//弹窗
				alert(inputValue)
			}
		</script>
		用户名<input type="text" id="username"/>
		<input type="button" value="获取用户名" onclick="getusername()">
	</body>
</html>

6.3 全选和取消全选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body onload="bundClick()">
		<script>
			
			//全选函数
			function allCheck(){
				//获取全选按钮对象
				var checkAll = document.getElementById("checkAll")
				
				//获取所有的多选按钮对象，返回的是一个数组
				var checks = document.getElementsByName("hobby")
				
				//循环
				for (var i = 0; i < checks.length; i++) {
					checks[i].checked = checkAll.checked
				}
			}
			
			//将所有多选按钮都绑定鼠标单击事件
			function bundClick(){
				//获取所有多选按钮
				var checks = document.getElementsByName("hobby")
				
				//循环，绑定每一个多选按钮
				for (var i = 0; i < checks.length; i++) {
					checks[i].onclick = function(){
						//获取所有多选按钮的数量
						var count = checks.length
						
						//统计被选中的多选按钮的数量
						var  checkCount = 0
						for (var i = 0; i < checks.length; i++) {
							if(checks[i].checked)
								checkCount++
						}
						
						//判断被选中的数量是否和总数相等
						document.getElementById("checkAll").checked = (count == checkCount)
					}
				}
			}
			
		</script>
		<input type="checkbox" name="firstChk" id="checkAll" onclick="allCheck()">全选<br>
		<input type="checkbox" name="hobby"/>奖励<br>
		<input type="checkbox" name="hobby"/>努力<br>
		<input type="checkbox" name="hobby"/>运动<br>
		<input type="checkbox" name="hobby"/>学习<br>
		<input type="checkbox" name="hobby"/>游戏<br>
		<input type="checkbox" name="hobby"/>电影<br>
	</body>
</html>

6.4 表单验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script>
		
		//检查用户名是否合法
		function check(username){
			//获取span标签，错误提示信息都输出在这个标签里面
			var tips = document.getElementById("mirror_info")
			
			//开始检查用户名，判断用户名是否为空
			if(username == ""){
				tips.innerHTML = "用户名不能为空"
			}else{
				//用户名不为空，判断长度是否合法
				if(username.length < 6 || username.length > 14){
					tips.innerHTML = "用户名必须在[6 - 14]位之间"
				}else{
					//长度合法，继续判断用户名内容是否合法
					var i;
					for (i = 0; i < username.length; i++) {
						if((username[i] >= '0' && username[i] <= '9') || 
						((username[i] >= 'a' && username[i] <= 'z') || (username[i] >= 'A' && username[i] <= 'Z'))){
							
						}else{
							break
						}
					}
					if(i == username.length){
						alert("用户名合法")
					}else{
						tips.innerHTML = "用户名只能由数字和字母组成"
					}
				}
			}
		}
		
		function clear_check(){
			var tips = document.getElementById("mirror_info")
			tips.innerHTML = ""
		}
		
		function mySubmit(form){
			let formData = new FormData(form)
			let username = formData.get("username")
			//开始检查用户名，判断用户名是否为空
			if(username == ""){
				alert("用户名不能为空")
				return false;
			}else{
				//用户名不为空，判断长度是否合法
				if(username.length < 6 || username.length > 14){
					alert("用户名必须在[6 - 14]位之间")
					return false;
				}else{
					//长度合法，继续判断用户名内容是否合法
					var i;
					for (i = 0; i < username.length; i++) {
						if((username[i] >= '0' && username[i] <= '9') || 
						((username[i] >= 'a' && username[i] <= 'z') || (username[i] >= 'A' && username[i] <= 'Z'))){
							
						}else{
							break
						}
					}
					if(i != username.length){
						alert("用户名只能由数字和字母组成")
						return false;
					}else{
						return true;
					}
				}
			}
		}
	</script>
	<body>
		<form action="http://localhost:8080/zhong/lei" method="get" onsubmit="return mySubmit(this)">
		用户名：<input type="text" name="username" id="user_name" onblur="check(this.value)" onfocus="clear_check()">
		<span id="mirror_info" style="color:red; font-size:12px;"></span>
		<br>
		<input type="submit" value="保存">
		</form>
	</body>
</html>

posted @ 2022-11-26 00:58 钟望曦阅读(415) 评论(0) 收藏举报

刷新页面返回顶部

ZLei0212

HTML

一、HTML

1、系统结构

2、HTML的介绍，开发与运行

3、HTML的标签

3.1 基本标签

3.2 表格标签

3.3 背景颜色和图片

3.4 超链接(重点)

3.5 列表和表单

3.5.1 列表

3.5.2 表单(重点)

user login

二、CSS

1、概述

2、HTML中嵌入CSS样式的三种方式

2.1 第一种方式：内联定义

2.2 第二种方式：定义内部样式块对象

2.3 第三种方式：引入外部独立的css样式表文件(使用较多)

3、常见的CSS样式：

三、JavaScript

1、概述

2、嵌入JS代码的方式

2.1 嵌入js代码的第一种方式：在事件句柄中提供JS代码

2.2 嵌入JS代码的第二种方式：脚本块

2.3 嵌入JS代码的第三种方式：引入外部独立的JS文件

3、变量

4、函数

5、数据类型

5.1 JS中的数据类型介绍

5.2 undefined类型

5.3 Number类型

5.4 Boolean类型

6、根据id获取元素，获取和修改元素里的内容(重点)

6.1 根据id获取元素

6.2 获取和修改元素里的内容

6.3 全选和取消全选

6.4 表单验证

公告

ZLei0212

HTML

一、HTML

1、系统结构

2、HTML的介绍，开发与运行

3、HTML的标签

3.1 基本标签

3.2 表格标签

3.3 背景颜色和图片

3.4 超链接(重点)

3.5 列表和表单

3.5.1 列表

3.5.2 表单(重点)

user login

二、CSS

1、概述

2、HTML中嵌入CSS样式的三种方式

2.1 第一种方式：内联定义

2.2 第二种方式：定义内部样式块对象

2.3 第三种方式：引入外部独立的css样式表文件(使用较多)

3、常见的CSS样式：

三、JavaScript

1、概述

2、嵌入JS代码的方式

2.1 嵌入js代码的第一种方式：在事件句柄中提供JS代码

2.2 嵌入JS代码的第二种方式：脚本块

2.3 嵌入JS代码的第三种方式： 引入外部独立的JS文件

3、变量

4、函数

5、数据类型

5.1 JS中的数据类型介绍

5.2 undefined类型

5.3 Number类型

5.4 Boolean类型

6、根据id获取元素，获取和修改元素里的内容(重点)

6.1 根据id获取元素

6.2 获取和修改元素里的内容

6.3 全选和取消全选

6.4 表单验证

公告

2.3 嵌入JS代码的第三种方式：引入外部独立的JS文件