a anchor 锚点
超链接
<!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>
<a href="https://baidu.com" title="点击一下，了解更多" target='_Self'>百度一下</a>
</body>
</html>
href属性：超链接指定跳转网页地址
title属性：提示
target属性：_self 在当前页打开_页面 _blank_在新页面打开
<!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>
<p id='top'></p>
<a href="https://baidu.com" title="点击一下，了解更多" target='_Self'>百度一下</a>
<p id=>小猿圈</p>
<p id=>小猿圈</p>
<p id=>小猿圈</p>
<p id=>小猿圈</p>
<p id=>小猿圈</p>
<p id=>小猿圈</p>
<p id=>小猿圈</p>
<p id=>小猿圈</p>
<p id=>小猿圈</p>
<p id=>小猿圈</p>
<p id=>小猿圈</p>
<p id=>小猿圈</p>
<p id=>小猿圈</p>
<p id=>小猿圈</p>
<p id=>小猿圈</p>
<p id=>小猿圈</p>
<p id=>小猿圈</p>
<p id=>小猿圈</p>
<p id=>小猿圈</p>
<p id=>小猿圈</p>
<p id=>小猿圈</p>
<p id=>小猿圈</p>
<p id=>小猿圈</p>
<p id=>小猿圈</p>
<p id=>小猿圈</p>
<p id=>小猿圈</p>
<p id=>小猿圈</p>
<p id=>小猿圈</p>
<p id=>小猿圈</p>
<p id=>小猿圈</p>
<p id=>小猿圈</p>
<p id=>小猿圈</p>
<p id=>小猿圈</p>
<p id=>小猿圈</p>
<p id=>小猿圈</p>
<p id=>小猿圈</p>
<a href="#top">回到顶部</a>
</body>
</html>
当a标签的href属性设置为指定标签的id时，点击a标签会直接跳到置顶标签的位置
发送邮箱
<!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>
<a href="mailto:pythonliuwei@gmail.com">联系我们</a>
</body>
</html>
a标签的href属性设置为mailto:你的邮箱 可以启动邮箱发送
<!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>
<img src="图片指定的位置" alt="">
<img src="如果图片在同级目录下直接写图片名称" alt="">
<img src="如果图片在同级文件夹里直接写同级文件夹/图片名称" alt="">
</body>
</html>
img属性
<!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>
<img src="图片指定的位置" alt="" width="200" height="200">
</body>
</html>
img标签 width属性 宽度
img标签 height属性 高度
img标签 alt属性 图片加载失败指定提示文本内容
<!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 action=" 规定当提交表单时向何处发送表单数据。" method="这里写get或者post">
<input type="text" placeholder="这里写提示信息">
<input type="password">
<input type="submit" value="立即注册">
</form>
</body>
</html>
input标签 type属性 设置text 文本内容
input标签 type属性 设置password 输入时密码以点显示
input标签 placeholder属性 提示信息
from标签 action 属性 将标签内容向服务器提交数据
from标签 method属性 请求方法 ：get 或者 post
form表单结构改变
通过P标签包裹input标签来实现
<!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 action=" 规定当提交表单时向何处发送表单数据。" method="这里写get或者post">
<p>
<input type="text" placeholder="这里写提示信息">
</p>
<p>
<input type="password">
</p>
<p>
<input type="submit" value="立即注册">
</p>
</form>
</body>
</html>
input 更改type属性 变为 单选按钮
<!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 action=" 规定当提交表单时向何处发送表单数据。" method="这里写get或者post">
<p>
男：<input type="radio" name="sex" checked="checked">
</p>
<p>
女：<input type="radio" name="sex">
</p>
</form>
</body>
</html>
input标签更改type属性为radio 设置为选择框
input标签更改name属性为相同的属性值 可以起到互斥效果！实现单选框的效果
input标签 checked 属性 默认选中 属性值写checked
复选框
<!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 action=" 规定当提交表单时向何处发送表单数据。" method="这里写get或者post">
<p>
web前端：<input type="checkbox" checked="checked">
java：<input type="checkbox">
python：<input type="checkbox">
</p>
</form>
</body>
</html>
input标签type属性更改为checkbox 设置为复选框
复选框 就是多选
单选下拉框
<!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>
<p>
<select name="class" id="">
<option value="a" selected='selected'>html</option>
<option value="b">css</option>
<option value="c">js</option>
</select>
</p>
</body>
</html>
option标签 selected属性设置为selected 表示默认选中
多选下拉框
<!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>
<p>
<select name="class" id="" multiple="multiple">
<option value="a" selected='selected'>html</option>
<option value="b">css</option>
<option value="c">js</option>
</select>
</p>
</body>
</html>
select 标签 multiple属性设置为multiple 为多选
文本域表面
可以让用户输入多行文字
<!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>
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>
textarea标签 cols属性 设置宽度
textarea标签 rows属性 设置高度
重置按钮
当用户输入完信息 按到重置按钮后！用户输入的信息会被清空
<!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 action="">
<p>
<input type="text">
</p>
<p>
<input type="reset" value='重置'>
</p>
</form>
</body>
</html>
input标签type属性设置为reset 实现点击重置按钮后实现清空输入用户已内容
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>
<form action="">
<p>
<label for="username">用户名：</label>
<input type="text" id='username'>
</p>
<p>
<label for="password">密码：</label>
<input type="password" id='password'>
</p>
</form>
</body>
</html>
label 标签for属性的属性值设置为input标签的id属性的属性值可以进行关联。
div标签
可以把div标签看作一个区域
<!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>
<p>老王家的地</p>
</div>
<div>
<p>老李家的地</p>
<div>
<p>老王儿子的地</p>
</div>
</div>
<div>
<p>老孙家的地</p>
<div>
<p>老李家的地</p>
</div>
</div>
<div>
<p>一个div相当于页面上的一块区域，你要问我老王儿子的地为什么在老李家！你得去问老王</p>
</div>
</body>
</html>