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>
相关推荐
林强1812 小时前
前端文件预览docx、pptx和xlsx
前端
像是套了虚弱散4 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
衬衫chenshan4 小时前
【CTF】强网杯2025 Web题目writeup
前端
飞翔的佩奇5 小时前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15886 小时前
点击Top切换数据
前端·javascript·vue.js
程序猿追6 小时前
Vue组件化开发
前端·html
艾德金的溪7 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长7 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH7 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
生莫甲鲁浪戴7 小时前
Android Studio新手开发第二十六天
android·前端·android studio