目录
一.列表、表格、表单
1.列表标签
2.表格
4.无语义的布局标签
5.字符实体
6.综合案例--1
7.综合案例--表单
一.列表、表格、表单
1.列表标签
1.1 无序列表
1.2 有序列表
1.3 定义列表
定义列表一般用于网页底部的帮助中心
2.表格
2.1
2.2 表格结构标签
shift+alt+f 格式化文档:自动补齐缩进
2.3 合并单元格
3.表单
3.1 input标签
3.2 input的占位文本
用于提示信息(文本框、密码框)
3.3 单选框radio
3.4 文件上传 file(多文件)
3.5 多选框checkbox
checked默认选中属性
3.6下拉菜单
3.7 文本域
作用:多行输入文本的表单控件
3.8 label标签
3.9 按钮button
注意: 如果省略type属性吗,默认是submit提交功能。
form标签为表单区域标签,统一管理 form 表单内容
4.无语义的布局标签
5.字符实体
6.综合案例--1
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>流萤</title>
</head>
<body><ul><li><img src="./QQ截图20240206221222.png" alt="流萤" title="流萤" width="100"><h3>流萤老婆</h3></li><li><img src="./QQ截图20240206221426.png" alt="流萤与爷" title="流萤与爷" width="100"><h3>流萤与爷</h3></li></ul>
</body>
</html>
7.综合案例--表单
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>大学教师注册系统</title>
</head>
<body><h1>教师注册信息</h1><h2>个人信息</h2><form action=""><!-- 个人信息 --> 姓名: <input type="text" placeholder="请输入真实姓名"><br><br> 密码: <input type="password" placeholder="请输入密码"><br><br>确认密码: <input type="password" placeholder="请输入密码"><br><br>性别: <input type="radio" name="gender" id="man"><label for="man">男</label><label><input type="radio" name="gender">女</label><br><br><!-- 教育经历 --><h2>教育经历</h2>最高学历: <select><option>博士</option><option selected>研究生</option><option>本科</option><option>专科</option></select><br><br>毕业院校: <input type="text"><br><br>所学专业: <input type="text"><br><br>在校时间: <select><option>2015</option><option>2016</option><option>2017</option><option>2018</option><option>2019</option><option>2020</option><option>2021</option><option>2022</option><option>2023</option><option>2024</option></select>--<select><option>2019</option><option>2020</option><option>2021</option><option>2022</option><option>2023</option><option>2024</option></select><br><br><!-- 工作经历 --><h2>工作经历</h2>公司名称: <input type="text"><br><br>工作描述:<br><textarea>着手项目、项目经验等</textarea><br><br><input type="checkbox">已阅读并同意以下协议:<ul><li><a href="#">《用户服务协议》</a></li><li><a href="#">《隐私政策》</a></li></ul><button type="submit">免费注册</button><button type="reset">重新填写</button></form>
</body>
</html>