HTML第5天 HTML新标签与特性-优快云博客

本文链接：https://blog.youkuaiyun.com/csdn_okcheng/article/details/112755543

文章介绍了HTML5中的新标签，包括datalist标签如何与input元素配合创建选项列表，以及fieldset元素用于组织表单内容的功能。示例代码展示了如何使用这些新特性来提升前端交互体验。

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

新标签与特性

文档类型设定
前端复习帮手W3Schoool
常用新标签

文档类型设定

document
– HTML: 开发环境输入html:4s
– XHTML: 开发环境输入html:xt
– HTML5: 开发环境输入html:5

前端复习帮手W3Schoool

点击链接进入W3School官网！
手册使用视频

常用新标签

header：定义文档的页眉头部
nav：定义导航链接的部分
footer：定义文档或节的页脚，底部
article:定义文章
section：定义文档中的节/区域
aside:定义侧边

datalist标签，与input元素配合，定义选项列表

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
</head>
<body>
	<input type="text" value="输入明星" list="star"/>
	<datalist id="star">
		<option>刘晓庆</option>
		<option>刘德华</option>
		<option>郭富城</option>
	</datalist>
</body>
</html>

fieldset元素

field元素可将表单内的相关元素分组，打包

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
</head>
<body>
	<input type="text" value="输入明星" list="star"/>
	<datalist id="star">
		<option>刘晓庆</option>
		<option>刘德华</option>
		<option>郭富城</option>
	</datalist>
	<fielfset>
		<legend>用户登录</legend>
		用户名：<input type="text"><br />
		密码：<input type="password"><br />
	</fieldset>
</body>
</html>