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>
相关推荐
浪裡遊18 分钟前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php
漂流瓶jz2 小时前
快速定位源码问题:SourceMap的生成/使用/文件格式与历史
前端·javascript·前端工程化
samroom2 小时前
iframe实战:跨域通信与安全隔离
前端·安全
fury_1232 小时前
vue3:数组的.includes方法怎么使用
前端·javascript·vue.js
weixin_405023372 小时前
包资源管理器NPM 使用
前端·npm·node.js
宁&沉沦2 小时前
Cursor 科技感的登录页面提示词
前端·javascript·vue.js
Dragonir2 小时前
React+Three.js 实现 Apple 2025 热成像 logo
前端·javascript·html·three.js·页面特效
aichitang20243 小时前
欧拉拓扑学公式:几何与拓扑的交汇
html·拓扑学
peachSoda73 小时前
封装一个不同跳转方式的通用方法(跳转外部链接,跳转其他小程序,跳转半屏小程序)
前端·javascript·微信小程序·小程序