HTML5新特性解析：语法、语义化与表单验证-CSDN博客

本文链接：https://blog.csdn.net/qq_37326058/article/details/104009586

本文介绍了HTML5的新变化，包括语法改进、语义化标签的使用如header, nav, section等，以及新增的表单元素如datalist, keygen和output。同时，重点讲解了HTML5表单验证功能，提供了validityState对象用于反馈验证状态，增强了用户体验。" 119208148,10921213,2021年全球与中国汽车均质充量压缩点火（HCCI）市场分析,"['汽车技术', '发动机技术', '汽车市场', '汽车行业分析']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1,html语法变化

html5是一个新的网络标准，现在任处于发展阶段，目标是取代先有的html4和xhtml1标准。它希望能够减少互联网富应用（RIA）对Flash,Silverlight，JavaFX等的依赖。并且提供更多能有效增强网络应用的API 。

2,html语义化

html语义化标签(结构化标签) header,nav,main,article,section,aside,footer等。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<header></header>
	<nav></nav>
	<article><!--article可以嵌套-->
		<header></header>
	**加粗样式**	<section></section>
		<section></section>
		<section></section>
		<section></section>
		<footer></footer>
	</article>
	
	<aside></aside>
	<footer></footer>
</body>
</html>

3,html5新增表单元素

有三个，datalist,keygen和output元素。
1,datalist元素。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<header></header>
	<nav></nav>
	<main>
		<article>
			<header>
				<form action="">
					<input type="text" id="inputTest1" list="shopCars"/>
					<datalist id="shopCars">
						<option value="aa1"></option>
						<option value="aa2"></option>
						<option value="aa3"></option>
					</datalist>
				</form>
			</header>
			<section></section>
			<footer></footer>
		</article>
		<aside></aside>
	</main>
	
	
	<footer></footer>
</body>
</html>

效果如下所示

在这里插入图片描述

2,keygen元素。

keygen元素的作用是提供一种验证用户的可靠方法。
keygen元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个是公钥。
私钥存储在客户端，公钥则被发送到服务器。公钥可用于之后验证用户的客户端证书。
目前，浏览器对此元素的支持不够，keygen并不能成为一种有用的安全标准。

2,output元素。

该元素用于定义不同类型的输出，比如计算结果或者脚本的输出。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<header></header>
	<nav></nav>
	<main>
		<article>
			<header>
				<form  oninput="c.value=parseInt(a.value)+parseInt(b.value)">
					第一个加数<input type="text" value="5" id="a"/> + 
					第二个加数<input type="text" value="10" id="b"> =
					<output id="c" for="a b"></output> 

				</form>
			</header>
			<section></section>
			<footer></footer>
		</article>
		<aside></aside>
	</main>
	
	
	<footer></footer>
</body>
</html>

效果如下所示:
在这里插入图片描述

4，html5 form表单验证

在表单提交服务器前，为终端用户提供一系列无效性数据校验，并提示用户修正错误的过程。
新属性: validityState :是反馈验证状态的对象。

badInput: false  //输入有效

customError: false //不存在自定义错误

patternMismatch: false //正则表达式匹配成功

rangeOverflow: false //输入值超过max的限制

rangeUnderflow: false  //输入值小于min的限制

stepMismatch: false   //输入的数字匹配step限制

tooLong: false   //输入的字符数未超过maxlength

tooShort: false  //输入的字符数不小于minlength

typeMismatch: false  //输入值符合所要求的类型限制

valueMissing: false  //符合require要求

valid: true  //上述验证取值全部为false的时候，valid取值才为true, 否则 valid取值则为false

对象中每个验证错误在浏览器内部都有一个预定义的错误提示消息和一个自定义的错误提示消息。注意：自定义错误提示信息优先级别高于预定义错误提示信息。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

</head>
<body>
	<header></header>
	<nav></nav>
	<main>
		<article>
			<header>
				<form  name="myForm">
					请输入姓名：<input type="text" id="usename" name="username"/><br/><br/><br/>
					请输入账号：<input type="password" id="password" name="password"/><br>
					  <input type="submit" />
				</form>
			</header>
			<section></section>
			<footer></footer>
		</article>
		<aside></aside>
	</main>
	
	
	<footer></footer>
	<script>
		var valid = document.getElementById('usename').validity;
		console.dir(valid);
		var inp = document.getElementById('usename');
		console.log(inp.validationMessage);
		inp.setCustomValidity("亲，请注意输入信息的要求");
		console.log(inp.validationMessage);
	</script>
</body>
</html>