Webhtml5基础-文本控制类标签(知识训练和编程训练)
HTML5引入了一些新的文本控制类标签，如<output>, <datalist>, <keygen> 和 <mark>。以下是这些标签的简单示例：
<!DOCTYPE html>
<html>
<head>
<title>HTML5 文本控制类标签示例</title>
</head>
<body>
<!-- 计算器示例：使用<output>显示计算结果 -->
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
加数 A: <input type="number" id="a" value="0">
+ 加数 B: <input type="number" id="b" value="0">
= 结果: <output name="result" for="a b">0</output>
</form>
<!-- 自动完成输入示例：使用<datalist>提供可能的值 -->
<input list="cars" name="myCar" placeholder="选择或输入一个车型...">
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
<!-- 密钥生成示例：<keygen> 用于提供密钥对生成的表单元素 -->
<form action="/submit_form" method="post">
用户名: <input type="text" name="username">
密钥: <keygen name="security-key">
<input type="submit">
</form>
<!-- 高亮文本示例：使用<mark>标记文本 -->
<p>这是一个<mark>重要</mark>的句子。</p>
</body>
</html>在这个示例中，我们展示了如何使用<output>, <datalist>, <keygen> 和 <mark> 标签。<output>用于表单计算结果，<datalist>提供输入字段的预先定义值的列表，<keygen>允许网站生成密钥对，而<mark>则用于突出显示文本。这些标签提供了更丰富的文本控制功能，有助于改善用户体验。
评论已关闭