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>

相关推荐
一一一8713 分钟前
javaScript数据存储, 对象和原型与原型链
javascript
梦想CAD控件19 分钟前
WEB CAD与Mapbox结合实现在线地图和CAD编辑(CGCS2000)
前端·javascript·vue.js
WTSolutions1 小时前
Excel 转 JSON by WTSolutions API 文档
javascript
努力只为躺平1 小时前
🔥 油猴脚本开发指南:从基础API到发布全流程
前端·javascript
bitbitDown1 小时前
我用Playwright爬了掘金热榜,发现了这些有趣的秘密... 🕵️‍♂️
前端·javascript·vue.js
DoraBigHead1 小时前
🧠 别急着传!大文件上传里,藏着 Promise 的高级用法
前端·javascript·面试
嘉琪0011 小时前
封装一个有最小化的dialog组件
前端·javascript·css
Zachery Pole1 小时前
BootStrap
前端·bootstrap·html
李明卫杭州2 小时前
希尔排序
前端·javascript
爱学习的茄子2 小时前
JavaScript闭包应用场景完全指南:从基础概念到工程实践
前端·javascript·面试