HTML笔记3

21,label标签

<label for="...">...</label>

<label>...</label>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<!-- 点击文字也可以选中 -->

<!-- 写法一 -->

性别: <input type="radio" id="man" name="gender" checked>

<label for="man">男</label>

<input type="radio" id="women" name="gender">

<label for="women">女</label>

<br><br>

<!-- 写法二 -->

性别: <label><input type="radio" name="gender1" checked>男</label>

<label><input type="radio" name="gender1">女</label>

</body>

</html>

22,按钮

<button type="submit">提交</button>

<button type="reset">重置</button>

<button type="button">普通按钮</button>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<!-- form表单区域标签 -->

<form action="数据提交地址">

<!-- 按钮 -->

用户名: <input type="text" placeholder="请输入用户名"><br><br>

密码框: <input type="password" placeholder="请输入密码"><br><br>

<!-- 省略type属性,功能依然是提交 -->

<button type="submit">提交</button>

<br>

<button type="reset">重置</button>

<br>

<button type="button">普通按钮</button>

</form>

</body>

</html>

23,布局标签

<div>这是div标签</div>

<span>这是span标签</span>

网页中显示字符:****&nbsp

显示尖括号:&lt和****p&gt

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<!-- div俗称大盒子 -->

<div>这是div标签</div>

<div>这是div标签</div>

<!-- span俗称小盒子 -->

<span>这是span标签</span>

<span>这是span标签</span>

<br><br><br>

<!-- 网页中显示字符 -->

叶上初阳干宿雨&nbsp水面清圆&nbsp一一风荷举

<br><br><br>

<!-- 显示尖括号p -->

&lt;p&gt;

</body>

</html>

相关推荐
hmbbcsm1 小时前
关于transformors库的学习笔记
笔记·学习
whinc1 小时前
JavaScript技术周刊 2026年第18周
javascript
xqqxqxxq1 小时前
Java AI智能P图工具技术笔记
java·人工智能·笔记
whinc1 小时前
JavaScript技术周刊 2026年第17周
javascript
FakeOccupational1 小时前
【电路笔记 PCB】Altium Designer : AD20信号完整性(Signal Integrity)分析+单线路传输分析+串扰分析(暂记)
笔记
whinc2 小时前
Node.js技术周刊 2026年第18周
javascript·node.js