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>

相关推荐
陈洪奇3 分钟前
注册中心学习笔记整理
笔记·学习
一斤代码3 分钟前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
3Katrina41 分钟前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
coderlin_2 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说2 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
我在北京coding2 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜2 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD2 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding2 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空2 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui