HTML5(2)

目录

一.列表、表格、表单

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

html 复制代码
<!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.综合案例--表单

html 复制代码
<!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="">
        <!-- 个人信息 -->
        &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 姓名: <input type="text" placeholder="请输入真实姓名">
        <br><br>
        &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 密码: <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>
相关推荐
Jerry32 分钟前
使用 Material 3 在 Compose 中设置主题
前端
chéng ௹40 分钟前
uniapp 封装uni.showToast提示
前端·javascript·uni-app
tuokuac1 小时前
nginx配置前端请求转发到指定的后端ip
前端·tcp/ip·nginx
程序员爱钓鱼1 小时前
Go语言实战案例-开发一个Markdown转HTML工具
前端·后端·go
万少2 小时前
鸿蒙创新赛 HarmonyOS 6.0.0(20) 关键特性汇总
前端
还有多远.2 小时前
jsBridge接入流程
前端·javascript·vue.js·react.js
蝶恋舞者2 小时前
web 网页数据传输处理过程
前端
非凡ghost2 小时前
FxSound:提升音频体验,让音乐更动听
前端·学习·音视频·生活·软件需求
吃饭最爱2 小时前
html的基础知识
前端·html
我没想到原来他们都是一堆坏人2 小时前
(未完待续...)如何编写一个用于构建python web项目镜像的dockerfile文件
java·前端·python