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>
相关推荐
腾讯TNTWeb前端团队3 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰7 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪7 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪7 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy8 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom8 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom8 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom9 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom9 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom9 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试