网页设计之多行文本标签的简单应用

原创已于 2022-08-09 16:53:14 修改 · 467 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #html5

于 2021-08-29 11:30:46 首次发布

笔记专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何在HTML中使用不同类型的多行文本标签，如单选和多选<select>元素，以及分组选项(<optgroup>)，并展示了它们在教学和实际项目中的应用。涉及了软件技术、物联网等信息技术领域的选择题设置。

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>多行文本标签的简单应用</title>
</head>
<style>
select{
width:20em;
display:block;
margin:10px;
}

</style>

<body>
<h3>多行文本标签的简单应用</h3>
<hr>
	<p>简单列表</p>
	<select>
	<option value="1">软件技术</option>
	<option value="2">物联网</option>
	<option value="3">计算机网络技术</option>	
	</select>
	<p>分组列表</p>
	<select>
	<optgroup label="信息工程学院">
	<option value="1">软件技术</option>
	<option value="2">物联网</option>
	<option value="3">计算机网络技术</option>	
	</optgroup>
	<optgroup label="航空机电学院">
	<option value="4">无人机</option>
	<option value="5">机器人</option>
	<option value="6">电气自动化</option>	
	</optgroup>
	</select>
	<p>简单列表（多选）</p>
	<select multiple>
	<option value="1">软件技术</option>
	<option value="2">物联网</option>
	<option value="3">计算机网络技术</option>	
	</select>
	<p>分组列表（多选）</p>
	<select multiple size="8">
	<optgroup label="信息工程学院">
	<option value="1">软件技术</option>
	<option value="2">物联网</option>
	<option value="3">计算机网络技术</option>	
	</optgroup>
	<optgroup label="航空机电学院">
	<option value="4">无人机</option>
	<option value="5">机器人</option>
	<option value="6">电气自动化</option>	
	</optgroup>
	</select>
	
</body>
</html>