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>

相关推荐
QT 小鲜肉12 小时前
【Linux命令大全】001.文件管理之mdir命令(实操篇)
linux·运维·服务器·chrome·笔记
三块可乐两块冰12 小时前
【第二十五周】机器学习笔记二十四
人工智能·笔记·机器学习
2501_9444460012 小时前
Flutter&OpenHarmony应用生命周期管理
android·javascript·flutter
摇滚侠12 小时前
Java 零基础全套视频教程,日期时间 API,笔记147-148
java·开发语言·笔记
daizikui12 小时前
streamlit实现登录功能
服务器·前端·javascript
贺今宵12 小时前
electron运行项目better-sqlite3连接失败的问题,ABI版本不匹配,使用使用 electron-rebuild 重新编译
javascript·electron·sqlite
我是人机不吃鸭梨13 小时前
Flutter AI 集成革命(2025版):从 Gemini 模型到智能表单验证器的终极方案
开发语言·javascript·人工智能·flutter·microsoft·架构
d111111111d13 小时前
STM32的ADC是什么,其转换精度通常有那些选项?
笔记·stm32·单片机·嵌入式硬件·学习
菩提小狗13 小时前
第1天:基础入门-操作系统&名词&文件下载&反弹SHELL&防火墙绕过|小迪安全笔记|网络安全|
网络·笔记·学习·安全·web安全
iconball13 小时前
个人用云计算学习笔记 --31 华为云运维服务
运维·笔记·学习·华为云·云计算