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>
相关推荐
Freedom风间4 小时前
前端优秀编码技巧
前端·javascript·代码规范
萌萌哒草头将军5 小时前
🚀🚀🚀 Openapi:全栈开发神器,0代码写后端!
前端·javascript·next.js
萌萌哒草头将军5 小时前
🚀🚀🚀 Prisma 爱之初体验:一款非常棒的 ORM 工具库
前端·javascript·orm
拉不动的猪5 小时前
SDK与API简单对比
前端·javascript·面试
runnerdancer5 小时前
微信小程序蓝牙通信开发之分包传输通信协议开发
前端
山海上的风5 小时前
Vue里面elementUi-aside 和el-main不垂直排列
前端·vue.js·elementui
电商api接口开发6 小时前
ASP.NET MVC 入门指南二
前端·c#·html·mvc
亭台烟雨中6 小时前
【前端记事】关于electron的入门使用
前端·javascript·electron